I am after some help if at all possible.
I would like it so that once someone has clicked the X it wont re show the parent div when the page is reloaded or the user navigates to another page with the same popup.
I have the code below for where I started and hope I am only a little off!
Thanks in advance for any help :)
$(".banner-cta-close").click(function() {
$("body").addClass("header-banner-hide");
});
$(document).ready(function() {
if (sessionStorage["PopupShown"] != 'yes') {
ShowDialog(true);
e.preventDefault();
}
});
$("#btnClose").click(function(e) {
HideDialog();
e.preventDefault();
sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown
});
function ShowDialog(modal) {
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(5000).slideDown('slow');
if (modal) {
$("#div_with_text").unbind("click");
} else {
$("#div_with_text").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#div_with_text").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_with_text">
<div class="container">text
<div class="bannerbuttonhover" style="background: #2f358f;
color: #fff;
padding: 6px 12px;
display: inline-block;
margin-left: 20px;
border-radius: 2px;
cursor: pointer;">Sign Up now</div>
<div class="banner-cta-close">X</div>
</div>
</div>
If you have an App Server, you could send a message back to the server to tell the server not send the code for the dialog on reload. But if not, you could use localStorage (shown here)
$(document).ready(function() {
if (!window.localStorage || !window.localStorage.getItem('NoPopup')) {
ShowDialog(true);
e.preventDefault();
}
});
$("#btnClose").click(function(e) {
HideDialog();
e.preventDefault();
if (window.localStorage) window.localStorage.setItem("NoPopup","true");
});
As #ControlAltDel mentioned , you can avoid sending its code from the server.
Otherwise, If you want to do it in the front-end you can simply use cookies ... You can find how to do it with javascript in here.
Depending on the cookie value, you can either show this div or not.
Related
I have a subscription form that drops down on top of the navigation when the user clicks a button (#sub-header). this button is below the navigation. my navigation is fixed, so this button has a top of 60px, to keep it below the nav. however when the button is clicked and the subscription form drops down, then there is a space of 60px between the button and the navigation. i need to change the top of the button from 60px to 0px only when the subscription form is open. This is my code:
if ($('.subscription-signup').css('display') == 'none') {
$('#sub-header').css("top", "60px");
} else if ($('.subscription-signup').css('display') == 'block') {
$('#sub-header').css("top", "0px");
};
Here is my html code:
<div class="subscription-signup">
<div class="subscription-close" id="subscription-close"> </div>
<div class="email-signup">
<form></form>
</div>
</div>
And here is the code to open the form (which works):
var $subscribeContent = $('.subscription-signup');
var $subscribeClose = $('#subscription-close');
$subscribeContent.hide();
$subscribe.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$subscribeContent.slideToggle();
});
For some reason, when the subscription form is open and is set to display: block, the top does not change to 0px. Is there something wrong with my code? Can anyone figure out how to do this?
use
$('.subscription-signup').is(':hidden')
instead
Why not just add a class to the element?
$subscribe.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').addClass('subOpen');
$subscribeContent.slideToggle();
});
$subscribeClose.on('click', function(e) {
e.preventDefault();
$('.subscription-signup').removeClass('subOpen');
$subscribeContent.slideToggle();
});
.subscription-signup {
top: 0px;
}
.subOpen {
top: 60px;
}
I have the following code that slideToggle() a div while at the same time displaying a button that allows you to slideToggle() back and then hides itself.
$(document).ready(function() {
$("#about-user-widget .hide-btn").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: visible;');
});
//reverses the above action
$("#show-button").click(function(){
$("#about-user-widget").slideToggle();
$("#show-button").attr('style', 'margin-bottom: 5px; font-size: 11px; color: #ddd; display: none;');
});
})
The above works great, however when I refresh the page it goes back to the default. The about-user-widget is open and the show-button visibility is set to hidden.
My question is, how would I get the page reload to remember what my settings are at? So for example, if one had clicked hide, and the about-user-widget was hidden and the show-button was visible. How could I get that setting to stay when the page is refreshed?
The show-button is set to hidden by default.
<div class="pull-right" id="show-button" style="margin-bottom: 5px; font-size: 11px; color: #ddd; visibility: hidden;"><i class="fa fa-eye"></i> Show<span> | </span></div>
I know I'd need to commit this to memory somehow (cookie, local storage of some kind) but being new to jquery I'm not sure how to implement this.
Any help would be appreciated.
First I don't understand why you need two buttons? You can achieve this with one button.
As per saving the state of div shown/hidden
You can use storage in cookies or your preferred metnod.
As per cookie; read the following stack post
Then this for example how you can try:
I used this plugin: https://github.com/js-cookie/js-cookie
$(document).ready(function() {
var currentstate = Cookies.get('divstate');
console.log('on refresh=' + currentstate);
if (currentstate == 'open')
$("#about-user-widget").show();
else
$("#about-user-widget").hide();
$("#button").click(function() {
$("#about-user-widget").slideToggle();
var currentstate = Cookies.get('divstate');
if (currentstate == 'close' || currentstate == undefined) {
Cookies.set('divstate', 'open');
console.log('when click');
} else {
Cookies.set('divstate', 'close');
console.log('else');
}
console.log(Cookies.get('divstate'));
});
});
the HTML part:
<input id="button" type="button" value="show/hide" />
<div id="about-user-widget" style="display: none; width: 100px; height: 100px; background: #b2000b">some text</div>
Be aware about cookies plugin's compatibility with browsers; I tested with FireFox and working.
Here is the answer to the question, thanks to #CumminUp07
I've found this link to be helpful, except that I do not want the suggestions div to disappear after an element is selected in the suggestions div in order to select more suggestions later. I have tried to implement this strategy with the slideUp() and slideDown() jquery functions, but of course that is not as fast as the show() and hide() jquery functions, and trying to speed up the sliding functions ends up stopping the suggestions div from appearing again.
Here is a plunker of what I am currently stuck on:
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#suggestions').slideDown();
$('#search').focus();
});
#search,
#suggestions {
width: 200px;
}
#suggestions {
display: none;
border: 1px solid gray;
border-top: none;
}
#suggestions div:hover {
background-color: #99CCFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" value="" />
<br />
<div id="suggestions">
<div>Toronto</div>
<div>Seattle</div>
<div>Dallas</div>
</div>
I do not believe this is a duplicate to Action on blur except when specific element clicked with jQuery, because the timeout does not work well enough for the functionality I desire, nor does it allow you to ensure I can click two different divs while keeping one of those two divs open until a different object in the document is selected.
You can stop the animation from completing and then just show the suggestions
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click( function() {
$('#suggestions').stop(true,true).show();
$('#search').focus();
$('#search').val($(this).html());
});
Maybe it will help you
$('#search').focus(function() {
$('#suggestions').slideDown();
});
$('#search').blur(function() {
$('#suggestions').slideUp();
});
$('#suggestions div').click(function() {
$('#search').val($(this).html());
$('#search').blur();
});
https://jsfiddle.net/vc15r7qb/
This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 9 years ago.
I am trying to make a div hidden by default and show by clicking a button. To close the div, I can either click on the button or anywhere else on the screen. Below is my attempt but the closing part is not working. I appreciated if anyone can point me to the right implementation or maybe a better way to do this.
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").show();
});
if ( !$('#theDiv:hidden') ) {
$(document).click(function() {
$('#theDiv').hide();
});
$('#theDiv').click(function(e) {
e.stopPropagation();
return false;
});
}
});
placing the entire event handler inside a condition only checks the condition on first pageload, and the event handler is probably never attached, try it like this instead :
$('#theDiv').hide();
$(document).on('click', function(e) {
if ( $(e.target).closest('#showDivBtn').length ) {
$("#theDiv").show();
}else if ( ! $(e.target).closest('#theDiv').length ) {
$('#theDiv').hide();
}
});
FIDDLE
Try this,
$('#theDiv').hide();
$("#showDivBtn").click(function(){
$("#theDiv").toggle();
});
$(document).on("click" , function(event){
if( $(event.target).attr("id") != "theDiv" && $(event.target).attr("id") != "showDivBtn" && $(event.target).parents("#theDiv").attr("id") != "theDiv")
{
$('#theDiv').hide();
}
});
try using
if( !$('.theDiv' ).is( ':visible' ) )
instead of
if ( !$('.theDiv:hidden') )
try this
<script type="text/javascript">
$('.opendiv').hide();
$(document).click(function (event) {
var $target = $(event.target);
if ($target.attr('id') == 'addAccordion') {
if ($('.opendiv').is(':hidden')) {
$('.opendiv').show();
}
else {
$('.opendiv').hide();
}
}
else if ($target.closest('.opendiv').length > 0) {
}
else {
$('.opendiv').hide();
}
})
</script>
<div>
<input id="addAccordion" type="button" value="ADD COMMENT" />
</div>
<div id="rs" class="opendiv">
<h2>
Welcome to ASP.NET!
</h2>
<p>
To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
www.asp.net</a>.
</p>
<p>
You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"
title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
</div>
I don't think you can target document with a .click handler like that.
Rather than making it so you can literally click anywhere to close the DIV, just make it seem that way. Put a clear DIV behind the one that you want to be able to close and make it cover the whole screen. Then you can attach your click handler to that.
HTML:
<button>Click me to show the DIV</button>
<div class="container">
<div class="thediv">
<p>I'm the DIV</p>
</div>
</div>
JavaScript:
$(document).ready(function () {
var $button = $("button");
var $container = $("div.container");
$button.click(function () {
$container.show();
});
$container.click(function () {
$container.hide();
});
});
CSS:
div.container {
display: none;
position: fixed;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
}
div.thediv {
position: absolute;
top: 30%;
left: 10%;
background-color: gray;
color: white;
padding-top: 1em;
border-radius: 5px;
width: 50%;
}
p {
background-color: black;
text-align: center;
padding: 2em;
}
For demonstration purposes, I made the background DIV visible in this Fiddle
I'm trying to change a spoiler but i have problem with javascript code
This is the spoiler:
http://nathan3000.altervista.org/Jdownloader%20Spoiler/zzzz.html
When i click the image "MAC" the spoiler opens. When i click again MAC the spoiler closes. But when i click between the text the spoiler closes again. I do not want the spoiler closes when I click in the middle of the text but only when i click image "MAC". How can i do change selector so it only show/hides when i click the image?I'm still clicking inside the .OS container
I don't understand why the table border doesn't appear on online version while on local version I can see the borders of tables.
The javascript code for spoiler is this:
<script type="text/javascript">
$(document).ready(function(){
$(".nonjs").removeAttr( "href"); //href is needed for users without JS
$('.OS').click(function(){
if($(this).find(".details").is(":visible"))
{
$(this).find(".details").not(":hidden").hide("slow");
return true;
}
else
{
$(this).find(".details").show("slow");
return false;
}
});
});
</script>
<style type="text/css">
<!--
.details {
display: none;
clear: both;
padding: 2px;
}
.nonjs{
cursor:pointer;
}
img {
border: 0px;
}
-->
</style>
Thanks in advance
This is working:
$(document).ready(function(){
$(".nonjs").removeAttr( "href");
//href is needed for users without JS
$('.OS').click(function(e){
if(!$(e.target).parents('.details').length){
if($(this).find('.details').is(":visible"))
{
$(this).find('.details').not(":hidden").hide("slow");
return true;
}
else
{
$(this).find('.details').show("slow");
return false;
}
}
});
});
put your spoiler/ popdown menu directly after your .OS image. right now your popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.
here is something like you want:
http://tempesthostingservices.com/t/zzzz.html