javascript - Use jQuery set .css RIGHT if #foo + offset left is greater than page width -
ok, trying use jquery innerwidth() of element #preview. want create conditional says if x offset left + #preview width greater page width, give style right: z z = #preview width + xoffset.
i apologize code below mess , syntax .css ("right", (rightfloat + xoffset) + "px") (line 125) off, that's part of problem.
<script> $(document).ready(function(){ //append "gallery" class items "popup" class imagepreview(); $(".popup").addclass("gallery"); }); //the overlay or pop-up effect this.imagepreview = function() { /* config */ xoffset = 40; yoffset = 40; // these 2 variable determine popup's distance cursor // might want adjust right result /* end config */ $("a.preview").click(function(e) { return false; }); $("a.preview").hover(function(e) { this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; var rightfloat = e.pagex + ("#preview").innerwidth; $("body").append("<p id='preview'><img src='" + this.href + "' alt='image preview' />" + c + "</p>"); $("#preview").hide().css("top", (e.pagey - yoffset) + "px").css("left", (e.pagex + xoffset) + "px").fadein("2000"); while ((left + 400) > window.innerwidth) {.css("right", (rightfloat + xoffset) + "px") } }, function() { this.title = this.t; $("#preview").remove(); }); $("a.preview").mousemove(function(e) { var top = e.pagey - yoffset; var left = e.pagex + xoffset; var rightfloat = e.pagex + ("#preview").innerwidth; //flips image if gets close right side while ((left + 400) > window.innerwidth) {.css("right", +(rightflaot + xoffset) + "px") } $("#preview").css("top", top + "px").css("left", left + "px"); }); }; </script>
try using http://api.jquery.com/offset/
if($('#preview').offset().right<0){ var right = parseint($(window).width()) - e.pagex + xoffset; $("#preview").css("top", top + "px").css("right", right + "px"); }else{ var left = e.pagex + xoffset; $("#preview").css("top", top + "px").css("left", left + "px"); } i made these fixes because couldn't code work in jsfiddle: var xoffset = 40; var yoffset = 40; $("a.preview").bind('mouseover',function(e){ var rightfloat = parsefloat(e.pagex)+$("#preview").innerwidth();
var ptop = parsefloat(e.pagey) - yoffset; var pleft = parsefloat(e.pagex) + xoffset; $("#preview").css({"top":ptop + "px","left":pleft + "px"}); });
there's fixes top half have no idea you're trying bottom part (with while loop). can explain functionality want?
Comments
Post a Comment