We Keep Coding

javascript function not working when a new if statement added

i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});

You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

What can I do to simulate Position:Sticky?

If you do not know what position:sticky is, watch this 20 second long video: https://www.youtube.com/watch?v=jA67eda5i-A .
This CSS feature was in talks in W3 and implemented in gecko I believe. But that is besides the point, the point is that not all browsers support it and I really want that functionality.
Is there any way I can get this using a mix of CSS and/or javascript and/or jquery?

There is an easy jquery plugin for this:: http://stickyjs.com/

To avoid using a plugin, i have created the following javascript method using jquery 1.8+.
The first argument is the element that you want to set sticky.
The second argument is optionnal and is a boolean to enhance the browser performance by setting a small timeout of 300ms.
function simulateSticky(elt, timeout) {
var move = function() {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(document).height() - scrollTop - $(window).height();
var eltTop = elt.parent().offset().top;
var eltBottom = $(document).height() - eltTop - elt.parent().outerHeight();
if (scrollTop < eltTop) { // Top case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "auto",
left: "0px",
});
}
else if (scrollTop >= eltTop && scrollBottom >= eltBottom) { // Middle case
elt.css({
position: "fixed",
width: elt.parent().outerWidth(),
top:"0px",
right: "auto",
bottom: "auto",
left: "auto",
});
}
else { // Bottom case
elt.css({
position: "absolute",
width: "100%",
top:"auto",
right: "0px",
bottom: "0px",
left: "0px",
});
}
};
// Use of a timeout for better performance
if (timeout) {
var timeoutId;
$(window).scroll(function() {
clearTimeout(timeoutId);
timeoutId = setTimeout(function() {
move();
}, 300);
});
}
else {
$(window).scroll(move);
}
// Initial call
move();
}

moving the caption of a tooltip

Can somebody please tell me how to arrange the caption above the image in the jsfiddle below as I can not seem to do it. The caption is currently below the image. Thanks in advance.
Sample Code
<script type="text/javascript">
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
</script>
I hope this helps

Here is an updated FIDDLE.
The relevant line is this one:
.css('top', -h.toString() + 'px');
It positions the div for the text, and to change the position above the image, I just placed a negative sign in front of h.toString(). You could finely adjust the position by multiplying the h.toString() by a coefficient like -.8 or -.92 to make finer adjustments. It may be problematic putting it above the image, because you'll have to adjust the position based on the height of the text div.

Sliding Panels with JavaScript

This example I've found is exactly what I was looking for: http://jsfiddle.net/sg3s/RZpbK/
Thx to the author sg3s
jQuery(function($) {
$('a.panel').click(function() {
var $target = $($(this).attr('href')),
$other = $target.siblings('.active'),
animIn = function () {
$target.addClass('active').show().css({
right: -($target.width())
}).animate({
left: 0
}, 500);
};
if (!$target.hasClass('active') && $other.length > 0) {
$other.each(function(index, self) {
var $this = $(this);
$this.removeClass('active').animate({
left: -$this.width()
}, 500, animIn);
});
} else if (!$target.hasClass('active')) {
animIn();
}
});
});
But I got a little problem with it. I would like the panels to "open" and "close" from the right. I'm not familiar with javascript and I'm not able to tweak it properly.
Can anyone help me with this ?

Like this?
http://jsfiddle.net/RZpbK/845/
All I did was modify the animIn to:
animIn = function () {
$target.addClass('active').show().css({
left: +($target.width())
}).animate({
left: 0
}, 500);
};

Just replace the left: -($target.width()) with left: $target.width() in both places

Based on your previous comment, this is more what you want?
http://jsfiddle.net/RZpbK/847/
Just changed it so animIn executed right away instead of as a callback after the fadeout was done.
$this.removeClass('active').animate({
left: -$this.width()
}, 500);
animIn();

Jquery: functions calls when the page loads

I have a complex function called animated(). Now this function has to affect 2 different DOM elements: one when the page loads, and the second one when I click on it.
$("li div").click(animated);
How can I make it happen for at the start in any case on another <div>?
Something like:
$("li div").animated();
I know that's not right, so how can I do something like that?
thanks for the answers....any way I'm pretty new with Jquery so i'm gonna copy the my code here so yous have an idea about what is going on...this code works perfectly but is redundant and I'm sure there is a way to reduce it.
here is the jquery code
$(document).ready(function() {
var wrapperheightanim = $(window).height(); // check the dimension of the window to see how many rectangles i can fit
var locid = window.location.hash.replace("!", ""); // save the location id in case the user starts from a page that is not the home
$(window).resize(function() {
wrapperheightanim = $(window).height();
});
//rollover
$("li").hover(
function () {
$("img", this).fadeIn(500);
},
function () {
$("img", this).fadeOut(500);
}
);
//click on the navbar
function animated() {
var titletemp = $(this).attr("id"); // save the id in a temp var
var title=titletemp.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color = $(this).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").fadeIn(1);
$("img", this).fadeOut(1);
// create the main container
$(this).css("z-index", 99);
$(this).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(this).css("z-index", 3);
$("li").not(this).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(this).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(this).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(this).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(this).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(this).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(this).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(this).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(this).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(this).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(this).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
locid = window.location.hash.replace("!", "");
}
function animated2() {
var titletemp2 = $(locid).attr("id"); // save the id in a temp var
var title2=titletemp2.replace(/_/g, ' '); // I use the id as titles so i substitute underscores with spaces
var color2 = $(locid).css("background-color"); // save the bgcolor of the main square
// animation that bring every square to the start position
$("#about").animate({top:'200px', left:"0", height: "180px", width:"200px"}, 1000, "easeInOutBack");
$("#social_media").animate({top:'90px', left:"200px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#bd_package").animate({top:'90px', left:"400px", height: "140px", width:"200px"}, 1000, "easeInOutBack");
$("#services").animate({top:'230px', left:"200px", height: "130px", width:"560px"}, 1000, "easeInOutBack");
$("#portfolio").animate({top:'360px', left:"200px", height: "350px", width:"200px"}, 1000, "easeInOutBack");
$("#clients").animate({top:'360px', left:"400px", height: "220px", width:"200px"}, 1000, "easeInOutBack");
$("#contact").animate({top:'290px', left:"600px", height: "160px", width:"220px"}, 1000, "easeInOutBack");
$("#quote").animate({top:'230px', left:"760px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$("#blog").animate({top:'280px', left:"840px", height: "60px", width:"60px"}, 1000, "easeInOutBack");
$(".shape").animate({top:'200px', left:"200px", height: "0", width:"0"}, 1000, "easeInOutBack");
// remove the images from the rollover
$("img", "li").remove();
// create the main container
$(locid).css("z-index", 99);
$(locid).animate({
top: '50px',
left: '150px',
width: '700px',
height: '585px'
}, 500
);
// create the side navbar squares
$("li").not(locid).css("z-index", 3);
$("li").not(locid).animate({
left: '10px',
width: '140px',
height: '60px'
}, 500
);
// move the squares to create the side navbar
$("li").not(locid).eq(0).animate({top:'50px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(1).animate({top:'125px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(2).animate({top:'200px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(3).animate({top:'275px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(4).animate({top:'350px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(5).animate({top:'425px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(6).animate({top:'500px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(7).animate({top:'575px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(8).animate({top:'650px'}, 1000, "easeOutExpo");
$("li").not(locid).eq(9).animate({top:'725px'}, 1000, "easeOutExpo");
// animate the additional square around the main one
$("#title").delay(1000).queue(function(n2) { // the title square gets the same color of the main container, an gets the the title from the class
$(this).html("<h1>" + title2 + "</h1>"); // the function queue allows me to delay the process of changing title when i click
n2();
}).animate({
top: '-40px',
left: '400px',
width: '450px',
height: '70px',
backgroundColor: color2
}, 1000);
$("#2").css("background-color", "#9090AF").delay(1400).animate({
top: '50px',
left: '870px',
width: '150px',
height: '70px'
}, 500);
$("#3").css("background-color", "#47477A").delay(800).animate({
top: '655px',
left: '270px',
width: '750px',
height: '70px'
}, 1000);
$("#4").css("background-color", "#A5264E").delay(700).animate({
top: '450px',
left: '870px',
width: '120px',
height: '70px'
}, 456);
if(wrapperheightanim > 1000){
$("#5").css("background-color", "#fff").delay(1000).animate({
top: '745px',
left: '270px',
width: '250px',
height: '70px'
}, 1000);
}
}
$("li").click(animated);
animated2();
});
as you can see the functions animated and animated2 are exactly the same with the difference
that one happens to the div when i click, one happens to a certain div when i load the page..hope with the code it's easier. my problem is how to write the function once and execute it once when i click on one element, and once when the page load on the specific element saved in the variable locid..

You can't do $('li div').animate() because your function is not a property of a jquery object (unless you implement it as so - like a plugin).
You can trigger the event click you just defined though:
$('li div').click(); // or $('li div').trigger('click');
This will execute your animatedevent handler attached with $("li div").click(animated);

Let's say your function looks like this:
function animate()
{
// do complex stuff to 2 DOM nodes
}
To run that function on whenever a <div> inside a <li> is clicked, do this:
$('li div').click(function() {
animate();
});
If you want to run animate when the page loads, do this:
$(function() {
animate();
});
Edit: On the other hand, if your function looks like this:
function animate(domElement)
{
// do complex stuff to domElement
}
To run that function on any <div> inside a <li>, when it is clicked, do this:
$('li div').click(function() {
animate(this);
});
And if you want to run the function on page load, on all the <div>s that are inside <li>s, do this:
$('li div').each(function(index, element) {
animate(element);
});