Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 22
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2010
    Messaggi
    48

    salvare in sessione posizione e display di un div

    Salve a tutti
    ho scaricato da internet 2 script:
    • il primo mi fa comparire tramite la pressione di ctrl+m un determinato div;
    • il secondo invece funge da drag and drop, facendomi muovere questo div in qualsiasi punto della pagina;

    Il problema è che vorrei salvare in una sessione sia la posizione del div che il diplay, in modo che se anche volessi cambiare pagina, questo benedetto div rimanga visualizzato e nella stessa posizione della pagina precedente.
    Voi sapreste aiutarmi?

    Script per la visualizzazione tramite ctrl+m:

    codice:
    function shortcut(shortcut,callback,opt) {
    	//Provide a set of default options
    	var default_options = {
    		'type':'keydown',
    		'propagate':false,
    		'target':document
    	}
    	if(!opt) opt = default_options;
    	else {
    		for(var dfo in default_options) {
    			if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
    		}
    	}
    
    	var ele = opt.target
    	if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
    	var ths = this;
    
    	//The function to be called at keypress
    	var func = function(e) {
    		e = e || window.event;
    		
    		//Find Which key is pressed
    		if (e.keyCode) code = e.keyCode;
    		else if (e.which) code = e.which;
    		var character = String.fromCharCode(code).toLowerCase();
    
    		var keys = shortcut.toLowerCase().split("+");
    		//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
    		var kp = 0;
    		
    		//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
    		var shift_nums = {
    			"`":"~",
    			"1":"!",
    			"2":"@",
    			"3":"#",
    			"4":"$",
    			"5":"%",
    			"6":"^",
    			"7":"&",
    			"8":"*",
    			"9":"(",
    			"0":")",
    			"-":"_",
    			"=":"+",
    			";":":",
    			"'":"\"",
    			",":"<",
    			".":">",
    			"/":"?",
    			"\\":"|"
    		}
    		//Special Keys - and their codes
    		var special_keys = {
    			'esc':27,
    			'escape':27,
    			'tab':9,
    			'space':32,
    			'return':13,
    			'enter':13,
    			'backspace':8,
    
    			'scrolllock':145,
    			'scroll_lock':145,
    			'scroll':145,
    			'capslock':20,
    			'caps_lock':20,
    			'caps':20,
    			'numlock':144,
    			'num_lock':144,
    			'num':144,
    			
    			'pause':19,
    			'break':19,
    			
    			'insert':45,
    			'home':36,
    			'delete':46,
    			'end':35,
    			
    			'pageup':33,
    			'page_up':33,
    			'pu':33,
    
    			'pagedown':34,
    			'page_down':34,
    			'pd':34,
    
    			'left':37,
    			'up':38,
    			'right':39,
    			'down':40,
    
    			'f1':112,
    			'f2':113,
    			'f3':114,
    			'f4':115,
    			'f5':116,
    			'f6':117,
    			'f7':118,
    			'f8':119,
    			'f9':120,
    			'f10':121,
    			'f11':122,
    			'f12':123
    		}
    
    
    		for(var i=0; k=keys[i],i<keys.length; i++) {
    			//Modifiers
    			if(k == 'ctrl' || k == 'control') {
    				if(e.ctrlKey) kp++;
    
    			} else if(k ==  'shift') {
    				if(e.shiftKey) kp++;
    
    			} else if(k == 'alt') {
    					if(e.altKey) kp++;
    
    			} else if(k.length > 1) { //If it is a special key
    				if(special_keys[k] == code) kp++;
    
    			} else { //The special keys did not match
    				if(character == k) kp++;
    				else {
    					if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
    						character = shift_nums[character]; 
    						if(character == k) kp++;
    					}
    				}
    			}
    		}
    
    		if(kp == keys.length) {
    			callback(e);
    
    			if(!opt['propagate']) { //Stop the event
    				//e.cancelBubble is supported by IE - this will kill the bubbling process.
    				e.cancelBubble = true;
    				e.returnValue = false;
    
    				//e.stopPropagation works only in Firefox.
    				if (e.stopPropagation) {
    					e.stopPropagation();
    					e.preventDefault();
    				}
    				return false;
    			}
    		}
    	}
    
    	//Attach the function with the event	
    	if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
    	else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
    	else ele['on'+opt['type']] = func;
    }

    Script per il drag and drop:
    codice:
    var Giu = true;
    var L, T, X, Y;
    
    function Coordinate()
    {
      if (event.srcElement.id == "votazione")
      {
        Giu = true;
        document.onmousemove = Muovi;
        L = document.getElementById("votazione").style.pixelLeft;
        T = document.getElementById("votazione").style.pixelTop;
        X = event.clientX;
        Y = event.clientY;
      }
    }
    function Muovi()
    {
      if (Giu)
      {
        document.getElementById("votazione").style.pixelLeft = L + event.clientX - X;
        document.getElementById("votazione").style.pixelTop = T + event.clientY - Y;
      }
    }
    function Su() { Giu = false; }
    
    document.onmousedown = Coordinate;
    document.onmouseup = Su;
    Ivano

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Non esisto in js le sessioni devi usare i cookie, nelle discussioni utili (primo post in questo forum) trovi una discussione chiara e precisa con esempio sui cookie.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Per completezza, poi deciderà lui cosa usare&hellip;

    https://developer.mozilla.org/en/dom..._compatibility


  4. #4
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Cmq, così, per non aver nulla da fare&hellip; ti ho semplificato di brutto quello che stai già facendo&hellip;

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Draggable objects</title>
    <script type="text/javascript">
    var bMouseUp = true, oDragging, nMouseX, nMouseY, nStartX, nStartY, nZFocus = 100 /* the highest z-Index present in your page plus 1 */;
    
    function dragDown(oPssEvt1) {
    	var oMsEvent1 = oPssEvt1 || /* IE */ window.event;
    	oDragging = oMsEvent1.target;
    	if (oDragging.className !== "draggable") { return; }
    	bMouseUp = false;
    	nStartX = nStartY = 0;
    	for (var iOffPar = oDragging; iOffPar; iOffPar = iOffPar.offsetParent) {
    		nStartX += iOffPar.offsetLeft;
    		nStartY += iOffPar.offsetTop;
    	}
    	nMouseX = oMsEvent1.clientX;
    	nMouseY = oMsEvent1.clientY;
    	oDragging.style.zIndex = nZFocus++;
    	return false;
    }
    
    function dragMove(oPssEvt2) {
    	if (bMouseUp) { return; }
    	var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
    	oDragging.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
    	oDragging.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
    }
    
    function dragUp() { bMouseUp = true; }
    
    function keyListener(oPssEvt3) {
    	var oKeyEvt1 = oPssEvt3 || /* IE */ window.event;
    	if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 109) { // ctrl + m
    		document.getElementById("votazione").style.display = "block";
    	}
    }
    
    document.onmousedown = dragDown;
    document.onmousemove = dragMove;
    document.onmouseup = dragUp;
    document.onkeypress = keyListener;
    </script>
    <style type="text/css">
    .draggable {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: auto;
    	height: auto;
    	cursor: move;
    }
    
    #votazione {
    	width: 300px;
    	height: 200px;
    	left: 200px;
    	top: 200px;
    	background-color: #00ff00;
    	display: none;
    }
    </style>
    </head>
    
    <body>
    
    
    Premi ctrl + m !!</p>
    <div class="draggable" id="votazione">Hello world!</div>
    </body>
    </html>

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2010
    Messaggi
    48
    grazie per le risposte e per la delucidazione. Dovete sapere che sono proprio alle prime armi con javascript. Abituato col PHP, pensavo si potesse fare una cosa del genere con le sessioni.
    Dunque, il problema rimane comunque:

    da dove le prendo le variabili delle coordinate da salvare nel cookie?
    e poi come faccio a fargli scrivere che il div "votazione" è visualizzato o meno?

    Ivano

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2010
    Messaggi
    48
    dimenticavo:
    ho notato che lo script del plug and play su firefox non funge. Ho così cercato in rete, trovandone un altro in jquery.

    Si raggiungono a questi indirizzi:
    http://ajax.googleapis.com/ajax/libs.../jquery.min.js
    http://ajax.googleapis.com/ajax/libs...2/jquery-ui.js

  7. #7
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    Originariamente inviato da mest_suc
    da dove le prendo le variabili delle coordinate da salvare nel cookie?
    e poi come faccio a fargli scrivere che il div "votazione" è visualizzato o meno?

    Ivano
    Prova con questo, fa tutto quello che chiedi&hellip;

    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Draggable objects</title>
    <script type="text/javascript">
    var	oDragging, nMouseX, nMouseY, nStartX, nStartY, bMouseUp = true, nZFocus = 100 /* the highest z-Index present in your page plus 1 */,
    	sDnDPref = "dr-drp_", oCookies = new (function(sCookies) {
    		for (var iCouple, iIdx = 0, aCookies = sCookies.split(/;\s?/); iIdx < aCookies.length; iIdx++) {
    			iCouple = aCookies[iIdx].split("=");
    			this[unescape(iCouple[0])] = iCouple.length > 1 ? unescape(iCouple[1]) : "";
    		}
    	})(document.cookie);
    
    function dragDown(oPssEvt1) {
    	var oMsEvent1 = oPssEvt1 || /* IE */ window.event;
    	for (var bExit = true, iNode = oMsEvent1.target; iNode; iNode = iNode.parentNode) {
    		if (iNode.className === "draggable") { bExit = false; oDragging = iNode; break; }
    	}
    	if (bExit) { return; }
    	bMouseUp = false;
    	nStartX = nStartY = 0;
    	for (var iOffPar = oDragging; iOffPar; iOffPar = iOffPar.offsetParent) {
    		nStartX += iOffPar.offsetLeft;
    		nStartY += iOffPar.offsetTop;
    	}
    	nMouseX = oMsEvent1.clientX;
    	nMouseY = oMsEvent1.clientY;
    	oDragging.style.zIndex = nZFocus++;
    	return false;
    }
    
    function dragMove(oPssEvt2) {
    	if (bMouseUp) { return; }
    	var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
    	oDragging.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
    	oDragging.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
    }
    
    function dragUp() {
    	bMouseUp = true;
    	if (oDragging.id) { document.cookie = escape(sDnDPref + oDragging.id) + "=" + escape(oDragging.style.left + "|" +  oDragging.style.top + "|block|" + oDragging.style.zIndex) + "; path=/"; }
    }
    
    function dragShow(sToShowId) {
    	var oToShow = document.getElementById(sToShowId)
    	oToShow.style.display = "block";
    	document.cookie = escape(sDnDPref + sToShowId) + "=" + escape(oToShow.style.left + "|" +  oToShow.style.top + "|block|" + oToShow.style.zIndex) + "; path=/";
    }
    
    function dragHide(sToHideId) {
    	var oToHide = document.getElementById(sToHideId);
    	oToHide.style.display = "none";
    	document.cookie = escape(sDnDPref + sToHideId) + "=" + escape(oToHide.style.left + "|" +  oToHide.style.top + "|none|" + oToHide.style.zIndex) + "; path=/";
    }
    
    function dragReset() {
    	var oToSet, aVals, nNewZ;
    	for (var iCookie in oCookies) {
    		if (iCookie.indexOf(sDnDPref) !== 0) { continue; }
    		oToSet = document.getElementById(iCookie.slice(sDnDPref.length));
    		if (!oToSet) { continue; }
    		aVals = oCookies[iCookie].split("|");
    		if (aVals.length > 0) {
    			oToSet.style.left = aVals[0]; oToSet.style.top = aVals[1]; oToSet.style.display = aVals[2]; oToSet.style.zIndex = aVals[3];
    			nNewZ = parseFloat(aVals[3]);
    			if (nNewZ >= nZFocus) { nZFocus = nNewZ + 1; }
    		}
    	}
    }
    
    document.onmousedown = dragDown;
    document.onmousemove = dragMove;
    document.onmouseup = dragUp;
    document.onkeypress = keyListener;
    window.onload = dragReset;
    
    function keyListener(oPssEvt3) {
    	var oKeyEvt1 = oPssEvt3 || /* IE */ window.event;
    	if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 109) { /* ctrl + m */ dragShow("votazione"); }
    }
    </script>
    <style type="text/css">
    .intLink {
    	cursor: pointer;
    	text-decoration: underline;
    	color: #0000ff;
    }
    
    .draggable {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: auto;
    	height: auto;
    	cursor: move;
    }
    
    #votazione {
    	width: 300px;
    	height: 200px;
    	left: 200px;
    	top: 200px;
    	background-color: #00ff00;
    	display: none;
    }
    </style>
    </head>
    
    <body>
    
    
    Premi ctrl + m !!</p>
    <div class="draggable" id="votazione">
    
    
    Votazione</p>
    
    
    <span class="intLink" onclick="dragHide('votazione');">Chiudi</span></p>
    </div>
    
    <div class="draggable" id="altroDiv" style="background-color:#aaaaaa;width:450px;height:200px;left:200px;top:200px;display:none;">
    
    
    Un altro Div!!</p>
    
    
    <span class="intLink" onclick="dragHide('altroDiv');">Chiudi</span></p>
    </div>
    
    
    
    <span class="intLink" onclick="dragShow('altroDiv');">Apri altro div!!</span></p>
    </body>
    </html>

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2010
    Messaggi
    48
    caspita.. l'ho provato e funziona alla perfezione.. mi hai semplificato tutto.. grazie CarloMarx.
    Un piccolo dettaglio che avevo dimenticato di scrivere. Il div votazione si apre con il ctrl+m, e si dovrebbe chiudere con il ctrl+z. eheheh

  9. #9
    Utente di HTML.it L'avatar di carlomarx
    Registrato dal
    Oct 2009
    Messaggi
    1,669
    codice:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Draggable objects</title>
    <script type="text/javascript">
    var oDragging, nMouseX, nMouseY, nStartX, nStartY, bDragStop = true, nZFocus = 99 /* lo z-Index maggiore presente nella pagina piu' uno! */, sDnDPref = "dr-drp_";
    
    function dragDown(oPssEvt1) {
    	var oMsEvent1 = oPssEvt1 || /* IE */ window.event;
    	for (var bExit = true, iNode = oMsEvent1.target; iNode; iNode = iNode.parentNode) {
    		if (iNode.className === "draggable") { bExit = false; oDragging = iNode; break; }
    	}
    	if (bExit) { return; }
    	bDragStop = false;
    	nStartX = nStartY = 0;
    	for (var iOffPar = oDragging; iOffPar; iOffPar = iOffPar.offsetParent) {
    		nStartX += iOffPar.offsetLeft;
    		nStartY += iOffPar.offsetTop;
    	}
    	nMouseX = oMsEvent1.clientX;
    	nMouseY = oMsEvent1.clientY;
    	oDragging.style.zIndex = nZFocus++;
    	return false;
    }
    
    function dragMove(oPssEvt2) {
    	if (bDragStop) { return; }
    	var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
    	oDragging.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
    	oDragging.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
    }
    
    function dragUp() {
    	if (!bDragStop && oDragging.id) { document.cookie = escape(sDnDPref + oDragging.id) + "=" + escape(oDragging.style.left + "/" +  oDragging.style.top + "/block/" + oDragging.style.zIndex) + "; path=/"; }
    	bDragStop = true;
    }
    
    function dragShow(sToShowId) {
    	var oToShow = document.getElementById(sToShowId)
    	oToShow.style.display = "block";
    	oToShow.style.zIndex = nZFocus++;
    	document.cookie = escape(sDnDPref + sToShowId) + "=" + escape(oToShow.style.left + "/" +  oToShow.style.top + "/block/" + oToShow.style.zIndex) + "; path=/";
    }
    
    function dragHide(sToHideId) {
    	var oToHide = document.getElementById(sToHideId);
    	oToHide.style.display = "none";
    	document.cookie = escape(sDnDPref + sToHideId) + "=" + escape(oToHide.style.left + "/" +  oToHide.style.top + "/none/" + oToHide.style.zIndex) + "; path=/";
    }
    
    function dragReset() {
    	for (var iCookie, oToSet, aVals, nNewZ, iCouple, iIdx = 0, aCookies = document.cookie.split(/;\s?/); iIdx < aCookies.length; iIdx++) {
    		iCouple = aCookies[iIdx].split("=");
    		if (iCouple.length < 2) { continue; }
    		iCookie = unescape(iCouple[0]);
    		if (iCookie.indexOf(sDnDPref) !== 0) { continue; }
    		oToSet = document.getElementById(iCookie.slice(sDnDPref.length));
    		if (!oToSet) { continue; }
    		aVals = unescape(iCouple[1]).split("/");
    		if (aVals.length > 0) {
    			oToSet.style.left = aVals[0]; oToSet.style.top = aVals[1]; oToSet.style.display = aVals[2]; oToSet.style.zIndex = aVals[3];
    			nNewZ = parseFloat(aVals[3]);
    			if (nNewZ >= nZFocus) { nZFocus = nNewZ + 1; }
    		}
    	}
    }
    
    document.onmousedown = dragDown;
    document.onmousemove = dragMove;
    document.onmouseup = dragUp;
    document.onkeypress = keyListener;
    window.onload = dragReset;
    
    function keyListener(oPssEvt3) {
    	var oKeyEvt1 = oPssEvt3 || /* IE */ window.event;
    	if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 109) { /* ctrl + m */ dragShow("votazione"); }
    	else if (oKeyEvt1.ctrlKey && oKeyEvt1.charCode === 122) { /* ctrl + z */ dragHide("votazione"); }
    }
    </script>
    <style type="text/css">
    .draggable {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: auto;
    	height: auto;
    	cursor: move;
    	z-index: 98; /* questo puoi anche eliminarlo, era solo per farti capire... ;-) */
    }
    
    #votazione {
    	width: 300px;
    	height: 200px;
    	left: 200px;
    	top: 200px;
    	background-color: #aaaaaa;
    	display: none;
    }
    </style>
    </head>
    
    <body>
    
    
    Votazione: premi ctrl + m per aprire e ctrl + z per chiudere!!</p>
    <div class="draggable" id="votazione">
    
    
    Div votazione!</p>
    </div>
    
    
    <div class="draggable" id="altroDiv" style="background-color:#ccaa77;width:450px;height:200px;left:200px;top:200px;display:none;">
    
    
    Un altro Div!!</p>
    
    
    <span style="cursor:pointer;text-decoration:underline;color:#0000ff;" onclick="dragHide('altroDiv');">Chiudi</span></p>
    </div>
    
    
    <span style="cursor:pointer;text-decoration:underline;color:#0000ff;" onclick="dragShow('altroDiv');">Apri altro div!!</span></p>
    
    
    </body>
    </html>
    &hellip;cerca di imparare dalle modifiche che ho fatto però!

  10. #10
    Utente di HTML.it
    Registrato dal
    May 2010
    Messaggi
    48
    CarloMarx, sei stato gentilissimo a costruire lo script di sana pianta, e per questo ti ringrazio, ma provandolo, funge solo su firefox.
    Sia su Safari che su Internet Explorer, non va;

    o meglio:
    • su Internet Explorer le scorciatoie con i tasti funzionano bene, non funziona però il drug and drop del div.
    • su Safari non funge assolutamente nulla.

    Quello invece che ho trovato io, gira bene su tutti i browser in questione.

    Il problema ora, è che devo trovare le variabili da inserire nei cookie. Come devo fare??

    Ivano

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.