I have been trying to get SimpleModal Age Verification page to popup on the first visit to my site. Meaning if the previous site wasn't me display popup. The code below is what I have so far. Basically the issue is that I am getting the popup once in a while for no reason when I click a link. I can't find a rhyme or reason too it. I have had a lot of help from the people here with this code. I'll get a little further then a problem pops up, then i'll fix that and another one pops up. I hope I'm getting pretty close here. ;)
Thanks guys!
<div class="age" id="verify">
<div><img src="/image/white.png"></img></div>
<div id="noman">ARE YOU OVER 18?</div>
<div>
<p> If not, leave now and we wont tell your mom.
</br> By continuing you agree you are 18 or older.
</p>
</div>
<div id="YN">
Yes
No
</div>
</div>
<script>
$(document).ready(function(){
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#verify").modal({opacity:85, position: ["20%",""], onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
return false;
});
});
}});
}
});
</script>
<script type="text/javascript" >
function redirect(url) {
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
var referLink = document.createElement('a');
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
location.href = url;
}
}
</script>
The problem is that you use document.referrer, but its use should be avoided.
For example, I have disabled it using Firefox's about:config page.
Or even if enabled, it doesn't work with window.open.
Then, better use something like sessionStorage (or localStorage).
Related
i found this code on stackoverflow for a website translation but when i use it, the website flickers like it is going to the same/or other page every millisecond.
I am using this script :
<head>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jquery.cookie.js"></script>
<script>
$(function () {
var url = 'http://www.gester.nl';
var english_page = 'index-eng';
var dutch_page = 'index';
if ($.cookie('default_page') != null) {
if (window.location.href != url + '/' + $.cookie('default_page')) {
window.location.href = url + '/' + $.cookie('default_page');
}
}
$('#english').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
$('#dutch').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
});</script> </head>
i am using this code for my image button:
<img id="dutch" src="images/dutch.png">
and
<img id="english" src="images/english.png">
I left the website like this so you can test it on my friends website www.gester.nl.
Click back on forth on english button and then again on the dutch button.
Sometimes it works when you click on english and sometimes it doesnt when you click on the english and dutch button.
I really appreciate the help. Cause i was happy when it worked like for seconds and then i saw this problem that i couldn't fix now. Been looking and changing (default_page) and deleting some lines to look where the problem starts but i don't know how to work with this jquery code.
Thanks for your time.
$('#english').click(function () {
$.cookie('default_page', dutch_page, { expires: 999 });
alert('Dutch was set as the default language');
});
You're making it so no matter what that whenever you click Dutch or English, it'll set it to the dutch page still. Therefore, your default page cookie is trying to update to a new variable and it's continuously calling the old one. Try setting the English function to this:
$('#english').click(function () {
$.cookie('default_page', english_page, { expires: 999 });
alert('English was set as the default language');
});
Could be wrong, but I'm just curious as to what that does. Pretty sure that could be causing something though.
With my answer above, also do this.
In your script.js file, change this:
document.getElementById("mybtn").addEventListener("click", function(){
document.getElementById("my_form").className="submitted";
});
To this:
document.getElementById("mybtn").addEventListener("click", function()){
document.getElementById("my_form").className="submitted";
});
I have a unique issue that--while I've seen similar questions and answers--none quite address my challenge.
Currently, I provide a "print" button that loads the print dialog on a browser based on an embedded and hidden iframe. This works just fine, but I don't want to slow down page loading by pulling in the iframe for a large PDF.
So, I want to load an iframe without the source, then write the proper source url if the user clicks the print icon, then reload the iframe, and finally, show the dialog box.
Unfortunately, the print dialog pops up before I can reload the iframe so loads a blank page in the dialog box. On subsequent clicks, the PDF is loaded and ready for print.
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<iframe id="iFramePdf" src="" style="display:none;"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#load_pdf").click(loadPDF);
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
function sendPrint(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
});
</script>
I've tried the following various methods to reload:
// Attempt 1
$('#iFramePdf').attr('src', function () { return
$(this).contents().get(0).location.href });
// Attempt 2
$('#iFramePdf').attr("src", $('#iFramePdf').attr("src"));
$('#iFramePdf').attr('src', function () { return $(this).contents().get(0).location.href });
// Attempt 3
$('#iFramePdf')[0].contentWindow.location.reload(true);
// Attempt 4
var getMyFrame = document.getElementById(elementId);
getMyFrame.contentWindow.location.reload(true);
I've even tried using jQuery's defer method, but had no luck with that (possibly because I'm lacking knowledge). If I could get any guidance, I'd appreciate it.
try to change this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
// Attempt to reload iframe
$('#iFramePdf').load("my.pdf");
sendPrint('iFramePdf')
}
to something like this:
function loadPDF() {
$('#iFramePdf').attr('src', "my.pdf");
}
$('#iFramePdf').load(function(){
sendPrint('iFramePdf')
})
it should work
You can try .promise(). For obvious reasons I can't test it out, but I think 3 seconds should be adequate for the iframe to load. Be aware that this is as syntactically correct as I can get it without testing it out. Adjust the fadeIn(1800) and the delay(1200) accordingly.
HTML
<a href='#' id='load_pdf' ><i class='fa fa-2 fa-print'></i></a>
<p id="msg" style="display: none;">Printing Document...</p>
<div id="printPort" style="opacity: 0; width: 1px; height: 1px;"></div>
jQuery
$(function() {
$("#load_pdf").on('click', loadPDF('my.pdf'));
// Create the iframe, and put it inside #printPort
// Change it's src to the file argument
// Animate the #msg for 3 seconds
var loadPDF = function(file) {
$('<iframe id="iFramePdf" src="blank.html"></iframe>').appendTo("#printPort");
$("#iFramePdf").att('src', file);
return $('#msg').fadeIn(1800).delay(1200).fadeOut();
}
var sendPrint = function(elementId) {
var iframe = $(element_id)[0];
iframe.contentWindow.focus();
iframe.contentWindow.print();
}
// Once the animation is done the promise will resolve and sendPrint will execute on callback.
$.when(loadPDF).done(sendPrint('iFramePdf'));
});
I posted earlier about 1 issue I was having. Got that fixed but it brought up another issue...
The code below...
When clicking "Yes" In every other browser The page will reload without SimpleModal coming back up.
But in IE8 it continuously loads SimplModal thereby denying access to the site...
Thanks for your help in advance guys!
<!-- Init Age Verification Content -->
<div class="age" id="verify">
<div><img src="white.png"></img></div>
<div id="noman">ARE YOU OVER 18?</div>
<div>
<p> If not, leave now and we wont tell your mom.
</br> By continuing you agree you're 18 or older.
</p>
</div>
<div id="YN">
Yes
No
</div>
</div>
<!-- If previous page wasn't from us... Verify -->
<script>
if ( document.referrer == null || document.referrer.indexOf(window.location.hostname) < 0 ) {
$("#verify").modal({opacity:85, position: ["20%",""], onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.container.slideDown('slow', function () {
dialog.data.fadeIn('slow');
return false;
});
});
}});
}
</script>
IE doesn't set a document.referrer if the user didn't navegate to the page through a link
From the MDN documentation: "The value is an empty string if the user
navigated to the page directly (not through a link, but, for example,
via a bookmark). Since this property returns only a string, it does
not give you DOM access to the referring page."
Simply change the link's href to your page's address or try this workaround.
Yes
<script type="text/javascript" >
function redirect(url) {
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){
var referLink = document.createElement('a');
referLink.href = url;
document.body.appendChild(referLink);
referLink.click();
} else {
location.href = url;
}
}
</script>
I want to create a small popup/notification that will occur when values change in my database. the logic is being passed correctly. However, I'm not sure how to make the popups occur properly and at all as well.
I have two buttons:
CS
GH
I would like to have the notifications pop up a little bit above these buttons. This is what I have created but I just haven't positioned them yet:
<div id="GH_popup" data-role="popup">
<p> GH is OFF! </p>
</div>
<div id="CS_popup" data-role="popup">
<p> CS is OFF! </p>
</div>
I also have some Javascript that determines when these notifications will pop up:
<script type="text/javascript" >
$(document).ready(function () { GrabGhCsStatus(); });
function GrabGhCsStatus() {
var url = '#Html.Raw(Url.Action("index","GhCsStatus"))';
$.get(url, function (data) {
if (data.CheckIfCsIsRunning == 1 && data.CheckIfGhIsRunning == 0) {
$("#GH_popup").popup();
$("#GhCsStatus_GH").remove();
if (data.CsStatus == 0) {
$('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Red' });
} else {
$('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Green' });
}
}
}
...
...
...
</script>
I feel as though I am putting the jQuery popup attributes in the wrong areas and that I am not using them properly =/
To call a popup programmatically, use this code
$('#popup_id').popup('open');
To close it
$('#popup_id').popup('close');
Popup widget API
I've looked around a lot, and can't seem to find anything that's simple enough for me to do...
I've set up a web page that detects which browser is currently running, and if it's something other than Firefox 4.0, it displays a hidden div that gives a warning stating that the page is best viewed in Firefox 4.0 or greater. Within that div is a button that hides the div onclick.
I'm looking for a way to remember that this button has been clicked during a session, so that when a user clicks on my "home" page, they don't get the same message every time.
Current code:
<head>
<script src="js/browsercheck.js"></script>
<script type="text/javascript">
// external script "browsercheck.js" checks
// which browser/version is being used
// check browser and display message if != Firefox 4.0 or >
function checkBrowser() {
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
// remove overlay if user commands
function removeCoverall() {
document.getElementById("coverall").style.visibility="hidden";
}
</script>
</head>
<body>
<div id="coverall" style="visibility:hidden;">
<p>I see you're using <span id="browser"></span>. Please use Firefox.</p>
<button type="button" onclick="removeCoverall()">I understand</button>
</div>
</body>
Using jQuery and the cookie plugin, you can do:
function removeCoverall() {
$.cookie("user_clicked_ok", "true");
document.getElementById("coverall").style.visibility="hidden";
}
$(window).ready(function() {
if ($.cookie("user_clicked_ok")=="true") {removeCoverall();}
});
More details at: http://www.electrictoolbox.com/jquery-cookies/
In the removeCoverall function you could set a cookie which indicates that the user closed the div and in checkBrowser function verify if the cookie is present before showing the div.
You seem to have the right idea, you need cookies! YUM!
JS
function removeCoverall() {
var date = new Date();
date.setTime(date.getTime()+(7*24*60*60*1000));// expires in one week
document.cookie = 'skipNotify=1;expires='+date.toGMTString()+'; path=/';
document.getElementById("coverall").style.visibility="hidden";
}
Now retrieving the cookie can be difficult in javascript, but you can use PHP!
PHP
function checkBrowser() {
<?php if(isset($_COOKIE['skipNotify']))echo'return;';?>
var browser = BrowserDetect.browser;
var version = BrowserDetect.version;
if (browser == "Firefox") {
if (version >= 4) {
// do nothing
}
} else {
document.getElementById("coverall").style.visibility="visible";
document.getElementById("browser").innerHTML = browser + " " + version;
}
}
The above code injects a return statement if the user has the cookie, so the call to the function won't do anything.
As mentioned in the other posts, I highly recommend you use jQuery for all your javascript needs. It's very popular, stable and useful! I only gave my answer as it does not use any third party solution.