Develop Reference

Hide div with jquery and cookies not hiding properly

So I'm using this script:
$(document).ready(function() {
if ($.cookie('noShowWelcome')) $('.welcome').hide();
else {
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="welcome">
</div>
To show the div "welcome" only the first time a user visits my website and then to hide it forever.
For the cookies I used jQuery.cookie javascript as suggested in this post:
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js
Everything works great. The only problem is that I still can not figure out how to avoid the hidden div flashing for a second and then hiding when users visit my website after closing the div "welcome". Can somebody help me with that?

For the FOUC, what you need to do is to use a small script to convert everything from CSS / Properties into JavaScript. For browsers that do not support hidden property, you can use:
$(function () {
$(".hide-me-by-js").hide().removeClass("hide-me-by-js");
// Write your other conditional logic here...
});
.hide-me-by-js {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hide-me-by-js">Initially Hidden</div>
If you want to leverage the new hidden property (at a cost of browser compatibility), use the following:
$(function () {
$("[hidden]").hide().removeAttr("hidden");
// Write your other conditional logic here...
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div hidden>Initially Hidden</div>
Solution
In your case, it would be typically this:
$(function() {
$(".hide-me-by-js").hide().removeClass("hide-me-by-js");
// Write your other conditional logic here...
if ($.cookie('noShowWelcome'))
$('.welcome').hide();
else {
$('.welcome').show();
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
.hide-me-by-js {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/carhartl/jquery-cookie/master/src/jquery.cookie.js"></script>
<div class="hide-me-by-js welcome">Initially Hidden</div>
Note: The demo will not work because the stack snippets iframe is sandboxed. Please just use the code and check in your system.
Added a Fully Working Code Demo.

Give it attr "hidden" by default and just show it when you need to.
$(document).ready(function() {
if (!$.cookie('noShowWelcome')){
$('.welcome').show();
$("#close-welcome").click(function() {
$(".welcome").fadeOut(1000);
$.cookie('noShowWelcome', true);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome" style="display:none;">
Welcome
</div>

DIV content hide/show based on URL

In html page am having an div-reportControlPanel as below . I have included another div-reportControlPanel1 as same with different id .
<div id="reportControlPanel" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr"></div>
</div>
Here Am show/hide the div's based on url am triggering .
if(prptName == "css.prpt")
{
alert("if");
document.getElementById("reportControlPanel").style.display = 'none';
document.getElementById("reportControlPanel1").style.display = 'block';
}
But as am using same sub Div-promptPanel under two different div my content is not loading properly . promptPanel is pentaho system used div. I am trying to have an another div to modify some css for my prpt.
Thanks.

To reiterate what Moishe said to you already: id are meant to be unique. You currently have two promptPanel id's, which means the second one will likely never be called. Now, you could use javascript, but with minimal knowledge of what your code looks like you could use a simple hash url + some basic css.
$(document).ready(function() {
$('a').click(function() {
$('#url').html($(this).prop('href'));
});
});
div.pentaho-rounded-panel-bottom-lr {
display: none;
}
div.pentaho-rounded-panel-bottom-lr .pentaho-rounded-panel-bottom-lr {
display: block;
}
:target {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="url"></div>
"Open" panel 1
"Open" panel 2
<div id="reportControlPanel1" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the first control panel.
</div>
</div>
<div id="reportControlPanel2" class="pentaho-rounded-panel-bottom-lr pentaho-shadow">
<div id="promptPanel" class="pentaho-rounded-panel-bottom-lr">
this is some text in the second control panel
</div>
</div>

Jquery - Windows Load how to keep longer

I have one simple questions i want to keep longer to show but what i try not working. i making something wrong probably.
My part of html
<div id="preloader">
<div id="status">
<p class="center-text">
test <br>test <img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
Js my part
// JavaScript Document
(function ($) {
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(400).fadeOut("medium");
});
}(jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader">
<div id="status">
<p class="center-text">
test<br>test<img src="images/myemail.gif">
<em>test</em>
</p>
</div>
</div>
I want to keep more longer preloader and status after load. I was settimeout or add to hide and show ready functions but nothing change it
Thank you

You used fade out for div#status, the div#preloader still there but you didn't see any after div#status fade out.
I suggest you should
$(window).load(function() {
setTimeout(function() {
//$("#status").fadeOut();
$("#preloader").fadeOut("medium");
}, 400);
});

If you want the div#preloader to remain on screen for longer, then just remove the fade out of div#status:
$(window).load(function() {
$("#preloader").delay(400).fadeOut("medium");
});

jQuery show div only if has class

I have some problems with show/hide element. I have 2 popups on one page and I need hide one popup if another popup has class.
For example:
<body class="home">
<div class="popup main"></div>
<div class="popup"></div>
</body>
So, if body.home has .main I need to show only .main popup and hide or remove another .popup.
I'va tried
if ($('.home').find('.main')) {
$('.home').find('.main').show();
$('.home').find('.popup').remove();
}
But it does not working as I need, because in some reason I'll have code only with one popup block
<body class="home">
<div class="popup"></div>
</body>

Just try this,
if($(".popup").hasClass('main')){
$(".popup").hide();
$(".main").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body class="home">
<div class="popup main">main</div>
<div class="popup">another</div>
</body>

$( '.home .popup' ).not( ".main" ).remove();

You may want something like this:
$('.popup.main').length &&
$('.popup').show().not('.main').remove() ||
$('.popup').show();
JSFiddle
The above code is basically a "shortcut" of this:
// if there's a popup with class .main:
if($('.popup.main').length){
// show it:
$('.popup.main').show();
// and remove the one without class .main:
$('.popup').not('.main').remove();
// else, if there's no popup with class .main:
}else{
// show the .popup:
$('.popup').show();
}

If you want to show/hide element, use jQuery.hide() or jQuery.show(). If you use jQuery.remove() then u don't have chance to do it again because it was removed from DOM tree.

check with hasClass()
if ($('.home .popup').hasClass('main')) {
$('.home .popup').hide();
$('.home .main').show();
}
This will hide all popups, then show only that has .main class
Working pen
Edit
ok this in not working when .home has only one child.
Try solving this with css
.home .popup:not(.main) {
display: none;
}
.home .popup:only-child {
display: block !important;
}
with this code you only have to add/remove .main class to manage visibility
Working pen with css

How to show the child div on mouse hover of parent div

I have a number of parent divs (.parent_div), which each contain a child div (.hotqcontent) where I output data from my database using a loop.
The following is my current markup:
<div class="content">
<div class="parent_div">
<div class="hotqcontent">
content of first div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of second div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of third div goes here...
</div>
<hr>
</div>
<div class="parent_div">
<div class="hotqcontent">
content of fourth div goes here...
</div>
<hr>
</div>
</div>
What I would like to achieve is when a user hovers / mouseovers a parent div, the contents of the child div contained within should be revealed.
To achieve this I wrote the following jQuery script but it doesn't appear to be working. It's not even showing the alert!
<script>
$(document).ready(function() {
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$('.hotqcontent').toggle();
});
});
});
</script>
How can I modify or replace my existing code to achieve the desired output?

If you want pure CSS than you can do it like this....
In the CSS below, on initialization/page load, I am hiding child element using display: none; and then on hover of the parent element, say having a class parent_div, I use display: block; to unhide the element.
.hotqcontent {
display: none;
/* I assume you'll need display: none; on initialization */
}
.parent_div:hover .hotqcontent {
/* This selector will apply styles to hotqcontent when parent_div will be hovered */
display: block;
/* Other styles goes here */
}
Demo

Try this
$(document).ready(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});
Or
$(function() {
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
});
});

You can use css for this,
.parent_div:hover .hotqcontent {display:block;}

This can be done with pure css (I've added a couple of bits in just to make it a bit neater for the JSFIDDLE):
.parent_div {
height: 50px;
background-color:#ff0000;
margin-top: 10px;
}
.parent_div .hotqcontent {
display: none;
}
.parent_div:hover .hotqcontent {
display:block;
}
This will ensure that your site still functions in the same way if users have Javascript disabled.
Demonstration:
http://jsfiddle.net/jezzipin/LDchj/

With .hotqcontent you are selecting every element with this class. But you want to select only the .hotqcontent element underneath the parent.
$('.hotqcontent', this).toggle();

$(document).ready(function(){
$('.parent_div').on('mouseover',function(){
$(this).children('.hotqcontent').show();
}).on('mouseout',function(){
$(this).children('.hotqcontent').hide();
});;
});
JSFIDDLE

you don't need document.ready function inside document.ready..
try this
$(function() { //<--this is shorthand for document.ready
$('.parent_div').hover(function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});
and yes your code will toggle all div with class hotqcontent..(which i think you don't need this) anyways if you want to toggle that particular div then use this reference to toggle that particular div
updated
you can use on delegated event for dynamically generated elements
$(function() { //<--this is shorthand for document.ready
$('.content').on('mouseenter','.parent_div',function() {
alert("hello");
$(this).find('.hotqcontent').toggle();
//or
$(this).children().toggle();
});
});

you can try this:
jQuery(document).ready(function() {
jQuery("div.hotqcontent").css('display','none');
jQuery("div.parent_div").each(function(){
jQuery(this).hover(function(){
jQuery(this).children("div.hotqcontent").show(200);
}, function(){
jQuery(this).children("div.hotqcontent").hide(200);
});
});
});