We Keep Coding

How can I fix a div under my original header if it changes height when scrolling?

I created an additional menu bar (.secondnav) that I want to place right below the original header (#headAnnouncementWrapper) in a website. The problem is, when scrolling, the header's height changes when going from relative position to fixed at the top, and also when on mobile.
I've been trying with this:
var scrolled = 78;
var headHeight = $('#headerAnnouncementWrapper').height();
$(window).scroll(function() {
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
$('.secondnav').css('top', headHeight);
} else {
$('.secondnav').css('position', 'relative'),
$('.secondnav').css('top', headHeight);
}
});
But I don't know how I should be calculating the headHeight variable so it changes when the height changes, and how to use that result as the top value for the .secondnav's css.

Check the height of the main header inside the scroll event. Each time the scroll event triggers, it will recheck the height. Then, the next line will adjust the top margin of the lower header to match the height of the upper header. Top-margin here replaces your position method.
var scrolled = 78;
$(window).scroll(function() {
var headHeight = $('#headerAnnouncementWrapper').height();
$('.secondnav').css('marginTop', headHeight);
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
} else {
$('.secondnav').css('position', 'relative'),
}
});

jQuery image slider using an increment/decrement

Im trying to create a slider that uses an increment/decrement to move and then hide or show the buttons depending on the max number of images in the row. It uses a div within a div, with an overflow of hidden that should move until the max number of images is hit, this is when the arrow should be hidden so the person cannot just keep going into the white space created by the overflow. However, the hide/shows do not work and the person can just keep incrementing because the arrow is still visible even after the max number of images has been reached.
How do I get the left and right arrows to hide when they hit the respective numbers?
Edit: i know the .css is messed-up, i just want to get the arrows to hide/ show first, thanks
var pressCounter = 0;
var maxImgCounter = $('.carousel-image').length; // gain the max amount of images
var maxSlide = maxImgCounter - 4;// - the amount of images visible on the screen so it does notshow white space
if ( pressCounter < maxSlide){
$('#right').show();
}else{
$('#right').hide();
}
if (pressCounter > 0){
$('#left').show();
}else{
$('#left').hide();
}
/* Left arrow */
$('#left').click(function(){
$( '.slide' ).css({
"position": "relative",
"right": -280 * pressCounter
});
pressCounter--;
return pressCounter;
});
/* Right arrow */
$('#right').click(function(){
$( '.slide' ).css({
"position": "relative",
"right": 280 * pressCounter
});
pressCounter++;
return pressCounter;
});

if ( pressCounter < maxSlide){
$('#right').show();
}else{
$('#right').hide();
}
if (pressCounter > 0){
$('#left').show();
}else{
$('#left').hide();
}
Consider what happens when the value is less than maxslide and presscounter is greater than zero. Pretty much, this condition will always be true the way you have it written so both if statements are firing each time - one after the other. The result is that your left and right arrows will always be displayed - allowing users to keep clicking past the last slide.

how to ignore lots of scroll-events due to smooth scrolling of browser?

i'm trying to implement such a feature:
webpage has two columns. narrow left one - with menu and some info, and wide right one - with the main content of page. height of the left column is much smaller than the right's one
so when user scrolls down the webpage and the left narrow column is already above the viewport, it gets hidden giving extra width for right column.
after i hide the left column i should scroll browser's window little bit upper in order to corresponding element on the right gets placed on the top of viewport (it jumps upper when i hide the left col, because the width of right col gets increased)
i've implemented this, but the problem is in smooth scrolling in all modern browsers. when you press down key or page down or mousewheel or use your finger in touch-devices, browser generates a lot of scroll-events during one scroll.
it looks like this:
scrollTop == 500
scrollTop == 520
scrollTop == 530
scrollTop == 535
scrollTop == 537
and the moment when my script realises that left col should get hidden corresponds to scrollTop of 500, and at this very moment my script tries to set scroll top to the new value, but it gets instantly overridden by following browser smoothscroll events:
scrollTop == 500 //browser
scrollTop == 450 //mine! i need to save this position!
scrollTop == 520 //browser
scrollTop == 530 //browser
scrollTop == 535 //browser
scrollTop == 537 //browser
so how can i cancel all changes of scrollTop below?
this is my code if needed:
$(function() {
//height of left column
window.main_left_height1 = $('#main_left_div').height();
var ar = $.grep($('.page_container > div'), function(item) {
return $(item).position().top >= window.main_left_height1;
});
//anchor element on the right which placed on the same height with the end of left col
window.main_left_anchor = ar[0];
//we will toggle left column on this scroll height
window.main_left_height1 = $(window.main_left_anchor).position().top;
window.main_left_state = true;
window.ignore_scroll = false;
window.ignore_scroll_value = -1;
});
if (is_mobile || true)
{
$(window).scroll(function(e) {
var scroll_top = $(this).scrollTop();
//i've tried to ignore browser scrolling after i set its value manually in the script but this doesn't work
if (window.ignore_scroll)
{
if (Math.abs(window.ignore_scroll_value - scroll_top) < 50)
{
window.ignore_scroll = false;
window.ignore_scroll_value = -1;
return true;
}
e.preventDefault();
return false;
}
if (window.main_left_state)
{
if (window.main_left_height1 && scroll_top >= window.main_left_height1)
{
$('#main_left').hide();
window.main_left_state = false;
if (!window.main_left_height2)
window.main_left_height2 = $(window.main_left_anchor).position().top;
window.ignore_scroll = true;
window.ignore_scroll_value = window.main_left_height2;
$(this).scrollTop(window.main_left_height2);
}
}
else
{
if (window.main_left_height2 && scroll_top < window.main_left_height2)
{
$('#main_left').show();
window.main_left_state = true;
window.ignore_scroll = true;
window.ignore_scroll_value = window.main_left_height1;
$(this).scrollTop(window.main_left_height1);
}
}
});
}
any suggestions? thanks!

As I see since browser got input (like mouse scroll or key press) and scroll event is generated you can do nothing with it. If events are generated window will be scrolled and if even there will be page rearrangement scroll offset wouldn't be changed. It means you will have jumpy scrolling if you will change scrollTop value after.
Try to change your right column position (Top) and not scrollTop. For example, when user scrolls down and you calculated that scrollTop need to be changed for -60px, just add those 60px to your right panel's top (you can even animate it). I think it might help.
And the second suggestion is to handle mouse and keyboard input by your self to generate scrolling, like it is done here: How to disable scrolling temporarily? (NIGHTMARE! I think :))

Randomize image position with JQuery and HTML

I have this :
<div id="randomp" style="position:absolute;top:3px;left:3px;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
I want that the propierty "top" and "left" change every time you enter into the page. I mean that some times it appear on the right top corner, right bottom corner, left top corner and left bottom corner..
Here it is what i have tryied:
http://redzer.com.mx/tabla.html

I would probably start with the div styled as position:fixed and with display:none:
<div id="randomp" style="display:none;position:fixed;width:165px;height:29px;background:url(/logo2.png) no-repeat;background-size: 165px;"></div>
Then use jQuery to determine the position CSS to set and turn on visibility
$(document).ready(function() {
// get jQuery object for the div
var $randomp = $('#randomp');
// determine whether to show top or bottom, left or right
var top = Math.round(Math.random()); // generate 0 or 1 value
if (top === 1) {
$randomp.css('top', '3px');
} else {
$randomp.css('bottom', '3px');
}
var left = Math.round(Math.random());
if (left === 1) {
$randomp.css('left', '3px');
} else {
$randomp.css('right', '3px');
}
// show the div
$randomp.show();
});
Of course, you could also use server-side code to do this, but since you asked specifically about javascript/jquery in your tags, I suggested this solution.

I think i got exactly what you need.
EXAMPLE
With javascript i am generating random numbers for the top and left positioning of your image every time you visit the page.
Right now i set them up to get a random number between 0 and 100 but you can change that to whatever you want.
var random1 = Math.ceil(Math.random() * 100);
var random2 = Math.ceil(Math.random() * 100);
$(document).ready(function () {
$('#randomp').css('top', random1);
$('#randomp').css('left', random2);
});

jQuery backgroundPostion and animate can't only get the Y

I have a problem. I have this 3060 px wide image as my background-image, and when I press a menu link I want to 'slide' the background to the right or left, but when I'm doing this I can only get it to use the X. If I use backgroundPositionX, it doesn't do anything. When I use backgroundPosition, though, I can only provide 1 parameter. And I only want to do something to the X side not the Y.
The code I have at the moment sets the Y to 50% automatically, and this is not wanted.
function move(space) {
image = 3060;
bodyWidth = $('body').width();
offset = 900 * space;
if(image - offset < bodyWidth)
offset = image - bodyWidth - 15;
console.log(offset);
console.log(bodyWidth);
$('body').animate({
backgroundPosition: -offset
}, 5000, function() {
console.log("animate complete");
});
//$('body').css('backgroundPosition', '-'+offset+'px 0px');
}

You need to put both x and y coords in order for this to work. Example:
Say you wanna move the background position from 0px to 500px on X.
$(somediv).animate({backgroundPosition: '500px 0px'})
Assuming the background original position is 0px*0px, this will move the background to X:500px and Y:0px. Then you could bring it back like this:
.animate({backgroundPosition: '0px 0px'})