Develop Reference

How do I prevent two divs from jumping around my webpage when it first loads?

Thanks for trying to help! I'm having an issue with the following code when the page initially loads. The div class 'highlights', which contains the divs 'box' and 'box-2', jumps around the page when loading. I suspect is has something to do with the social media buttons running javascript above the divs but cannot figure out how to get everything to stay still. Here is a link to the site. Thank you all for helping!!
<div class="buttons">
<div class="fb-share-button" data-href="http://www.powerrankingsguru.com/MLB/2015-MLB- power-rankings/week-18.html" data-layout="button_count">
</div>
<div class="twitter-button">Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)) {js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="g-plus" data-action="share" data-annotation="bubble" data- href="http://www.powerrankingsguru.com/MLB/2015-MLB-power-rankings/week-18.html"> </div>
</div>
<div class="highlights">
<div class="box">
<div class="box-header"><p>What to Watch</p></div>
<div class="box-content">
<div class="game-details">
</div>
<div class="game-overview">
<div class="away-team">
<div class="away-team-logo">
<img src="../../Images/MLB/Los_Angeles_Dodgers_75px.gif">
</div>
<div class="record">
<h6>Dodgers</h6>
<h6 class="lighter">(60-45)</h6>
</div>
</div>
<div class="home-team">
<div class="home-team-logo">
<img src="../../Images/MLB/Pittsburgh_Pirates_75px.gif">
</div>
<div class="record">
<h6>Pirates</h6>
<h6 class="lighter">(61-43)</h6>
</div>
</div>
<div class="symbol">#</div>
</div>
</div>
<div class="date">
<h4><span class="left">Fri Aug 7th - Sun Aug 9th</span></h4>
</div>
</div>
<div class="box2">
<div class="box2-header"><p>Biggest Movers</p></div>
<div class="rise">
<div class="rise-up"><img src=../../Images/arrowGW.gif></div>
<div class="rise-number"><p>5</p></div>
<div class="rise-team"><img src="../../Images/MLB/Toronto_Blue_Jays_75px.gif"></div>
</div>
<div class="fall">
<div class="fall-down"><img src=../../Images/arrowRW.gif></div>
<div class="fall-number"><p>5</p></div>
<div class="fall-team"><img src="../../Images/MLB/Atlanta_Braves_75px.gif"></div>
</div>
</div>
</div>

If you're okay with using javascript you could hide your container box with display: hidden and then in a javascript onload function you would set the display back to block.
Div:
<div id="highlightDiv" class="highlights" style="display: hidden">
...
</div>
onload:
window.onload = function() {
document.getElementById("highlightDiv").style.display = "block";
}

How to affect a specific div in jquery

this is my javascript:
$(document).ready(function(){
$('.lroom ,.rroom').click(function(){
$(this).toggleClass('ROOMon');
});
$('.AC').click(function(){
$(this).toggleClass('ACon');
});
});
this my html:
<div id="main">
<div class="side">
<div class="rroom">
<div class="AC right"></div>
</div>
<div class="rroom">
<div class="AC right"></div>
</div>
<div class="rroom">
<div class="AC right"></div>
</div>
</div>
<div class="side">
<div class="lroom">
<div class="AC left"></div>
</div>
<div class="lroom">
<div class="AC left"></div>
</div>
</div>
</div>
when I press on AC div , it takes affect on the AC and on the lroom too.
I want that this will affect only the specific AC that I press.
ROOMon and ACon are calsses that changes the background-color
thanks

It's difficult to know exactly what you are looking for from your question but this might help:
Here is a fiddle: http://jsfiddle.net/mb8zksaa/
<div class="myDiv"> This is div 1 </div>
<div class="myDiv"> This is div 2 </div>
$(".myDiv").on("click", function(){
alert("Contents: " + $(this).html()) ;
});
Here's two divs, whatever one you click on will display the contents of that div on the screen

How to show hidden content according to clicked value jquery?

sorry for the midunderstanding. I meant index, not value. Sorry.
I am wondering if there is a way to use the value of the shown content ".wbox" of this jsfiddle example to coincide with the hidden value, that when clicked will show the hidden content?
For example, When Cont 1 is clicked, hidden box 1 shows. When Cont2 is clicked, hidden box 2 shows... and so forth.
Here is my fiddle: http://jsfiddle.net/kqbLtn8b/1/
HTML:
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
jquery:
var boxVal = $('.box').val();
Thanks for any help!
What I am really trying to do is shorten the code from something like this:
$('.one').on('click', function(){
$('.b-one').show()
});
and so forth with the rest

Try this : use index of content div to show hidden-box
$(function(){
$('.content').click(function(){
var index = $(this).index();
$('.hidden-content .hidden-box:eq('+index+')').show();
});
});
And make change in your css, instead of hiding hidden-content div you need to hide hidden-box. So change your
.hidden-content{
display:none;
}
to
.hidden-box{
display:none;
}
Demo

If you want to stick to the current HTML you have, it is going to be cumbersome and dirty since there are 2 ways to handle that scenario.
Translate a string like "Cont 1" into "one", "Cont 2" into "two". It's all well and good till nine but what about 100 -> hundred? Or even thousand?
The other approach is instead of naming your hidden boxes as "b-one", "b-two", you can name them "b-1", "b-2", "b-3". That way you can just detect the clicked element and then wipe of the "Cont " part and then use the remainder of the string to get the hidden part's class.
Both the above cases will still give you a very very dirty code since you have to get the .html() of the clicked element and stip of h1 tags.
So my suggestion would be to follow the below method.
HTML:
<div class="box">
<div class="content one" rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-1">one</div>
<div class="hidden-box b-2">two</div>
<div class="hidden-box b-2">three</div>
</div>
JS:
$('.content').on('click', function(){
var divNum = this.rel;
$('.b-'+divNum).show();
});

I recommend restructuring your HTML in the following way:
<div class="box">
<div class="content" id= "c1">
<h1>Cont 1</h1>
</div>
<div class="content" id= "c2">
<h1>Cont 2</h1>
</div>
<div class="content" id= "c3">
<h1>Cont 3</h1>
</div>
<div class="hidden-content">
<div class="hidden-box" id= "h1">one</div>
<div class="hidden-box" id= "h2">two</div>
<div class="hidden-box" id= "h3">three</div>
then use this as your jquery code:
$('.content').click(function(){
var num = $(this).attr('id').split("c")[1];
$("#h"+num).show();
});
and by the way, change your css too:
.hidden-content{
/* display:none;*/
}
.hidden-box{
width:35px;
height:35px;
border:1px solid black;
display:none;
}

This is another way (although not so reliable, as it would break if you change your classes):
$(function () {
$('.content').on('click', function () {
var className = $(this).attr('class').replace('content', '').trim();
$('.hidden-box').hide();
$('.b-' + className).show();
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="content one">
<h1>Cont 1</h1>
</div>
<div class="content two">
<h1>Cont 2</h1>
</div>
<div class="content three">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one">one</div>
<div class="hidden-box b-two">two</div>
<div class="hidden-box b-three">three</div>
</div>
UPDATE
Based on #Regent comment which I agree to, this would be a more reliable way because it will work even if you change your markup.
You just need to add a data attribute to your markup that will be used to match elements:
$(function () {
$('.content').on('click', function () {
var sel = $(this).data('rel');
$('.hidden-box').each(function () {
$(this).toggle($(this).data('rel') == sel);
});
});
});
.hidden-box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="box">
<div class="content one" data-rel="1">
<h1>Cont 1</h1>
</div>
<div class="content two" data-rel="2">
<h1>Cont 2</h1>
</div>
<div class="content three" data-rel="3">
<h1>Cont 3</h1>
</div>
</div>
<div class="hidden-content">
<div class="hidden-box b-one" data-rel="1">one</div>
<div class="hidden-box b-two" data-rel="2">two</div>
<div class="hidden-box b-three" data-rel="3">three</div>
</div>

fadeOut() only fades out the first element

By default, I have several DIVs hidden and then I fade them in when the user clicks on a certain button. That works fine but when I try to close a .holder DIV using a span within said .holder DIV, only the first one works. When I click the others, nothing happens. I get no error or any sort of visual feedback whatsoever.
The markup:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls" id="close">X</span>
<span class="controls" id="minimize">_</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
The jQuery:
$(document).ready(function() {
$('#close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
What exactly am I doing wrong here? I'm using jQuery 1.10.2 if that makes any difference.
I'd demo the code on jsFiddle but is seems to be down atm.

You can not have the same id of two element on the page. If you want to do that give it as a class name like -
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the Jquery like -
$(document).ready(function() {
$('.close').click(function() {
$(this).parents('.holder').fadeOut(250);
});
});
Hope this will help.

Here is how it should be:
<div class="holder" id="window_one">
<div class="title_bar">
<p>Window 1</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
<div class="calculator" id="window_two">
<div class="title_bar">
<p>Window 2</p>
<div class="control_holder">
<span class="controls close">X</span>
</div>
</div>
<div class="interface">
<p>Testing123</p>
</div>
</div>
and the JavaScript:
$(document).ready(function() {
$('.close').click(function(e) {
$(this).parents('.holder').forEach(function(){
$(this).fadeOut(250);
});
e.preventDefault();
});
});

JQuery toggle element based on click of another div

I have the beginnings of what I would like working but am afraid I'm not headed down a DRY path with my line of thinking.
Right now if you click any of the below divs it will hide or show a icon checkmark next to all the headers below.
I want only when a specific div is clicked to display the icon checkmark to the relevant header down the page.
What method should I use in my approach? The way I have it seemingly won't make sense down the road. Thanks for your attention and thanks for taking a look.
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside">
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok"></i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok"></i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
<script>
$('div.frustrate_topside').click(function(){
$('i').toggle();
});
</script>

Here's a working JS fiddle for what you're asking for: http://jsfiddle.net/sTve6/1/
I don't have your file set up with the icons/images, so I used placeholder text of 'o' for each icon, and made the assumption that your icons start out hidden.
HTML:
<div class="row container">
<div class="row offset1">
<div class="span3 frustrate_topside" for='q1'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q2'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
<div class="span3 frustrate_topside" for='q3'>
<div>
<p>Click here to only show icon-ok element next to relevant anecdotes!</p>
</div>
</div>
</div>
</div>
<div class="offset2 span6" id='container'>
<h5 class="faq_header"><i class="icon-ok" id="q1">o</i> Hey, it would be cool if..</h5>
<div class='content'>trouble</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q2">o</i> The kick is up! And..</h5>
<div class='content'> 80% completion rate.</div>
<hr>
<h5 class="faq_header"><i class="icon-ok" id="q3">o</i> Third anecdote</h5>
<div class='content'>joke on me</div>
</div>
CSS:
.icon-ok
{
display:none;
}​ ​
JS:
$('div.frustrate_topside').click(function(){
var elt = $(this).attr('for');
$("#" + elt).toggle();
});​