We Keep Coding

Javascript style.background not allowing me to adjust size of image

I want the background image of the red section to change when the user hovers over the blue section.
I have got this to work fine with the following code
<script>
document.getElementById('scrolling-background-column-left').onmouseover = function()
{
document.getElementById('scrolling-background-section').style.background = "url('https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820,c_limit/Sunset-Beach-Oahu-cr-getty.jpg') no-repeat center";
};
document.getElementById('scrolling-background-column-left').onmouseout = function()
{
document.getElementById('scrolling-background-section').style.background = "";
};
</script>
However is the result when i hover over the blue section. Is there a way to make the image span across the entire section/whole width of the page? I have tried adding cover to the code however this doesn't seem to work, if i try changing the size of the image through the code it breaks everything.

cover should work in your case. When you use the background shorthand property, you need to have a / separating the position and size values:
document.getElementById('scrolling-background-section').style.background = "url('media.cntraveler.com/photos/5698051378d099fc122487e3/master/…) no-repeat center / cover";

Make scrollTo make div scroll all the way?

I have a div with only horizontal overflow. With a link outside the div, I'm trying to scroll the div to a certain image (think of a horizontal gallery scrolling to the right).
I used the following javascript. It works fine in the webpage.
However, the DIV containing the gallery is larger than most images. Consequently the browser window will scroll only until the requested div comes in from the right and is now fully on screen, and not one pixel more. However, I would like the div to scroll all the way, so that the image is all the way hugging the left edge of the container.
I hope I'm making sense, I'm not terribly experienced, but I couldn't find an answer to my question online.
$(document).ready(function(){
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
$('#gimg2').click(function() {
$.scrollTo($('#gimg2link'), 1000);
});
$('#gimg3').click(function() {
$.scrollTo($('#gimg3link'), 1000);
});
$('#gimg4').click(function() {
$.scrollTo($('#gimg4link'), 1000);
});
});
<div id="gallery">
<img class="galleryimage" id="gimg1" src="lb1.jpg">
<img class="galleryimage" id="gimg2" src="lb2.jpg">
<img class="galleryimage" id="gimg3" src="lb3.jpg">
<img class="galleryimage" id="gimg4" src="lb4.jpg">
</div>
Image 1
Image 2
Image 3
Image 4

You are using the image and link selectors in your jquery in the wrong order.
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
This snippet means "when the image #gimg1 is clicked, scroll to the position of the link #gimg1link". You want it the other way round: when the link is clicked, scroll to the image.
Reversing those selectors gives you a working slider: jsFiddle
The last image will always stay on the right of the screen, because that's where the document ends and it can't scroll any further. The other images will scroll all the way to the left as long as your document width allows it.
Also, you could optimize your javascript a lot by not copy-pasting the same code but just making it more generic:
$(document).ready(function(){
$('a[id^=gimg]').click(function() { // when a link with an ID starting with "gimg" is clicked
var linkID = $(this).attr('id'); // get the whole id from this link
var imgID = linkID.replace('link', ''); // get the img ID it relates to by removing the 'link' part
$scrollTo( $('#' + imgID), 1000); // scroll to the image this link belongs to
});
});
Now it doesn't matter how many links and images you add, as long as they all use the same naming convention.

Based on this answer i adapted the code to suit your need. It uses the clicked thumbnail index to find the corresponding image left, and set scrollLeft of the viewport to this value.
$('#nav li').click(function(){
var clickedIndex = $(this).index();
var targetElement = $('#viewport ul li').eq(clickedIndex);
var elementPosition = targetElement.position();
$('#viewport').animate({scrollLeft: elementPosition.left},500);
});
Working fiddle: http://jsfiddle.net/Lqvqtwtb/

Hide only one element in fixed div when scrolling down

I have this big photo which takes 100%x100% of screen size and above it there is fixed slider.
I want to fadeout (hide) this green logo when you scroll down from this big header photo leaving navigation bar without it.
How can I do that?
http://i.stack.imgur.com/BiUfE.jpg here is photo

If you want the logo to scroll with the page, just put it outside of the menu bar in your HTML and use position absolute (JS Fiddle).
If you want it to fade out once it leaves the slider, you can use jQuery, here is an example:
//Some variables, to avoid calculating these values at every scroll
var logo = $('#logo');
var sliderBottom = $('#slider').offset().top + $('#slider').height() - logo.height();
//On every scroll
$(window).scroll(function(){
// if we're past the slider and the logo is still visible
if($(window).scrollTop()>sliderBottom && logo.is(':visible')){
logo.stop().fadeOut(300);
}
// if not
else if($(window).scrollTop()<sliderBottom && logo.is(':hidden')){
logo.stop().fadeIn(300);
}
});
JS Fiddle Demo

Modify Sidenavigation Which Highlights Which Part of Page is Viewed

I currently have a sidenavigation bar which continually checks the users scroll position and if it is greater than a specified .slide height, it adds a class .current to a certain div on a sidebar making it turn orange and thus indicates which part of a page the user is on. Right now, the code only works for one specific height of .slide but I would like to modify it so that each slide (i.e. slide red, slide green, slide blue which are the divs with the colored background) can be of different heights since my content for each section will vary in length.
The fiddle can be found here
JavaScript:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});

I was trying to help you with your code and then i realize how hard it is, so I know it is probably not what you really want, but I recommend you a great jQuery plugin, which will solve your problem very fast: http://imakewebthings.com/jquery-waypoints/

jQuery hide div, remove background and change page width on click

I'm trying to hide a div on click (well i'm trying to slide it to the left), but what it will have to do is also from the main page div swap the background and also i think, swap the width of another div. I've got it swapping the background and removing the things I don't want (although they slide down rather then to the left)
This video shows what happens (and then at the end i use firebug to show you what i want to happen) http://www.youtube.com/watch?v=tti_L_ofelg&feature=youtu.be (edit: video online now)
Here is my html for the sliding div:
The CSS:
.slidingDiv {
}
.show_hide {
display:none;
}
And the jQuery:
var defOpen = 1;
jQuery(".slidingDiv").show();
jQuery(".show_hide").show();
jQuery('.show_hide').click(function(){
if(defOpen == 1)
{
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripeclear.png) fixed 0 0 repeat-y")
jQuery("#primary_right").css("width","")
jQuery(".slidingDiv").slideToggle();
defOpen = 0
} else {
jQuery(".show_hide").show();
jQuery("#bgwrap").css("background","url(assets/stripe.png) fixed 0 0 repeat-y")
jQuery(".slidingDiv").slideToggle();
defOpen = 1
}
So it's bgwrap that has the image in it that i have to swap to a clear one (to stop it being there as it's a fixed image on the left)
and primary_right seems to be the one when I remove the width goes full screen (what i'm really trying to acheive)
It also needs to be able to toggle closed and open!
Thanks for any help you can give!

question is not clear..but as far as i understood...you want to hide a left side division by which the right side division occupies full screen and vice versa..is it?????
if yes defOpen variable will not help u..use JQuery toggle function...datz the best way to do it...

I think you need to set the width to "inherit". That's essentially what you're doing when you are selecting the delete style in Firebug.
jQuery("#primary_right").css("width","inherit")