Hide div with jquery and cookies not hiding properly - javascript

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>

Related

Why are the two options of my toggle () executing?

I have made a button with a link, <a>, and I want to use it to display or not some elements. For this objective I thought .toggle() was a good option.
$('#filter_btn').click(function() {
$('.filters_container').toggle(function() {
$(".filters_container").css({
display: "flex"
});
}, function() {
$(".filters_container").css({
display: "none"
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
But with this code, when I press the button it shows filters_container but immediately they become invisible again. Why is executing both parts of the toggle function?
Thank very much.
$('#filter_btn').click(function() {
$(".filters_container").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Nodes
<span class="filters_container" style="display: none;">test</span>
simple toggle function use it.
$(function(){
$('#filter_btn').click(function() {
$("p").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
Nodes
<p style="display:none">testing</p>
</div>
This is not how toggle works in jQuery
Try to change your code to simply this:
$('#filter_btn').click(function() {
$('.filters_container').toggle();
});

Hide div and show another divs

I just want to show a div when someone click "add" button. If he clicks that "add" button again, needs to hide the current one and show another div. It also needs to show the approved div list on top area. If someone clicks the top area approved div, need to load the div again.
I try to hide and show on click but no luck. (I'm bit new to jquery and I know this is pretty basic code.)
Here is the fiddle Fiddle
$('.add-box').click(function() {
$('.test-div-2').show();
});
$('.add-box').click(function() {
$('.test-div-1').hide();
});
.test-div-1,
.test-div-2,
.test-div-3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Do below things:-
1.Add jQuery library before your script code.
2.Wrap your code inside $(document).ready(function(){..}); (needed when script code is added above the HTML. if script code is added at the bottom of the page then wrapping is not needed).
3.Do show(),hide() in single click itself.
$(document).ready(function(){
$('.add-box').click(function() {
$('.test-div-2').show();
$('.test-div-1').hide();
});
});
.test-div-1,
.test-div-2,
.test-div-3{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-div-1">1</div>
<div class="test-div-2">2</div>
<div class="test-div-3">3</div>
<a class="add-box">Add</a>
Fiddle example:- https://jsfiddle.net/rrj1818a/
Note:-
If you want to show one-by-one then do like below:-
https://jsfiddle.net/87re6avo/
<div class="test-div active">1</div>
<div class="test-div">2</div>
<div class="test-div">3</div>
<a class="add-box">Add</a>
$('.add-box').click(function(e) {
e.preventDefault();
var $current = $('.test-div.active');
var $next = $current.next();
$current.removeClass('active');
if(!$next.length) {
$next = $('.test-div').first();
}
$next.addClass('active');
});

Running javascript on every element with css class not working

I am trying to run a javascript on every element on an asp.net page that has a certain CSS Class. I am not very proficient with javascript, so I don't know why it isn't working. I am dynamically creating controls and adding the CSS class to them, as well as the class is attached to a static control on the page.
I just want the controls to fade in after the page loads.
Here is my script:
<script type="text/javascript">
$(document).ready(function () {
$('.fadeInLoad').each(function (i, obj) {
$(this).fadeIn();
});
});
</script>
Here is my CSS:
.fadeInLoad
{
color:#0d0d0d;
}
Thank you for any help you can offer.
You have to set display to none on the class rule. Otherwise it is trying to fade in an element that is already visible.
Also, as #Blazemonger has pointed out, just call .fadeIn() directly on the jQuery selector call.
Here is an example
$(document).ready(function() {
$('.fadeInLoad').fadeIn(2000);
});
.fadeInLoad {
color: #0d0d0d;
display: none; /* This display needs to be here */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Does not fade in</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
<div class="fadeInLoad">Fades In</div>
For me it's working. This nodes with that class dadeInLoad are in source of page or are loading with some Ajax?
There is working demo:
Demo
$(document).ready(function () {
$('.fadeInLoad').each(function (i, obj) {
$(this).fadeIn(3000);
});
});

Make an endless jQuery short and easy

I have an accordion on my WordPress website.
Usually it works fine, adding and removing classes when clicking the different tabs, but there is an issue with one of the accordions on the website: When clicking on one of the tabs - it doesn't close the rest of the opened tabs. So I added this code in and it works fine:
jQuery(document).ready(function($) {
$("#top11").click(function() {
$("#collapse202").removeClass("in");
$("#collapse203").removeClass("in");
});
$("#top12").click(function() {
$("#collapse201").removeClass("in");
$("#collapse203").removeClass("in");
});
$("#top13").click(function() {
$("#collapse201").removeClass("in");
$("#collapse202").removeClass("in");
});
});
I am sure that there is a way to make it shorter, could some one please explain how to do it more compact?
One way is to add data-id to each collapsed element. For example:
<div id="collapse201" data-id="top11"></div>
<div id="collapse202" data-id="top12"></div>
<div id="collapse203" data-id="top13"></div>
And of course you should use a class in your tabs just in case there are lots of tabs in your accordion:
<div id="top11" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
<div id="top12" class="clickingTab"></div>
The JS code could look like this then:
jQuery(document).ready(function($) {
$(".clickingTab").click(function() {
var clickedId = $(this).attr("id");
$("element:not([data-id="+clickedId+"])").removeClass("in");
});
});
There of course could be more efficient ways to solve your problem. But for this particular question this could be the particular solution.
If your HTML look like that, you can use the next() function to target the next sibling element:
$("#top11, #top12, #top13").click(function() {
$("#top11, #top12, #top13").next().removeClass("in");
$(this).next().addClass("in");
});
.in {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top11">top11</div>
<div id="collapse201" class="in">collapse201</div>
<div id="top12">top12</div>
<div id="collapse202" class="in">collapse202</div>
<div id="top13">top13</div>
<div id="collapse203" class="in">collapse203</div>

How to show a nested div on hover? -- JQuery beginner

I have a long list of HTML in this format:
<div id="item555">
Some name
show details
Action
</div>
<div id="details555">
Some details
</div>
I can't figure out how to:
Show the Action button only when the item div is hovered.
Show the Details box when the Show details link is clicked.
I know this is really basic js stuff! :(
I've made a few amendments to your javascript, HTML and CSS, here's a fiddle with everything working.
I also made sure the code is not broken by having repeated elements.
JS
$(".item-container").hover(
function() {
$(".action", this).show()
},
function() {
$(".action", this).hide()
}
);
$(".details").click(function(e) {
e.preventDefault();
var detailsDiv = $(this).parent().next("DIV");
detailsDiv.toggle();
if (detailsDiv.is(":visible")) {
$(this).text("Hide details")
}
else {
$(this).text("Show details")
}
});
CSS
.action, .details-container { display: none; }
First of all, I updated your markup a bit:
<div id="item555" class="item">
Some name
show details
Action
</div>
<div id="details555" class="details">
Some details
</div>
Then I would use something like this in jQuery.
$('.show-details').click(function() {
$(this).parent('div').next('div.details').show();
});
$('.item').hover(function() {
$(this).find('.action-button').show();
}, function();
You can try with having different class attached to your elements. Hope this code helps
<html>
<head>
<title>Test Show Hide Div</title>
<script src="jquery.1.6.1.min.js"></script>
<style>
.item {
color: red;
}
.anchorDetails {
color: green;
}
.anchorAction {
color: blue;
display: none;
}
.noDisplay {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.item').hover(function() {
$('.noDisplay').toggle();
});
$('.anchorDetails').click(function() {
$('.anchorAction').toggle();
});
});
</script>
</head>
<body>
<div id="item555" class="item">
Some name show details Action
</div>
<div id="details555" class="noDisplay">Some details</div>
</body>
</html>
$('div#item555').hover(function() { $('a#button555').show(); })
You should here specify a classname or, better, an ID for show details, you could do it inline though. But, assume, it's id is 'show-detail':
$('a#show-detail').click(function() { $('div#details555).show() });
Please, notice, I've used tag#id to increase performance. jQuery selects elements a way much faster if you specify tagname. If you are using an ID, it is not that big deal, but if you use $('.classname') selector and you know all your .classname are divs, it's much better to use $('div.classname')
P.S. if you are looking for more generic way, you probably better look at other answers.
<div id="item555">
Some name
show details
Action
</div>
<div id="details555" style="display:none">
Some details
</div>
$("div[id^='item']").hover(function() {
$(this).find(".action").toggle();
}).delegate(".showDetails", "click", function(e) {
e.preventDefault();
$(this).parent().next("div").toggle();
});
Demo.
You could use the .hover function
with the toggle()
Look at this fiddle :
http://jsfiddle.net/ADLLR/

Categories

Resources