Asistenta iT › Web Design › Generalitati WebDesign v
Pozitie fixa fata de cursor

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Thread Modes
Pozitie fixa fata de cursor
nickname Offline
Avansat
***
Posts: 133
Threads: 39
Joined: Jan 2012
Reputation: 0
#1
05-08-2012, 08:51 PM
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 ....
Find
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.


Admin Offline
Pe scurt Florin
*******
Posts: 2,578
Threads: 943
Joined: Nov 2008
Reputation: 12
#2
05-15-2012, 10:08 PM (This post was last modified: 05-15-2012, 10:22 PM by Admin.)
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> 
Recrutam orice fel de servere de jocuri online | Cumparam siteuri
Find
Reply
nickname Offline
Avansat
***
Posts: 133
Threads: 39
Joined: Jan 2012
Reputation: 0
#3
05-19-2012, 11:50 AM
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!
Find
Reply
Admin Offline
Pe scurt Florin
*******
Posts: 2,578
Threads: 943
Joined: Nov 2008
Reputation: 12
#4
05-20-2012, 03:20 AM
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> 
Recrutam orice fel de servere de jocuri online | Cumparam siteuri
Find
Reply
nickname Offline
Avansat
***
Posts: 133
Threads: 39
Joined: Jan 2012
Reputation: 0
#5
05-20-2012, 11:35 AM
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!
Find
Reply




Users browsing this thread: 1 Guest(s)