Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
Related
I've got a simple Cycle2 slideshow that reads images from a server folder and displays them full height and centered on a web page. The images are loaded through an Ajax call which returns any new files it finds, it's called at page load and subsequently at programmed intervals. I use a session variable to keep track of the currently used files. I use the Cycle2 "add" command and the "Center" add-on as I have different sized images to display.
It works nicely except that after 'cycle' initialization any new slides added are not centered...
I know that Cycle2 adds inline styling but it only centers the images on initialization. It should be possible to call the centerHoriz and centerVert programatically when adding the new slides but can't work out how to at the same time as the 'add' command? Here is my code:
<?php
/*
* Template Name: Slideshow
*/
?>
<?php
session_start();
$_SESSION['curfiles'] = array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style type="text/css">
.slideshow {
width: 80%;
margin: auto;
border: 1px solid #bbb;
background: #ffc;
}
#media screen and (max-width: 1164px) {
.label {font-size: 2vw;}
.textbox {font-size: 1.5vw;}
.cycle-slide {width:100%;}
.slideshow {width: 95%;}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<script type="text/javascript">
function loadSlides() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response) {
var temp_images = eval("(" + response + ")");
for(ti in temp_images){
$('.slideshow').cycle('add','<img src="/files/display/' + temp_images[ti] + '" alt="">');
}
});
}
window.setInterval(function(){loadSlides()}, 5000);
jQuery(document).ready(function($){
loadSlides();
$('.slideshow').cycle(
{
next: '.slideshow'
});
});
</script>
</head>
<body>
<div class="slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="800000"
data-cycle-speed="700"
data-cycle-center-horz="true"
data-cycle-center-vert="true"
data-cycle-pause-on-hover="true"
>
</div>
</body>
</html>
I am trying to get password pattern work with data binding. In the below jsbin, the password Pass5678 is accepted when the pattern is provided in the html. However when I bind the pattern using a property that password fails
http://jsbin.com/posojodozu/edit?html,output
code:
<!doctype html>
<head>
<meta charset="utf-8">
<base href="http://polymer-magic-server.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="iron-form/iron-form.html" rel="import">
<link href="paper-input/paper-input.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<x-example></x-example>
<dom-module id="x-example">
<style>
:host {
display: block;
padding: 36px;
}
</style>
<template>
<form is="iron-form"
id="form"
disable-native-validation-ui
action="/">
<paper-input
name="password"
required
type="password"
pattern="[[passwordPattern]]"
label="Enter Password"></paper-input>
<br>
<button type="submit">SUBMIT</button>
</form>
</template>
<script>
// only need this when both (1) in the main document and (2) on non-Chrome browsers
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-example',
properties: {
passwordPattern: {
type: String,
value: '(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}'
}
}
});
});
</script>
</dom-module>
</body>
Looks like slash is got stripped somehow, so value should be:
value: '(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}'
I'm trying to setup ember-testing with QUnit to test my Ember.js application.
My problem is the app isn't rendering on the QUnit test page, and thus the visit('/') function isn't working.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MKTS Tests</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="./bower_components/qunit/qunit/qunit.css">
<!--
<link rel="stylesheet" href="./css/foundation.css">
<link rel="stylesheet" href="./css/app.css">
-->
<style type="text/css">
#qunit-fixture, #app-root {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<!-- Libraries (Dependencies) -->
<script src="../app/bower_components/requirejs/require.js"></script>
<script src="../app/bower_components/jquery/dist/jquery.min.js"></script>
<script src="../app/bower_components/handlebars/handlebars.js"></script>
<script src="../app/bower_components/ember/ember.js"></script>
<script src="../app/bower_components/ember-data/ember-data.js"></script>
<!-- App and Templates -->
<script src="../app/scripts/app.js"></script>
<script src="../app/scripts/models/fleets.js"></script>
<script src="../app/scripts/routes/application_route.js"></script>
<script src="../app/scripts/routes/index_route.js"></script>
<script src="../app/scripts/router.js"></script>
<script src="../app/scripts/store.js"></script>
<!-- Test Helpers -->
<script src="./support/test_helper.js"></script>
<!-- Test Library -->
<script src="./bower_components/qunit/qunit/qunit.js"></script>
<script src="./spec/integration.js"></script>
<script src="./spec/unit.js"></script>
</body>
</html>
integration.js
test('hello world', function() {
//debugger;
//expect(1);
MarketSetupAdminUi.reset();
visit("/").then(function() {
var title = find('title');
equal(title.text(), 'Market Setup Tool', 'Title check');
});
});
test-helper.js
(function (host) {
var document = host.document;
var App = host.MarketSetupAdminUi;
var testing = function(){
var helper = {
container: function(){
return App.__container__;
},
controller: function( name ){
return helper.container().lookup('controller:' + name);
},
path: function(){
return helper.controller('application').get('currentPath');
}
};
return helper;
};
Ember.Test.registerHelper('path', function() {
return testing().path();
});
Ember.Test.registerHelper('getFoodController', function() {
return testing().controller('food');
});
// Move app to an element on the page so it can be seen while testing.
document.write('<div id="test-app-container"><div id="ember-testing"></div></div>');
App.rootElement = '#ember-testing';
App.setupForTesting();
App.injectTestHelpers();
function exists(selector) {
return !!find(selector).length;
}
}(window));
I updated the app to Ember 1.10.0 and Ember-data beta.15.
I'm planning to regenerate the app using Ember-CLI, which appears to have better testing.
I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.
I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.
Hi I'm a beginner to learn Dojo.
I want some dojo examples for creating widget with template in Dojo.
I tried this,
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>
<script type="text/javascript">
var url = location.href;
var current_path = url.substring(0,url.lastIndexOf('/')+1);
var dojoConfig = {
parseOnLoad: true,
debug: true };
</script>
<script>
dojo.require('dijit._WidgetBase');
dojo.require('dijit._Templated');
dojo.addOnLoad(function() {
dojo.declare('MyForm',[dijit._WidgetBase,dijit._Templated],{
templatePath: dojo.moduleUrl("test.html")
});
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"/>
</head>
<body class="claro">
</body>
please help me