nicht angemeldet
tooltip.js image stets im viewport
Hi,
ich bin anfänger und habe probleme eins der codeschnipsel in das tooltip.js script einzufügen damit das tooltip onmouseover bild stets im viewport bleibt also im sichtbaren bereichen, nicht abgschnitten. d.h. jeweils unter oder über dem mauszeiger.
keine ahnung welches von den beiden codeschnipseln besser ist.
hoffe ihr experten könnt mir da sagen wo des reinkommt. habe wie gesagt vieles ausprobiert...
lg mandy
TOOLSTIP.JS:
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 115;
yOffset = 160;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='loading...' width='150' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});
SCHNIPSEL 1:
$(".imageTooltip").mousemove(function(e){
var posY;
if (e.pageY - $(window).scrollTop() + $('#tooltip').height() >= $(window).height() ) {
posY = $(window).height() + $(window).scrollTop() - $('#tooltip').height() - 15 ;
} else {
posY = e.pageY - 15;
}
$("#tooltip")
.css("top",(posY) + "px")
.css("left",(e.pageX + 15) + "px");
});
SCHNIPSEL 2:
To position the tooltip depending where you are, you need to rewrite some of the code using the offset() property of jQUERY.
var toolTipPosition = $(this).offset(); //Declare the Offset object
var offsetX = 0;
var offsetY = 0;
//Then in the hover property
$("#tooltip")
.css("top",( toolTipPosition.top - posiY) + "px")//Will set where the link/thumbnail is horizontally
.css("left",( toolTipPosition.left + this.offsetWidth/2 + posiX) + "px") /*Will be positioned to the middle of the link/thumbnail, you can alway remove this.offsetWidth/2 to remove the middle placement thing.*/
//Remove the mouseover function and your set!
.fadeIn("fast");
-
Liebe Mandy,
keine ahnung welches von den beiden codeschnipseln besser ist.
eine ehrliche Aussage.
hoffe ihr experten könnt mir da sagen wo des reinkommt.
Wo was wo reinkommt? Eine präzise Problembeschreibung ist in einem Technikforum immer die beste Idee.
habe wie gesagt vieles ausprobiert...
Das ist keine ehrliche Aussage. Wenn Du uns nicht zeigst, was genau Du wo ausprobiert hast, und was wo nicht wie erwartet sondern wie genau dabei herausgekommen ist, können wir Deinem Verständnis nicht auf die Sprünge helfen. Helfen tun wir gerne, und zwar beim Dazulernen. Keinesfalls jedoch machen wir hier Deine Arbeit für Dich gratis.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Liebe Mandy,
keine ahnung welches von den beiden codeschnipseln besser ist.
eine ehrliche Aussage.
hoffe ihr experten könnt mir da sagen wo des reinkommt.
Wo was wo reinkommt? Eine präzise Problembeschreibung ist in einem Technikforum immer die beste Idee.
habe wie gesagt vieles ausprobiert...
Das ist keine ehrliche Aussage. Wenn Du uns nicht zeigst, was genau Du wo ausprobiert hast, und was wo nicht wie erwartet sondern wie genau dabei herausgekommen ist, können wir Deinem Verständnis nicht auf die Sprünge helfen. Helfen tun wir gerne, und zwar beim Dazulernen. Keinesfalls jedoch machen wir hier Deine Arbeit für Dich gratis.
Liebe Grüße,
Felix Riesterer.
Ich will die codes nur verbinden. jetzt falsche lösungen zu zeigen wäre sinnlos. wenn ihr mir nicht helfen wollt lasst einfach solche comments danke.
-
Om nah hoo pez nyeetz, Mandy!
Helfen tun wir gerne, und zwar beim Dazulernen. Keinesfalls jedoch machen wir hier Deine Arbeit für Dich gratis.
Ich will die codes nur verbinden. jetzt falsche lösungen zu zeigen wäre sinnlos. wenn ihr mir nicht helfen wollt lasst einfach solche comments danke.
Es wäre ja keine Hilfe, dir die fertige Lösung darzubieten.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
ok hier meine falsche lösung:
Habe den codeschnipsel an verschiedene stellen eingefügt zb ganz oben im .js code ganz unten im .js code . beides hat zb keien wirkung gezeigt oder das js nicht funktionieren lassen.wo soll ich es einfügen oder etwas ersetzen damit es wie beschrieben funktioniert?
-
Om nah hoo pez nyeetz, Mandy!
wo soll ich es einfügen oder etwas ersetzen damit es wie beschrieben funktioniert?
Du solltest vielleicht beim HTML beginnen.
Füge ein passendes Element an das Tooltipauslösende Element ein.
<span class="tooltip">Text mit Geheimnis<span>Hier der geheimnisvolle Text</span></span>im CSS erreichst du durch
.tooltip span {display: none; } und .tooltip:hover span {display: block; }zunächst einmal das Ein- und Ausblenden.
Damit es ordentlich aussieht, kannst du diesen Artikel mal durcharbeiten. Neueren Überlegungen zufolge ist er verbesserungswürdig (Forderungen aus der Barrierefreieheit).
So hat jeder Nutzer was von deinen zusätzlichen Hinweisen. Den Tooltip dann dem Mauszeiger folgen zu lassen oder in der Mitte des Viewports zu platzieren, ist dann die nächste Geschichte.
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
zunächst einmal das Ein- und Ausblenden.
ich bin doch nicht so unfähig..
das script funktioniert hervorragend ohne die css es ist schon alles im .js vorhanden.
das was ich lediglich will ist diese viewport funktion zum script hinzufügen was mir nicht gelingt leider..
ich weiß nicht ob ich etwas mit dem codeschnipsel ersetzen muss oder einfach an eine bestimmte stelle einfügen soll :( und bin kurz vorm aufgeben wenn mir da keiner nen tipp gibt. ich mein als JS experte ist es eine sache von max 2min. mir wenigstens zu sagen ob man das einfach einfügen muss an eine stelle oder es viel complexer ist also für mich unlösbar...der link image code sieht übrigens so aus:
<a href="showthread.php?t=145" class="screenshot" rel="http://bilder.filmstarts.de/r_160_214/b_1_cfd7e1/medias/nmedia/18/83/39/67/19688848.jpg">Age of the Dragons</a>-
Om nah hoo pez nyeetz, Mandy!
zunächst einmal das Ein- und Ausblenden.
ich bin doch nicht so unfähig.. das script funktioniert hervorragend ohne die css es ist schon alles im .js vorhanden.
Deine zweite Aussage straft die erste Lügen.
das was ich lediglich will ist diese viewport funktion zum script hinzufügen was mir nicht gelingt leider..
Du willst also nicht verstehen, was das Script eigentlich tut.
ich weiß nicht ob ich etwas mit dem codeschnipsel ersetzen muss oder einfach an eine bestimmte stelle einfügen soll :(
Füg es nach der 3. Zeile ein.
also für mich unlösbar...
wird es dann wohl bleiben ...
Matthias
--
Wer ein Problem beschreiben kann, hat es schon halb gelöst. (Julian Huxley)
-
Füg es nach der 3. Zeile ein.
habe den schnipsel wie du gesagt hast nach /* CONFIG */ nach der 3zeile eingefügt.
gibt keine änderung das imag bleibt trotzdem nicht im viewport.andere vorschläge?
lösungsansatz:
this.screenshotPreview = function(){ /* CONFIG */ $(".imagescreenshot").mousemove(function(e){ var posY; if (e.pageY - $(window).scrollTop() + $('#screenshot').height() >= $(window).height() ) { posY = $(window).height() + $(window).scrollTop() - $('#screenshot').height() - 15 ; } else { posY = e.pageY - 15; } $("#screenshot") .css("top",(posY) + "px") .css("left",(e.pageX + 15) + "px"); }); xOffset = 115; yOffset = 160; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result /* END CONFIG */ $("a.screenshot").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='loading...' width='150' />"+ c +"</p>"); $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#screenshot").remove(); }); $("a.screenshot").mousemove(function(e){ $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // starting the script on page load $(document).ready(function(){ screenshotPreview(); });
-
-
-
-
-
-
-