Πρόβλημα με javascript

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

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

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Πρόβλημα με javascript

Δημοσίευση από argate7 » 26 Οκτ 2012 22:43

Καλησπέρα παιδιά,

Μια ερώτηση-βοήθεια..

Έχω τον παρακάτω κώδικα...

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

<html>
<head>
	<title>Jquery Parallax Scrolling Tutorial</title>
    <link rel="stylesheet" type="text/css" href="http&#58;//yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
    <link rel="stylesheet" type="text/css" href="css/tut.css">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http&#58;//jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http&#58;//flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
    
    <script type="text/javascript">
	$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;  
		$&#40;'a.link'&#41;.click&#40;function &#40;&#41; &#123;  
			$&#40;'#wrapper'&#41;.scrollTo&#40;$&#40;this&#41;.attr&#40;'href'&#41;, 800&#41;;
			setPosition&#40;$&#40;this&#41;.attr&#40;'href'&#41;, '#cloud1', '0px', '400px', '800px', '1200px'&#41;
			setPosition&#40;$&#40;this&#41;.attr&#40;'href'&#41;, '#cloud2', '0px', '800px', '1600px', '2400px'&#41;
			$&#40;'a.link'&#41;.removeClass&#40;'selected'&#41;;  
			$&#40;this&#41;.addClass&#40;'selected'&#41;;
			return false;  
		&#125;&#41;;  
	&#125;&#41;;
	function setPosition&#40;check, div, p1, p2, p3, p4&#41; &#123;
	if&#40;check==='#box1'&#41;
		&#123;
			$&#40;div&#41;.scrollTo&#40;p1, 800&#41;;
		&#125;
	else if&#40;check==='#box2'&#41;
		&#123;
			$&#40;div&#41;.scrollTo&#40;p2, 800&#41;;
		&#125;
	else if&#40;check==='#box3'&#41;
		&#123;
			$&#40;div&#41;.scrollTo&#40;p3, 800&#41;;
		&#125;
	else if&#40;check==='#box4'&#41;
		&#123;
			$&#40;div&#41;.scrollTo&#40;p4, 800&#41;;
		&#125;
	else if&#40;check==='#box10'&#41;
		&#123;
			$&#40;div&#41;.scrollTo&#40;p4, 800&#41;;
		&#125;
	&#125;;
	</script>
</head>

<body>
	<!--<div id="cloud1" class="clouds">
    	<div id="clouds-small"></div>
    </div><!-- end clouds -->
    <!--<div id="cloud2" class="clouds">
        <div id="clouds-big"></div>
    </div><!-- end clouds -->
	<div id="header">
   		<h1>Dance-Art Κάτια Κυριακού</h1>
    	<ul id="menu">
       	  	<li><a href="#box1" class="link">Home</a></li>
            <li><a href="#box2" class="link">About us</a></li>
            <li><a href="#box3" class="link">Map</a></li>
            <li><a href="#box4" class="link">Contact</a></li>
      </ul>
</div><!-- end header -->
	<div id="wrapper">
    	<ul id="mask">
        	<li id="box1" class="box">
            	<a name="box1"></a>
                <div class="content"><div class="inner">Εδώ είναι το πρώτο κουτί. Πάτα <a href="#box5" class="link">εδώ</a>.</div></div>
            </li><!-- end box1 -->
            <li id="box2" class="box">
            	<a name="box2"></a>
                <div class="content"><div class="inner">Εδώ είναι το δεύτερο κουτί. Πάτα <a href="#box6" class="link">εδώ</a>.</div></div>
            </li><!-- end box2 -->
            <li id="box3" class="box">
            	<a name="box3"></a>
                <div class="content"><div class="inner">Εδώ είναι το τρίτο κουτί. Πάτα <a href="#box7" class="link">εδώ</a>.</div></div>
            </li><!-- end box3 -->
            <li id="box4" class="box">
            	<a name="box4"></a>
                <div class="content"><div class="inner">Εδώ είναι το τέταρτο κουτί. Πάτα <a href="#box8" class="link">εδώ</a>.
                																  <p><a href="#box9" class="link">εδώ</a></p>
                                                                                  <p><a href="#box10" class="link">εδώ</a></p></div></div>
            </li><!-- end box4 -->
            <li id="box5" class="box">
            	<a name="box5"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!5</div></div>
            </li><!-- end box5 -->
            <li id="box6" class="box">
            	<a name="box6"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!6</div></div>
            </li><!-- end box6 -->
            <li id="box7" class="box">
            	<a name="box7"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!7</div></div>
            </li><!-- end box7 -->
            <li id="box8" class="box">
            	<a name="box8"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!8</div></div>
            </li><!-- end box8 -->
            <li id="box9" class="box">
            	<a name="box9"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!9</div></div>
            </li><!-- end box9 -->
            <li id="box10" class="box">
            	<a name="box10"></a>
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!10</div></div>
            </li><!-- end box10 -->
        </ul><!-- end mask -->
    </div><!-- end wrapper -->
</body>
</html>
Με αυτόν τον κώδικα κάθε κουμπί με πηγαίνει εκεί που θέλω. Όταν επιλέγω ένα από τα κουμπιά αλλάζει οριζοντίως το panel. Όταν επιλέγω από ένα panel κάνει scroll καθέτως. Αλλά το πρόβλημα είναι πως αν βάλω πάνω από ένα panel σε κάποιο αρχικό panel και επιλέξω από το δεύτερο και μετά δεν κάνει κάθετη αλλαγή αλλά διαγώνια. Θέλω να αλλάζει καθέτως. Μπορεί κάποιος να βοηθήσει?? Το παράδειγμα που αναφέρω βρίσκεται στο box 4, για όσους δεν κατάλαβαν ή αν εγώ δεν το εξήγησα σωστά.

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

Πρόβλημα με javascript

Δημοσίευση από Akina » 27 Οκτ 2012 00:34

Tο πρόβλημα σου είναι στο css (που έψαχνα να το βρω ..! ) αν μιλάμε για αυτό εδώ κανε disable προσωρινά το #wrapper { overflow: hidden;} τοποθέτησε τα κουτιά εκεί που θες και μετά κάντο πάλι enable. Πάει διαγώνια γιατί απλά "έχεις" τοποθέτηση διαγώνια το κουτί σε σχέση με αυτό που πατάς.

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

 #mask &#123; height&#58; 100%; width&#58; 400%;&#125;
Tο 400% καθορίζει ποσα κουτιά στην σειρά είναι οριζόντια.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Πρόβλημα με javascript

Δημοσίευση από argate7 » 27 Οκτ 2012 01:12

Μπορείς να μου εξηγήσεις ίσως με κάποιο παράδειγμα αυτό που μου λες?

Akina
Δημοσιεύσεις: 89
Εγγραφή: 25 Νοέμ 2009 18:31

Πρόβλημα με javascript

Δημοσίευση από Akina » 27 Οκτ 2012 17:43

@argate7
Δεν χρειάζεται παράδειγμα :) απλά βγάλε το overflow: hidden; από το css και θα τα δεις όλα μπροστά σου !
Έχω ένα μίκρο bug στα ελληνικά - αγνοήστε το ... το έχω κάνει report και περιμένω το fix

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Πρόβλημα με javascript

Δημοσίευση από argate7 » 27 Οκτ 2012 18:04

Το έκανα, αλλά δεν αλλάζει τίποτα. Μένουν όλα ως είχαν και πριν.

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

Πρόβλημα με javascript

Δημοσίευση από dva_dev » 27 Οκτ 2012 19:14

Αν βγάλεις το overflow θα μπορείς μετακινώντας τις scrollbars να δεις που βρίσκονται τα κουτιά. Θα δεις ότι είναι διαγώνια.
Για να τα μετακινήσεις ώστε να έρθουν το ένα κάτω από το άλλο θα μπορούσες να προσθέσεις dummy boxes.
Π.χ.

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

                ...
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!8</div></div> 
            </li><!-- end box8 -->
			<!--add 3 empty spaces-->
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
            <li id="box9" class="box"> 
               <a name="box9"></a> 
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!9</div></div> 
            </li><!-- end box9 --> 
			<!--add 3 empty spaces-->
			<div class="box"></div>
			<div class="box"></div>
			<div class="box"></div>
            <li id="box10" class="box"> 
               <a name="box10"></a> 
                <div class="content"><div class="inner">Είναι το νέο που έβαλα!!!10</div></div> 
                ...
και μετά ξαναβάλε το overflow:hidden

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

Πρόβλημα με javascript

Δημοσίευση από argate7 » 27 Οκτ 2012 19:25

Συμφωνώ σε αυτό που λες και έχεις δίκιο. Αν όμως ο κώδικας είναι δυναμικός?? Τότε τί κάνεις? Πρέπει με κάποιο τρόπο να εισάγει δυναμικά αυτά τα dummy boxes.

Απάντηση

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

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

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