Image preview on hover direction aware? - javascript

I need some help :)
Working on a portfolio website with an image preview when you hover over a portfolio title. Whenever I hover over de last few titles at the bottom of the page, there are some ugly glitches/bounces: the image escapes the bounds of the webpage. Is there a way to make it direction aware, so that when you hover over the last few titles the image preview shows up above the title instead of below?
The HTML:
<ul class="project-list">
<li>
Title Here
</li>
</ul>
The CSS:
#preview {
position: absolute;
display: none;
max-width: 50rem;
height: auto;
}
The JS:
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
xOffset = -30;
yOffset = 40;
var imgHeight = 0;
var distFromTop = 0;
var mainImgTop = $(".preview").position();
$(".preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img style='display:block;' src='"+ this.rel +"' alt='Image prev' />");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$(".preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
Here is a JSFiddle: https://jsfiddle.net/spacebot/b7h46cfh/

If you just want to show the image above the last X amount of titles, you can use :nth-last-child(-n+X) (where X is the amount of titles).
Check if the title is one of the last titles and run another animation to show the image above.
//If link is one of the last 3 childs, open above
if($(this).is(':nth-last-child(-n+3)')){
openAbove();
}
JSFiddle example:
https://jsfiddle.net/447pjobL/8/

Related

Can't Add and Remove Div to Document

I cant get this code to work. It's supposed to be a custom dialog box. When a certain event transpires, the div pops up with an animation like it's moving towards you from a distance. The div has a clickable link that is supposed to trigger the removal of the box when clicked.
It works fine for one iteration, but when I attempt to trigger it again the whole thing falls apart in a horrendous way. The console doesn't issue any warnings or errors, but the browser freezes then crashes.
Any help would be appreciated.
function modalBoxOpen(left, top, width, height, string, element){
var x = $('<div></div>').prependTo(element);
x.attr("id", "pop_up_div");
x.css("position", "absolute");
x.css("border-color", "black");
x.css("border-style", "solid");
x.css("background-color", "rgb(204, 204, 204)" );
x.css("padding", 0 + "%");
x.css("z-index", 10);
var y = $('<div>' + string + '</div>').prependTo(x);
y.attr("id", "inner_pop_up_div");
y.css("text-align", "center");
y.css("font-family", "arial");
y.css("position", "absolute");
y.css("margin", "1%");
y.css("width", "98%");
y.css("height", "93%"); y.css("background-color", "red");
var l = left + .5*width;
var t = top + .5*height;
x.css("left", l + "px");
x.css("top", t + "px");
x.css("width", 2*(left + .5*width - l) + "px");
x.css("height", 2*(top + .5*height - t) + "px");
y.css("font-size", .0413*2*(left + .5*width - l) + "px");
$('<div style = "background-color: black; border-radius: 10px; padding
: 1%; margin-top: 1%; margin-left: 43%; margin-right: 43%">' +
'<a class = "link" id = "ok_button" href = "javascript:;"> OK </a>
</div>').appendTo(y);
okButtonClick = function(e){
e.stopPropagation();
removeElement('pop_up_div');
$(".input_cover").css("display", "none");
bindHandlers();
if ( $("#language_list_container").is(":visible") )
{$("#language_clickable").click();}
}
$("#ok_button").bind("click", okButtonClick);
var count = 0;
timer = setInterval(open, 40);
function open(){
if ( count > 4 ) {
clearInterval(timer);
bindHandlers();
return;
}
l -= .1*width;
t -= .1*height;
x.css("left", l + "px");
x.css("top", t + "px");
x.css("width", 2*(left + .5*width - l) + "px");
x.css("height", 2*(top + .5*height - t) + "px");
x.css("border-radius", 2*(count+1) + "px");
y.css("font-size", .0413*2*(left + .5*width - l) + "px");
count++;
}
}
function removeElement(id) {
return
(elem=document.getElementById(id)).parentNode.removeChild(elem);
}

image preview on icon mouseover

I'm attempting to use Jquery and Javascript so when a client mouseovers a generic icon used on a PageGridView it will display the thumbnail image slightly offset from the icon.
I'm borrowing the code I found on Techrepublic.
CSS Being used:
<style type="text/css">
#Fullimg{position:absolute;display:none;z-index:-1}
#preview{
position:absolute;
border:3px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
}
pre{
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-weight:normal;
padding:7px;
border:3px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
</style>
Javascript:
<script type="text/javascript" language="javascript">
// Kick off the jQuery with the document ready function on page load
$(document).ready(function(){
imagePreview();
});
// Configuration of the x and y offsets
this.imagePreview = function(){
xOffset = -20;
yOffset = 40;
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='preview'><img src='"+ this.link +"' alt='Image preview' />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
</script>
Icon:
<asp:Image ID="imgThumbnail" runat="server" ImageURL="~/Images/imgHover.png" ImageAlign="AbsMiddle" ClientIDMode="Static" CssClass="preview" link='<%# String.Format("~/ConvertImage.ashx?FleetID=" + m_oUserInfo.CurrentFleetID + "&VehicleID={0}&picID={1}&picType=PictureThumb&extention={2}", Eval("VehicleID"), Eval("StoredPictureID"), Eval("PictureExtension"))%>'/>
The code does absolutely nothing oddly, despite even trying to make it work in a fiddle. I've been beating my head against the wall on this for almost a week and the boss is starting to get annoyed that I can't get it working.
Any help or a more code efficient means of doing this would be greatly appreciated.
I corrected some basic part in the code. Here is the link:http://fiddle.jshell.net/bpVUk/2/
You can modify now as per your needs.
Code:
// Kick off the jQuery with the document ready function on page load
$(document).ready(function () {
var xOffset = -20;
var yOffset = 40;
$('.preview').on('mouseover', function (e) {
var img = $(this);
img.t = img.title;
img.title = "";
var c = (img.t != "") ? "<br/>" + img.t : "";
$("body").append("<p id='preview'><img src='" + img.attr('link') + "' alt='Image preview' />" + c + "</p>");
$("#preview").css({
"top": (e.pageY - xOffset) + "px",
"left": (e.pageX + yOffset) + "px",
'display': 'block',
});
});
$('.preview').on('mouseleave', function (e) {
$('#preview').remove();
})
});

Tooltip viewport validation

Want the code to validate if the popup is actually in the viewport or not.
somethinglike if (screenshotWidth + screenshotX > window.innerWidth) { // do stuff } and then same for height, but that's as far as i know.
thanks.
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// 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='url preview' />"+ 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();
});

Jquery Image preview plugin

I`m using this "plugin" found on web to preview some images in a php/linux website.
<script type="text/javascript">
function pimg()
{
this.xOffset = 5;
this.yOffset = 50;
$("a.pimg").hover(function (e)
{
this.img_title = this.title;
this.title = "";
var img_src = $(this).attr('img_src');
var desc = (this.img_title != "") ? "<h3>" + this.img_title + "</h3>" : "";
var image = (img_src) ? img_src : this.src;
$("body").append("<div id='pimg'><img src='" + image + "' alt='Image preview' />" + desc + "</div>");
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
$("#pimg").fadeIn(700);
}, function ()
{
this.title = this.img_title;
$("#pimg").remove();
});
$("a.pimg").mousemove(function (e)
{
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
});
};
$(document).ready(function($){
pimg();
})
</script>
<div class="images">
View Testimonial
</div>
What I want is to make the image preview to appear inside the visible browser window and not create new space for it ( in cases like the link is in the right bottom of the browser window ). I know I have to play with the positioning, but how can do it dinamically so that the image will appear only in the current viewable content of the browser window.
Thanks!
Your code is fine. You just need to add this to your CSS styles (DEMO)
#pimg{position:absolute;display:none;}
Aside from that, you'll just need to modify this code to the correct x/y coordinates you desire.
$("#pimg").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
Take a look at this updated fiddle: http://jsfiddle.net/Wp6bG/1/
In the example (modifed based on Dutchie432's original fiddle), if you resize the width of the screen, the preview will switch from right to left if the preview goes offscreen. You can modify the code to handle all other screen edges (top/left/bottom.)

jquery popup activated on hover over <a> need to change to <label>

I have a popup system that shows a image when you hover over a link. Instead I need the popup to be activated when you hover over <label>
popup.js
/*
* Url preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 130;
yOffset = 60;
// 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='image loading...' />"+ 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();
});
Here is the html that activate the popup
HTML:
<a style="" class="screenshot" rel="images/0.jpg" title="blablabla">blablabla</a>
I tried:
<label for="0" class="screenshot" rel="images/0.jpg" title="blablabla">blablabla</label>and changed to this in the js $("label.screenshot").hover, but I only get image loading and no image..
The issue you are having, is that since this.rel is accessing the dom property rel which is a properly of a a tag but not a property of a label.
Change your code to $(this).attr('rel'), so it will pickup the attribute.
$("body").append("<p id='screenshot'><img src='"+ $(this).attr('rel') ...

Categories

Resources