We Keep Coding

addClass and cookie support

i have script in my popup
$(function() {
$('.window_content a.window_close').on('click', function(e) {
e.preventDefault();
$(this).parent().removeClass('opened');
$('#window_overlay').removeClass('opened');
});
$('.window_content').addClass('opened');
$('#window_overlay').addClass('opened');
I need to add a cookie support so that this popup is displayed at the specified time
and it was not displayed every time the page was refreshed
Any help really appreciated, thank you!
Now i Try Use LocalStorage but popup does not disappear from the page when i refresh ;/
<script>
$(function() {
$('.window_content a.window_close').on('click', function(e) {
e.preventDefault();
$(this).parent().removeClass('opened');
$('#window_overlay').removeClass('opened');
});
if(localStorage.getItem('window_overlay') != 'shown') {
$(this).delay(2000).fadeIn();
localStorage.setItem('window_overlay','shown')
}
$('.window_content').addClass('opened');
$('#window_overlay').addClass('opened');
});
</script>

$(function() {
$('.window_content a.window_close').on('click', function(e) {
e.preventDefault();
$(this).parent().addclass('opened');
$('#window_overlay').addclass('opened');
});
if(localStorage.getItem('window_overlay') != 'shown') {
$(this).delay(2000).fadeIn();
localStorage.setItem('window_overlay','shown')
}
});

Scroll to end of page after load ajax

function chat (){
$.ajax({
url: "chat_motor.php",cache: false,success: function(html){
$("#chat").html(html);
},
});
}
setInterval (chat, 1000);
I want scroll to end of page after load chat_motor.php
how can i scroll to down after run this code?

You could do this:
window.scrollTo(0,document.body.scrollHeight);

FadeOut Content load and show content

i want to simply show the content after load not fadeIn how is it possible?
$(function() {
$('.hovers').click(function(event) {
var target = $(this).attr('href');
window.location.hash = target;
$.ajax({
url: target,
success: function(data) {
$('#allcontent')
.fadeOut('slow', function() {
$(this).html(data).fadeIn('slow');
});
}
});
return false;
});
});
maybe i use .show() ?
Thanks for help

success: function(data) {
$('#allcontent').html(data).show();
}

Just fadeIn 0 , which happens immediately
$(this).html(data).fadeIn(0);
also you might want to do this
$(this).html(data).delay(2000).fadeIn(0);
adding a delay of 2 seconds or however much you want, and then show immediately

show content of each page when link us clicked

Here is example which shows content of different div on when button is clicked.
Fidddle: http://jsfiddle.net/teddyrised/NHtvM/15/
Rather then div, I want to display the content of different page when link is clicked.
There must not appear scroll bar.
Header and footer should remain fixed. how to do this?
JS:
$(function () {
// Scroll to function
function scrollTo(ele) {
$("html, body").animate({
scrollTop: $(ele).offset().top - $("header").outerHeight()
});
}
// Detect location hash
if (window.location.hash) {
scrollTo(window.location.hash);
}
// Detect click event
$("header a[href^='#']").click(function (e) {
var target = $(this).attr("href");
scrollTo(target);
e.preventDefault();
});
});

If content is loaded you can hide-show what you need. If by page you mean a external page you can call the resource with a ajax call:
$.ajax({
url: "http://fiddle.jshell.net/user/login/",
context: document.body
}).done(function(data) {
target.html(data);
scrollTo(target);
});
http://jsfiddle.net/2LCM4/

jQuery, Shadowbox and AJAX

I would like to load some content using AJAX and Shadowbox
Basically I would like the user to goto a page in case javascript is off. So this is what I want to do :-
1) Cancel the click event i.e the User must not go to a different page.
2) Load content using ajax function in jQuery
3) Show the content inside a shadow box
My code works ok until loading content using ajax but the shadowbox is not displayed and the URL is gettin refreshed i guess, everything goes blank.
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "/ajax-post.php?p="+id,
success: function(data){
Shadowbox.open({
content: data,
player: "html",
height: 350,
width: 350
});
}
});
return false;
});
UPDATE 1
tried this code, and as soon as the shadowbox loads, the document gets reloaded and white.
Shadowbox.init({
skipSetup: true,
players: ["html"]
});
// LOAD
jQuery(document).ready(function($){
// rounded corners
$('img').addClass('corner iradius16');
DD_roundies.addRule('#nav li a',4,true);
DD_roundies.addRule('.grid',6,true);
$('.post h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "<?php bloginfo( 'template_directory'); ?>/ajax-post.php?p="+id,
success: function(data){
show_box(data);
}
});
return false;
});
});
//shadowbox
function show_box(html) {
Shadowbox.open({
content: html,
player: "html",
height: 350,
width: 350
});
}
UPDATE 2
Okay got the prbolem, the html that I am getting via ajax has some javascript in it and that is the reason for the page reload.
Why is this happening ? Any ideas ?

Since you're not getting any JavaScript errors try debugging by breaking it down:
Ensure that the binding to and overriding of the click event is functioning properly:
$('h2 a').bind('click', function() {
alert('click even fired');
return false;
});
If that works, check the data that your ajax request is returning:
$('h2 a').bind('click', function() {
var id = $(this).attr('id');
$.ajax({
url: "ajax-post.php?p="+id,
success: function(data){
alert(data);
}
});
return false;
});
The code looks like it should work, so I'm guessing there's either something wrong elsewhere (in which case the first test will likely fail) or you're getting some really odd data returned.

Need to run
Shadowbox.setup('h2 a');
This will reinitialise and bind it to any ajax loaded content