I have an animation that I am running using jQuery. I am assuming a good way to only play this animation once for the visitor is by setting a cookie. I basically need it to say you've been here before so set all the IDs listed to opacity:1 Is there an ultra simple solution to this? Thanks for any help
$(document).ready(function(){
$("#featureFade").animate({opacity:1},400,function(){
$("#image").delay(300).animate({opacity:1},300,function(){
$("#title").delay(300).animate({opacity:1},300,function(){
$("#message, #move").delay(200).animate({opacity:1},300,function(){
$("#move").animate({top: '400px',left: '0px'}, 500,function(){
$("#nav,#contentContainer,#button,#footer,#topLevelNav").delay(1000).animate({opacity:1},700);
});
});
});
});
});
});
Using the jQuery Cookie Plugin you can do this simply:
// check for previous visit
if ($.cookie('hasSeenAnimation') == null){
// ...
// play animation
// ...
// set cookie to stop next visit
$.cookie('hasSeenAnimation','true');
}
I would do it on the server side - if the cookie is set, just don't output the code for the animation...
Related
Im trying to display a welcome message for a few seconds then have it fade out and not return (unless user deletes cookies). I know i can do this 2 ways using either js cookies or localStorage. This is the code i'm using:
$(document).ready(function() {
if(localStorage.getItem('messageState') != 'shown'){
$("#message").delay(2000).fadeOut();
localStorage.setItem('messageState','shown')
}
$('#message').fadeOut();
});
});
But it's not fading out. Any ideas what i'm doing wrong?
Or would i be better using js cookie?
Here's a fiddle: http://jsfiddle.net/Y2D67/1786/
Delete your last line, the }); and the fadeout works.
$(document).ready(function() {
if(localStorage.getItem('messageState') != 'shown'){
$("#message").delay(2000).fadeOut();
localStorage.setItem('messageState','shown')
}
$('#message').fadeOut();
});
Your syntax is wrong, the closing bracket
})
does not belong
Localstorage would be a fine way to store something like this, I usually go by the rule that localstorage is for data I want to read on the front end and cookies are primarily for reading server-side
I am using a social login plugin to connect with my site. It works fine, but I want to remove its mark, like Powered By AJAY.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".ajay iframe").contents().find("#branding").attr("style","display:none");
});
</script>
I try to display none with its class and id but it does not work because all part come with frame.
Try to delay jquery css override with 2s delay, to see if this applies the modifications well or not. To change delay time, modify 2000 (2s) to whatever you want (1000 = 1second, 9000 = 9s, etc.)
You want to wait since when the page has finished loading, so put that code inside your $(document).ready(...); script.
jQuery(document).ready(function(){
setTimeout(function(){
jQuery(".ajay iframe").contents().find("#branding").attr("style","display:none");
;}, 2000);
})
UPDATE: jquery 1.4.0 introduced the .delay method. Check it out.
I dont know if you want it to modify a wordpress or a handmade webpage, anyway i did it some times using CSS, let me search for the classes i applied and i'll edit the answer. I need to know which social iframe are you loading.. facebook maybe? twitter? the solution is not the same sometimes due to the code charged by the iframe.
i let here an example and a code snippet:
jQuery(document).ready(function(){
$(document.body).append("it's gonna be legen-... wait for it");
setTimeout(function(){
alert("-dary!!")
;}, 4000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Oh and... if you could update the question with the code you want to modify after loading will be fine to build a proper css
You need to wait until iframe is loaded, also iframe need to be in the same domain as your page:
jQuery(document).ready(function() {
jQuery(".ajay iframe").load(function() {
jQuery(this).contents().find("#branding").
attr("style","display:none");
});
});
I'm not sure if this can be done. I'm new on jQuery :)
I have found a way to change a background by clicking an image. But when I refresh the page or change to another page, the background is changed to the original.
Do you know if there is a way to keep the new background selected?
Here is my code:
<script>
$(document).ready(function(){
$("#mood-clasico").click(function(){
$("#chef, #ranchos, #contacto").removeClass("parallax-4, parallax-2");
$("#chef, #ranchos, #contacto").addClass("parallax-1");
});
});
$(document).ready(function(){
$("#mood-chef").click(function(){
$("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-2");
$("#chef, #ranchos, #contacto").addClass("parallax-4");
});
});
$(document).ready(function(){
$("#mood-kids").click(function(){
$("#chef, #ranchos, #contacto").removeClass("parallax-1, parallax-4");
$("#chef, #ranchos, #contacto").addClass("parallax-2");
});
});
</script>
If you want the state to survive after the window's been closed or page has been navigated away from (to a different domain), use localStorage; otherwise, use sessionStorage (still survives refresh and navigation within the domain). Either way, you'll want to store the css class in a persistent variable and use that to instead of the string, which can help dry the code up a bit too.
Session storage is a little simpler, but your users would probably love you more for using localStorage -- implementation would be something like:
$(document).ready(function() {
var userPref = localStorage.getItem("bg-class") || 'your-default';
$("#chef, #ranchos, #contacto").addClass(userPref);
$("#mood-clasico").click(function(){
swapPref("parallax-4", "parallax-2", "parallax-1");
});
$("#mood-chef").click(function(){
swapPref("parallax-1", "parallax-2", "parallax-4");
});
$("#mood-kids").click(function(){
swapPref("parallax-4", "parallax-2", "parallax-1");
});
function swapPref(out1, out2, inn) {
$("#chef, #ranchos, #contacto")
.removeClass(userPref)
.removeClass(out1)
.removeClass(out2)
.addClass(inn);
localStorage.setItem("bg-class", inn);
}
});
For more persistence (like across different browsers or devices) you'd want to look into the file system api or storing the settings in a database, but based on your question it doesn't seem those options aren't worth the drawbacks. I left out some error handling and things you'd probably want to include, but I'd definitely recommend checking out using the web storage api by mozilla, which actually includes a similar example.
Use the jquery cookie plugin to do this,
details here https://github.com/carhartl/jquery-cookie
then set cookie,
$.cookie("changedBackground", 'true');
and after page refresh this check must be done
if($.cookie("changedBackground")=='true'){
//keep your changed background
}
only with jQuery it's impossible, you have to store the value
try to use session , cockies , external file or data base
I've been trying to search for a way to use cookies to save the change done by toggle on my website, but i can't get my head around cookies. Please help me i'm just new at jQuery and cookies.
<script>
$(document).ready(function(){
$("#switch").click(function(){
$("body").toggleClass("main");
});
});
</script>
You need https://github.com/carhartl/jquery-cookie to manage your cookies. Very simple and effective. You'll just have to modify your script :
$(document).ready(function(){
$("#switch").click(function(){
$("body").toggleClass("main");
$.cookie('your_cookie_name', 'your_cookie_value');
});
});
Good luck.
Load the jQuery cookie plugin, as referenced in Flo's answer. Then you can save the state with:
$(document).ready(function(){
$("#switch").click(function(){
$("body").toggleClass("main");
$.cookie("main", $("body").hasClass("main"));
});
});
You can later get the value of the cookie with:
var main_set = $.cookie("main");
I'm making a simple little website to apply a different formatting style to Reddit posts, I'm trying to add the infinite-scroll jQuery plugin but it doesn't do anything. I tried following the (very simple) instructions on the infinite-scroll page and when it didn't do anything I thought I must have entered something wrongly, but then I just copy/pasted the code from the Masonry/Infinite-Scroll example and it still didn't work. Masonry is working perfectly (finally) but I just can't figure out what is wrong with infinite-scroll. I understand the basics of jQuery and JavaScript, but obviously not as much as most of you people, so could you please help me out and let me know what is wrong? My site is live at reddit.ymindustries.com.
Thanks heaps, you guys have rarely failed me so far.
YM
EDIT: If there aren't enough images to fill up the page on the homepage, visit reddit.ymindustries.com/r/aww for more images.
EDIT 2: I believe I located the issue, it is described here: https://github.com/paulirish/infinite-scroll/issues/5
Now to figure out a fix...
EDIT 3: Added a little bit of a hack in to make it sort of work, but it just seems to loop the second page endlessly now. Hmm...
I think your problem is actually css. Make your page longer that client area height. add more images to $container
Point is, botom edge of your $container need to pass bottom of window so scroll event fires so infinite scroll can react on this event and calculate weather or not edge is reached
BTW, in same cases, for instance, when I shrink my window, the example you set is working.
=== UPDATE ===
I found some time to play with infinitescroll and here is final working script, just set pathParse method in your script
$(function () {
var $container = $('#itemContainer');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector:'.item'
});
});
$container.infinitescroll({
navSelector:'.navigation', // selector for the paged navigation
nextSelector:'.navigation #next', // selector for the NEXT link (to page 2)
itemSelector:'.item', // selector for all items you'll retrieve
bufferPx:40,
debug:true,
columnWidth:function (containerWidth) {
return containerWidth / 5;
},
loading:{
finishedMsg:'No more pages to load.',
img:'http://i.imgur.com/6RMhx.gif'
},
pathParse: function(path,page){
return $(this.nextSelector).attr("href");
}
},
// trigger Masonry as a callback
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}
);
});
Now, since your next link will not update by it self (http://reddit.ymindustries.com/?after=t3_yh4av), you need to change the callback to pull out last element from ajax response and change next link... could be something like this
function (newElements) {
// hide new items while they are loading
var $newElems = $(newElements).css({ opacity:0 });
// ensure that images load before adding to masonry layout
// ======> if query parameter after=... is caring filename then do this
var lastImageUrl= $newElements[$newElements.length-1].attr("src");
var lastFileName= lastImageUrl.substring(lastImageUrl.lastIndexOf("/") +1, lastImageUrl.lastIndexOf("."));
$("#next").attr("href", "http://reddit.ymindustries.com/?after="+lastFileName);
$newElems.imagesLoaded(function () {
// show elems now they're ready
$newElems.animate({ opacity:1 });
$container.masonry('appended', $newElems, true);
});
//console.log("test (never fired :( )");
}
You also need to take care of wich version of infinite-scroll your using since if you use the ones that comes with masonry/isotope (version 2.0b2.110713), both need a little hack in order to call the function and not use the predefined array:
//old code, to be changed (line 489)
desturl = path.join(opts.state.currPage);
// new code
desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);
This is already fixed in the newer versions of infinite-scroll
I had the same problem with jQuery's "infinitescroll" and Masonry. You might just solve this by giving your page more initial items so that the plugin's scrolling detection kicks in.
In WordPress this is under the "Reading" settings. By default WordPress only opens 10 items at a time. You could increase that number to 100/page to be more sure the window will be full initially. I had some code here that was just horrible, turns out I just needed longer pages, not more code.
So it's difficult to test these plugins on large displays if you don't have enough images. Maybe the solution is to scale the images larger on large displays so you're more sure about getting your content below the fold.
If you think someone might get to your website with a really huge display, I'm not sure what the answer is other than showing more items/page and maybe adding $('#masonry').infinitescroll('retrieve'); to your footer to load an extra page just in case.