Develop Reference

Smoother JQuery width change

I'm trying to animate a menu where the hovered block is getting bigger, while the siblings are offering their space for this size increase. All blocks together are taking up the whole window width.
I successfully accomplished that using some basic Jquery, but the result is a bit clunky.
The rightmost div suffers from all the calculations and rounding :
var width = $(window).width() - 44;
var blockwidth = width/12;
var blockwidthLarge = blockwidth+154;
var blockwidthSmall = blockwidth-14;
$('.headerblock').css('width',blockwidth+'px').hover(function()
{
$(this).siblings().stop(false,false).animate({width: blockwidthSmall},300);
$(this).stop(false,false).animate({width: blockwidthLarge},300);
},function()
{
$(this).siblings().stop(false,false).animate({width: blockwidth},300);
$(this).stop(false,false).animate({width: blockwidth},300);
});
This is a working jsfiddle (I would recommend to resize the preview frame to something larger to increase the effect's visibility):
jsfiddle
How can I improve this to have the boxes appear stable? Maybe this has already been developed?
The website should be IE8+ compatible, so I cannot use fancy css rules.

There's a jQuery plugin called hoverIntent by Brian Cherne that might solve your issue.
Basically, what it does is only firing the hover event when it thinks that the user actually meant to hover. It's a little less fluid than the original, but it works big time and looks fancy.
Here's a fiddle with the plugin added under "External Resources" and the
$('.headerblock').hover(function() {
changed to ".hoverIntent"
http://jsfiddle.net/Matze/c4uyR/1/
var width = $(window).width() - 44;
var blockwidth = Math.round(width / 12);
var blockwidthLarge = blockwidth + 154;
var blockwidthSmall = blockwidth - 14;
$('.headerblock').css('width', blockwidth + 'px').hoverIntent(function ()
{
$(this).siblings().stop(false, false).animate({
width: blockwidthSmall
}, 300);
$(this).stop(false, false).animate({
width: blockwidthLarge
}, 300);
}, function () {
$(this).siblings().stop(false, false).animate({
width: blockwidth
}, 300);
$(this).stop(false, false).animate({
width: blockwidth
}, 300);
});

Check if element is off right edge of screen

How can I write an if condition that will run if an element is 60% of the window's width worth off the screen?
I've tried using style.left > '40%' but that doesn't seem to work. Or be right.

You can use javascript and jQuery to do this pretty easily.
To find the right edge of your object (stored in memory as f here), use this code:
var rightEdge = f.width() + f.offset().left;
To find the screen width, you can use this code:
var screenWidth = $(window).width();
The amount of object that is "off screen" is calculated by subtracting screenWidth from rightEdge, therefore this boolean expression describes when the object is more than 60% off the screen:
rightEdge-screenWidth > f.width()*.6
Here's a working demo:
http://jsfiddle.net/YeyFj/

This isn't directly answering your question, but I created this fiddle that might make it easier to play with the math that you need to do.
http://jsfiddle.net/5ucbX/
var w = $('#container').width();
var el = $('#el');
el.draggable({
stop: function () {
var ew = el.width();
//this is your "formula"
var l = el.offset().left + (ew * .6);
if (l > w) {
el.addClass('over')
}
else {
el.removeClass('over')
}
}
});

jQuery Parallax Effect Issue

I have a problem with jQuery parallax effect for my body's background. Here is the code:
jQuery(document).ready(function($){
window.onscroll = function() {
var bh = $(document.body).height();
var wh = $(window).height();
var st = $(window).scrollTop();
var p = wh / bh;
var pp = (st * p);
$('body').css({backgroundPosition: '50% -'+pp+'px'});
}
});
This code is great but after I have added I header with logo and nav menu they closed some part of background so not looks good enought now. Here is the link also http://layot.prestatrend.com/ The height of my header is 129px by the way. Seems I need to make background-position +129px but can't figured out how to make it work properly with javascript. Any help please?

just add here:
var topPosition = pp + 129;
$('body').css({backgroundPosition: '50% -'+topPosition +'px'});
(or)
$('body').css({backgroundPosition: '50% -'+ (pp + 129) +'px'}); // the parentesis avoid concatenation also
this way you'll properly add the offset you want. don't do it inside the string concatenation because the browser might append ==> wich would cause something like: for pp=99 ==> pp+129 = '99129'.

How to change the left attribute on page resize (jQuery)

I'm having slight troubles with my code. What I'm trying to do is make these element's css property 'left' update according to the difference of it's current left value, and the amount the page resizes. This way, when the page resizes and the background moves over, the elements will move too. Take a look at the code below and I'll describe the issue:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function() {
var left = $(this).position().left;
var newLeft = left - difference;
$(this).css({ 'left' : newLeft });
});
}
});
So the issue that I'm getting is the elements are being given left values of wild numbers, while the value of the variable 'newLeft' is the reasonable, desired value. The each function I think is collecting the sums of these values and running them for each element x amount of times that the elements found exist (so if there's 5 elements it runs 5 times, I mean.) What I want is this code to execute uniquely for each element, but just once each, not each element 10 times! (that's how many elements are in the html).
So my question is, how can this be achieved? I hope I explained myself well enough, this was tough to iterate. Any help is extremely appreciated. Thank you!

Here's a fun trick: Include += in your .css() call:
$(this).css({left: "+=" + difference});
jQuery does the math for you to get the new value.

Try this:
$(window).resize(function() {
var docWidth = $(window).width();
if (docWidth < 1000) {
var difference = 1000-docWidth;
$('#headNav a,#icons div').each(function(iconInst) {
var left = $("#" + iconInst).position().left;
var newLeft = left - difference;
$("#" + iconInst).css({ 'left' : newLeft });
});
}
});

JQuery ready function problems

I am using the dropShadow plugin, and I have a problem with the JQuery ready function.
When I have my code like this:
$(document).ready(function() {
$('div#shadow').dropShadow();
$('#navigation li.mainmenu').bind('mouseover', navigation_open);
$('#navigation li').bind('mouseout', navigation_timer);
});
It will only make the shadow once the drop menu has come out, which is the second function. Any ideas why?
The full code for the JS is:
$(document).ready(
function()
{
$('#navigation li.mainmenu').bind('mouseover', navigation_open);
$('#navigation li').bind('mouseout', navigation_timer);
});
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
var highlightmenu = 0;
var returncolor = 0;
var textreturncolor = 0;
var height = 0;
var originaltop = 0;
var resettop = 0;
var top = 0;
var shadowExists = 0;
var dropshadow = 0;
function drawShadow(){
//draw the shadow only on mouse enter
dropshadow = $(this).find('ul').dropShadow({top: 4, opacity: 1});
$('.dropShadow').css('visibility','visible');
}
function navigation_open()
{ navigation_canceltimer();
navigation_close();
height = $(this).height();
ddmenuitem = $(this).find('ul');
//Double Liners are above 40 pixels
menu = ddmenuitem.find('li');
/*===Need to get the top pos. of the item and adjust it since it is absolute; relative does not work*/
top = ddmenuitem.position().top;
resettop = top;
if (height > 40){
top = top - 53;
}
else{
top = top - 35;
}
ddmenuitem.css('top', top.toString() + "px");
//---ADD A DROP SHADOW...USING JQUERY PLUGIN
ddmenuitem.dropShadow({top: 4, opacity: 1});
$('.dropShadow').css('visibility','visible');
ddmenuitem.css('visibility', 'visible');
returncolor = $(this).find('a#highlight').css('background-color');
textreturncolor = $(this).find('a#highlight').css('color');
highlightmenu = $(this).find('a#highlight').css('background-color','#6487ad');
highlightmenu.css('color','#ffffff');
highlightmenu.css('font-weight','bold');}
function navigation_close()
{ if(ddmenuitem){
ddmenuitem.css('visibility', 'hidden');
ddmenuitem.css('top',resettop);
ddmenuitem.removeShadow();
}
if(highlightmenu){ highlightmenu.css('background-color',returncolor);
highlightmenu.css('color',textreturncolor);
}
}
function navigation_timer()
{
closetimer = window.setTimeout(navigation_close, timeout);}
function navigation_canceltimer()
{ if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;}}
document.onclick = navigation_close;
The HTML would be like this for static:
<div id="shadow">
//images here
</div>
I don't know if you need to see anymore, however the drop menu is just a list, but I want to be able to apply this to the static images and it won't until the drop menus come out.

The dropshadow plugin appears to be designed for stationary page elements. From the dropshadow js file:
"This jQuery plug-in adds soft drop shadows behind page elements. It is only intended for adding a few drop shadows to mostly stationary objects, like a page heading, a photo, or content containers"
EDIT: Perhaps you could achieve the effect you're looking for with css? http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

The problem lies within the CSS, when calling dropShadow() for the first time the css for class dropShadow is set to hiddent (this was placed there to make the dynamic pieces work in IE (all other browsers fine without it). In the javascript you can see this by the $('.dropShadow').css('visibility','visible'); being called.