$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
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 div width id: "cen", and with a height and width of 50px.
$(document).ready(function() {
$("#cen").animate({
height: 500px,
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
But it's not working.
Put quotes around 500px http://jsfiddle.net/myn9d/
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Use this code, it's working:
$(document).ready(function() {
$("#cen").animate({
height: "500px",
width: "500px",
}, 5000, function() {
// Animation complete.
});
});
You have error in your syntax height should be surroung with "500px"
it should be
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
// Animation complete.
});
});
Please Checkout this demo Demo
$(document).ready(function () {
$( "#cen" ).animate({
height:"500px",
width:"500px",
}, 5000, function() {
});
});
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'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