Develop Reference

Javascript - load an image before the rest of the page

I'm currently building a website and have an image as the header, but when I load the page it will jump half way down the page, load the image and then jump back up. How can I make the image load in first to prevent it from jumping?
HTML:
<div class="refocus" id="hero-header">
<div class="refocus-img-bg"></div>
<div class="refocus-img focus-in">
HTML:
</div>
<div class="refocus-text-container">
<div class="t">
<div class="tc">
</div>
</div>
</div>
</div>
<div class="row">
<div class=".col-md-6">
<div id="section1">
<div id = "sub-text">
<h1>Hello</h1>
<br>
<h2>Hello</h2>
<h3><br>Hello.</h3>
</div>
<div id="image">
<img src="images/aboutme.png"/>
</div>
</div>
<div id="buttoncontainer">
<div id="totimeline">▼</div>
</div>
</div>
</div>
Here's a JSFiddle to replicate this.
Thank you in advance.

You can do one of two things for this.
1) Set the dimensions of your image inline. This is actually a recommended method of preventing the very thing you are experiencing where the page jumps around after images load in. By setting the dimensions inline, the browser will already know how tall the image needs to be and will reserve the space for it before it even finishes loading in.
Example:
<img src="http://placehold.it/350x150" height="150" width="350">
2) If you don't prefer to set the dimensions inline, it seems you could also just set the height in your styles ahead of time and that would do the trick as well.
Example:
.refocus-img{
height:150px;
}

Hammer.js events on dynamically added HTML

I have this HTML structure:
<div id="snaps">
<div class="snap_item">
<div class="snap_item_following_info">
<img class="snap_item_following_img" src="res/stat/img/user/profile/small/1.fw.png" alt="#JohnDoe" />
<a class="snap_item_following_name" href="#">#JohnDoe</a>
</div>
<img class="snap_img" src="res/stat/img/user/snap/43/2.fw.png" alt="#ErolSimsir" />
<div class="like_heart"></div>
<div class="snap_info">
<div class="snap_text">
Image caption
<a class="snap_text_hashtah" href="#">#LA_city_trip</a>
</div>
<div class="snap_sub_info">
<span class="snap_time">56 minutes ago</span>
<div class="like inactive_like">
<div class="like_icon"></div>
<div class="like_no_active">5477</div>
</div>
</div>
</div>
</div>
</div>
The div '#snaps' is a static div, which holds all the '.snap_item' elements which are added with the JQuery .html() function. So the '.snap_item' elements are dynamically added to the div '#snaps', like so:
<div id="snaps"><!-- static div that holds the dynamic elements -->
<div class="snap_item"><!-- dynamically added element -->
<img class="snap_img" src="..." alt="..." /><!-- when this element is double tapped, the event should be fired -->
</div>
</div>
When the user double taps on '.snap_img', some stuff has to happen. The element '.snap_img' is inside the '.snap_item' element.
What I have so far is:
$('#snaps').find('.snap_item').hammer().on({
doubletap : function(event){
alert("doubletap!");
}
});
This doesn't work at all. The on() function should allow me to fire events on dynamically added HTML, but this code doesn't work. I have this code from this SO question
I have included hammer.js, jquery_hammer_plugin.js and query.specialevent.hammer.js. So all the necessary JS files have been included, but still no luck.
How do I make this work?

Okay, so I've solved the issue by using this code:
$('#snaps').hammer({domEvents:true}).on("doubletap", ".snap_img", function() {
alert("doubletap!");
});
So, whoever is having an issue with firing Hammer touch events on dynamically added HTML, this is the solution!!!
Thanks to everyone who (tried) to help! :)

I want to show the slider div until the mouse is over the container div with many inner divs in jquery?

I have a container containing two divs A nd B
A contains few img tags while B contains a slider ..
The structure is as follows
<div id="container">
<div id="mainCHimage">
<img id="favIcon">
<img id="mainImg">
</div>
<div id="imageSlider">
<img class="arrow left">
<div class="images" id="images_zazzle_tshirts">
<div class="imageHolder catMatchB" style="display: block;">
<a href="http://productUsage.php?prodId=39" target="_blank">
<div class="sliderImgWrp">
<img src="../shop/uploads/large/1367904170_link-10351582.jpg">
</div>
</a>
</div>
</div>
<img class="arrow right">
</div>
</div>
I just want the imageslider shud stay until i am mouseout of whole container div..But inner div comes and are conflicting .. i have written the jquery functions ..U cn check in my demo ... Plz help me out...
Not working demo

Do not use mouseout or mouseover events but mouseenter and mouseleave - they trigger only if you enter/leave the element you attached them to; 100% no conflicts.

replaceWith(); JQuery function

I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!

You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two

try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});

Toggle whichever element is clicked

I am using the toggle() with jQuery and I have a sidebar on my page and each header is
<h2 class="sidebar-header">
One section of my code will look like:
<div class="sidebar-section">
<h2 class="sidebar-header">SUBSCRIBE</h2>
<p class="sidebar">Make sure you subscribe to stay in touch with the latest articles and tutorials. Click on one of the images below:</p>
<div class="rss-icons">
<img src="http://gmodules.com/ig/images/plus_google.gif" width="62" height="17" alt="Add to Google Reader or Homepage" class="feed-image"/>
<img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo3.gif" alt="Add feed to My Yahoo" width="62" height="17" class="feed-image" />
<img src="http://www.newsgator.com/images/ngsub1.gif" alt="Subscribe in NewsGator Online" class="feed-image" height="17" />
</div>
<hr />
<p class="sidebar feed">Don't have those? Grab the RSS url.</p>
<p class="sidebar delicious">Make sure you add me to delicious! </p>
</div>
They are each wrapped in those DIV elements. I am trying to make it for if you click the header, it will shrink up the content. I know toggle can do that, but if I make it for each "sidebar-header", you will click any one element on the page and it will hide them all, how can I do this?

Try something like this:
Suppose you have the following code:
<div class="topdiv">
<h2 class="header">Header 1</h2>
<div class="somecontent">
This is the content
</div>
</div>
<div class="topdiv">
<h2 class="header">Header 2</h2>
<div class="somecontent">
This is the content
</div>
</div>
Now, say that when you want to click on a header, the content of that header is displayed / hidden:
$(".header").click(function () {
$(this).parent(".topdiv:first").find(".somecontent").toggle();
});
This way, only the content of the particular header will be toggled, and not the rest.
Now you can analyze the code I have written for you, and apply it in your own context.

Try this:
nextAll
$(".sidebar-header").click(function() {
$(this).nextAll().toggle();
});