So I've tried to find an answer but can't seem to get this one right.
I've changed my code to model (pretty much exactly) after the answer in this question:
Delay pop-up for 10 seconds, only pop up once
When I test locally, I can get it to work if I change the cookie value to a number(ex:1) instead of the string (ex: 'yes') but after putting the site online, the fancy box never shows up using either method. Tried clearing cookies and emptying cache.
Here's my code for the popup:
<!--This is for a one time popup-->
<!-- Add jQuery library -->
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
<!-- Add fancyBox main JS file -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
<!--Add fancybox CSS file -->
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add jQuery cookie library -->
<script src="cookie/jquery.cookie.js"></script>
<script type="text/javascript">
function openFancybox(){
$('.fancybox').fancybox().trigger('click');
}
$(document).ready(function(){
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
}
else {
openFancybox();
}
$.cookie('visited', 'yes' , { expires: 2 });
$('.fancybox').fancybox();
});
</script>
<!--End of popup code-->
In my html body I have:
<a class="fancybox" href="#inline1" title="Next Generation City"></a>
and
<div id="inline1" style="width:400px;display:none;">
<h3>About website.com </h3>
<p>
Here's my text for popup
</p>
</div>
I'm new to using cookies and fancy box, so I'm a little lost. Thanks so much for any help with this issue.
EDIT: also, I have a fancy box displaying correctly on another page of the site, so I'm fairly certain the issue is with the cookie part
Related
I am trying to use localStorage to remember user selections when they click on "Stay at International". That way, the popup won't keep prompting whenever the user visits the page.
I couldn't find a way to remember a close state of the jQuery modal and put it into localStorage cookies. Your help will be much appreciated!
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div id="countryModal" NAME="country" class="modal">
<a rel="modal:close" href="#" onclick="gotoInternational()">Stay at International</a>
</div>
<script>
setTimeout(function(){
jQuery('#countryModal').fadeIn('slow').modal('show');
},3000)
function gotoInternational(){
//localStorage codes here
}
</script>
Excellent question!
If I were you I would research localStorage a bit more. You are completely correct storing the value in the localStorage is the best way.
If I understand correctly what you want to do your code should look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<div id="countryModal" NAME="country" class="modal">
<a rel="modal:close" href="#" onclick="gotoInternational()">Stay at International</a>
</div>
<script>
//Get current localStorage value
const gotoInternationalValue = localStorage.getItem('gotoInternational');
//Check if it is not true (can be false or null)
if (gotoInternationalValue != 'true') {
setTimeout(function() {
jQuery('#countryModal').fadeIn('slow').modal('show');
}, 3000)
} else {
console.log("Stay at international was already selected");
}
function gotoInternational() {
//Save localStorage item as true
localStorage.setItem('gotoInternational', true);
}
</script>
If this is not what you need please add more information to your question to clarify it!
I found the solution!
Your solution is right just that you missed a single quote at here:
if (gotoInternationalValue != 'true')
Anyway thanks for your input! Saved my day!
I have a parent page with thumbnails that link to a Jquery AJAX modal, so that when someone closes the AJAX html, the user will return to the scrolled part of the parent page that they clicked on. Everything is working as far as navigation and related thumbs etc. The only problem I am running into is that when i try to share the AJAX html page, the parent is being read, and not the AJAX html page meta.
Is it possible to use some script to have the first set of meta elements skipped and the AJAX meta read? Does that make sense?
Here is the page I'm working on --> Example
HTML:
<a class="thumb {url_title}" rel="modal:open" href="/{segment_1}/{url_title}">Blah</a>
SHARE BUTTONS:
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="https://www.addtoany.com/share"><i class="far fa-share-alt"></i></a>
<script>
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.num_services = 6;
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> . </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
Please forgive me for not including any code, but I always struggle with front-end. I have found numerous blogs and how-to's for putting up a full-screen modal display, but all of them have disrupted my site's existing css or JavaScript in some way, some how. Can anyone point me to a simple, self-contained example that is guaranteed to be a drop-in solution for a website that already has its own things going on?
I googled full screen modal and found this. As close to a drop in solution as you could ask for I imagine. You'll need to download their lib though.
Taken from their site:
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>
<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID class="close-animatedModal" -->
<div class="close-animatedModal">
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>
<script>
//This is your script
$("#demo01").animatedModal();
</script>
I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.
I want to create popup windows similar to as shown in this web site .
http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
Try the Online example here
http://yensdesign.com/tutorials/popupjquery/
This is the code that is responsible to display the POPUP WINDOW .
<html>
<head>
<link rel="stylesheet" href="general.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
var popupStatus = 0;
function loadPopup(){
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
</script>
</head>
<body>
<center>
<div id="button"><input type="submit" value="Press me please!" onclick="loadPopup();"/></div>
</center>
<div id="popupContact">
Hi
</div>
<div id="backgroundPopup"></div>
</body>
</html>
Here the author is displaying a Pop Up Window . What I want is that i already have an existing page (Charts.html) which I want to show as POP UP Window with similar style , is that possible?
Show Charts.html in an iframe.
Absolutely - and if you want to make it really easy, you chould just put charts.html in an iFrame with for example fancybox ( http://fancybox.net/howto check under 4 -> iFrame ). Then you could just style the css to fit your site. You could of course do the same thing with the code at the site you showed.