Scroll/Follow image

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 27 Ιαν 2012 02:41

Καλησπέρα σας, θέλω να βάλω μια μικρή εικόνα σε ένα site η οποία θα κινέιτε πάνω-κάτω όταν κινείτε και η μπάρα του browser αλλά να μην χάνετε...υπάρχει κάποιο tutorial; ή κάποιος που να έχει πρόχειρα έναν κώδικα γι αυτό;

Ευχαριστώ προκαταβολικά!!!
Τελευταία επεξεργασία από το μέλος SpirakosK την 28 Ιαν 2012 18:40, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 27 Ιαν 2012 04:26

http://css-tricks.com/scrollfollow-sidebar/

Με παρόμοιο τρόπο θα δουλέψει και για την εικόνα σου.
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 28 Ιαν 2012 14:04

Σε ευχαριστώ πάρα πολύ apsuh0s μερικά λεπτά πρίν postάρεις είχα βρεί ένα παρόμοιο και δούλεψα με αυτό.

Μετά το <head> και πρίν </head>

Κώδικας: Επιλογή όλων

 <style type="text/css">

#topbar&#123;
	position&#58; absolute;
	left&#58; 50%;
	border&#58; 2px solid black;
	padding&#58; 0px;
	width&#58; 320px;
	visibility&#58; hidden;
	z-index&#58; 100;
&#125;

body &#123;
	background-color&#58; #F90;
&#125;
 </style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive &#40;www.dynamicdrive.com&#41;
* Sliding routine by Roy Whittle &#40;http&#58;//www.javascript-fx.com/&#41;
* This notice must stay intact for legal use.
* Visit http&#58;//www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 100 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest&#40;&#41;&#123;
return &#40;document.compatMode && document.compatMode!="BackCompat"&#41;? document.documentElement &#58; document.body
&#125;

function get_cookie&#40;Name&#41; &#123;
var search = Name + "="
var returnvalue = "";
if &#40;document.cookie.length > 0&#41; &#123;
offset = document.cookie.indexOf&#40;search&#41;
if &#40;offset != -1&#41; &#123;
offset += search.length
end = document.cookie.indexOf&#40;";", offset&#41;;
if &#40;end == -1&#41; end = document.cookie.length;
returnvalue=unescape&#40;document.cookie.substring&#40;offset, end&#41;&#41;
&#125;
&#125;
return returnvalue;
&#125;

function closebar&#40;&#41;&#123;
if &#40;persistclose&#41;
document.cookie="remainclosed=1"
document.getElementById&#40;"topbar"&#41;.style.visibility="hidden"
&#125;

function staticbar&#40;&#41;&#123;
	barheight=document.getElementById&#40;"topbar"&#41;.offsetHeight
	var ns = &#40;navigator.appName.indexOf&#40;"Netscape"&#41; != -1&#41; || window.opera;
	var d = document;
	function ml&#40;id&#41;&#123;
		var el=d.getElementById&#40;id&#41;;
		if &#40;!persistclose || persistclose && get_cookie&#40;"remainclosed"&#41;==""&#41;
		el.style.visibility="visible"
		if&#40;d.layers&#41;el.style=el;
		el.sP=function&#40;x,y&#41;&#123;this.style.left=x+"px";this.style.top=y+"px";&#125;;
		el.x = startX;
		if &#40;verticalpos=="fromtop"&#41;
		el.y = startY;
		else&#123;
		el.y = ns ? pageYOffset + innerHeight &#58; iecompattest&#40;&#41;.scrollTop + iecompattest&#40;&#41;.clientHeight;
		el.y -= startY;
		&#125;
		return el;
	&#125;
	window.stayTopLeft=function&#40;&#41;&#123;
		if &#40;verticalpos=="fromtop"&#41;&#123;
		var pY = ns ? pageYOffset &#58; iecompattest&#40;&#41;.scrollTop;
		ftlObj.y += &#40;pY + startY - ftlObj.y&#41;/8;
		&#125;
		else&#123;
		var pY = ns ? pageYOffset + innerHeight - barheight&#58; iecompattest&#40;&#41;.scrollTop + iecompattest&#40;&#41;.clientHeight - barheight;
		ftlObj.y += &#40;pY - startY - ftlObj.y&#41;/8;
		&#125;
		ftlObj.sP&#40;ftlObj.x, ftlObj.y&#41;;
		setTimeout&#40;"stayTopLeft&#40;&#41;", 10&#41;;
	&#125;
	ftlObj = ml&#40;"topbar"&#41;;
	stayTopLeft&#40;&#41;;
&#125;

if &#40;window.addEventListener&#41;
window.addEventListener&#40;"load", staticbar, false&#41;
else if &#40;window.attachEvent&#41;
window.attachEvent&#40;"onload", staticbar&#41;
else if &#40;document.getElementById&#41;
window.onload=staticbar
</script>
και μέσα στο <body> το παρακάτω

Κώδικας: Επιλογή όλων

<div id="topbar">
<a href="" onClick="closebar&#40;&#41;; return false"><img src="close.png" border="0" style="position&#58;absolute; left&#58;100%;"/></a>
<img src="photo.png" width="320" height="414"/></div>
Απλά το συγκεκριμένο μου το εμφανίζει από την αριστερή μεριά. τί πρέπει να του δώσω στο CSS για να εμφανίζεται δεξιά;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 28 Ιαν 2012 18:19

Κώδικας: Επιλογή όλων

var startX = 30 //set x offset of bar in pixels
var startY = 100 //set y offset of bar in pixels 

Κώδικας: Επιλογή όλων

el.sP=function&#40;x,y&#41;&#123;this.style.left=x+"px";this.style.top=y+"px";&#125;; 
Με αυτά θα παίξεις

Στο #topbar που το έχεις position:absolute; και μετά του δίνεις ένα left:50%; επίσης επηρεάζει τη θέση της εικόνας σου. Βάλε ενα container με position:relative; ώστε να το προσαρμόσεις με βάσει αυτό.

Αυτό που έκανα εγώ ήταν το εξής:

Κώδικας: Επιλογή όλων

<style type="text/css">
*&#123;margin&#58;0;padding&#58;0;&#125;
#topbar&#123;
   position&#58;absolute;
   border&#58; 2px solid black;
   padding&#58; 0px;
   width&#58; 320px;
   visibility&#58; hidden;
   z-index&#58; 100;
&#125;

body &#123;
   background-color&#58; #F90;
&#125;
#container&#123;width&#58;960px;margin&#58;0 auto;position&#58;relative;background&#58;#ccc;&#125;
#main &#123;width&#58;500px;&#125;
 </style>

Κώδικας: Επιλογή όλων

var startX = 50 //set x offset of bar in pixels
var startY = 50 //set y offset of bar in pixels

Κώδικας: Επιλογή όλων

el.sP=function&#40;x,y&#41;&#123;this.style.right=x+"px";this.style.top=y+"px";&#125;;

Κώδικας: Επιλογή όλων

<body>
<div id="container">
<div id="topbar">
<a href="" onClick="closebar&#40;&#41;; return false"><img src="close.png" border="0"/></a>
<img src="photo.png" width="320" height="414"/>
</div><!-- topbar -->
<div id="main">
<p>Sed ut perspiciatis...</p>
<p>Sed ut perspiciatis...</p>
<p>Sed ut perspiciatis...</p>
<p>Sed ut perspiciatis...</p>
</div><!-- main -->
</div><!-- container -->
</body>
Το αποτέλεσμα ήταν η εικόνα σου να μεταφερθεί πάνω δεξιά, 50px από πάνω και 50px από τα δεξιά.
Συνημμένα
photo_test.png
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 28 Ιαν 2012 18:36

Πολύ σωστός...και σε ευχαριστώ πάρα πολύ για τον χρόνο σου.

Τον κώδικα

Κώδικας: Επιλογή όλων

el.sP=function&#40;x,y&#41;&#123;this.style.right=x+"px";this.style.top=y+"px";&#125;; 
που ακριβώς το έριξές;

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 28 Ιαν 2012 18:56

Το έκανα τελικά έτσι

Κώδικας: Επιλογή όλων

<style type="text/css">

#topbar&#123;
	position&#58; absolute;
	border&#58; 2px solid black;
	padding&#58; 0px;
	width&#58; 320px;
	visibility&#58; hidden;
	z-index&#58; 100;
&#125;

body &#123;
	background-color&#58; #F90;
&#125;
 </style>

<script type="text/javascript">

/***********************************************
* Floating Top Bar script- © Dynamic Drive &#40;www.dynamicdrive.com&#41;
* Sliding routine by Roy Whittle &#40;http&#58;//www.javascript-fx.com/&#41;
* This notice must stay intact for legal use.
* Visit http&#58;//www.dynamicdrive.com/ for full source code
***********************************************/

var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 25 //set x offset of bar in pixels
var startY = 25 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest&#40;&#41;&#123;
return &#40;document.compatMode && document.compatMode!="BackCompat"&#41;? document.documentElement &#58; document.body
&#125;

function get_cookie&#40;Name&#41; &#123;
var search = Name + "="
var returnvalue = "";
if &#40;document.cookie.length > 0&#41; &#123;
offset = document.cookie.indexOf&#40;search&#41;
if &#40;offset != -1&#41; &#123;
offset += search.length
end = document.cookie.indexOf&#40;";", offset&#41;;
if &#40;end == -1&#41; end = document.cookie.length;
returnvalue=unescape&#40;document.cookie.substring&#40;offset, end&#41;&#41;
&#125;
&#125;
return returnvalue;
&#125;

function closebar&#40;&#41;&#123;
if &#40;persistclose&#41;
document.cookie="remainclosed=1"
document.getElementById&#40;"topbar"&#41;.style.visibility="hidden"
&#125;

function staticbar&#40;&#41;&#123;
	barheight=document.getElementById&#40;"topbar"&#41;.offsetHeight
	var ns = &#40;navigator.appName.indexOf&#40;"Netscape"&#41; != -1&#41; || window.opera;
	var d = document;
	function ml&#40;id&#41;&#123;
		var el=d.getElementById&#40;id&#41;;
		if &#40;!persistclose || persistclose && get_cookie&#40;"remainclosed"&#41;==""&#41;
		el.style.visibility="visible"
		if&#40;d.layers&#41;el.style=el;
		el.sP=function&#40;x,y&#41;&#123;this.style.right=x+"px";this.style.top=y+"px";&#125;; 
		el.x = startX;
		if &#40;verticalpos=="fromtop"&#41;
		el.y = startY;
		else&#123;
		el.y = ns ? pageYOffset + innerHeight &#58; iecompattest&#40;&#41;.scrollTop + iecompattest&#40;&#41;.clientHeight;
		el.y -= startY;
		&#125;
		return el;
	&#125;
	window.stayTopLeft=function&#40;&#41;&#123;
		if &#40;verticalpos=="fromtop"&#41;&#123;
		var pY = ns ? pageYOffset &#58; iecompattest&#40;&#41;.scrollTop;
		ftlObj.y += &#40;pY + startY - ftlObj.y&#41;/8;
		&#125;
		else&#123;
		var pY = ns ? pageYOffset + innerHeight - barheight&#58; iecompattest&#40;&#41;.scrollTop + iecompattest&#40;&#41;.clientHeight - barheight;
		ftlObj.y += &#40;pY - startY - ftlObj.y&#41;/8;
		&#125;
		ftlObj.sP&#40;ftlObj.x, ftlObj.y&#41;;
		setTimeout&#40;"stayTopLeft&#40;&#41;", 10&#41;;
	&#125;
	ftlObj = ml&#40;"topbar"&#41;;
	stayTopLeft&#40;&#41;;
&#125;

if &#40;window.addEventListener&#41;
window.addEventListener&#40;"load", staticbar, false&#41;
else if &#40;window.attachEvent&#41;
window.attachEvent&#40;"onload", staticbar&#41;
else if &#40;document.getElementById&#41;
window.onload=staticbar
</script>
και

Κώδικας: Επιλογή όλων

<div id="topbar">
<a href="" onClick="closebar&#40;&#41;; return false"><img src="close.png" border="0"/></a>
<img src="photo.png" width="320" height="414"/>
</div>
Απλά τώρα το close.png είναι μέσα με την εικόνα, πώς γίνεται να είναι απ 'έξω στην πάνω αριστερή γωνία της εικόνα;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 28 Ιαν 2012 20:29

SpirakosK έγραψε:Πολύ σωστός...και σε ευχαριστώ πάρα πολύ για τον χρόνο σου.

Τον κώδικα

Κώδικας: Επιλογή όλων

el.sP=function&#40;x,y&#41;&#123;this.style.right=x+"px";this.style.top=y+"px";&#125;; 
που ακριβώς το έριξές;
Το είχες μέσα στο κώδικα.

Κάνε attach το close.png να το βλέπω και εγώ
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 28 Ιαν 2012 20:45

Ναί το είδα μετά ότι το έχω μέσα στο κώδικα.

Ορίστε...
Συνημμένα
close.png
close.png (1.15 KiB) Προβλήθηκε 1402 φορές

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 29 Ιαν 2012 00:43

Συγγνώμη για την καθυστέρηση

Για δοκίμασε αυτό

Κώδικας: Επιλογή όλων

<img src="close.png" border="0" style="position&#58;absolute;left&#58;-13px;top&#58;-13px;"/>
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 29 Ιαν 2012 01:58

Κανένα πρόβλημα για την καθυστέρηση, ίσα ίσα σε ευχαριστώ για τον χρόνο σου. Ναι ο κώδικας που μου έστειλες πάει ακριβώς γωνία το close. Είναι οκ τώρα.

Σκεφτόμουνα εάν θέλει κάποιος να την μετακινήσει την photo όπως γίνεται σε κάποιες gallery (θα έχεις δεί) μπορούμε να το κάνουμε αυτό στην συγκεκριμένη περίπτωση και αν ναί, πώς;

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 29 Ιαν 2012 02:33

Όχι δεν κατάλαβα τι εννοείς. Δώσε μου ένα live παράδειγμα
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 29 Ιαν 2012 03:28

Εννοώ όπως βλέπεις την φωτογραφία ανοιχτή (άνοιξε αυτό που έχουμε κάνει σε browser) να θές να μετακινήσεις την φωτογραφία οπουδήποτε μέσα στο browser με το ποντίκι.

Δλδ, να πατάς πάνω στη φωτογραφία & να την μετακινείς, σε όποιο σημείο θές εσύ να την βλέπεις μέσα στο browser.

Άβαταρ μέλους
apsuh0s
Script Master
Δημοσιεύσεις: 410
Εγγραφή: 01 Νοέμ 2005 21:38
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Scroll/Follow image

Δημοσίευση από apsuh0s » 29 Ιαν 2012 04:04

Για δες αν σε βολεύει κάτι τέτοιο

http://jqueryui.com/demos/draggable/
.ninja { color: black; visibility: hidden !important; }

Άβαταρ μέλους
SpirakosK
Δημοσιεύσεις: 31
Εγγραφή: 22 Οκτ 2010 13:18
Τοποθεσία: Athens - Ilion

Scroll/Follow image

Δημοσίευση από SpirakosK » 29 Ιαν 2012 13:36

Ναί κάτι τέτοιο, αλλά πώς θα γίνει;

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες