When reaching viewport point then troggle my sidebar - javascript

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.

Related

autoscroll jquery with infinite scroll loop

I have a page that I would like to have it auto scroll as soon as the full page is loaded, scroll to the bottom and basically automatically loop to the start of the page (essentially loading the same page underneath it) to make it an infinite loop. I have the following script with does this but it breaks after a few scroll top/bottom. So far I'm using jQuery to help. I found this snippet on another StackOverflow post but cannot find it.
function scroll(element, speed) {
element.animate({ scrollTop: $(document).height() }, speed,'linear', function() {
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
});
}
setTimeout(function() {
scroll($('html, body'), 900000)
}, 3000);
I was able to solve it using a more simple method:
window.onload = function () {
var Delay = $(document).height() * 65;
var DelayBack = $(document).height() * 5;
function animateBox() {
$('html, body')
.animate({scrollTop: $(document).height()}, Delay, 'linear')
.animate({scrollTop: 0}, DelayBack, animateBox);
}
setInterval(animateBox, 100);
}
I feel like your issue is related to this line...
$(this).animate({ scrollTop: 0 }, 3000, scroll(element, 4000));
Try changing it to the following to make it a callback and not an immediate invocation:
$(this).animate({ scrollTop: 0 }, 3000, function(){ scroll(element, 4000); });
fetch data using php and ajax apply scroll function to window event
$(document).ready(function(){
$(window).scroll(function(){
var lastID = $('.load-more').attr('lastID');
if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){
$.ajax({
type:'POST',
url:'getdata.php',
data:'id='+lastID,
beforeSend:function(html){
$('.load-more').show();
},
success:function(html){
$('.load-more').remove();
$('#postList').append(html);
}
});
}
});
});

style switcher when clicked jumps to the top of the page

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();
});
});

Need Help: Animation - Button Click -> Back and Forth, Once

function animatethis(targetElement, speed) {
$(targetElement).animate({
marginLeft: "+=250px"
}, {
duration: speed,
complete: function () {
targetElement.animate({
marginLeft: "-=250px"
}, {
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 1000);
I need a button where you press it, and the loop will go once. Just like an attack animation, where I press a button and the image will attack an other image.
Here you go man.... let me know if you have any questions!
Working Example
// Animation Function
function animatethis(targetElement, speed) {
$(targetElement).animate({"margin-left" : "+=50px"}, speed, function(speed){
$(this).animate({"margin-left" : "-=50px"}, speed);
});
};
//Animation Trigger
$('body').on('click', 'button', function(){
animatethis('#q1', 250);
});

setTimeout not completely working

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);
});

Animate an Image after hovering an item a second

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.

Categories

Resources