I'm trying to close a pop-up DIV using a closing function with jquery, It worked before I added the position function of the DIV, and something I did must have broken the function... I'm guessing it's a syntax error somewhere, any fresh pair of eyes out there willing to take a look?
Thw working site is at www.masterfade.com/maptest
Here's the code:
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
$('.close').click(function () {
close_box();
});
$('.backdrop').click(function () {
close_box();
});
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}
I think your event bindings and animation functions are call before DOM elements load. So event bindings will not work.
I hope the following codes will work.
$(document).ready(function () {
$('.lightbox').click(function (event) {
event.preventDefault();
$('.backdrop, #box').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box').css('display', 'block');
});
$('.lightbox2').click(function (event) {
event.preventDefault();
$('#box2').css({
left: function () {
return event.pageX - $(this).width();
},
top: function () {
return event.pageY - $(this).height();
}
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
});
$('.backdrop, #box2').animate({
'opacity': '.50'
}, 300, 'linear');
$('#box2').animate({
'opacity': '1.00'
}, 300, 'linear');
$('.backdrop, #box2').css('display', 'block');
// following lines are edited
$('.close,.backdrop').click(close_box);
function close_box() {
$('.backdrop, #box, #box2').animate({
'opacity': '0'
}, 300, 'linear', function () {
$('.backdrop, #box, #box2').css('display', 'none');
});
}
});
so,
i browsed to your website, and with Google Chrome Developer Tools (Console) iv'e manually called $('.lightbox').click() and close_box() and it seems that it's working as excepted and no javascript exception were thrown.
however, i'm not sure that you even understand what's not working.
i highly suggest you to use Chrome browser with developer tools, it will make your life way easier regarding web development.
using this you could monitor javascript errors and debug your code line by line.
good luck
Related
This code is a lightbox, but it's necessary click to show the content, and I need it appearing without click. Automatic. Kind a pop up.
$(document).ready(function() {
$('.lightbox').click(function() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
});
$('.close').click(function() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});;
});
});
How's this? Move code into functions and then just run open popup function on document ready:
$(document).ready(function() {
$('.lightbox').click(function() {
openPopup();
});
$('.close').click(function() {
closePopup();
});
$('.background').click(function() {
closePopup();
});
openPopup();
});
function openPopup() {
$('.background, .box').animate({
'opacity': '.60'
}, 500, 'linear');
$('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$('.background, .box').css('display', 'block');
}
function closePopup() {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function() {
$('.background, .box').css('display', 'none');
});
}
You can trigger an event using Jquery. If you want this pop up to open automatically then use
$('.lightbox').trigger("click")
in document.ready function. This will automatically call that class click and by this your light box pop up will open.
So I'm using this lightbox and I need to put Next and Previous buttons, but I don't know how. If someone can help me...
$(document).ready(function () {
$('.lightbox').click(function () {
// Get all following .box and .background until next .lightbox is met.
// So we can get the related contents.
var $targets = $(this).nextUntil('.lightbox', '.box, .background');
$targets.animate({
'opacity': '.50'
}, 500, 'linear')
$targets.filter('.box').animate({
'opacity': '1.00'
}, 500, 'linear');
$targets.css('display', 'block');
});
$('.close').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
$('.background').click(function () {
$('.background, .box').animate({
'opacity': '0'
}, 500, 'linear', function () {
$('.background, .box').css('display', 'none');
});;
});
});
Here > https://jsfiddle.net/cuummyhx/
I have a page where in a div HTMl is loaded from another page. In the parent page, I have javascript which has elements that apply to the dynamic content (such as mouseover animate, etc.). I have been trying to make it work for quite a few hours now but it just won't work. No JS errors in the Chrome developer tools. Can anyone help?
For example on the parent page's javascript I have:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
and the 'child' page where HTML is loaded from
<li class="page">Home</li>
<li class="page">About Us</li>
<li class="page">Store</li>
<li class="page">News</li>
<li class="page">Contact</li>
Your help would be greatly appreciated!
try using 'delegate' method instead of 'on'.
jQuery(body).delegate('ul#nav li.page a', 'mouseover', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
if you wish to attach .on action to a dynamic element, you attach it to the $(document) instead.
and when the new elements are loaded the action is already there.
jQuery(document).on('mouseover', 'ul#nav li.page a', function () {
jQuery(this).stop(true, true).animate({
backgroundPosition: "(0 0)"
}, 500);
jQuery(this).animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
try using:
jQuery("ul#nav li.page a").on('mouseover', '.item', function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -35px)"
}, 750);
}, function () {
jQuery(this).stop().animate({
backgroundPosition: "(0 -120px)"
}, 750)
});
I want to animate the div#w_xxx and the div#w_xxx img at the same time.
They should get bigger and after this they should get to their old width and height.
The problem is, mootools plays all animations at the same time so I cant see the animation and I tried some .chainfunction from mootools but I didnt get it working.
My code looks like this:
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
});
$("w_"+current_item+"").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$("w_"+current_item+"").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
$$("div#w_"+current_item+" img").set('morph', {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
$$("div#w_"+current_item+" img").morph({
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
});
You should look at Fx.Elements from MooTools-more: http://mootools.net/docs/more/Fx/Fx.Elements, which has been designed to run multiple animations on a unified timer.
http://jsfiddle.net/dimitar/tC4V4/
// mock your current_item...
var current_item = 1;
var w = document.id("w_" + current_item);
new Fx.Elements($$(w, w.getElement("img")), {
onComplete: function() {
console.log("done");
},
duration: 4000,
transition: Fx.Transitions.Bounce.easeOut,
link: "chain"
}).start({
0: {
'opacity': '1',
'width': 366,
'height': 240,
'z-index': '100'
},
1: {
'opacity': '1',
'width': 183,
'height': 120,
'z-index': '100'
}
}).start({
0: {
opacity: 0
}
});
By the same token, it supports link: chain so you can chain things or wait etc.
$j('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 2,
wrap: 'last',
initCallback: mycarousel_initCallback
});
$j('div#slideshow-carousel a img').css({
'opacity': '0.5'
});
$j('div#slideshow-carousel a img:first').css({
'opacity': '1.0'
});
$j('div#slideshow-carousel li a').hover(
function () {
if (!$j(this).has('span').length) {
$j('div#slideshow-carousel li a img').stop(true, true).css({
'opacity': '0.5'
});
$j(this).stop(true, true).children('img').css({
'opacity': '1.0'
});
}
}, function () {
$j('div#slideshow-carousel li a img').stop(true, true).css({
'opacity': '0.5'
});
$j('div#slideshow-carousel li a').each(function () {
if ($j(this).has('span').length) $j(this).children('img').css({
'opacity': '1.0'
});
});
}).click(function () {
$j('div#slideshow-main li').removeClass('active');
$j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
return false;
});
This simple carousel script works perfectly except the click part; nothing happens on clicking the thumbnails, they should be applied the 'active' class.
I think you're using slideshow-main where you mean slideshow-carousel, e.g. this:
}).click(function () {
$j('div#slideshow-main li').removeClass('active');
$j('div#slideshow-main li.' + $j(this).attr('rel')).addClass('active');
return false;
});
should be:
}).click(function () {
$j('div#slideshow-carousel li').removeClass('active');
$j('div#slideshow-carousel li.' + $j(this).attr('rel')).addClass('active');
return false;
});
Seems to work, anyway: http://jsbin.com/aliqi3