Develop Reference

Preloading Image so that it doesn't re-size during load?

Is it possible to, not sure if this is the right term, but preload it so that it's a set height and width when it's loaded. I want it to be 100vh and 100vw.
On a side note, whats wrong with my jquery slideshow, I'm not great at jquery and javascript and attempted to get a slideshow going with setInterval.
Fiddle:https://jsfiddle.net/jzhang172/ymfdn6hu/1/
$(document).ready(function() {
setInterval(function () {
$('.featured-wrapper').addClass("slide-1").find('.city-sky').text(" City Sky");
$('.featured-wrapper').addClass("slide-1").find('h3').text(" Interior Design |");
$('.featured-wrapper').addClass("slide-1").find('.city-title').text("| Berlin");
$('.featured-wrapper').removeClass("slide-2");
$('.featured-wrapper').removeClass("slide-3");
}, 4000);
setInterval(function () {
$('.featured-wrapper').addClass("slide-2").find('h3').text("changing");
$('.featured-wrapper').removeClass("slide-1");
$('.featured-wrapper').removeClass("slide-3");
}, 8000);
setInterval(function () {
$('.featured-wrapper').addClass("slide-3").find('h3').text("changed");
$('.featured-wrapper').removeClass("slide-1");
$('.featured-wrapper').removeClass("slide-2");
}, 12000);
});
.section-background-size{
background-repeat:no-repeat;
background-size:cover !important;
height:100vh;
width:100vw;
transition:1s;
}
.section-one{
background:$slide-2;
height:100%;
width: 33.333%;
background-size:cover;
background-repeat:no-repeat;
}
.featured-work{
height:100vh;
width:100vw;
position:relative;
}
.featured-wrapper{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/vader-portrait1-992x558.jpg');
#extend .section-background-size;
}
.slide-1{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/vader-portrait1-992x558.jpg') no-repeat;
#extend .section-background-size;
}
.slide-2{
background:url('http://i.imgur.com/o7ofCFF.jpg') no-repeat;
content:("test");
#extend .section-background-size;
}
.slide-3{
background:url('http://coolvibe.com/wp-content/uploads/2010/07/star-wars-wallpapers1-992x558.jpg') no-repeat;
#extend .section-background-size;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="featured-work">
<div class="featured-wrapper">
<div class="article-title">
<h2>PROJECTS</h2>
<h3>Interior Design | </h3><span class="city-sky"> City Sky</span> <h3 class="city-title">| Berlin </h3>
</div>
<div class="view-projects">View Projects</div>
<div class="language-change">
<div class="lang english">English</div>
<div class="lang">Chinese</div>
</div>
</div>
</div>

There may be other ways to do this, but you can try loading the image using jQuery, and use the load() method's callback to let you know when it's loaded and fade it in (or display the entire page...)
Something like:
$('#bigImg').load('file_with_img.html', function(){
$('#overlay').fadeOut();
});
#overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#333;z-index:1;}
#loadr{position:absolute;top:45%;left:45%;z-index:2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="overlay"><img id="loadr" src="http://placeimg.com/100/100/aniamsl" /></div>
<div id="container">
<div>This is the image we are waiting for:</div>
<div id="bigImg"></div>
</div>
Reference:
http://api.jquery.com/load/

change the background image of one div when the mouse is over a different div

I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?

You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO

this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle

Creating a Navigation fades to different colors when scrolling to element

I am creating a single page website with a fixed navigation. There are 4 different sections. When the user clicks the link in the navigation, I would like to fade the color of the navigation to match the theme of the section it takes them to. What would be the best way to go about doing this? I've tried many different things, but nothing seems to achieve the look I am going for. -Thanks in advance!

So you will need a couple of things to accomplish this.
Nav layer sitting above other layers
stacked background layers for each section with static background colors
knowledge of current color and new section color
And what you will do with that is to have each section keep track of its color. When the nav for that section is selected, the current layer behind the nav begins to fade out. At the same time, the layer of the new section begins to fade in. This will give the impression of one color fading into another.
edit
jsFiddle Demo
Here is a very rudimentary example of doing this. There should probably be more structure, better styling, and perhaps more management of state in code. However, clicking the links will demonstrate the color fading.
js
$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
$(".pane:visible,.section:visible").fadeOut("slow");
var color = this.getAttribute("data-color");
$("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});
html
<div id="layers">
<div id="navLinks">
<div data-color="red">about</div>
<div data-color="green">contact</div>
<div data-color="blue">overview</div>
<div data-color="orange">links</div>
</div>
<div id="redPane" class="pane"></div>
<div id="greenPane" class="pane"></div>
<div id="bluePane" class="pane"></div>
<div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
<div id="redSection" class="section">about</div>
<div id="greenSection" class="section">contact</div>
<div id="blueSection" class="section">overview</div>
<div id="orangeSection" class="section">links</div>
</div>
css
#layers{
position:relative;
}
#navLinks div{
font-weight:bold;
font-size:110%;
text-decoration:underline;
cursor:pointer;
position:relative;
z-index:1;
}
.section{
display:none;
height:100px;
width:100px;
position:absolute;
}
#redSection{
background-color:red;
}
#greenSection{
background-color:green;
}
#blueSection{
background-color:blue;
}
#orangeSection{
background-color:orange;
}
.pane{
position:absolute;
right:0;
left:0;
top:0;
bottom:0;
display:none;
}
#redPane{
background-color:red;
}
#greenPane{
background-color:green;
}
#bluePane{
background-color:blue;
}
#orangePane{
background-color:orange;
}
#contentArea{
position:relative;
}

mousenter and mouse effect not working properly

Consider this JSFiddle
When I mouseenter on Span1 , a blue bar should appear below the Span1 (same for Span2 and Span3)
But even I mouseenter on Span1 or Span2 or Span3 , blue bar appears only under Span2.
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:100px;
height:2px;
background-color:blue;
margin:0px auto;
display:block;
}
HTML
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
JS
$(document).ready(function(){
$('#span1').mouseenter(function(){
$('#Span1').addClass('under');
});
$('#span2').mouseenter(function(){
$('#Span2').addClass('under');
});
$('#span3').mouseenter(function(){
$('#Span3').addClass('under');
});
$('#span1').mouseleave(function(){
$('#Span1').removeClass('under');
});
$('#span2').mouseleave(function(){
$('#Span2').removeClass('under');
});
$('#span3').mouseleave(function(){
$('#Span3').removeClass('under');
});
});

You have no width on the cells before the hover
Working JSFiddle here: http://jsfiddle.net/F2smc/5/
div.demo div {
display:table-cell;
text-align:center;
width: 33%; // <<< Added this
}
Basically the other 2 cells are zero width so the second row collapses to something very narrow in the middle so it looks like it is only under option 2.
Better example: http://jsfiddle.net/F2smc/29/
You can get the same effect, without specifying an exact % width, by simply adding this CSS instead for the spans (so they do not collapse within their parent divs):
div.demo span
{
width:100%;
}
If you put unique colors on the divs it will become really obvious what is going on. 100% on the div does not mean the divs will use it like in a table. Basically any change that applies a width to the underlining divs/spans will work. Suggest you use Chrome in F12 debug mode to view this type of work as it clearly shows the original elements were all 0 width.
PS. Is really is a bad idea to use ids that vary only in case
On a separate note:
You would not normally hardwire events for each different id in JQuery when they all do roughly the same thing. If you change your ids to be really unique (not just by case) you can do something like:
$(document).ready(function () {
$('.menu').hover(function () {
$('#' + this.id + '-l').addClass('under');
}, function () {
$('span').removeClass('under');
});
});
Which takes the id of the current hovered item, appends something unique then updates the matching item by id.
Working demo: http://jsfiddle.net/F2smc/30/
That should clean things up while retaining your original structure.

For testing i have given text-decoration,you replace that with background-color..
HTML
<div class="demo">
<div id='one' class="hover">Span 1</div>
<div id='two' class="hover">Span 2</div>
<div id='three' class="hover">Span 3</div>
</div>
<div class="demo">
<div><span id='Span1'></span></div>
<div><span id='Span2'></span></div>
<div><span id='Span3'></span></div>
</div>
CSS
div.demo {
display:table;
width:100%;
}
div.demo div {
display:table-cell;
text-align:center;
}
.under {
width:auto;
height:1px;
text-decoration:underline;
margin:0px auto;
display:block;
}
JQuery
$(document).ready(function(){
$('.hover').hover(function(){
var id=$(this).attr("id");
$('#'+id).addClass('under');
},function(){
$('.hover').removeClass('under');
});
});

Working DEMO
Try this
I have editted your html and css
<div class="demo">
<div id='span1'>Span 1</div>
<div id='span2'>Span 2</div>
<div id='span3'>Span 3</div>
</div>
<div class="demo">
<span id='Span1'></span>
<span id='Span2'></span>
<span id='Span3'></span>
</div>
and add this to your css
div.demo span {
display:table-cell;
width:100px;
}
or
Try this
Working DEMO
without changing any html and css
just add width:100px; to
div.demo div {
display:table-cell;
text-align:center;
width:100px;
}
Hope this helps,thank you

jquery animate: two divs, one move out of screen, the other one move in

I want to implement an animation, image there are two divs
D1 | D2
At first D2 is in screen(with 100% width), D1 is invisible(outside of screen).
I want an animation that, D2 moves out to right, outside of screen.
D1 moves from left to right, finally occupies the screen(replace D1).
If you saw how Groupon animate when register user, you may understand what I mean...
Thanks.

EDIT Ok.. I wanted to make a general solution (by animating the wrapper margin). Clearer code and more customizable => http://jsfiddle.net/steweb/rWbFw/
markup:
<div id="mask">
<div id="wrapper">
<div class="full" id="div1">hey there I'm the first div</div>
<div class="full" id="div2">hey there I'm the second div</div>
<div class="full" id="div3">hey there I'm the third div</div>
<!-- add as many 'full' divs as you want -->
</div>
</div>
css:
#mask{
width:100%;
overflow:hidden;
position:relative;
}
#wrapper{
width:100%;
height:300px; /* optional! */
}
.full{
float:left;
height:300px; /* optional! */
}
#div1{
background:green;
}
#div2{
background:white;
}
#div3{
background:red;
}
js:
var utils = {
maskWidth : $('#mask').width(),
currIndex : 0,
setWidths : function(){
//setting maskWidth
utils.maskWidth = $('#mask').width();
//setting wrapper width
$('#wrapper').css('width',$('.full').length * utils.maskWidth);
//setting 'full div' width
$('.full').each(function(index){
$(this).css('width',utils.maskWidth);
});
//setting curr wrapper margin (for window resize)
$('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));
}
}
$('.full').click(function(){
utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
if($(this).next().size() == 0){//if is the last, reset
utils.currIndex = 0;
$('#wrapper').animate({'margin-left':0});
}else{ //animation, negative margin of the wrapper
$('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
}
});
$(window).resize(function() { //on resize, reset widths and margins
utils.setWidths();
});
utils.setWidths(); //first time, set everything
-- OLD --
You could start with something like this: http://jsfiddle.net/steweb/dsHyf/
markup:
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
css:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:300px;
}
.full{
position:absolute;
width:100%;
height:300px;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
js:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});

I have tried this with jQuery timer plugin & it is working very well with localhost.
You need to import : jQuery & jQuery Timer Plugin
And then just implement this :
<script type="text/javascript" src="jquery-1.5.js"></script>
<script type="text/javascript" src="jquery.timers-1.2.js"></script>
<script type="text/javascript">
var i=0,j=100;
$('#1').css('width',"0%");
$('#2').css('width',"100%");
l2r();
function l2r(){
var i=0,j=100;
$(document).everyTime(2, function() {
i+=0.10;
$('#1').css('width',i+"%");
j -= 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("r2l()", 4000);
}
function r2l(){
var i=100,j=0;
$(document).everyTime(2, function() {
i-=0.10;
$('#1').css('width',i+"%");
j += 0.10;
$('#2').css('width',j+"%");
}, 1000);
setTimeout("l2r()", 4000);
}
And your HTML will be :
<div style='width:100%;'>
<div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
<div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
</div>
Enjoy & correct me if I am wrong.
EDIT : It seems the problem is still with Different browser ! The timeout should be 4000 (as it is set) for Chrome & 10000 for Fire Fox. Let me edit code to recognize browser & set Time Out later, very soon.