Jquery Cookies och Confirm/Popup

10 januari, 2011

Hej!

På en sida/domän jag har, så vill jag att när besökaren kommer in, oavsett om det är startsidan eller en underliggande produktsida, så skall en confirm eller popup ruta, med en beskrivande och informativ text, förslagsvis i jquery, komma upp automatiskt. Antingen om man bara klickar Ok, för att stänga ner den och komma in på sidan, eller att man måste klicka Ja, för att komma in, om man klickar Nej kommer man tillbaka dit man kom ifrån.

Samtidigt vill jag att sidan känner av om besökaren har varit där innan och klickat på Ok, eller Ja, och isf skall den inte synas för besökaren.

Och detta kan man kanske göra via Cookies på något sätt.

Jag kommer inte åt koden på sidan, så därför måste detta fungera med ett Javascript, för det kan jag lägga till, som alltså laddas direkt när man kommer in på sidan/domänen.

Finns det någon som skulle kunna vara jättesnäll och hjälpa mig med detta?

MVH Magnus

10 januari, 2011

Finns det ingen chans att besökaren matat in adressen direkt eller öppnat i ny flik? Vart skall besökaren komma då, för då finns ingen sida att gå tillbaka till.

För dialogen finns jquery.ui.dialog för övrigt och där kan man styra vad som händer vid OK-klick (t ex sätta en cookie).

Du nämner jquery, finns det redan på sidan, och finns då jquery.ui? Kan du inte lägga till fler script heller? Hur lägger du in javascripten på sidan om du inte kan förändra koden på sidan?

12 januari, 2011

Jo den chansen finns ju, så tillbaka länken behöver inte vara med.

Det viktiga är bara att det finns information, och att man måste klicka ok för att stänga ner popup:en.

jquery-ui-custom.js och jquery-min.js finns.

Du kan kolla på sidan här:

http://shop.bitesandbottles.com/

Jag tror inte jag kan lägga till hela filer, men Javascript med funktioner kan jag lägga till.

tex:

function setCookie(c_name,value,expiredays)

{

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());

}

/Magnus

12 januari, 2011

//kolla kakan om den finns
if(!GetCookie('Cookiename')==false)
{
//kakan finns . gör något
}
else{
//annars visa dialog
if(confirm('Vill du svara på en fråga?'))
{
//JA: sätt en kaka och gör något.
}
else{
//Nej /Avbryt: gå tillbaka eller gör ingenting

}
}

Kolla nedan om funktioner gällande cookies

http://techpatterns.com/downloads/javascript_cookies.php

12 januari, 2011

Ok, men hur sätter jag cookien första gången?

För nu har jag fått till en popup iaf.

Men nu måste jag ha en cookie som känner av om man har varit på sidan innan, och klickat på länken, och isf ska inte popupen aktiveras.

Det vore även bra om man kunde sätta att cookien bara gäller i ett visst antal dagar.

Så här ser koden ut nu, utan cookies:

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
	$("#backgroundPopup").css({
		"opacity": "0.7"
	});
	$("#backgroundPopup").fadeIn("slow");
	$("#popupContact").fadeIn("slow");
	popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
	$("#backgroundPopup").fadeOut("slow");
	$("#popupContact").fadeOut("slow");
	popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
	"position": "absolute",
	"top": windowHeight/2-popupHeight/2,
	"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
	"height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP  
$(document).ready(function(){
   centerPopup();
   loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
	disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
	disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
	if(e.keyCode==27 && popupStatus==1){
		disablePopup();
	}
});

});

Eller är det bara att lägga in denna koden i en if-sats, som kollar om cookien finns?

/Magnus

13 januari, 2011

Nu har jag fått till så att det iaf skapas en Cookie(Namn med värdet Bites).

Så här ser koden ut än så länge:

<!--
//Don't remove this line: Script by Omid Rouhani, from www.JavaScript.nu
function spara(namn, innehall, lagringstid)         	//Funktionshuvud
{
lagringstid=parseInt(eval(lagringstid));                //Räknar ut och avrundar lagringstid's innehåll, t.ex. om det skickats som en sträng och inte som ett tal
if (lagringstid+""=="NaN")                         	//Om inget värde har givits åt lagringstid när funktionen anropades...
{
 datumsnutt="";                                        //Så får datumsnutt ett tomt värde.
}
else                                               	//Om ett värde har givits åt lagringstid när funktionen anropades...
{
 var datum = new Date();                                //Så deklareras datum, värdet blir dagens datum.
 datum.setTime(datum.getTime() + lagringstid);          //Datumet i datum ökar med det antal millisekunder som datum fått.
 datum=datum.toGMTString();                         	//Vi gör om datumet till GMT-tid.
 datumsnutt="; expires="+datum;                     	//Datumsnutt får värdet ; expires=DATUM
}
document.cookie=namn+"="+escape(innehall)+datumsnutt;    //Sparar kakan genom att tilldela document.cookie värdet kaknamnet, likamedtecken, kakvärdet i escape:ad form samt datumsnutten (är datumsnutt tomt så lagras kakan tills webbläsaren stängs).
}


spara("Namn","Bites");
//-->


//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
	$("#backgroundPopup").css({
		"opacity": "0.7"
	});
	$("#backgroundPopup").fadeIn("slow");
	$("#popupContact").fadeIn("slow");
	popupStatus = 1;
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
	$("#backgroundPopup").fadeOut("slow");
	$("#popupContact").fadeOut("slow");
	popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
	"position": "absolute",
	"top": windowHeight/2-popupHeight/2,
	"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
	"height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP  
$(document).ready(function(){
   centerPopup();
   loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
	disablePopup();
});

//Press Escape event!
$(document).keypress(function(e){
	if(e.keyCode==27 && popupStatus==1){
		disablePopup();
	}
});

});

Så nu behöver jag "bara" hjälp med att kolla om cookien finns, och att popup:en då inte skall synas.

Kan du hjälpa mig med det Jonas?

Jag har testat fram och tillbaka, men får det inte att fungera.

/Magnus

13 januari, 2011

Allt finns ju i länken jag skickade i förgående inlägg.

//kolla kakan om den finns
if(!GetCookie('Cookiename')==false)
{
//kakan finns . gör något
}
else{
//annars visa dialog
if(confirm('Vill du svara på en fråga?'))
{
//JA: sätt en kaka och gör något.
}
else{
//Nej /Avbryt: gå tillbaka eller gör ingenting

}
}

Kolla nedan om funktioner gällande cookies

http://techpatterns.com/downloads/javascript_cookies.php

// this function gets the cookie, if it exists
// don't use this, it's weak and does not handle some cases
// correctly, this is just to maintain legacy information
function GetCookie( name ) {

var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) &&
( name != document.cookie.substring( 0, name.length ) ) )
{
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ";", len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

13 januari, 2011

Ok, jag är inte helt hemma på Javascript, så jag fick lite hjälp från annat håll.

Och nu ser koden ut så här:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}

function getCookie(c_name)
{
if (document.cookie.length>0)
 {
 c_start=document.cookie.indexOf(c_name + "=");
 if (c_start!=-1)
   {
   c_start=c_start + c_name.length+1;
   c_end=document.cookie.indexOf(";",c_start);
   if (c_end==-1) c_end=document.cookie.length;
   return unescape(document.cookie.substring(c_start,c_end));
   }
 }
return "";
}


//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){

//loads popup only if it is disabled
if(popupStatus==0 && getCookie() == null){
	$("#backgroundPopup").css({
		"opacity": "0.7"
	});
	$("#backgroundPopup").fadeIn("slow");
	$("#popupContact").fadeIn("slow");
	popupStatus = 1;
               setCookie('popUp','true',7); 
}
}

//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
	$("#backgroundPopup").fadeOut("slow");
	$("#popupContact").fadeOut("slow");
	popupStatus = 0;
}
}

//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
	"position": "absolute",
	"top": windowHeight/2-popupHeight/2,
	"left": windowWidth/2-popupWidth/2
});
//only need force for IE6

$("#backgroundPopup").css({
	"height": windowHeight
});

}


//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP  
$(document).ready(function(){
   centerPopup();
   loadPopup();
});

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
	disablePopup();
});

//Press Escape event!
$(document).keypress(function(e){
	if(e.keyCode==27 && popupStatus==1){
		disablePopup();
	}
});

});

Men det funkar ändå inte.
Popup:en syns inte, trots att där inte finns någon Cookie från början.
if(popupStatus==0 && getCookie() == null)

Kan du se vad som är fel?

/Magnus

13 januari, 2011

Använd kodtaggar. Det blir lättare att läsa då.

Jag vet inte exakt vad som blir felet för dig, dock har du dubbla lyssnare mot document.ready, så ta bort det märkt med "raderat i slutet

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){

//LOADING POPUP 
$(document).ready(function(){  //Ta bort denna rad
centerPopup();
loadPopup();
});  //Ta bort denna rad

//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});

//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});

});

Sedan kan det vara annat som påverkar - det ser jag inte om jag inte får sidan i sin helhet (publicerad sida på nätet)

13 januari, 2011

Ok, här har du sidan:

http://shop.bitesandbottles.com/

Jag tog bort dem, men det funkar inte.

/Magnus

14 januari, 2011

jag ser inte ens att du anropar scriptet över huvudtaget.

14 januari, 2011

$(document).ready(function() { try { function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()); } function getCookie(c_name) { if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0 && getCookie() == null){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; setCookie('popUp','true',7); } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ //LOADING POPUP centerPopup(); loadPopup(); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); } }); }); } catch(err) { if(window.console && window.console.error) { console.error(arguments); } alert(err.toString()); } });

För det första så läser den javascriptet som text. Ändra content-type i php-filen så det är något du måste lösa för den läser inte av scriptet som den ska med radbrytningarna av den anledningen (tror jag).

För det andra så hittas inte loadPopup-funktionen

Sedan har du samma problem att du har flera document ready.

Det är elementära fel som du måste fixa. Scriptet i sig fungerar säkert bra.

24 januari, 2011

Jag har löst det nu.

Läs mer här:

http://www.vesign.se/jquery-popup-med-cookies/

24 januari, 2011

Varför inte lägga ut lösningen (glöm inte code-taggar när du klistrar in kod) här så att det kan hjälpa andra precis som du fått hjälp här?

Jquery Cookies och Confirm/Popup

Rekommendera Poster

Vesign

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Jonas__B

Länk till kommentar

Dela på andra webbplatser

Vesign

Länk till kommentar

Dela på andra webbplatser

Cluster

Länk till kommentar

Dela på andra webbplatser

Arkiverat

Vem är online 0 Medlemmar, 0 anonym, 47 gäster (Visa hela listan)

Populära medlemmar

Publika meddelanden

Senaste som Tittar

Senaste inlägg

Forum

Aktivitet

pcforalla.se