I am using the JS plugin called "Spritely" to animate background images. Everything works (backgrounds are moving). But I can't get a function to be active when clicked on a div(sprite).
(I have the script.js, jquery and spritely included in the ).
HTML is just 2 divs (#container and #hills)
css
#container
{
width:100%;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(clouds.jpg);
background-repeat:repeat-x;
z-index:-3;
position:absolute;
}
#hills
{
width:100%;
height:250px;
background-image:url(hills.png);
background-repeat:repeat-x;
background-position:bottom;
z-index:1;
position:absolute;
bottom:0px;
}
javascript
$(document).ready(function() {
$(hills).click(function(){
alert("hey");
});
});
var hills;
$(document).ready(function(){
var hills = document.getElementById('hills');
$(hills).pan({fps: 30, speed: 2, dir: 'left'});
});
Looks like you are attempting using hills without first adding the element to it, try this:
$(document).ready(function() {
var $hills = $('#hills');
$hills.pan({fps: 30, speed: 2, dir: 'left'});
$hills.click(function(){
alert("hey");
});
});
I also cleaned up your code a bit with this. There is no need to have two separate ready()s here. I'm using a jQuery selector for #hills since you are using jquery functions on it anyway. I also cache that object so that we don't have to wrap the same jquery object twice.
You have a variable scope issue (see the comments I added):
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills; // Your click handler uses this variable, which is never set
$(document).ready(function () {
//this "hills" variable, since you prefaced with "var",
// is local to this anonymous function,
// meaning the click handler can't see it.
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Why have two DOM ready handlers? Why not combine them like this:
$(document).ready(function () {
var hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
$(hills).click(function () {
alert("hey");
});
});
Another option is to have the second DOM ready handler use the global variable by removing the var keyword:
$(document).ready(function () {
$(hills).click(function () {
alert("hey");
});
});
var hills;
$(document).ready(function () {
hills = document.getElementById('hills');
$(hills).pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Or simply remove the global variable altogether. These snippets only execute once, so there's not much to gain by caching the DOM element:
$(document).ready(function () {
$('#hills').click(function () {
alert("hey");
});
});
$(document).ready(function () {
$('#hills').pan({
fps: 30,
speed: 2,
dir: 'left'
});
});
Related
What's wrong with this code? Probably a lot cus I'm new to jquery. I'm trying to fadeIn the page then fade the background to a different one the fade up and in the nav and set it up so the links will fade the page out and bring in the new page. The code I have now isn't quite working and I think some syntax and formatting is the problem.
$(document).ready(function() {
$('body').fadeIn(1500);
});
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Thanks!
$(document).ready triggers as soon as the DOM is fully loaded. Any javascript outside of the $(document).ready block is run while the browser is still loading the page. so if your $('#background') element is not yet loaded to the DOM jQuery cannot add the 'background' class to it. And more than likely only some of your $('.link') elements will have the click event listener added since they weren't yet loaded when the javascript ran. That's why you should embed such things inside the $(document).ready function.
$(document).ready(function() {
$('body').fadeIn(1500);
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
Notice with proper indentation you can easily see what is inside the $(document).ready function. Also notice you don't put standard functions like your newpage() function inside the $(document).ready.
I've written a code in jQuery, where I am using jquery to dynamically change css of a div.
The code is working when I write it without a succeeding .effect() call.
Working Code
$('.col1').on('mouseenter',function(){
$('.col1').css('opacity','1');
}).on('mousedown', function () {
$('.col1').css('opacity','.6');
}).on('mouseup', function () {
$('.col1').css('opacity','1');
});
Now, When I do the following effect() call, it doesn't work any more.
Not working.
$('.col1').on('mouseenter',function(){
$('.col1').css('opacity','1');
}).on('mousedown', function () {
$('.col1').css('opacity','.6').effect( "shake", { direction: "up", times: 2, distance: 10}, 500);
}).on('mouseup', function () {
$('.col1').css('opacity','1');
});
What is it that is going wrong here ?
This part which is not working is : $('.col1').css('opacity','.6')
after shake() is added to the code.
Here is my code:
jQuery:
$(document).ready(function () {
$("#news").hover(function () {
$('#news_img').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news1").hover(function () {
$('#news_img1').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news3").hover(function () {
$('#news_img3').animate({
height: 'toggle'
}, 290, function () {
});
});
$("#news4").hover(function () {
$('#news_img4').animate({
height: 'toggle'
}, 290, function () {
});
});
});
JSFIDDLE here:
http://jsfiddle.net/huydq91/N89Kw/
I would like to reduce my code and make it easier to manage in the future whenever I would love to add more <tr> or <td> tags without editing too much in the jQuery and CSS.
You can target the hover elements by its class news and find the target element by appending the last digits in the hovered element's id to news_img like
$(document).ready(function () {
$(".news").hover(function () {
$('#news_img' + this.id.replace('news', '')).stop(true).animate({
height: 'toggle'
}, 290, function () {});
});
});
Demo: Fiddle
You can remove the css part of the hover by adding some data-* attributes to the image like
<img src="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_zps923b43dc.jpg" border="0" alt="Showroom1" data-hover="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_1_zpse41d0851.jpg" />
then
$(document).ready(function () {
//since the news elements has a common class, use it to target all the news elements instead of using individual ids
$(".news").hover(function (e) {
//you can find the `news_img` within the current news item using .find() instead of using its class to target it
$(this).find('.news_img').stop(true).animate({
height: 'toggle'
}, 290);
//find the image element within the current news
var $img = $(this).find('.imgswap img');
//if the current event is mouseenter then show the hover image else the src image
//the hover handler registers 2 handler one for mouseenter another for mouseleave
$img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src'));
});
//when we leaves the news elements we need to put back the original src, so store it using data api
$('.news .imgswap img').each(function () {
$(this).data('src', this.src);
})
});
Combine your jQuery calls into one function family. Instead of 4 separate .hover() calls, use class names and do the following:
$(document).ready(function () {
$(".news").hover(function(){
$(this).find(".news_img").animate({
height: "toggle"
}, 290, function(){
});
});
});
On your CSS, you're pretty compact already and there's really not much more you can do to reduce the amount of code you have.
Updated fiddle
Use attribute selector in jquery.
$(document).ready(function () {
$("[id^=news]").hover(function () {
$('#news_img').stop().animate({
height: 'toggle'
}, 290, function () {
});
});
});
Fiddle
I'm using jQuery Tools (http://jquerytools.org/) and cannot get the below function to accept a passed parameter. I'm not proficient in javascript or jquery and cannot find a solution anywhere that will make this work for the below code. Thank you for any help!
Current setup:
<a href='javascript:popup();'>Text Link That Calls Below Function</a>
<script>
function popup() {
if ($("#facebox").hasClass("init")) {
$("#facebox").overlay().load();
}
else {
$("#facebox").addClass("init");
$("#facebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
I would like it to do something like this...
<a href='javascript:popup(apples);'>Text Link That Calls Below Function</a>
<script>
function popup(choosebox) {
if ($("#choosebox").hasClass("init")) {
$("#choosebox").overlay().load();
}
else {
$("#choosebox").addClass("init");
$("#choosebox").overlay({
// custom top position
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5
},
closeOnClick: true,
load: true
});
}
}
</script>
You need to pass a string as an arguement, unless you have a variable named apple defined above (var apples; ). Try changing it like below,
<a href='javascript:popup("apples");'>Text Link That Calls Below Function</a>
Note the quotes surrounding the popup("apples")
Since you are using jQuery, you can do it nicely like below,
HTML:
<a href='javascript:void(0)' class="aLink" >Text Link That Calls Below Function</a>
JS:
$(function () {
$('.aLink').click(function () {
popup("apples");
});
});
Also I think you may need to change your selector like below,
function popup(choosebox) {
var $choosebox = $("#" + choosebox);
if ($choosebox.hasClass("init")) {
$choosebox.overlay().load();
}
else {
$choosebox.addClass("init");
$choosebox.overlay({
//..rest of your code
The unobtrusive javascript approach is generally considered better and the JQuery way.
$('a.someclass').click(function() { popup('orange'); });
Providing you give your <a> element has a class of "someclass" in this example.
This keeps your js seperate from your html. That code could go in document ready event:
$(document).ready(function() {
// code here
});
Write a click event for a class on that anchor, then determine which "box" is related to that link by reading a data- attribute. This will give you a generic, reusable block of jQuery code that can be called by any anchor tag matching this pattern.
HTML:
Text Link That Calls Below Function
JavaScript:
$(document).ready(function(){
$('a.popup').on('click', function(e){
var $_target = $('#' + $(this).data("choosebox"));
if ($_target.hasClass("init"){
$_target.overlay().load();
} else {
$_target.overlay().load({
top: 260,
mask: { color: '#838383',
loadSpeed: 200,
opacity: 0.5 },
closeOnClick: true,
load: true
});
}
e.preventDefault();
});
});
I'm building a simple photolog using jQuery, jflickrfeed and jQuery.Masonry - but I'm having some trouble getting the event chain right in Safari.
Here's some example code:
$(document).ready(function() {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
}, function(data) {
console.log("1st");
});
});
$(window).load(function() {
console.log("2nd");
$('#container').masonry({
singleMode: true
});
});
So, jflickrfeed pulls a photo from my flickr feed, wraps it in the template code and appends it inside #container, and repeats this until the limit is reached. After all photos are inserted, Masonry kicks in and arranges the divs.
This works beautifully in Chrome and Firefox, but not in Safari - where the .load event fires before all photos are finished loaded, thus breaking the layout.
I've updated the example to better show illustrate what I mean.
In Chrome/Firefox the console output is "1st, 2nd" while in Safari it is "2nd, 1st"
Any tips?
You can pass the load callback as the second parameter to "jflickrfeed" call and this will ensure that the "masonry" will be invoked only when the images from Flickr have been loaded.
here is a possible sample:
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>'
},
function () {
$('#container').masonry({
singleMode: true
});
});
Hope it helps.
I'm not sure how useful this will be, or if if will make any difference at all. But for a guess, if the issue is that #container is not available when $(window).load fires, you could try setting up a timer to repeatedly check for its existence, and when it is detected, set up masonry, then kill the timer:
$(window).load(function () {
var i = setInterval(function() {
if($("#container").length) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}},
20);
});
Solved it myself by adding a counter:
var counter = 0;
$(document).ready(function () {
$('#container').jflickrfeed({
limit: 20,
qstrings: {
id: '58201136#N00'
},
itemTemplate: '<div class="box"><img src="{{image_m}}" /><h3>{{title}}</h3>{{description}}</div>',
itemCallback: function () {
counter++;
}
});
});
$(window).load(function () {
var i = setInterval(function () {
if (counter = 20) {
$('#container').masonry({
singleMode: true
});
clearInterval(i);
}
}, 20);
});
Ugly, but it works..