I just wrote this code to use a slide to toggle a box as hidden/displayed using a button:
jQuery("#button").click(function () {
jQuery('#box').slideToggle('fast');
});
I want to implement cookies on this to remember if the box was hidden or visible. Can someone guide me with this?
There is a jQuery Cookie plugin available, which will make reading and writing to and from cookies a lot easier and more convenient. Here is an example:
// if the slider is visible, set the cookie slider value to true
$.cookie('slider', 'visible', { expires: 7, path: '/' });
To read the value, use the following as an example:
var sliderVisible = $.cookie('slider');
More information can be found on the jQuery Cookies Plugin Site.
I just got it working. I made two buttons so that there is different button on each state (i.e closed and open)
jQuery('#button_open').hide(); //initially we keep the open button hidden
// this code defines what happens when we click the close button
jQuery('#button_close').click(function () {
jQuery(this).hide(); //this hides the close button as the box is now closed
jQuery('#box').slideUp('fast'); //hides the box
jQuery('#button_open').show(); //shows the open button
jQuery.cookie("openclose","closed", {expires: 365}); // sets cookie
return false;
});
// this code defines what happens when we click the open button
jQuery("#button_open").click(function () {
jQuery(this).hide(); //hides the open button as the box is now open
jQuery('#box').slideDown('fast'); //shows the box
jQuery('#button_close').show(); //shows the close button
jQuery.cookie("openclose","open", {expires: 365}); //sets cookie
return false;
});
//and now the magical part comes in. this code checks if the cookie named 'openclose' has the value 'closed'. If yes, it hides the close button + the box and shows the open button.
if(jQuery.cookie("openclose") == "closed") {
jQuery("#button_close").hide();
jQuery("#button_open").show();
jQuery('#box').hide();
};
Related
I am using jQuery UI Dialog on the homepage with auto open set to true so it displays the popup as soon as the user comes to the website. here the development site
http://dev.startingpointnh.org/
As you can see the dialog box work perfectly but I just want to show it only once. Currently every time the user comes back to the homepage or reloads the page, the popup displays again.
I am wondering if there is way to display it one time once the close this message button or esc key is pressed like this site does
http://www.janedoe.org/
Any advise is appreciated.
Thanks
Store that information in your cookies. Check out some more details here.
Basically, add a variable that is stored as true when the user exits the dialog at the close function. Then store the variable:
document.cookie = "hasSeen: true"
Then on the page load, read the cookie:
var hasSeen = document.cookie
And set your autoOpen variable to that cookie:
if(hasSeen) {
$("#openDialog").dialog({
autoOpen: false
});
}
That'll do it!
Thanks Guys appreciate it. I have added a cookie like below and works perfectly when close this message button is clicked. but its still shows when the esc key or the x button at the top is clicked. How to reference these two also
<script type="text/javascript">
jQuery(document).ready(function(){
if( document.cookie.indexOf( "showOnce" ) < 0 ) {
jQuery('#dialog').dialog({
modal: true,
width: 740,
resizable: true,
buttons: {
"Close This Message": function() {
jQuery( this ).dialog( "close" );
document.cookie = "showOnce=true;";
}
}
});
}
});
In jquery mobile popup enter some text and refresh the current page using changePage. After that open the open it shows in the text box what i enter previously. How to refresh the popup(Please dont suggest empty the textbox value).
The code is:
localStorage.setItem("name","tiger");
$(document).on("click","#save",function(){
$("#openpopup").popup("close");
localStorage.setItem("name",$("#pText").val());
$.mobile.changePage("#page1",{
allowSamePageTransition : true,
transition : 'none',
});
});
$(document).on("pageshow","#page1",function(){
if(localStorage.getItem("name")){
$("#name").val(localStorage.getItem("name"));
}
});
Here is the FIddle
To reset all form elements, e.g. input, select, checkbox, etc at once, you need to wrap them in a form. And then reset the form $("#formID")[0].reset() once the popup is hidden.
$("#popupID").popup({
afterclose: function () {
$("#foo")[0].reset(); /* reset form */
}
}, "close");
Demo
I want to show a popup when user click on the close button or back button in browser in checkout page of my site. I have implemented the following code for that ........
function PopIt() {
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Would you like to join our mailing list for other offers?";
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
//window.history.forward();
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'hideOnOverlayClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
Now everything is working fine. But the final requirement is when user click on the back browser button from the checkout page, the fancy box popup appear and it will stay ~40 seconds then the page redirect to back.
I can't solve this problem. How do I stay the popup when already the page redirecting to click on the back button on browser. Is it possible? Please help me
Have you tried (#user1721135)
Jquery when back button is pressed
I understand is a different event but maybe can help :S.... Also: (#IMRAN ABDUL GHANI) Solution to browser back button click event handling
I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)
The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.
Hey guys, I am showing a javascript dialog box to user using window.onbeforeunload to handle if user clicks back button.
My code is working to a point, but I am struggling to redirect the user if they click 'Leave this page' (Message varies in different browsers).
// Set check var false to begin with
// This is set true on submit btns using onclick event
submitFormOkay = false;
// If we are on check-availability page
if( window.location.href.indexOf( 'check-availability' ) != -1 )
{
// If back button is clicked
window.onbeforeunload = function()
{
// Only show dialog if submit btn wasn't clicked
if (!submitFormOkay)
{
// Show dialog
return "Use of the browser back button will lose form data.\nPlease use the 'Previous' button at the bottom of the form.";
// If 'leave' this page was clicked'
// do 'window.location = window.location'
}
}
}
Thanks in advance.
David
If they click "Leave this page" then the browser will complete whatever action the user was trying to perform before the dialog popped up.
But if they do navigate Back, they will still be on your site, right? So you can just do whatever you need to do when that page is re-requested (providing it's not cached).
In other words ... detect on server-side if the user has clicked Back, and then do whatever you would have done if they had clicked Previous.