Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Pozitie fixa fata de cursor
#1
Cum as putea pozitiona un div, (pozitie fixa, nu absoluta) la o anumita distanta de cursor. Nu conteaza in ce limbaj sa fie, css, javasript, folosind jQuery ....
Reply
Anunt important
Daca ti-a fost de folos articolul de mai sus te rugam sa ne sustii in semn de apreciere.
Ar insemna foarte mult pentru noi daca ai apasa oricare din butoanele de recomandare de mai jos (in special pe cel de facebook) sau chiar pe mai multe.
Faptul ca suntem apreciati ne motiveaza sa facem o treaba mai buna si implicit sa oferim mai mult, ajuta comunitatea sa creasca.


#2
Poti folosi mousemove in jquery ca sa actualizezi pozitia unui div ascuns initial dar afisat cu show().

Apoi cand cursorul iasa din browser divul redevine ascuns.
Pentru inceput ar trebui sa iti fie bun urmatorul cod:
PHP Code:
<html>
<
head>
<
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).mousemove(function(e){
        $("#box").show();
        var top = e.pageY + 20;
        var left = e.pageX + 20;
        $("#box").css("top", top);
        $("#box").css("left", left);
    });
    $(document).mouseout(function(e){
        $("#box").hide();    
    });

});
</script>
<style>
#box{
    display:none;
    border:1px solid #000;
    position:fixed;
    left:10px;
    top:10px;
    right:auto;
    bottom:auto;
    
}
</style>
</head>
<body>
<div id="box">
Mouse tip
</div>

</body>
</html> 
Reply
#3
Eu la asa ceva ma gindeam:
PHP Code:
<html>
<
head>
<
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).mousemove(function(e){
        var top = e.pageY + 20;
        var left = e.pageX + 20;
        $("#box").css("top", top);
        $("#box").css("left", left);
    });

});
function showBox(){
$("#box").show("fast");
}
function hideBox(){
$("#box").hide("fast");
}
</script>
<style>
#box{
    display:none;
    border:1px solid #000;
    position:fixed;
    left:10px;
    top:10px;
    right:auto;
    bottom:auto;
}
</style>
</head>
<body>
<div onmouseover="showBox()" onmouseout="hideBox()" >Plaseaza cursorul aici!</div>
<div id="box">
Mouse tip
</div>
</body>
</html> 
Mersi de script. Functioneaza foarte bine!
ps: scriptul de sus este acelasi pe care lai postat tu, doar ca e putin modificat.
Un forum simplu pentru toti, si pentru ca parerea ta conteaza!
Reply
#4
Incearca asta, e mai oky de aplicat:
PHP Code:
<html>
<
head>
<
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    function infoBox(boxSelector, elementSelector){

    $(elementSelector).mousemove(function(e){
        $(boxSelector).show("fast");
        var top = e.pageY + 20;
        var left = e.pageX + 20;
        $(boxSelector).css("top", top);
        $(boxSelector).css("left", left);
    });
    $(elementSelector).mouseout(function(e){
        $(boxSelector).hide("fast");    
    });
    }
    

    
    
infoBox('#box', '#start');
infoBox('#box', '#start2');

});


</script>
<style>
#box{
    display:none;
    border:1px solid #000;
    position:fixed;
    left:10px;
    top:10px;
    right:auto;
    bottom:auto;
    
}
</style>
</head>
<body>
<div id="box">
Mouse tip
</div>


<div id="start">Text predefinit</div>
<div id="start2">Text diferit</div>


</body>
</html> 
Reply
#5
Ms admin dar deja lam adaptat pe acel la tema forumurului; Nu vreau sa reiau lucrul efectuat eri.
Un mic screen shot:
[Image: logoTooltip.png]
Un forum simplu pentru toti, si pentru ca parerea ta conteaza!
Reply




Users browsing this thread: 1 Guest(s)