How to install fancybox to show up only the first time when you com to a home page.
This shall be included:
<h1> Please select your language </h1>
<div> class="select-language" </div>
The fancybox shall show up only once, regardless which page you land on.
Try the following code with cookie,
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
$.fancybox({
'width': '60%',
'height': '80%',
'autoScale': true
});
}
$.cookie('visited', 'yes', { expires: 7 });
});
You can try this.
$(document).ready(function{
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
})
The above uses the following plugin. http://www.electrictoolbox.com/jquery-cookies/
Related
I can not get this jQuery to work on page load? I use fancybox 3.
<script>
function openFancybox() {
setTimeout( function() {
$('[data-fancybox data-src="#newsletterFancy"]').trigger('click');
}, 20000);
}
$(document).ready(function() {
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: 7 });
$('[data-fancybox data-src="#newsletterFancy"]').fancybox();
});
</script>
I have also added this to my body tag: <body OnLoad="openFancybox()" class="body">
I basically have my pop up in a included file called newsletter.php. The link in my sidebar works fine when i click that. But i want to make it pop up and open on page load with a delay and also for it to set a cookie.
I have also included the cookie js as well:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
This is the line I use in my sidebar link for it to open when you click it:
<a class="buttons" data-fancybox data-src="#newsletterFancy" href="javascript:;">Newsletter Subscribe</a>
Thanks
You are simply not using valid selector. Replace
$('[data-fancybox data-src="#newsletterFancy"]')
with, for example:
$('[data-src="#newsletterFancy"]')
Right now I have this list:
<ul id="list">
<li id="active"><img src="main home page/purhome.png"></li>
<li id="active"><img src="main home page/purinfo.png"></li>
<li id="active"><img src="main home page/purgyms.png"></li>
<li id="active"><img src="main home page/purcontact.png"></li>
</ul>
And this JQuery:
$(document).ready(function(){
$("#home-link").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
});
When I click on the home link, the URL shows indexp.php#home, which is what i want it to show. This happens for all the links. However if i refresh the page after i click on the info link for example, the main_info div is shown, but the browser still says index.php#info. I want to read the hash somehow to show the correct div depending on what the url says.
So for example if I click on the info link, the url shows index.php#info. When I refresh it says the same thing but the main_info div shows when the main_info2 div is supposed to be showing.
function getHash() {
var hash = window.location.hash;
return hash.substring(1); // remove #
}
So I have that code. Would I do something like this?
if hash = 'info' // if url says index.php#info
show main_info2
hide main_info
if hash = nothing // So if url says index.php
show main_info
hide main_info2
Any ideas?
EDIT**
I'm trying to do something like this to make it work:
var currentValue = window.location.hash.substr(1)
$(document).ready(function() {
$("home-link").click(function(){
if(currentValue == "home") {
$("#main_info2").hide();
$("#main_info").show();
}
});
$("info-link").click(function(){
if(currentValue == "info") {
$("#main_info").hide();
$("#main_info2").show();
}
});
});
Although that is not working, can someone check the code?
You can use this jQuery plugin to listen to hash changes:
https://github.com/cowboy/jquery-hashchange
I would recommend using a plugin if you want your code to work cross browser because this hasn't been standardized yet. Especially older browsers (IE6) require extensive hacks.
After some discussion about the different answers and problem, I came up with this solution:
$(document).ready(function(){
$(window).hashchange(function(){
var hash = location.hash;
if(window.location.hash.substr(1) == "home") {
$("#info-container").hide();
$("#gyms-container").hide();
$("#contact-container").hide();
$("#home-container").show();
}
else if(window.location.hash.substr(1) == "info") {
$("#home-container").hide();
$("#gyms-container").hide();
$("#contact-container").hide();
$("#info-container").show();
}
else if(window.location.hash.substr(1) == "gyms") {
$("#home-container").hide();
$("#info-container").hide();
$("#contact-container").hide();
$("#gyms-container").show();
}
else if(window.location.hash.substr(1) == "contact") {
$("#home-container").hide();
$("#info-container").hide();
$("#gyms-container").hide();
$("#contact-container").show();
}
$('#list a').each(function(){
var that = $(this);
that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
});
})
$(window).hashchange();
});
This work beautifully.
This uses the hashchange plugin mentioned above so make sure you insert the script into your head before using this function.
Here is bit of code to help you get started if you use https://github.com/cowboy/jquery-bbq:
$(document).ready(function(){
$("#home-link").click(function(){
$("#main_info2").hide();
$("#main_info").show();
});
$("#info-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#gyms-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$("#contact-link").click(function(){
$("#main_info").hide();
$("#main_info2").show();
});
$(window).bind( 'hashchange', function(e) {
url = $.deparam.fragment();
url && $( 'a[href="#' + url + '"]' ).trigger('click');
});
$(window).trigger('hashchange');
});
I'm trying to make login form open in iframe. If the login is successful when the user clicks submit button, I want iframe to close and redirect browser to index.php.
The problem is that I don't know how to close iframe from that point.
Here's the code relevant to iframe that I have:
login.tmpl (html file, where the form is)
<div class="form_item submit_button">
<button type="submit" name="submit">Login</button>
</div>
login.php (where i redirect to index. this is where i think i need some extra code to close iframe)
if (!$error) {
throw new RedirectBrowserException('index.php');
}
gallery.tmpl (where iframe is called. should not be important i think)
<a class="fancybox iframe fancybox.iframe" href="login.php">Iframe Login</a>
Edit. Here's my jQuery code (gallery.tmpl):
$(document).ready(function() {
$(".fancybox").fancybox({
padding : 0,
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
$(document).ready(function() {
$("a.iframe").fancybox({
autoDimensions : false,
autoSize : false,
padding : 0,
width : 395,
height : 195,
type : 'iframe'
});
});
You could rather redirect to index.php from the page that opened fancybox (gallery.tmpl). Just add a callback in your fancybox custom script :
$(".fancybox").fancybox({
afterClose : function(){
// redirects to another file after closing
window.location.href = "index.php";
}
});
Then, inside loging.php you could do this to close fancybox on success:
<?php if (!$error) { ?>
<script>parent.jQuery.fancybox.close();</script>
<?php }; ?>
Just solved the problem. In the end, this made it work:
if (!$error) { ?>
<script type="text/javascript">
parent.$.fancybox.close(); //can use jQuery instead of $
window.parent.location ='index.php';
</script> <?php
}
So, redirecting the parent is what I was missing until I figured it out just now. I tried using some kind of delay at first, which didn't work.
Ok this is my issue if anyone can help, please.
I have a href that div id to switch content - I would like to add another document ready function javascript without conflicting with make tab I have already.
Example of make tab already:
<script type="text/javascript">
{literal}
$(document).ready(function(){
function makeTabs(selector) {
var tabContainers = $(selector + ' > div');
tabContainers.removeClass("selected").filter(':first').addClass("selected");
galleryRendered = false;
$(selector + ' > ul a').click(function () {
tabContainers.removeClass("selected");
tabContainers.filter(this.hash).addClass("selected");
$(selector + ' > ul a').removeClass('selected');
$(this).addClass('selected');
if (this.hash == '#Pictures' && !galleryRendered)
{
var galleries = $('.pictures > .ad-gallery').adGallery({
effect : 'slide-hori',
enable_keyboard_move : true,
cycle : true,
animation_speed : 400,
slideshow: {
enable: false
},
callbacks: {
init: function() {
this.preloadImage(0);
this.preloadImage(1);
this.preloadImage(2);
}
}
});
galleryRendered = true;
}
if (this.hash == '#OnTheMap') document.getElementById("Map").map.onContainerChanged();
return false;
}).filter(':first').click();
}
makeTabs('.tabs');
});
{/literal}
</script>
Want to create a second one so I can create tabs inside of an existing div id area/content to switch from photo to video to youtube.
<div class=".tabs"><ul><li>[[Photo]]</li><li>[[Youtube]]</li><li>[[Video]]</li></ul><div id="photo">Test</div><div id="tube">Test</div><div id="vid">Test</div></div>
This will be inside a div id that already exist that uses the first tab creator shown above.
In jQuery you just have to do this:
$(function(){
// code here
});
$(function(){
// more code here
});
Every function declared like this will be executed on domready.
I am submitting some data to my database then reloading the same page as the user was just on, I was wondering if there is a way to remember the scroll position the user was just on?
I realized that I had missed the important part of submitting, so, I decided to tweak the code to store the cookie on click event instead of the original way of storing it while scrolling.
Here's a jquery way of doing it:
jsfiddle ( Just add /show at the end of the url if you want to view it outside the frames )
Very importantly, you'll need the jquery cookie plugin.
jQuery:
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When a button is clicked...
$('#submit').on("click", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
Here's still the code from the original answer:
jsfiddle
jQuery:
// When document is ready...
$(document).ready(function() {
// If cookie is set, scroll to the position saved in the cookie.
if ( $.cookie("scroll") !== null ) {
$(document).scrollTop( $.cookie("scroll") );
}
// When scrolling happens....
$(window).on("scroll", function() {
// Set a cookie that holds the scroll position.
$.cookie("scroll", $(document).scrollTop() );
});
});
#Cody's answer reminded me of something important.
I only made it to check and scroll to the position vertically.
(1) Solution 1:
First, get the scroll position by JavaScript when clicking the submit button.
Second, include this scroll position value in the data submitted to PHP page.
Third, PHP code should write back this value into generated HTML as a JS variable:
<script>
var Scroll_Pos = <?php echo $Scroll_Pos; ?>;
</script>
Fourth, use JS to scroll to position specified by the JS variable 'Scroll_Pos'
(2) Solution 2:
Save the position in cookie, then use JS to scroll to the saved position when page reloaded.
Store the position in an hidden field.
<form id="myform">
<!--Bunch of inputs-->
</form>
than with jQuery store the scrollTop and scrollLeft
$("form#myform").submit(function(){
$(this).append("<input type='hidden' name='scrollTop' value='"+$(document).scrollTop()+"'>");
$(this).append("<input type='hidden' name='scrollLeft' value='"+$(document).scrollLeft()+"'>");
});
Than on next reload do a redirect or print them with PHP
$(document).ready(function(){
<?php
if(isset($_REQUEST["scrollTop"]) && isset($_REQUEST["scrollLeft"]))
echo "window.scrollTo(".$_REQUEST["scrollLeft"].",".$_REQUEST["scrollTop"].")";
?>
});
Well, if you use _targets in your code you can save that.
Or, you can do an ajax request to get the window.height.
document.body.offsetHeight;
Then drop them back, give the variable to javascript and move the page for them.
To Remember Scroll all pages Use this code
$(document).ready(function (e) {
let UrlsObj = localStorage.getItem('rememberScroll');
let ParseUrlsObj = JSON.parse(UrlsObj);
let windowUrl = window.location.href;
if (ParseUrlsObj == null) {
return false;
}
ParseUrlsObj.forEach(function (el) {
if (el.url === windowUrl) {
let getPos = el.scroll;
$(window).scrollTop(getPos);
}
});
});
function RememberScrollPage(scrollPos) {
let UrlsObj = localStorage.getItem('rememberScroll');
let urlsArr = JSON.parse(UrlsObj);
if (urlsArr == null) {
urlsArr = [];
}
if (urlsArr.length == 0) {
urlsArr = [];
}
let urlWindow = window.location.href;
let urlScroll = scrollPos;
let urlObj = {url: urlWindow, scroll: scrollPos};
let matchedUrl = false;
let matchedIndex = 0;
if (urlsArr.length != 0) {
urlsArr.forEach(function (el, index) {
if (el.url === urlWindow) {
matchedUrl = true;
matchedIndex = index;
}
});
if (matchedUrl === true) {
urlsArr[matchedIndex].scroll = urlScroll;
} else {
urlsArr.push(urlObj);
}
} else {
urlsArr.push(urlObj);
}
localStorage.setItem('rememberScroll', JSON.stringify(urlsArr));
}
$(window).scroll(function (event) {
let topScroll = $(window).scrollTop();
console.log('Scrolling', topScroll);
RememberScrollPage(topScroll);
});
I had major problems with cookie javascript libraries, most cookie libraries could not load fast enough before i needed to scroll in the onload event. so I went for the modern html5 browser way of handling this. it stores the last scroll position in the client web browser itself, and then on reload of the page reads the setting from the browser back to the last scroll position.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
$(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
}
$(window).on("scroll", function() {
localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
});
});
</script>
I tackle this via using window.pageYOffset . I saved value using event listener or you can directly call window.pageYOffset. In my case I required listener so it is something like this:
window.addEventListener('scroll', function() {
document.getElementById('showScroll').innerHTML = window.pageYOffset + 'px';
})
And I save latest scroll position in localstorage. So when next time user comes I just check if any scroll value available via localstorage if yes then scroll via window.scrollTo(0,myScrollPos)
sessionStorage.setItem("VScroll", $(document).scrollTop());
var scroll_y = sessionStorage.getItem("VScroll");
setTimeout(function() {
$(document).scrollTop(scroll_y);
}, 300);