Develop Reference

Replacing and restoring div html with jquery

I have a couple of functions, the first replaces the contents of a div the second restores the original div. The problem is because I'm using the replaceWith method, the second div no longer exists if I try to call it a second time. Is there a better way to do this? I've experimented creating a variable that stores the contents of the second div so I can resuse it, but could not get it to work.
The code that I have is:
$(document).ready(function() {
$('#trigger_adults').click(function() {
var mainClone = $("#main-content").clone();
$('#main-content').fadeOut('fast', function() {
$('#main-content').replaceWith($('#adults'));
$('#slider-sec').slideUp('slow');
$('#adults').fadeIn('fast');
$(window).scrollTop(0);
});
$('#return').click(function() {
$("#adults").replaceWith(mainClone.clone());
$('#adults').fadeOut('fast');
$('#slider-sec').slideDown('slow');
});
});
});
Thanks in advance!

You could have both contents in the same div and toggle the visibility of their parent divs. Use javascript just to toggle the wrapper's class.
$('#toggle').click(function() {
$('#wrapper').toggleClass('init-state new-state');
});
#wrapper {
border:1px solid #d8d8d8;
}
.init-state #new,
.new-state #init { display:none; }
.inner {
padding:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="wrapper" class="init-state">
<div id="init" class="inner">Initial Content</div>
<div id="new" class="inner">New Content</div>
<button id="toggle" type="button">Toggle</button>
</div>

From the docs
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page
you either need to manually set the display style property back to its original value, or call jQuery's .fadeIn() function which will do the opposite of .fadeOut()

Javascript - simplifying a bunch of long repetative hide/show functions

Things have gotten out of hand for me. What started off as the simplest solution has ballooned to the point where it is no longer manageable. I need to come up with a way to simplify a process.
Currently I have a map with pins denoting specific countries world-wide. As the mouse hovers over a pin, a hidden div appears. When you mouse over another one, the previous div disappears and a new one opens. I started with like 5 of these and it wasn't an issue but I keep getting requests for more and want to manage the script in a different way now.
$('#PH1').mouseenter(function () {
$('#BO2').hide();
$('#US2').hide();
$('#UK2').hide();
$('#CH2').hide();
$('#BZ2').hide();
$('#QC2').hide();
$('#OT2').hide();
$('#VA2').hide();
$('#RU2').hide();
$('#JT2').hide();
$('#HK2').hide();
$('#SH2').hide();
$('#BJ2').hide();
$('#XI2').hide();
$('#BE2').hide();
$('#AT2').hide();
$('#FR2').hide();
$('#MX2').hide();
$('#PH2').show();
});
$('#PH1').click(function (e) {
e.stopPropagation();
});
$('#mint').click(function () {
$('#PH2').hide();
});
In this instance div id #PH1 is the pin, when the mouse enters the div it hides all of the other div's #**2 and displays the one related to #PH1, which is #PH2
This list is repeated for each DIV. Every time I need to add a new DIV I need to make each existing list longer as well as create a new one. How can this process be made much simpler?

Thats not a right way to do this, you should use classes for this. But their is a wayaround for this all you need to is add a class add class ele1 to all #**1 and ele2 to all #**2:
then
$('.ele1').mouseenter(function () {
$(".ele2").hide();
var id = this.id;
var newId = id.substring(0,2)+"2";
$("#"+newId).show();
});

Make a loop:
var all= ['#BO2', '#US2', '#UK2', '#CH2', '#BZ2', '#QC2', '#OT2', '#VA2', '#RU2', '#JT2', '#HK2', '#SH2', '#BJ2', '#XI2' , '#BE2', '#AT2', '#FR2', '#MX2', '#PH2']
all.forEach(function (i){
$(i).hide();
});

Use a class selector on all of the DIVs you want to hide/show instead of an ID.
First, add a shared class to all DIVs so we target all of them by class.
HTML: class="hidden-divs"
jQuery: $('.hidden-divs').hide();
Then show the relevant DIV.
$('#PH2').show();
Using your first example, it would look like this:
$('#PH1').mouseenter(function () {
$('.hidden-divs').hide();
$('#PH2').show();
});

You can use jquery to hide multiple divs if you can select them. For example, suppose you have a common class ".map_divs" on all your divs, you could easily do:
$(".map_divs").hide();
On a side-note, you could solve all this on CSS, using :hover. For example:
.map_divs:hover {
display: block;
}

If you can edit the div's yourself (if it is not generated by a library) I would do it like this.
Add a common class to all your divs. Then on each div, add a data attribtue to the related id.
<div class="pin" id="PH1" data-rel="PH2"></div>
Then you can have a simple function like this:
$(".pin").mouseenter(function() {
var relatedId = $(this).data("rel");
$(".pin[id$='2']").hide(); // Hide all pins with id ending in 2
$("#" + relatedId).show() //show PH2
})

Using classes might be a better option here. You can then just attach the mouseenter event on document ready to all pins. This will work for an infinite number of pins too.
$('.pin').mouseenter(function () {
$('.popup').removeClass('show');
var id = this.id.split('_')[1];
$('#popup_' + id).addClass('show');
});
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.popup.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>

If your div element is ordered like below, you can get the same result using css only, which will increase speed and overall experience (especially on phones and tablets).
When "hover" the yellow squares, the popup will be visibible even when "hover" the popup.
.pin {
width:30px;
height:30px;
margin-bottom:20px;
background-color:red;
}
.popup {
display:none;
width:100px;
height:100px;
margin-bottom:20px;
background-color:blue;
}
.pin:hover + .popup {
display:block;
}
.pin.type2 {
background-color:yellow;
}
.pin.type2:hover .popup {
display: inline-block;
margin-top: 30px;
}
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>
<div id="pin_3" class="pin type2"><div id="popup_3" class="popup"></div></div>
<div id="pin_4" class="pin type2"><div id="popup_4" class="popup"></div></div>

Print specific div without parent div

What i'm trying to accomplish is this:
I have a parent div which has multiple childs. I don't want to display the parent only the children. If I do this:
.navbar-default, #filters, #options {
display: none;
}
div#filter_date {
display: block;
}
Then it just doesn't show the the parent div with its children.
I have tried to make the question as easy as possible.

You cannot accomplish this the way you anticipate, as styles are inherited.
Your only solution would be to override the print styles for the parent to give the impression it was being hidden, e.g set any border to none, remove any background colors or images, remove padding, margin etc. Take whatever styles you have applied for the parent, and in your print CSS override them with properties which will provide the illusion the parent isnt in place.
Otherwise you are attempting to change the structure of your DOM with CSS alone, which is not possible.

Mmm, I think you can use jQuery .unwrap if I understand properly what you're trying to achieve.
Adapted from jQuery's own example...
<div class="yellow">
<p class="in-out">Am I in the </p>
<p class="in-out">div or out</p>
<p class="in-out">the div</p>
</div>
....
<button>Toggle</button>
---JS---
var pTags = $( ".in-out" );
$( "button" ).click(function() {
if ( pTags.parent().is( ".yellow" ) ) {
pTags.unwrap();
}
else {
pTags.wrap( "<div class='yellow'></div>" );
}
});
....
---CSS---
.yellow
{
background-color: yellow;
}
See example here...http://jsfiddle.net/richf/8LvJZ/
Obviously you don't need the button in your case.

Display element only if another element exists

How would I go about hiding a div and only displaying it if another div existed on a page? I'm guessing jquery or js would be the way to go....
<style type="text/css">
.always-here {
display:none;
}
</style>
<div class="im-here">This div exists on this particular page!</div>
<div class="always-here">This div is always here but has the style
display: none unless a div with the class "im-here" exists.</div>

For your current current html you can do
.always-here {
display:none;
}
.im-here ~ .always-here{
display:block;
}
this will only work if .always-here and .im-here are siblings and .im-here comes before.
http://jsfiddle.net/BKYSV/ - .im-here present
http://jsfiddle.net/BKYSV/1/ - .im-here absent

$(document).ready(function(){
if($(".im-here").length > 0)
{
$(".always-here").show();
}
});
here is the code
Click Here!

Try this:
if($(".im-here").length)
$(".always-here").show();

how to change a property of the first child

I am able to change the background-color of this element:
<div onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;">
</div>
But I want to change the color of the first child, which I assumed should work like this:
<div onmouseover="this.firstChild.style.backgroundColor='blue'" onmouseout="this.firstChild.style.backgroundColor='red'" style="background-color:green; width:100px; height:40px;">
<div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div>
</div>
But it does not work. What is wrong? How can I change the style of the firstChild?
PS: I later want to use display=block and none and some other propertys (not just style) for the child. The color was just for testing.

As "the system" mentioned, you are targeting a text node rather than an element node. Try using children[0] instead of firstChild.
jFiddle here

You would need to use .firstElementChild, or you'd need to get rid of the formatting whitespace. That whitespace becomes a text node, which is the .firstChild.
The .firstElementChild property isn't supported by some older browsers, so if you're supporting those, you'd need to shim it with a function.
<div onmouseover="changeColor(this, 'blue')" onmouseout="changeColor(this, 'red')" style="background-color:green; width:100px; height:40px;">
<div style="background-color:white; height:10px; width:10px; margin:20px;">This is the first child, I think.</div>
</div>
function changeColor(el, color) {
firstElemChild(el).style.backgroundColor=color;
}
function firstElemChild(el) {
if (el.firstElementChild)
return el.firstElementChild;
el = el.firstChild
while (el && el.nodeType !== 1)
el = el.nextSibling;
return el;
}