Develop Reference

Work with SVG through an object, does not want to work

I draw prompts on an interactive map, in js a beginner, did svg at first inside the file, but later decided to output svg via object, and there are already problems, I got the object itself, and I don’t quite understand how to transfer it to the code further
<object data="map.svg" type="image/svg+xml" id="svgmap" width="100%" height="100%"></object>
<div class="map-tooltip"></div>
var svgobject = document.getElementById('svgmap');
var svgdom = svgobject.contentDocument;
var tooltip = document.querySelector('.map-tooltip');
var contents = {};
contents['dom-48-a'] = '<img src="img/1.jpg"><h1>тест</h1><p>тест</p>';
contents['dom-37-9'] = '<img src="img/1.jpg"><h1>тест 2</h1><p>тест 2</p>';
[].forEach.call(svgdom.querySelectorAll('.HI-map'), function(item) {
item.addEventListener('click', function() {
window.open(this.getAttribute('data-link'));
});
item.addEventListener('mouseenter', function() {
tooltip.innerHTML = contents[item.getAttribute('data-tooltip')];
tooltip.style.display = 'block';
});
item.addEventListener('mousemove', function(e) {
tooltip.style.top =
(e.pageY + tooltip.clientHeight + 10 < svgdom.body.clientHeight)
? (e.pageY + 10 + "px")
: (svgdom.body.clientHeight + 5 - tooltip.clientHeight + "px");
tooltip.style.left =
(e.pageX + tooltip.clientWidth + 10 < svgdom.body.clientWidth)
? (e.pageX + 10 + "px")
: (svgdom.body.clientWidth + 5 - tooltip.clientWidth + "px");
});
item.addEventListener('mouseleave', function(){
tooltip.style.display = 'none';
});
});

Image preview on hover direction aware?

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/

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();
})
});

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') ...