Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

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

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

Απάντηση
Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από Sermac » 05 Μαρ 2010 23:22

Θέλω να κρύψω στην πάνω-δεξιά γωνία μιας αρχικής σελίδας ένα link ώστε να κάνει login ο διαχειριστής. Μέχρι στιγμής, λοιπόν, έφτιαξα αυτό:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml" lang="el">
<head>
    <title>Hidden link</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    #login &#123;
    display&#58;block;
    width&#58;60px;height&#58;20px;
    position&#58;fixed;
    top&#58;0;
    right&#58;0;
    font-family&#58;Verdana;
    font-size&#58;10px;
    &#125;
    
    #login span.arrow &#123;
    color&#58;#C00;
    font-size&#58;12px;
    font-weight&#58;bold;
    margin-left&#58;2px;
    &#125;
    
    #login&#58;hover span.arrow &#123;
    color&#58;#74AF15;
    margin-left&#58;4px;
    &#125;
    
    #login-inner &#123;
    padding&#58;4px 0 4px 8px;
    &#125;
    
    #login a &#123;
    color&#58;#000;
    text-decoration&#58;none;
    outline&#58;none;
    &#125;
    </style>
    <script type="text/javascript">
        function show&#40;el&#41; &#123;
            var div = document.getElementById&#40;el&#41;;
            div.style.display = "block";
        &#125;

        function showDelay&#40;id,ms&#41; &#123;
            elem = id;
            setTimeout&#40;"show&#40;elem&#41;;",ms&#41;;
        &#125;
    </script>
</head>
<body>
    <div>Move your pointer over the right-top corner and wait 1,5 sec to reveal a hidden link!</div>
    <div id="login" onmouseover="showDelay&#40;'login-inner',1500&#41;">
        <div id="login-inner" style="display&#58;none;">
            <a href="#login-url">LOGIN<span class="arrow">&rsaquo;</span></a>
        </div>
    </div>
</body>
</html>
Live demo εδώ.

Το div με id="login-inner" εμφανίζεται 1,5 δευτερόλεπτο μετά τη στιγμή που θα κάνει hover ο δείκτης του ποντικιού πάνω στο div με id="login". Εδώ όμως υπάρχει πρόβλημα, γιατί αν περάσει από πάνω ο δείκτης και φύγει, ο timer αρχίζει να μετράει και θα εμφανίσει το div. Υπάρχει κάποιος τρόπος ώστε το div να εμφανίζεται μόνο αν ο δείκτης μείνει για τουλάχιστον 1,5 sec από πάνω;
Τελευταία επεξεργασία από το μέλος Sermac την 06 Μαρ 2010 03:28, έχει επεξεργασθεί 1 φορά συνολικά.
Εικόνα

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από dimsis » 05 Μαρ 2010 23:26

Όμορφο... αλλά αυτό θα το θυμάται πιο εύκολα από το να γράψει ας πούμε /login /admin κλπ στο url;

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από ThyClub » 05 Μαρ 2010 23:30

Αν δοκίμαζες να εμφανίζεις το link με κάποιο shortcut?

Παράδειγμα : http://e-edit.qoolsoft.gr με Ctrl+L

Εσύ μπορείς αντί για window να εμφανίζεις το link σου. Δεν είναι θέμα ασφάλεις γιατί το να βρεί κάποιος που ξέρει τι πρέπει να κάνει είναι το ίδιο εύκολο και στις 2 περιπτώσεις. Απλά πιστεύω ότι έτσι είναι πιο user friendly για κάποιο αρχάριο χρήστη.

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από Sermac » 05 Μαρ 2010 23:33

Το login url είναι /index.php?q=user/login και δεν μπορώ να του το κάνω /login διότι ο server τρέχει IIS! :cry:
Εικόνα

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από dimsis » 05 Μαρ 2010 23:35

Φτιάξε ένα folder login και βάλε ένα index.html να κάνει meta redirect στο άλλο :)

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

<META http-equiv="refresh" content="0;URL=/index.php?q=user/login">

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από Sermac » 05 Μαρ 2010 23:46

Nice dimsis! Δεν το σκέφτηκα!
ThyClub έγραψε:Αν δοκίμαζες να εμφανίζεις το link με κάποιο shortcut?
Ωραίο κι αυτό!


Πάντως αν κανείς έχει καμιά ιδέα :idea: για το scipt, μην διστάσει...
Εικόνα

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

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από dva_dev » 06 Μαρ 2010 00:19

Δοκίμασε να το κάνεις έτσι (μόνο οι αλλαγές από αυτό που έχεις)

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

...
    <script type="text/javascript">
        var t_show;
        var t_Cancelled = false;
        var t_visible = false;
        
        function show&#40;el&#41;
        &#123;
            if &#40;t_Cancelled != false&#41; return;

            t_visible = true;
            var div = document.getElementById&#40;el&#41;;
            div.style.display = "block";
        &#125;

        function cancelDelay&#40;&#41;
        &#123;
            if &#40;t_visible != false&#41; return;
            
            t_Cancelled = true;
            clearTimeout&#40;t_show&#41;;
        &#125;
        
        function showDelay&#40;id,ms&#41;
        &#123;
            if &#40;t_visible != false&#41; return;

            t_Cancelled = false;
            elem = id;
            t_show = setTimeout&#40;"show&#40;elem&#41;;",ms&#41;;
        &#125;
    </script>
...

    <div id="login" onmouseover="showDelay&#40;'login-inner',1500&#41;" onmouseout="cancelDelay&#40;&#41;;">
...
[edit]
Demo (για όσο καιρό υπάρχει, μέχρι να το φάει το μαύρο σκοτάδι)
[/edit]

Άβαταρ μέλους
Sermac
Δημοσιεύσεις: 363
Εγγραφή: 26 Σεπ 2007 21:08

Εμφάνιση div μόνο με παρατεταμένο hover του δείκτη.

Δημοσίευση από Sermac » 06 Μαρ 2010 03:34

Ωραίος! Ευχαριστώ. :D

Ο τελικός κώδικας για όποιος τον θέλει.
Εικόνα

Απάντηση

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

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

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