I have style switcher, used php, and jquery to implement it. Now when i click on its button to open, the page jumps to the top of the page. and also when i click the same button to close the style box. the same happens it jumps to the top of the page. how to change the code to make it open without jumping.
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
// We're passing this element object through to the
// loadStyleSheet function.
loadStyleSheet(this);
// And then we're returning false.
return false;
});
function loadStyleSheet(obj) {
$.get( obj.href+'&js',function(data){
// Select link element in HEAD of document (#stylesheet) and change href attribute:
$('#stylesheet').attr('href','css/' + data + '.css');
// Check if new CSS StyleSheet has loaded:
});
}
}
$(document).ready(function () {
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
$(".toggleDiv .expand-arrow").click(function(){
$("#style-switcher").animate(
{"left": "0"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "1"}, "slow");
$(".toggleDiv .expand-arrow").hide();
$(".toggleDiv .shrink-arrow").show();
});
$(".toggleDiv .shrink-arrow").click(function(){
$("#style-switcher").animate(
{"left": "-200px"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "0"}, "slow");
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
});
});
You should disable the behaviour of your links, with preventDefault or return false:
$(document).ready(function () {
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
$(".toggleDiv .expand-arrow").click(function(e){
e.preventDefault(); // disable the link
$("#style-switcher").animate(
{"left": "0"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "1"}, "slow");
$(".toggleDiv .expand-arrow").hide();
$(".toggleDiv .shrink-arrow").show();
});
$(".toggleDiv .shrink-arrow").click(function(e){
e.preventDefault(); // disable the link
$("#style-switcher").animate(
{"left": "-200px"}, "slow");
$("#swatchesDiv").animate(
{"opacity": "0"}, "slow");
$(".toggleDiv .expand-arrow").show();
$(".toggleDiv .shrink-arrow").hide();
});
});
Related
I need to be able to troggle my sidebar.
This works but I also need to hide the sidebar when reach viewport > 740px.
The troggle needs to work also. I came a far way but I think I have to combine these two to let it work properly.
Anyone knows hot to do this?
CHECK OUT MY FIDDLE PLEASE >
My script:
$('.troggler').toggle(
function() {
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}, function() {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
})
$(window).resize(function() {
if ($(window).width() < 740) {
$(".right").animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
else {
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
});
I guess the $(window).resize() fires multiple events while you ara resizing the window.
To solve this, you might wait for the resizing (dragging) complete.
// Basic Concept is ...
$(window).resize(function () {
if( ... event not fired ... ){
setTimeout(function(){
// toggle your navi
},500);
}
....
});
DEMO:http://jsfiddle.net/VseLR/13/
Your code could go like this:
function showNavi(){
$('.right').animate({"right": "0"}, "slow");
$('.troggler').animate({"background-position": "0"}, "fast");
}
function hideNavi(){
$('.right').animate({"right": "-400px"}, "slow");
$('.troggler').animate({"background-position": "-25px"}, "fast");
}
$('.troggler').toggle(function() {
showNavi();},
function() {
hideNavi();
});
function applyLayout() {
if ($(window).width() < 740) {
hideNavi();
}else {
showNavi();
}
}
var timer = 0;
var delayToCall = (function () {
return function (callback, ms) {
if (timer > 0) {
clearTimeout (timer);
}
timer = setTimeout(callback, ms);
};
})();
$(window).resize(function () {
delayToCall(function(){
applyLayout();
}, 500);
});
You might want to check this question:
JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?
Hope this helps.
I am trying to make a jQuery popup close function. But I have two different popup lightbox area. Problem is first popup close function not working but second popup close function is working.
First jQuery click close link is not working:
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
Second jQuery click close link is working:
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
All of my jQuery code is here:
$(document).ready(function() {
$('.d_button').click(function(){
$('.degistiralani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.alan').animate({'opacity':'1.00'}, 300, 'linear');
$('.degistiralani, .alan').css('display', 'block');
});
$('.kapat').click(function(){
close_box();
});
$('.degistiralani').click(function(){
close_box();
});
});
function close_box()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}
$(function(){
$('.b_c_d_button').click(function(){
$('.cover_change_wrap, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.kapak_degistirme_alani').animate({'opacity':'1.00'}, 300, 'linear');
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'block');
});
$('.pclose').click(function(){
close_box();
});
$('.cover_change_wrap').click(function(){
close_box();
});
});
function close_box()
{
$('.cover_change_wrap, .kapak_degistirme_alani').animate({'opacity':'0'}, 300, 'linear', function(){
$('.cover_change_wrap, .kapak_degistirme_alani').css('display', 'none');
});
}
You have close_box() defined twice. You're overwriting the first definition. Give them different names and it should work. I changed your first one to close_box1()
$('.kapat').click(function(){
close_box1();
});
$('.degistiralani').click(function(){
close_box1();
});
function close_box1()
{
$('.degistiralani, .alan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.degistiralani, .alan').css('display', 'none');
});
}
I have created (with help from other scripts found online) a slideshow script that turns other images to greyscale when hovered and pauses the slideshow at the same time. The problem is, when I hover over one of these images that is not part of the slideshow I cant get them to fade. I've tried a number of things to solve this including adding the required greyscale image over the existing image but I can't get the effect to look the same so its kind of pointless.
The code for this is as follows (I apologise if it's a mess I'm still pretty new to Javascript):
// Holds the alt description of an image
var desc;
// Used to try to solve problem
var bgimg;
var bgli;
var current;
$(document).ready(function () {
//Execute the slideShow, set to 3 seconds for each images
slideShow(1000);
current = $('ul.slideshow li.show');
});
$(window).focus(function () {
timer = setInterval('gallery()', speed);
});
$(window).blur(function () {
clearInterval(timer);
});
function slideShow(speed) {
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()', speed);
desc = $('ul.slideshow li.show').find('img').attr('alt');
//pause the slideshow on mouse over
$('img.color').hover(
function () {
clearInterval(timer);
$('#caption').stop().animate({'height': '70px'}, 1000);
cptxt(desc);
if (this.id == "img6" || this.id == "img7" || this.id == "img8" || this.id == "img9" || this.id == "img10") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
}
},
function () {
timer = setInterval('gallery()', speed);
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$('#caption').stop().animate({'height': '0px'}, 1000);
$('#caption').html('');
});
}
function gallery() {
//if no IMGs have the show class, grab the first image
if ($('ul.slideshow li.show').length){
// if we found an item with the show class, assign it to current
current = $('ul.slideshow li.show');
} else {
// otherwise nothing is being shown, default to first element
$('#ul.slideshow li:first');
}
//trying to avoid speed issue
if (current.queue('fx').length == 0) {
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next;
// if there are additional elements (true when .length > 0)
if (current.next().length) {
next = current.next();
if (next.attr('id') == 'dark') {
bgli = next;
bgimg = next.find('img');
next = next.next();
}
} else {
// there is no next element, go back to first.
next = $('ul.slideshow li:first');
}
desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}
function cptxt(altmsg) {
$('#caption').html(altmsg);
}
$(document).ready(function(){
$('img.color').hover(
function() {
if (this.id == "img1") {
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img2") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img3") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img4") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img5).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
else if (this.id == "img5") {
$(img1).stop().animate({"opacity": "0"}, "slow");
$(img2).stop().animate({"opacity": "0"}, "slow");
$(img3).stop().animate({"opacity": "0"}, "slow");
$(img4).stop().animate({"opacity": "0"}, "slow");
$(img6).stop().animate({"opacity": "0"}, "slow");
$(img7).stop().animate({"opacity": "0"}, "slow");
$(img8).stop().animate({"opacity": "0"}, "slow");
$(img9).stop().animate({"opacity": "0"}, "slow");
$(img10).stop().animate({"opacity": "0"}, "slow");
}
},
function() {
$(img1).stop().animate({"opacity": "1"}, "slow");
$(img2).stop().animate({"opacity": "1"}, "slow");
$(img3).stop().animate({"opacity": "1"}, "slow");
$(img4).stop().animate({"opacity": "1"}, "slow");
$(img5).stop().animate({"opacity": "1"}, "slow");
$(img6).stop().animate({"opacity": "1"}, "slow");
$(img7).stop().animate({"opacity": "1"}, "slow");
$(img8).stop().animate({"opacity": "1"}, "slow");
$(img9).stop().animate({"opacity": "1"}, "slow");
$(img10).stop().animate({"opacity": "1"}, "slow");
}
);
});
Sorry if the code is terrible :D. I spent a few minutes trying to lay it out properly but a lot of it needs to be cleaned up.
Anyway, to reiterate, hovering over slideshow images truns other images to greyscale correctly. Hovering over otherimages does not turn current slideshow image to greyscale.
Any help would be appreciated.
As requested, JSFiddle link
http://jsfiddle.net/KXW4f/12/
The slideshow doesn't appear to work on it but I may have some wrong settings selected on that site. It works when run on my PC anyway but the general idea is shown though I think.
Currently, the slideshow images just fade out to white background (opacity goes to 0) but what I want is for a greyscale image to appear as it fades out. Thanks.
Ok, with the example it was a lot easier to understand. Nevertheless the conception of your code is a bit messy... ;)
First of all, the link to the corrected code (should work now): http://jsfiddle.net/Aletheios/ZZHjS/2/ (new link)
I've done the following changes:
Declared global variables timer, speed and img1-img8 to resolve several errors.
Removed slideshow start in slideShow(), the slideshow was started twice (slideShow() and window.focus).
Added display/show functionality for the big grayscale images. The code detects which image is currently shown in the slideshow and displays its grayscale counterpart when requested.
This is the code (see JSFiddle for details):
$("img.color").hover(function(){
var li;
for (var i = 6; i <= 8; ++i) {
li = $("#img"+i).closest("li");
if (li.hasClass("show")) {
li.next().css("opacity", 1);
}
}
...
}, function() {
$(...).stop().animate({"opacity": "1"}, "slow", function(){
$(this).closest("li").next().css("opacity", 0);
});
});
Some annotations:
IDs (e.g. in HTML markup) only make sense if used no more than once ;)
You could make your code a lot more readable (and probably more efficient) if you group together jQuery selectors. So instead of $(img1).animate() and $(img2).animate() after another better use $([img1, img2].join(",")).animate().
Hope that helps... ;) Besides, if you don't already use it, I'd recommend you work with Firebug; it's a great tool to debug your JS code.
In the following code, the div animating in my moveit() function is waiting for the setTimeout() in the .click functions, but the p.font-size animation in moveit() is happening immediately upon the click. It's not waiting for the timeout. I'm sure it's a basic issue, but that's the level I'm at right now.
Thanks for any suggestions,
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is too bad. Tonight you will sleep better.");
setTimeout(moveit, 2000);
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout(moveit, 2000);
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}
</script>
I think the problem may have been your use of .replaceWith(). That attempts to replace an element with another, but you've tried to replace an element with text. I think you just want to use .html() instead.
Also, you don't need to use the setTimeout() - you can use .delay() instead. And, I think your selectors p:.sleepquestion are probably not right. You can go with this:
<script type="text/javascript">
$(document).ready(function(){
$("#no").click(function() {
$("#sleep").animate({"border-width": "10px"}, "fast");
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is too bad. Tonight you will sleep better.");
moveit();
});
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p.sleepquestion").html("That is great! A good night sleep is important.");
moveit();
});
});
</script>
<script type="text/javascript">
function moveit() {
$("#sleep").delay(2000).animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").delay(2000).animate({"font-size": "16px"}, "slow");
$("#sleepanswer").delay(2000).animate({ "left": "-9999px"}, "fast");
}
</script>
I also changed .replaceWith() to .html() and changed p:.sleepquestion to p.sleepquestion.
Your function moveit could also be written like this by putting the timeout inside the function:
function moveit() {
setTimeout(function() {
$("#sleep").animate({"left": "10px", "width": "150px"}, "slow");
$("p.sleepquestion").animate({"font-size": "16px"}, "slow");
$("#sleepanswer").animate({ "left": "-9999px"}, "fast");
}, 2000);
}
I had the same issue with a function call in setTimeout() not working . I solved the issue by surrounding the function call in quotes.
For example:
$("#yes").click(function() {
$("#sleepanswer").animate({ opacity: 0 }, "fast");
$("p:.sleepquestion").replaceWith("That is great! A good night sleep is important.");
setTimeout("moveit()", 2000);
});
after some tries to get this to work, i ask you, if you know where my mistake is.
This is my code until now:
$(".menu a").hover( function () {
$(this).data('timeout', setTimeout( function () {
$(this).hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
i would be happy about some help.
I tried this but it doesn't work. one more information perhaps it will make it more clear. i had the function like this before:
$(".menu a").hover(function() {
$(this).next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
it worked but so it will be viewed imidiately. so i found this to set a timer that it show the popup only after in this example one second:
$("#hello").hover( function () {
$(this).data('timeout', setTimeout( function () {
alert('You have been hovering this element for 1000ms');
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
both worked it self but if i put them together it does nothing
Inside the setTimeout callback, this does not refer to the hovered element.
To fix this, you need to make a separate variable in the event handler, like this: (pun intended)
$(".menu a").hover( function () {
var me = $(this);
me.data('timeout', setTimeout( function () {
me.hover(function() {
me.next("em").animate({opacity: "show", top: "-65"}, "slow");
}, function() {
me.next("em").animate({opacity: "hide", top: "-75"}, "fast");
});
}, 1000));
}, function () {
clearTimeout($(this).data('timeout'));
});
You don't need to use me inside the inner hover handlers, but you might as well.
Theres a nice plugin that does this: hoverIntent. Replace .hover with .hoverIntent, and you wont have to deal with setting and clearing the timeout manually.