|
JavaScript - Help With Session Cookie For Lightbox
I need a session cookie that way only my lightbox only pops up one time per visit. I have no idea how to do this. Can anyone help? I've searched for session cookies and they only confuse me.
Similar TutorialsHi, I've just written a lovely bit of code where a user sorts a list and then this list is returned to them. Problem is, that I used cookies to do this and I've just found out that cookies are banned for this website - ah! My code is below - can someone please give me some pointers? I've tried a few things but can't get it to work // function that writes the list order to a cookie function getOrder() { // save custom order to cookie $.cookie(setCookieName, $(setSelector).sortable("toArray"), { expires: setCookieExpiry, path: "/" }); } // function that restores the list order from a cookie function restoreOrder() { var list = $(setSelector); if (list == null) return // fetch the cookie value (saved order) var cookie = $.cookie(setCookieName); if (!cookie) return; // make array from saved order var IDs = cookie.split(","); // fetch current order var items = list.sortable("toArray"); // make array from current order var rebuild = new Array(); for ( var v=0, len=items.length; v<len; v++ ){ rebuild[items[v]] = items[v]; } for (var i = 0, n = IDs.length; i < n; i++) { // item id from saved order var itemID = IDs[i]; if (itemID in rebuild) { // select item id from current order var item = rebuild[itemID]; // select the item according to current order var child = $("div.ui-sortable").children("#" + item); // select the item according to the saved order var savedOrd = $("div.ui-sortable").children("#" + itemID); // remove all the items child.remove(); // add the items in turn according to saved order // we need to filter here since the "ui-sortable" // class is applied to all div elements and we // only want the very first! You can modify this // to support multiple lists - not tested! $("div.ui-sortable").filter(":first").append(savedOrd); } } } // code executed when the document loads $(function() { // here, we allow the user to sort the items $(setSelector).sortable({ axis: "y", cursor: "move", update: function() { getOrder(); } }); // here, we reload the saved order restoreOrder(); }); I have been looking all over the web for a solution, because my website displays funky in safari. To fix this i figured i'd tell users that if they are using safari, then using javascript, i could tell them a message. Originally i tried detecting safari then displaying a message. But i couldn't ever find a browser detection for safari. So i thought wait.... If i could: 1. get a javascript alert saying my message. 2. time that message alert frequency by a session, say 10 days? or even every browser session... Then i could solve my problem. However i can't figure out any of this. So if anybody would be willing to help, i'd be very grateful. Hi, I have a website where the user can navigate different categories by tab. The problem is, when they're on a tab other than the default one and they refresh the page or click to another page, it puts them back on the first tab. I know this can be solved by using a session cookie of some type, I just need some help on implementing it into my site. http://www.thatswhyimbroke.com/ - so you can see what i'm talking about. If you look at the different tabs: Price High, price low, food & drink, etc. I want the user to be able to go to one of those, click to page 2 or refresh, and still be on that tab. Any help would be much appreciated! hello everybody, here I'm asking for help again. sorry for that in advance. anyhow, I have the following code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" media="screen" rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".example7").colorbox({width:"300px", height:"500px", iframe:true, open: true});
});
</script>
</head>
<body onload="example7();">
<a class='example7' href="tofes.html"></a>
teststestestest
</body>
</html>
I want the lightbox window open only once a day for every unique visitor on my website. I understand I should use some sort of cookie implented, but I dont really understand how to. Thanks in advance, daniel. Hi everyone, I am using a jQuery cookie script to set the cookie of some elements on my website. One of the problems is that I need the cookie to not expire after one day, I need it to expire after a while (I'm going to start off with a year). Here's my script, the red part is what I've been editing. Code: /**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secu true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000 * 365));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
Hello. Am I missing any coding or anything? I'm really confused and have yet to find any help. I got the instructions from http://www.huddletogether.com/projects/lightbox2/ I would go to their forums but haven't received an approval email for over a week. Odd. Anyway, here is my link with the sample thumbnail. It opens the image in a new page. Thanks! http://creativepink.net/packaging.php Hi, I am using Lightbox+ and overall it's very good for my needs. However it has a small problem that is causing me to loose hair, I have tried to fix it but my grasp of Javascript just isn't cutting it. If you goto http://serennz.sakura.ne.jp/toybox/lightbox/ and click on the image "Sample 2" then use the next arrow to go to "Sample 3" you have to hover off the image and then back on to get the previous and zoom icons to show again. I have been able to make the bug occur every time in both Firefox 3.6 and IE6. I am guessing the mouseover event isn't triggering correctly due to the image object moving underneath the mouse pointer but I just can't fix it. Any help, pushes in the right direction, anything. Cam. I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides. this is the code im using: Code:
// Javascript
<script language="javascript">
$(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000);
$("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
});
});
</script>
// CSS
#lightbox {
display:none;
background:#000000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
// HTML
<a id="show-panel" href="#" class="small">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
<p>You can add any valid content here.</p>
<p align="center">
<a id="close-panel" href="#" class="small">Close this window</a>
</p>
</div><!-- /lightbox-panel -->
<div id="lightbox"> </div><!-- /lightbox -->
can some tell me how this image gallery with lightbox is done? I am trying to figure this out and was searching, but couldn't find how this was implemented with lightbox. http://www.davirusso.com/work/ I've never done java script, but I need this lightbox effect and I can never figure it out! http://www.youtube.com/watch?v=_Vv0QVP2CzE there's one tutorial I tryed, but for some reason, the light box never works, it always just opens in a new window. The website I got the codes from http://www.lokeshdhakar.com/projects/lightbox2/#how says that if it doesn't work there must be a conflicting code, but I don't have anything that I would see that would be conflicting this. I'm just trying to get a simple effect on a tutorial website I am creating so you can click the image and it enlarges in the lightbox. Can anyone help me out here? I really would like to figure out this effect. Thanks Figured it out... admin can delete.
http://www.fotoderyadijital.somee.co...cekimleri.html why my gallery is too slow when i double click the image is it about lightbox script or images is too big size. can you check for me. Hi, could someone please tell me what I'm doing wrong with this page? http://www.silvergatehomes.com/customhomestest.html I've tried a bunch of things and cannot figure out what I'm doing wrong. Thanks. P.S. The reason I'm writing is because the images aren't opening. i made a gallery using lightbox but i have a problem that the menu (created by allwebmenu program) is always on top of the lightbox so the pictures i cutted.. how to solve this problem? Hey folks, I'm working on a complete recode of my website and I would love to use a lightbox for my image gallery. I've been trying to research different lightboxes and have so far found it quite the runaround. Could anyone recommend one? I'm just looking for one with simple implementation that allows for a single image to be displayed with closing and forward/backward functions for clicking through the different images in the gallery. If anyone wants/needs more info, please let me know. Thanks in advance. I am making a website for school and have made a lightbox that works perfectly in all NEW browsers. Only, they use internet explorer 7. Because of this, the lightbox doesnt work properly, and instead sticks the the side of the screen, doesnt dim the background and simply doesnt work. Is there a different lightbox that will work for IE7? and how can i make a rule to only show it for browsers older than IE9? (I know of the html 'if lt ie9' rule if that helps) Thanks. Code: <?
session_start();
if(!session_is_registered(myusername)){
header("location:index.php");
}
?>
<?php
//users data query
$sesusername = $_SESSION['myusername'];
$sespassword = $_SESSION['mypassword'];
include_once("scripts/connect.php");
$memberquery = mysql_query("SELECT * FROM members WHERE username='$sesusername' AND password='$sespassword'");
while($row = mysql_fetch_assoc($memberquery)){
$id = $row['id'];
$photo = $row['profile_picture'];
$name = $row['name'];
$username = $row['username'];
$joined = $row['date_joined'];
$password = $row['password'];
$email = $row['email'];
$freinds = $row['friends'];
}
?>
<?php
//friends data
$friendsquery = mysql_query("SELECT * FROM members");
while($row = mysql_fetch_assoc($friendsquery)){
$user = $row['name'];
$userpic = $row['profile_picture'];
$id = $row['id'];
{ $friend .='<img src="' . $userpic . '" style="width:100px; height:90px; vertical-align:middle"><a href="profile.php?id=' . $id . '"> ' . $user . '</a></br></br>' ;
}
}
?>
<DOCTYPE HTML>
<html>
<head>
<title>Dead psycho | Friends</title>
<style type="text/css">
#friend_container{
display:none;
background:#000000;
opacity:0.7;
filter:alpha(opacity=90);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
#friends_content{
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
max-height: 400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #a11e22;
z-index:1001;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
Overflow: scroll;
}
a{ color:#a11e22 ;}
#friend{height:150px;
width:150px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a#open_friends").click(function(){
$("#friend_container, #friends_content").fadeIn(300);
})
$("a#close_friends").click(function(){
$("#friend_container, #friends_content").fadeOut(300);
})
})
</script>
<?php include_once("menu.php"); ?>
</head>
<body>
<div id="container">
<div id="leftside">
<?php require_once("sidebar_left.php"); ?>
</div>
<div id="content">
<a id="open_friends" href="#"><b>All friends</b></a>
<div id="friends_content">
<h2><center>Friends</center></h2>
<hr width="90%" color="#a11e22"/>
<?php echo "$friend"; ?> <br/>
<b><center><a id="close_friends" href="#">Close</a></center></b>
</div>
<div id="friend_container"> </div></div>
</div>
<div id="footer" align="justify">
<?php include_once("scripts/copy.php"); ?>
</div>
</body>
</html>
Hey guys, I'm new to the forum and thought I should sign up to learn a little more. I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images... http://www.weareunit.com/index.php?p=3D Thanks I was wondering if it is possible to embed javascript within a lightbox. I believe a lightbox in most cases uses its own javascript code, but i am looking to have an unrelated javascript function working within the lightbox, under the image, if possible. Thanks in advance. Any idea how can I use the slimbox to create a really small lightbox (such as 5x5 pixels), instead of the usual large lightbox? Your help is appreciated. |
|||||||