I have FancyBox on a website that pops up when they visit and has some info inside it. I'd like to add some kind of button that the user can click, and it sets a cookie not to show the message for about a month or so.
I'm quite useless when it comes to things like this, so if anyone could walk me though what to do, that would be awesome.
Here's what I have so far. At the bottom I've added what I think could be an anchor for the proposed cookie ("noShow"), but I'm not sure if it would work like it is. I've loaded all the jQuery scripts before this for FancyBox, and after those it loads jquery.cookie.js too. If it matters, I'm using whatever the latest download for FancyBox 2 is.
<script type="text/javascript">
function openFancy() {
setTimeout( function() {$('#autoStart').trigger('click'); },1000);
}
$(document).ready(function() {
openFancy();
$('#autoStart').fancybox();
});
</script>
<!-- This is the popup itself -->
<a id="autoStart" style="display:none" href="#autoFancybox"></a>
<div style="display: none;">
<div id="autoFancybox" style="width: 800px">
<div>
<!-- My content for the Fancybox is here -->
<br />
<p style="font-size:10px" align="right">
<a id="noShow" href="#noShow">Don't me show this message again</a>
</p>
</div>
</div>
</div>
Thanks,
Liam.
Apart from your function that launches fancybox, make another that set the cookie's value and expiration time when the button is clicked :
function dontShow(){
$.fancybox.close(); // optional
$.cookie('visited', 'yes', { expires: 30 }); // set value='yes' and expiration in 30 days
}
... then validate the cookie and decide whether to launch fancybor or not :
$(document).ready(function() {
var visited = $.cookie('visited'); // create cookie 'visited' with no value
if (visited == 'yes') {
return false;
} else {
openFancy(); // cookie has no value so launch fancybox on page load
}
$('#autoStart').fancybox(); // bind fancybox to selector
}); // ready
... now the html of your button
<a id="noShow" href="javascript:dontShow()">Don't show this message again</a>
See working DEMO
There's a great jQuery plugin for cookie management which you should check out - https://github.com/carhartl/jquery-cookie
When a user hits your site, you can check your cookie to see if they've been there before. If they haven't then display your animation and set the cookie. If they have then don't run the animation.
From a glance at the jquery-cookie docs, you can set a cookie for 7 days like so:
$.cookie('visited', 'yes', { expires: 7 });
So your code might look like:
// Make sure DOM has fully loaded before running code
$(function(){
if( ! $.cookie('visited')){
// Your code here
} else {
$.cookie('visited', 'yes', { expires: 7 });
}
});
Related
I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>
I have set session, and whant to display popup only once when user enters site, But my popup is displaying all time, Below is my code -
<?php
Mage::getSingleton('core/session')->setWall('1');
$wall = Mage::getSingleton('core/session')->getWall();
if($wall =='1'){ ?>
<script>
jQuery(document).ready(function() {
jQuery('#earn-reward-box').show();
//jQuery('#earn-reward-box').delay(000).fadeOut();
});
</script>
<div id="earn-reward-box-main" style="display:block">
<div id="earn-reward-box" class="xmus-box">
<div id="earn-reward-close"> </div>
<a href="<?php echo Mage::getBaseUrl()?>christmas">
<img src="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA);?>wysiwyg/deal.png" />
</a>
</div>
<div id="earn-reward-overlay"> </div>
</div><script>
jQuery('#earn-reward-close').click(function(){
jQuery('#earn-reward-box-main').toggle();
});
jQuery('#earn-reward-close').click(function(){
jQuery('#earn-reward-overlay').toggle();
});
</script>
<?php
Mage::getSingleton('core/session')->setWall('1');
}
Mage::getSingleton('core/session')->unsWall();
?>
Set session variable as "display:block" once it shows up and is closed change it to "display:none" and set it at style="here is the session variable".
you could make it show for every new session by saving to the sessionStorage like this
jQuery(document).ready(function() {
if(window.sessionStorage.getItem('shown') === true ){
jQuery('#earn-reward-box').show();
}
});
And you can set your item to true when the user clicks on the overlay
jQuery('#earn-reward-close').click(function(){
window.sessionStorage.setItem('shown', true);
jQuery('#earn-reward-box-main').toggle();
});
Seeing from MVC, you need a Model(or State) stored somewhere to tell if the popup has shown already or not. For example you can use localStorage as the place to store this information:
localStorage.setItem('popup-shown', 'true');
And the next time you open this page, since localStorage remains, you can tell if it has been shown already or not:
localStorage.getItem('popup-shown') === 'true'
Then you can control the behaviors of you popup as you need.
sessionStorage might be also fine, but take care of this quote:
sessionStorage is similar to Window.localStorage, the only difference is while data stored in localStorage has no expiration set, data stored in sessionStorage gets cleared when the page session ends.
https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage
I have this code.
If a user press on lets say burger and add it into session basket. The reload of page doesn't open the current Window View(Toggle)
How can I make it open the current again on reload...
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
This is how to show/hide the text.
<div id="sandwich" class="hidden">
Here you go 1 </div>
<div id="burger" class="hidden">
Here you go 2 </div>
Things like this are not persistent across page reload / refresh.
There are two basic approaches to it:
Session cookie and session on server, communication via AJAX
Store all in a cookie
Both require some extra work, but it's unavoidable.
For the cookie part, there's a nice jQuery plugin called jquery.cookie.
Programming and JavaScript noob here, so I appreciate all the help I can get. I'm using CometChat on my website and having some trouble working with their API's. I don't think it's a matter of the API's, it's more how to implement them. I pulled these lines of code from the CometChat website and more or less cut-n-pasted them into a user's profile page (I actually have a CMS system where I can implement this code on the fly). This bit of code goes on a user's profile page (user with ID number 160881).
<img src="http://www.wechsupport.com/content/images/chatwithme.png" alt="Click here to chat with me now">
<script type="text/javascript">
function checkstatus(data) {
if (data.s == 'available') {
alert('User is online');
}
}
window.onload = function() { jqcc.cometchat.getUser('160881','checkstatus')}; </script>
When navigating to the user's page, first an alert is displayed stating "User is online". Clicking OK, the alert disappears. Also, an image called CHATWITHME is displayed. That's fine, it works, but it's nasty. What I'd rather do is get rid of the alert all together and just display the CHATWITHME image/link if the user's status comes back as available (as shown in the function called CHECKSTATUS). I was thinking to simply take the A HREF piece and replace the ALERT with it such as this:
<script type="text/javascript">
function checkstatus(data) {
if (data.s == 'available') {
<img src="http://www.wechsupport.com/content/images/chatwithme.png" alt="Click here to chat with me now">;
}
}
window.onload = function() { jqcc.cometchat.getUser('160881','checkstatus')}; </script>
But this did not work. The alert went away (which is guess is good), but the image/link is not displayed. I have very limited experience working with code and simply don't know how to get the anchor tag to work within the function. I can use whatever help is offered.
Thanks!!!
You have to use Javascript setInterval() function to call the jqcc.cometchat.getUser method every X seconds. If you want to show/hide the button every time the status changes you also have to modify your HTML a bit:
<div id="chat-button">
<img src="http://www.wechsupport.com/content/images/chatwithme.png" alt="Click here to chat with me now">
</div>
And, in the checkstatus() function do something like:
function checkstatus() {
if (data.s == 'available') {
$('#chat-button').show();
} else {
$('#chat-button').hide();
}
}
(I'm using jQuery syntax in the Javascript code)
HTML
<div id="chatwithmebutton"></div>
JavaScript
function checkstatus(data) {
if (data.s == 'available') {
document.getElementById('chatwithmebutton').innerHTML = '<img src="http://www.wechsupport.com/content/images/chatwithme.png" alt="Click here to chat with me now">';
}
}
Thanks everyone. I created an "offline" button and uploaded it. Modified the code submitted by Walialu (thank you) slightly and came up with this:
<div id="chatonlinebutton"></div>
<div id="chatofflinebutton"></div>
<script type="text/javascript">
function checkstatus(data) {
if (data.s == 'available') {
document.getElementById('chatonlinebutton').innerHTML = '<img src="http://www.wechsupport.com/content/images/chatwithme.png" alt="Click here to chat with me now">';
} else {
document.getElementById('chatofflinebutton').innerHTML = '<img src="http://www.wechsupport.com/content/images/chatoffline.png" alt="User is offline right now">';
}
}
window.onload = function() { jqcc.cometchat.getUser('160881','checkstatus')}; </script>
If the user is online, the online button is displayed. If not, a simple graphic stating "User is offline" is displayed.
Thanks so much!!
This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});