one page website - different css style on menu

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

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

Απάντηση
quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 20 Φεβ 2014 19:08

η αληθεια είναι ότι από javascript δεν γνωρίζω και πολλά πράγματα.
Προσπαθώ βέβαια.
Αυτό που προσπαθώ να κάνω σύμφωνα με τον παραπάνω κωδικά που έχεις γράψει είναι το εξής.
Μετά για παράδειγμα από το section με id='third' να υπάρχει ενα div ή section ασχετο με τα άλλα στο οποίο να υπάρχει μία σκουρόχρωμη εικόνα σαν background και όταν αυτό το ασχετο div είναι στην κορυφη της σελίδας να αλλάζει το css στο menu.

στην συνέχεια καθώς συνεχίζει το scroll προς τα κάτω συναντά το section με id='fourth' και το javascript που έχεις γράψει παραπάνω εφαρμόζεται κανονικά με τα css.

Πιστεύω ότι έχει ένα βαθμό δυσκολίας αλλά προσπαθώ να το κάνω από εχτές συμφωνα με το κώδικά σου αλλά τίποτα. :-?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από alou » 21 Φεβ 2014 04:49

Θα σου πω τη (μία που σκέφτομαι τώρα) λογική και θα περιμένω να δω πρώτα δική σου προσπάθεια σε κώδικα.

Καταρχάς, θα πρέπει με javascript να εξετάσεις κατά το σκρολάρισμα αν το στοιχείο με σκούρο φόντο είναι στο σημείο που σε ενδιαφέρει, πίσω από το μενού.

Ήδη τρέχει μια function στο scroll event, θα χρειαστεί να την τροποποιήσεις ή να κάνεις μια δεύτερη, ανάλογα με την html σου - με παρόμοια λογική.

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

$(window).on('scroll', function() {
   //
    $('.sections').each(function(){
        var scrollAmount = $(window).scrollTop();
        var eleDistance = $(this).offset().top;
        if (scrollAmount >= eleDistance) {
            var makeActive = $(this).attr('data-where');
            $('#menu li').removeClass('active');
            $('#menu li#' + makeActive).addClass('active');
        }
    });
}); 
Εδώ, υπάρχουν 2 νούμερα, το scrollAmount και το eleDistance, το δεύτερο είναι η απόσταση του κάθε .section από την κορυφή της σελίδας. Θες να βρείς ΚΑΙ την απόσταση του div με το σκούρο φόντο και να τη συγκρίνεις με το scrollAmount.

Επίσης, παίζει ρόλο αν το σκούρο div υπάρχει μία φορά ή πολλές μέσα σε κάθε .section. Αν υπάρχει πολλές, θα πρέπει να γίνει ένα δεύτερο each...

Αν η απόσταση είναι τόσο που να σημαίνει ότι βρίσκεται στο σημείο που θες, θα προσθέσεις ένα class (πχ dark) στο container του μενού. Αντίστοιχα, θα πρέπει να το αφαιρέσεις όταν φύγει (addClass, removeClass).

Και εκείνο που θες επιπλέον μετά να κάνεις στο css, είναι να ορίσεις κάποιους κανόνες εμφάνισης όταν θα έχει και αυτό το class

#menuwrap.dark {...oti nomizeis}

Ξεκίνα, δείξε δικό σου κώδικα και βλέπουμε.

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 21 Φεβ 2014 12:09

καλημέρα και πάλι.
Λοιπόν έχω καταφέρει το παρακάτω.

$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#slide3b").position();

if (y >= (x.top)) {
$("#logo div").removeClass("logoInner");
$("#logo div").addClass("logoInnerBlack");
$("#menu li ").addClass("whiTTT");
}
else {
$("#menu li").removeClass("whiTTT");
$("#logo div").addClass("logoInner");
$("#logo div").removeClass("logoInnerBlack");
}
});


ολα μια χαρά μέχρι εδώ το θέμα είναι ότι μέτα που θα περάσει το #slide3b δεν εφαρμόζονται ότι έχω γράψει στο else γιατι ισχύει η συνθήκη y >= (x.top)

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από alou » 21 Φεβ 2014 13:00

Φέρε και την html σου, αλλιώς δε γίνεται δουλειά.

Ωραία, επομένως η συνθήκη σου πρέπει να έχει και δεύτερο ζητούμενο για να κάνεις addClass: if (y >= (x.top) && ... )

hint: $('#slide3b').height()

quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 21 Φεβ 2014 17:12

<script>
$(document).ready(function() {
$(window).on('scroll', function() {
$('.sections').each(function(){
var scrollAmount = $(window).scrollTop();
var eleDistance = $(this).offset().top;
if (scrollAmount >= eleDistance) {
var makeActive = $(this).attr('data-where');
$('#menu li').removeClass('active');
$('#menu li#' + makeActive).addClass('active');
}
});


});

$('#menu li').on('click', function(e){
e.preventDefault();

$('html, body').animate({
scrollTop: $('#'+ $(this).attr('data-link')).offset().top
}, 2000);
})

$(document).scroll(function () {
var y = $(this).scrollTop();
var x = $("#slide3b").position();


if (y >= (x.top) && $('#slide3b').height(600)) { // -50 so things don't overlap
$("#logo div").removeClass("logoInner");
$("#logo div").addClass("logoInnerBlack");
$("#menu li ").addClass("whiTTT");
}
else {
$("#menu li").removeClass("whiTTT");
$("#logo div").addClass("logoInner");
$("#logo div").removeClass("logoInnerBlack");
}


});

});
</script>


<div id="menuwrap" style="position:fixed;top:50px;left:50px;padding:10px;border:1px dashed black;">
<ul id="menu">
<li class="menuitem active" id="home" data-link="first">Home</li>
<li class="menuitem" id="about" data-link="second">about</li>
<li class="menuitem" id="othershit" data-link="third">other shit</li>
<li class="menuitem" id="contact" data-link="fourth">contact</li>
</ul>
<span id="helper"></span>
</div>
<section class="sections" id="first" data-where="home">
<div style="margin:0px auto; width:960px;height: 927px;
width: 100%;
background-image: url(images/slide1.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; "></div>
</section>
<section class="sections" id="second" data-where="about">
<div style="margin:0px auto; width:960px;height: 927px;
width: 100%;
background-image: url(images/slide2.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; "></div>
</section>
<section class="sections" id="third" data-where="othershit">
<div style="margin:0px auto; width:960px;height: 927px;
width: 100%;
background-image: url(images/slide3.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; "></div>
</section>
<!--edo to asxeto div-->
<div="slide3b" data-where="vagelis" style="margin:0px auto; height: 1200px;
width: 100%;
background-image: url(images/slide3b.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; "></div>

<section class="sections" id="fourth" data-where="contact">
<div style="margin:0px auto; width:960px;height: 927px;
width: 100%;
background-image: url(images/slide4.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; "></div>
</section>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από alou » 21 Φεβ 2014 17:56

Το scroll event είναι ένα και μέσα ορίζεις ότι χρειάζεται να τρέξει, δεν χρειάζεται να το ξαναζητήσεις. Το έξτρα κομμάτι στο conditional για το αddClass, θα πρέπει να λάβει υπόψιν και τη συνθήκη ότι το total scroll είναι ΜΙΚΡΟΤΕΡΟ από την απόσταση του στοιχείου + το ύψος του.

http://jsfiddle.net/fxND4/

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


$&#40;window&#41;.on&#40;'scroll', function&#40;&#41; &#123;
        var scrollAmount = $&#40;window&#41;.scrollTop&#40;&#41;;
        $&#40;'.sections'&#41;.each&#40;function&#40;&#41;&#123;
            var eleDistance = $&#40;this&#41;.offset&#40;&#41;.top;
            if &#40;scrollAmount >= eleDistance&#41; &#123;
                var makeActive = $&#40;this&#41;.attr&#40;'data-where'&#41;;
                $&#40;'#menu li'&#41;.removeClass&#40;'active'&#41;;
                $&#40;'#menu li#' + makeActive&#41;.addClass&#40;'active'&#41;;
            &#125;
        &#125;&#41;;
        var asxetoDistance = $&#40;'#slide3b'&#41;.offset&#40;&#41;.top;
        var asxetoHeight = $&#40;'#slide3b'&#41;.height&#40;&#41;;
        if &#40;scrollAmount >= asxetoDistance && scrollAmount < &#40;asxetoDistance + asxetoHeight&#41;&#41; &#123;
                $&#40;'#menuwrap'&#41;.addClass&#40;'piswsou'&#41;;
        &#125; else &#123;
                $&#40;'#menuwrap'&#41;.removeClass&#40;'piswsou'&#41;;
        &#125;

    &#125;&#41;;


quit
Δημοσιεύσεις: 147
Εγγραφή: 09 Δεκ 2008 11:54

one page website - different css style on menu

Δημοσίευση από quit » 21 Φεβ 2014 18:43

Η λέξη ευχαριστώ είναι πολύ λιγη για αυτό που έκανες. Μόλις είδα το demo σου. Τον κώδικα δεν το κοιταξα ακόμα. Πάντως κάτι έμαθα σήμερα!!! :D
Κανένα online βοηθημα έχεις υπόψιν σου?

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

one page website - different css style on menu

Δημοσίευση από alou » 22 Φεβ 2014 12:34

Νάσαι καλά. Online βοηθήματα υπάρχουν χιλιάδες, μπορείς να ξεκινήσεις από το codeacademy αλλά ένα καλό βιβλίο πάντα σε βάζει πολύ καλύτερα μέσα στο περιβάλλον. Πρώτα πρέπει βέβαια να αποφασίσεις για ποιο περιβάλλον ενδιαφέρεσαι και να βρεις το κατάλληλο βιβλίο που θα μιλάει στις δικές σου γνώσεις και θα τις πάει ένα βήμα παρακάτω, οπότε θέλει ψάξιμο.
http://www.codecademy.com

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

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

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