We Keep Coding

Add extra top .offset()

I was wondering how to add extra 'top' .offset() to this div;
mapstick
I think its something to do startPosition?? I thought I could get away with changing it in CSS but this just broke the function of the div unsticking at a certain height.
I tried in the CSS to make the top px '!important' on the div. This is what broke the if/else statement as it messed up what the actual top of the div and the script didn't realise this it looks like.
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
startPosition = navWrap.offset().top,
stopPosition = $('#stopHere').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky');
}
});
I just need an extra 70px on the top of the div so it can be fully visible.
I have also looked at using this;
.offset({ top: 70 });
I think I used this wrong as this just messed things up.

Turns out I can just amend another class to a child div to have the effect that I am wanting. So I have just added an extra 'addClass' to the if statement and it seems to have done the trick.
This is the script that I have now;
var navWrap = $('#navWrap'),
nav = $('#mapstick'),
maptop = $('#map')
startPosition = navWrap.offset().top ,
stopPosition = $('#stopHere').offset().top - nav.outerHeight();
$(document).scroll(function () {
//stick nav to top of page
var y = $(this).scrollTop()
if (y > startPosition) {
nav.addClass('sticky'),
maptop.addClass('maptop');
if (y > stopPosition) {
nav.css('top', stopPosition - y);
} else {
nav.css('top', 0);
}
} else {
nav.removeClass('sticky'),
maptop.addClass('maptop');
}
});
I have added in the 'maptop' to the if statement which is working. I don't know if this is the best way to do it but it is working and I am fine with that lol

jquery function doesn't trigger

My resizeAreas function doesn't trigger in $(document).ready function. Here's the link to the app. I have also tried $(document).load but same result.
This problem is not consistent. But most of the time the page doesn't load correctly. If the list of task have the same height and 4 equal(as height) lists on the row then they are loaded correctly else they're not. To make sure that you see how it must look you can move a task element from one list to another. I don't have the reputation to post images.
Here is most of the javascript code:
function makeDropArea() {
var widthArea = $(".taskListing").width() / 2 - 55;
var heightArea = $(".taskListing").height();
$('.dropArea').width(widthArea);
$('.dropArea').css('margin-left', 5 + 'px');
$('.generalInfo').css('margin-left', 5 + 'px');
$('.generalInfo').css('width', widthArea * 2 + 220 - 45);
$('.subTaskHeader').css('width', widthArea + 25);
}
function makeDropElement(){
var widthEl = $('.dropArea').width() + 25 ;
$('.task').width(widthEl);
}
function taskListingSize(){
var width = getWidth();
var height = getHeight() * 80 / 100;
$('.taskListing').css('width', width);
}
function resizeAreas() {
$('.taskListing').each(function(){
var highestBox = 0;
$('.dropArea', this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$('.dropArea',this).css('min-height', highestBox);
});
}
$(document).ready(function () {
menu();
taskListingSize();
makeDropArea();
makeDropElement();
resizeAreas(); //<-- this is the one with the problems
$(".dropArea").resize(resizeAreas());
$( window ).resize(function() {
taskListingSize();
makeDropArea();
makeDropElement();
});
});
Thanks.
Update 1:
I've done some more testing and this bug is only on chrome and firefox but not on IE. The problem appears only on the openshift platform.

Either change:
$(".dropArea").resize(resizeAreas());
To:
$(".dropArea").resize("resizeAreas");
Or:
$(".dropArea").resize(function(){
resizeAreas();
});

I think it should be
$(".dropArea").resize(resizeAreas);
Or
$(".dropArea").resize(function(){
resizeAreas();
});

jQuery breaking in Firefox but no other browser

I have the following code which works fine in all browsers including Firefox:
var top;
var imageHeight;
function upFunction() {
top = parseInt($(".feature img").css("top"));
imageHeight = $(".feature img").height();
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
$(document).ready(function() {
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction();
timeoutId = setInterval( upFunction, 100 );
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});
However there's obviously something else in my page which is causing this not to work in firefox and I can't work it out.
Is there any way I can fond out what's causing it to break without removing everything from the page to find out what it is?
EDIT:
OK, with the help of Jai's answer, it appears that a small tweak to my code makes it work in Firefox. Here's what I did:
function upFunction() {
var top = parseInt($(".feature img").css("top"));
var imageHeight = $(".feature img").height();
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
and remove the 2 variables from the global scope. Not sure why it made a different but it did.

Try these fixed variable declarations:
function upFunction() {
var img = $(".feature img"),
top = parseInt(img.css("top"));
if (top > (335 - img.height())) {
img.css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
};
$(document).ready(function() {
var timeoutId;
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction();
timeoutId = setInterval( upFunction, 100 );
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});
On your actual question: Debug your script via inspecting it in the developer tools (Firebug).

You should try this one:
function upFunction(top, imageHeight) {
if (top > (imageHeight - 335) * -1) {
$(".feature img").css("top", top - 1 + "px");
$("#topPos").val(top - 1);
}
}
$(document).ready(function() {
var top = parseInt($(".feature img").css("top"));
var imageHeight = $(".feature img").height();
$("a#up").mousedown( function(e) {
e.preventDefault();
upFunction(top, imageHeight);
timeoutId = setInterval(function(){
upFunction(top, imageHeight);
}, 100);
}).bind('mouseup mouseleave', function() {
clearInterval(timeoutId);
});
});

Don't use top as a var name in global scope, it's already used.
Try typing console.log(top) or alert(window.top) into your browser's console for reference.

html element doesn't move correctly with jQuery

I have to repair bottom slider on http://rhemapress.pl/www_wopr/ . If you see when you click right arrow twice, then animation back to start and animate again. Here when i click one on right arrow time this should be blocked and not possible to click second time.
Numer of moves right is created dynamicly by checkWidth();
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
This return realWidth witch is something like limit of offset. Variable offset is setted to 0 at start. So, if i click right, then in method moveRight() is checked if element can be moved and it's move. At end offset is increment by 820px (one page of slider), so if we've got 2 pages, then next move can't be called. But it is and this is problem! :/
My code
<script type="text/javascript">
$(document).ready(function() {
$('a.prev').bind('click',moveLeft);
$('a.next').bind('click',moveRight);
var realWidth = checkWidth();
realWidth -= 820;
var offset = 0;
function moveLeft(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset - 820) >= 0) ) {
$('.items').animate({
'left': (position.left + 820)
}, 300, function() {
offset -= 820;
});
}
}
function moveRight(e) {
var position = $('.items').position();
var elements = $('.items').children().length;
if ((elements > 5) && ((offset + 820) <= realWidth)) {
$('.items').animate({
'left': (position.left - 820)
}, 300, function() {
offset += 820;
});
}
}
function checkWidth() {
var elements = $('.items').children().length;
var width = Math.ceil(elements / 5) * 820;
return width;
}
});
</script>
How can i do this correctly?

It seems like you want to prevent the click event from firing before the current animation is complete. You can do this by preventing the rest of the function from executing if the element is currently being animated:
function moveLeft(e) {
if ($(this).is(":animated")) {
return false;
}

Jquery slider help

ok so i have an interspire shopping cart so its hard to customize..
anyway,
here is a link to my code
http://jsfiddle.net/WTvQX/
im having trouble getting the scroll to work properly...
it works differently on my actual site here...
so i need help... re-doing it or just fixing..
let me kno

You need to add the "relatedLeft" ID to the left button, however try something like this...
Demo: http://jsfiddle.net/wdm954/WTvQX/3/
$('#relatedRight').click(function() {
$('#scool').animate({left: "+=100px"}, 'slow');
});
$('#relatedLeft').click(function() {
$('#scool').animate({left: "-=100px"}, 'slow');
});
You can adjust pixel distance and speed to your liking.
EDIT: Try something like this. The first part finds the width of all the images. Then the animates only fire when the offset is within range.
Demo: http://jsfiddle.net/wdm954/WTvQX/5/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
});
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < w) {
$('#scroll').animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
if (offset.left > -w) {
$('#scroll').animate({left: "-=100px"}, 'slow');
}
});
EDIT: One more code option here. This one will stop scrolling sooner (note there are CSS changes here also).
Demo: http://jsfiddle.net/wdm954/WTvQX/7/
var w = 0;
$('#scroll img').each(function (i, val) {
w += $(this).width();
w += parseFloat($(this).css('paddingRight'));
w += parseFloat($(this).css('paddingLeft'));
w += parseFloat($(this).css('marginRight'));
w += parseFloat($(this).css('marginLeft'));
});
$('#scroll').css('width', w + 'px');
$('#relatedRight').click(function() {
var offset = $('#scroll').offset();
if (offset.left < 0) {
$('#scroll').stop().animate({left: "+=100px"}, 'slow');
}
});
$('#relatedLeft').click(function() {
var offset = $('#scroll').offset();
var b = $('#bar').width();
if (offset.left > b-w) {
$('#scroll').stop().animate({left: "-=100px"}, 'slow');
}
});