make tooltip work only in class not in title attribute

make tooltip work only in class not in title attribute - javascript

This codes does what i want but by default everywhere on my website where there is title attribute it changes the style which i do not want.
I want it to work in just some places where i assign it.
could someone show me how to?
the css
#tooltip {
background: #C7100C;
color:#fff;
padding: 3px 10px;
width:20%;
white-space: pre-line;
}
Here is the js
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", "*[title]", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());

Just replace "*[title]" with something like ".make-tooltip" and assign this class to elements you want to have that tooltip.
This way you don't target all elements which have a title, but only those elements, which have the .make-tooltip class.
(function () {
var ID = "tooltip", CLS_ON = "tooltip_ON", FOLLOW = true,
DATA = "_tooltip", OFFSET_X = 20, OFFSET_Y = 10,
showAt = function (e) {
var ntop = e.pageY + OFFSET_Y, nleft = e.pageX + OFFSET_X;
$("#" + ID).html($(e.target).data(DATA)).css({
position: "absolute", top: ntop, left: nleft
}).show();
};
$(document).on("mouseenter", ".make-tooltip", function (e) {
$(this).data(DATA, $(this).attr("title"));
$(this).removeAttr("title").addClass(CLS_ON);
$("<div id='" + ID + "' />").appendTo("body");
showAt(e);
});
$(document).on("mouseleave", "." + CLS_ON, function (e) {
$(this).attr("title", $(this).data(DATA)).removeClass(CLS_ON);
$("#" + ID).remove();
});
if (FOLLOW) { $(document).on("mousemove", "." + CLS_ON, showAt); }
}());
#tooltip {
background: #C7100C;
color:#fff;
padding: 3px 10px;
width:20%;
white-space: pre-line;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm a link<br>
I'm a link<br>
I'm a link<br>
I'm a link<br>
I'm a link<br>

Related

Organizing buttons in div using only JavaScript

I need help with organizing this gallery to look like this:
I tried everything I know with positions (absolute and relative), bottoms, margins... but I can't seem to organize it properly.
This popup div needs to occupy 80% of page height and 80% of the page width, and images shouldn't break out of div.
I am not allowed to change HTML or to add CSS. Everything needs to be written inside the JS file.
Here is my code:
$(document).ready(function() {
var images = $('div[title ="London gallery"]').children('img').map(function() {
return $(this).attr('src')
}).get();
var description = $('div[title ="London gallery"]').children('p').map(function() {
return $(this).text();
}).get();
$('div[title ="London gallery"]').hide();
var gallery_lndn = document.createElement('button');
gallery_lndn.id = 'btn_London';
gallery_lndn.innerHTML = 'Look at the galery!';
document.body.appendChild(gallery_lndn);
document.getElementById('btn_London').onclick = function() {
show_pictures(images, description);
}
function show_pictures(images, description) {
function popUp() {
var index = 0;
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'div_popup';
popup.style.background = "#2F4F4F";
popup.style.position = "absolute";
popup.style.top = "0px";
popup.style.left = "0px";
popup.style.right = "0px";
popup.style.margin = "100px auto";
popup.style.height = "80%";
popup.style.width = "80%";
var cancelButton = document.createElement('button');
cancelButton.innerHTML = 'x';
cancelButton.id = 'btn_cancelButton';
cancelButton.style.background = "red";
cancelButton.style.border = "none";
cancelButton.style.display = "inline-block";
cancelButton.style.fontSize = "16px";
cancelButton.style.padding = "15px 20px";
cancelButton.style.float = "right";
cancelButton.style.top = "0";
cancelButton.onclick = function(e) {
popup.parentNode.removeChild(popup)
};
var previousButton = document.createElement('button');
previousButton.innerHTML = '<<';
previousButton.style.background = "#32CD32";
previousButton.style.border = "none";
previousButton.style.display = "inline-block";
previousButton.style.fontSize = "16px";
previousButton.style.padding = "15px 32px";
previousButton.style.position = "absolute";
previousButton.style.float = "left";
previousButton.style.bottom = "0";
previousButton.onclick = function() {
index = (index == 0) ? images.length - 1 : index - 1;
console.log(index);
updateImage();
}
var nextButton = document.createElement('button');
nextButton.innerHTML = '>>';
nextButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
nextButton.style.border = "none";
nextButton.style.display = "inline-block";
nextButton.style.fontSize = "16px";
nextButton.style.padding = "15px 32px";
//nextButton.style.position = "absolute";
nextButton.style.float = "right";
nextButton.style.bottom = "0";
nextButton.onclick = function() {
index = (index == images.length - 1) ? 0 : index + 1;
console.log(index);
updateImage();
}
function updateImage() {
var img = new Image();
img.src = images[index];
img.style.margin = "auto";
img.style.position = "relative";
img.style.display = "block";
console.log(img);
$("#div_popup").html("");
if (index == 0) {
previousButton.style.background = "#A9A9A9";
//previousButton.disabled = "true";
} else if (index == images.length - 1) {
nextButton.style.background = "#A9A9A9";
//nextButton.disabled = "true";
} else {
//nextButton.disabled = "false";
//previousButton.disabled = "false";
previousButton.style.background = "#32CD32";
nextButton.style.background = "#32CD32";
}
popup.appendChild(previousButton);
popup.appendChild(nextButton);
popup.appendChild(cancelButton);
var message = document.createElement('span');
//message.style.position = "absolute";
message.style.bottom = "0";
message.innerHTML = "Picture " + (index + 1) + "/" + images.length + "<br>" + description[index];
img.onload = function() {
popup.appendChild(message);
popup.appendChild(img);
document.body.appendChild(popup);
};
}
updateImage();
}
popUp();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="gallery.js"></script>
</head>
<body>
<h1>London</h1>
<div class="gallery" title="London gallery">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
<p data-target="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
Description 1.
</p>
<img src="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
<p data-target="https://news.itu.int/wp-content/uploads/2018/07/london-min-e1530887248858.jpg">
Description 2.
</p>
</div>
</body>
</html>

You can update the button positions according to the image. Call below method inside the updateImage method just before closing.
function updatePositions(){
// absolute position for all buttons
$('#div_popup > button').css({'position': 'absolute', 'float':'none', 'z-index': 1});
// get image bottom position
let buttonTopPos = ($('#div_popup > img').offset().top + $('#div_popup > img').height()) - $('#div_popup').offset().top + 20;
// get image bottom left position
let buttonLeftPos = 0;
if($('#div_popup').width() > $('#div_popup > img').width()){
buttonLeftPos = ($('#div_popup').width() - $('#div_popup > img').width())/2
}else{
$('#div_popup > img').css({'min-width':'100%', 'max-width':'100%'});
}
// image overflow will be hidden
$('#div_popup').css('overflow', 'hidden');
// Back button position
$('#div_popup > button:nth-child(1)').css({'top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos +'px'})
// Next button position
$('#div_popup > button:nth-child(2)').css({'top': buttonTopPos, 'bottom':'auto', 'left': (buttonLeftPos + $('#div_popup > img').width()) - 90})
// cancel button position
$('#div_popup > button:nth-child(3)').css({'top': 0, 'right': 0, left: 'auto'});
// description position
$('#div_popup > span').css({'position': 'absolute','top': buttonTopPos, 'bottom':'auto', 'left': buttonLeftPos + 90, 'width': $('#div_popup > img').width() - 90 - 90, 'text-align': 'center'})
}

Here's a layout that approximates the sample, above. For convenience, this uses JavaScript to add a <style> element to the <head>.
window.onload = () => {
const myCSS =
' body {\n' +
' width:100vw;\n' +
' height:100vh;\n' +
' position:relative\n' +
' }\n' +
' .gallery {\n' +
' background-color: darkblue;\n' +
' width: 80%;\n' +
' height: 80%;\n' +
' position: absolute;\n' +
' top: 10%;\n' +
' left: 10%;\n' +
' }\n' +
' .img-wrapper {\n' +
' background-color: transparent;\n' +
' width: calc(100% - 120px);\n' +
' height: calc(100% - 160px);\n' +
' margin: 60px;\n' +
' overflow-y: hidden;\n' +
' }\n' +
' .img-wrapper img {\n' +
' width: 100%;\n' +
' height: auto;\n' +
' }\n' +
' .btn1 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn2 {\n' +
' width: 120px;\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' right: 60px;\n' +
' bottom: 30px;\n' +
' background-color: #999;\n' +
' }\n' +
' .btn-close {\n' +
' width: 80px;\n' +
' height: 40px;\n' +
' position: absolute;\n' +
' right: 0;\n' +
' top: 0;\n' +
' background-color: #999;\n' +
' }\n' +
' .caption {\n' +
' width: calc(100% - 409px);\n' +
' height: 60px;\n' +
' position: absolute;\n' +
' left: 192px;\n' +
' bottom: 30px;\n' +
' color: white;\n' +
' border: 1px dashed #aaa;\n' +
' text-align: center;\n' +
' padding: 0 12px;\n' +
' overflow: hidden;\n' +
' }\n';
const myStyle = document.createElement('style');
myStyle.id = 'myCSS';
myStyle.innerHTML = myCSS;
document.head.appendChild(myStyle);
}
<body>
<div class="gallery">
<div class="img-wrapper">
<img src="https://cdn.londonandpartners.com/visit/general-london/areas/river/76709-640x360-houses-of-parliament-and-london-eye-on-thames-from-above-640.jpg">
</div>
<div class="btn1">.btn1</div>
<div class="btn2">.btn2</div>
<div class="caption">.caption</div>
<div class="btn-close">.btn-close</div>
</div>
</body>

Update a data when I drag a point

EDIT:
So I edited my post and my code.
With what Justinas told me I changed my code, so I display the info of the 3 points below the div.
But here's the thing, when I move a point, new info is displayed underneath the others.
I would like the info to update itself directly in the concerned display without recreating a new info below.
Thank you for your help and sorry again for my english.
Here is my code :
$(function () {
let data = [
["1", "123", "247", "#FF0000",
"https://www.google.com",
"https://www.google.com"
],
["2", "785", "230", "#FF0000",
"https://www.google.com",
"https://www.google.com"
],
["3", "422", "332", "#FF0000",
"https://www.google.com",
"https://www.google.com"
]
];
let url;
let pastille;
let urlOpen;
let urlMove;
for (i = 0; i < data.length; i++) {
let datas = data[i];
let id = datas[0];
let x = datas[1];
let y = datas[2];
pastille = document.createElement('a');
urlFmOpen = datas[4];
pastille.setAttribute("href", urlFmOpen);
pastille.setAttribute("class", "pointData");
pastille.textContent = datas[0];
pastille.style.textDecoration = "none";
pastille.style.backgroundColor = datas[3];
pastille.style.position = "absolute";
pastille.style.width = "16px";
pastille.style.borderRadius = "12px";
pastille.style.border = "2px solid white";
pastille.style.color = "white";
pastille.style.textAlign = "center";
pastille.style.fontSize = "14px";
pastille.style.cursor = "pointer";
pastille.style.padding = "3px";
pastille.style.left = (datas[1] - 11) + "px";
pastille.style.top = (datas[2] - 11) + "px";
urlFmMove = datas[5];
$("body").append(pastille);
$('#info').append("<p>" + 'id ' + id + ' x: ' + x + ' y: ' + y + "</p>")
var testurl;
$(pastille).draggable({
stop: function () {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#info').append("<p>" + 'id ' + id + ' x: ' + xPos + ' y: ' + yPos + "</p>")
// testurl = window.location.href = urlFmMove + "&$PosX=" + xPos + "&$PosY=" +
// yPos;
console.log("xPos: " + xPos + " yPos: " + yPos)
}
})
}
});
.div1 {
width: 900px;
height: 600px;
background-color: grey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="div1"></div>
<div id="info">
</div>

From your comments I see that all you need to do is to track all coordinates from each element. For that append element with unique ID and on drag stop just edit it's content
$(function() {
let data = [
["1", "20", "30", "#FF0000",
"https://www.google.com",
"https://www.google.com"
],
["2", "60", "90", "#FF0000",
"https://www.google.com",
"https://www.google.com"
],
["3", "90", "150", "#FF0000",
"https://www.google.com",
"https://www.google.com"
]
];
let url;
let pastille;
let urlOpen;
let urlMove;
for (i = 0; i < data.length; i++) {
let datas = data[i];
let id = datas[0];
let x = datas[1];
let y = datas[2];
pastille = $('<a>');
pastille
.attr('href', datas[4])
.addClass('pointData')
.css({
backgroundColor: datas[3],
left: (datas[1] - 11) + 'px',
top: (datas[2] - 11) + 'px'
})
.text(datas[0]);
urlFmMove = datas[5];
$("body").append(pastille);
let info = $('<p>');
info
.attr('id', 'id-' + id)
.text('id ' + id + ' x: ' + x + ' y: ' + y)
$('#info').append(info)
var testurl;
$(pastille).draggable({
stop: function() {
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#id-' + id).text('id ' + id + ' x: ' + xPos + ' y: ' + yPos);
console.log("xPos: " + xPos, " yPos: " + yPos);
}
})
}
});
.div1 {
width: 100%;
height: 200px;
background-color: grey;
}
.pointData {
text-decoration: none;
padding: 3px;
cursor: pointer;
font-size: 14px;
text-align: center;
color: wite;
border: 2px solid white;
border-radius: 12px;
width: 16px;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="div1"></div>
<div id="info">
</div>

Absolute Center on Dynamic Elements [duplicate]

This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 8 years ago.
So I have a rotator, which works good. However the master box is determined by the largest image. And all images (if smaller and such) should float in the center of the master box. However my margin edits don't seem to be doing anything in the code. Any ideas why they aren't applying?
var postimgrotator = $('.postimgrotator'),
preloader = $('#loading-images');
postimgrotator.each(function () {
this['tmp'] = '';
this.tmp2 = '';
this.postimages = new Array();
this.cur = 0;
this.count = 0;
console.log($(this));
this['postimages'] = $(this).html().trim().split(" ");
this['count'] = this['postimages'].length;
$(this).html("");
for (this['cur'] = 0; this['cur'] < this['count']; this['cur']++) {
this['tmp'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" class="postimgelm" />';
this['tmp2'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" />';
}
$(this).css({
'width': this['tmp'],
'height': this['tmp2']
});
$(this).html(this['tmp'].trim());
preloader.html(this['tmp2']);
var width = 0,
height = 0;
preloader.find('img').each(function () {
if (width < parseInt($(this).width())) {
width = parseInt($(this).width());
}
if (height < parseInt($(this).height())) {
height = parseInt($(this).height());
}
});
console.log('Width: ' + width + ' Height: ' + height);
$(this).css({
'width': width,
'height': height
});
var images = $(this).find('img');
this['cur'] = 0;
images.not(':first').hide();
images.first().css({
'marginTop': '-' + parseInt(images.first().height()),
'marginLeft': '-' + parseInt(images.first().width())
});
var imgcur = 0,
count = this['count'];
this.imgrotate = setInterval(imgrotator, 5000);
function imgrotator() {
console.log(parseInt(images.eq(imgcur).height()));
images.eq(imgcur).css({
'marginTop': '-' + parseInt(images.eq(imgcur).height()),
'marginLeft': '-' + parseInt(images.eq(imgcur).width())
});
console.log(images.eq(imgcur));
images.eq(imgcur).fadeOut(300, function () {
imgcur += 1;
if (imgcur === count) {
imgcur = 0;
}
images.eq(imgcur).fadeIn('slow');
});
}
});
#loading-images {
position:absolute;
top:0;
left:-9999px;
}
.postimgrotator {
position: relative;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
margin: 10px;
}
.postimgrotator img {
position: absolute;
top: 50%;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div id="loading-images"></div>

Does this help?
var postimgrotator = $('.postimgrotator'),
preloader = $('#loading-images');
postimgrotator.each(function () {
this['tmp'] = '';
this.tmp2 = '';
this.postimages = new Array();
this.cur = 0;
this.count = 0;
console.log($(this));
this['postimages'] = $(this).html().trim().split(" ");
this['count'] = this['postimages'].length;
$(this).html("");
for (this['cur'] = 0; this['cur'] < this['count']; this['cur']++) {
this['tmp'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" class="postimgelm" />';
this['tmp2'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" />';
}
$(this).css({
'width': this['tmp'],
'height': this['tmp2']
});
$(this).html(this['tmp'].trim());
preloader.html(this['tmp2']);
var width = 0,
height = 0;
preloader.find('img').each(function () {
if (width < parseInt($(this).width())) {
width = parseInt($(this).width());
}
if (height < parseInt($(this).height())) {
height = parseInt($(this).height());
}
});
console.log('Width: ' + width + ' Height: ' + height);
$(this).css({
'width': width,
'height': height
});
var images = $(this).find('img');
this['cur'] = 0;
images.not(':first').hide();
images.first().css({
'marginTop': '-' + parseInt(images.first().height()),
'marginLeft': '-' + parseInt(images.first().width())
});
var imgcur = 0,
count = this['count'];
this.imgrotate = setInterval(imgrotator, 5000);
function imgrotator() {
console.log(parseInt(images.eq(imgcur).height()));
images.eq(imgcur).css({
'marginTop': '-' + parseInt(images.eq(imgcur).height()),
'marginLeft': '-' + parseInt(images.eq(imgcur).width())
});
console.log(images.eq(imgcur));
images.eq(imgcur).fadeOut(300, function () {
imgcur += 1;
if (imgcur === count) {
imgcur = 0;
}
images.eq(imgcur).fadeIn('slow');
});
}
});
#loading-images {
position:absolute;
top:0;
left:-9999px;
}
.postimgrotator {
position: relative;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
margin: 10px;
}
.postimgrotator img {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%); /* this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div id="loading-images"></div>

Tooltipster not displaying for last array item

I have a simple MVC program that passes a list of user to my view, and inside the view i've looped through the array and assigned each users name to title attribute in an anchor tag. I'm using the tool tipster plugin to display the title(users name) when a user hovers over each link. However, for some reason the last item from the array is not assigned a 'tooltipstered' class.
html
<div class="map" style="height: 1114px; width:960px; position:relative; margin:0 auto; background: url('/Content/MAP.png') no-repeat top center;"></div>
javascript
$(function() {
var allData = #Html.Raw(#JsonConvert.SerializeObject(Model.AllDeskData));
var datatest;
function getDesks(coordsArr) {
for (var i = 0; i < coordsArr.length; i++) {
var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");
$('.tooltip').tooltipster();
$(element).on('click', function() {
var user = $(this).attr("data-name");
$.ajax({
url: "/Home/GetUserData",
type: "GET",
data: { user: user },
success: function(data) {
//console.log(data.photos[0].value);
$(".desk-info-box").animate({
"margin-top": "0px"
}, 400);
$(".map .overlay").fadeIn(300);
$(".desk-info-data .name").text(data.displayName);
$(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
$(".desk-info-data .email").text("email: " + data.jive.username + ".");
$(".desk-img").css({
'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
'background-size' : '100% 260px',
'background-repeat' : 'no-repeat'
});
$(".user-image").attr("src",data.photos[0].value);
}
});
});
$(".hide-detail").on("click",function(){
$(".desk-info-box").animate({
"margin-top": "-425px"
}, 400);
});
$(element).css({
"top": coordsArr[i].DeskYCoord,
"left": coordsArr[i].DeskXCoord
}).appendTo(".map");
}
}
getDesks(allData);
/* $(".deskBtn").on("click", function() {
});*/
});
I can't understand why the last item would not have that class assigned to it.

Call the tooltip after all elements appended,
function getDesks(coordsArr) {
for (var i = 0; i < coordsArr.length; i++) {
var element = $("<a href='#' class='deskBtn tooltip' title='" + coordsArr[i].Name + "' data-name='" + coordsArr[i].UserName + "'></a>");
$(element).on('click', function() {
var user = $(this).attr("data-name");
$.ajax({
url: "/Home/GetUserData",
type: "GET",
data: { user: user },
success: function(data) {
//console.log(data.photos[0].value);
$(".desk-info-box").animate({
"margin-top": "0px"
}, 400);
$(".map .overlay").fadeIn(300);
$(".desk-info-data .name").text(data.displayName);
$(".desk-info-data .followers").text("who has " + data.followerCount + " followers");
$(".desk-info-data .email").text("email: " + data.jive.username + ".");
$(".desk-img").css({
'background-image' : 'url(' + '/Content/gopi_desk.jpg' + ')',
'background-size' : '100% 260px',
'background-repeat' : 'no-repeat'
});
$(".user-image").attr("src",data.photos[0].value);
}
});
});
$(".hide-detail").on("click",function(){
$(".desk-info-box").animate({
"margin-top": "-425px"
}, 400);
});
$(element).css({
"top": coordsArr[i].DeskYCoord,
"left": coordsArr[i].DeskXCoord
}).appendTo(".map");
}
$('.tooltip').tooltipster();
}

jQuery modal window closes incorrectly in Internet Explorer

I'm having some problems regarding a jQuery modal window. I'm a dba and SQL programmer and my goal is to build up a query which dynamically builds an HTML which contains a flash which links to a modal window that has another flash in it. Well the query is done and works flawlessly. However, I tried it on Internet Explorer and (unlike firefox and chrome) when you want to close the modal window it closes the whole browser window (with a warning message that says "beware, the browser's trying to close this tab etc").
I used an already existing jquery modal window code and styling (I believe that both matter). The problem is, that the whole query is done and if I change the whole jquery modal window, I'll have to change the query's logic, and drastically (believe me, I've checked).
So, my fastest solution would be to correct the jQuery code that is messing up the whole close thing (changing the sql stored proc would take a LOT of work). This is because the original example I used as a reference had this problem (I just didn't notice, due to jQuery supposively being a cross-browser solution for everything). You will see that it works flawlessly on FF and Chrome but not in IE
Here's the link: http://www.mediafire.com/?mcz70n870qmjch9
Thanks a lot!!!
Just in case I'm posting the code here as well:
/// <reference path="jquery-1.3.2.min-vsdoc.js" />
/************************************************************************************************************
* SIMPLE MODAL v 2.0
* © 2009 FISHBOWL MEDIA LLC
* http://fishbowlmedia.com
***********************************************************************************************************/
(function ($) {
/**********************************
* CUSTOMIZE THE DEFAULT SETTINGS
* Ex:
* var _settings = {
* id: 'modal',
* src: function(sender){
* return jQuery(sender).attr('href');
* },
* width: 800,
* height: 600
* }
**********************************/
var _settings = {
width: 800, // Use this value if not set in CSS or HTML
height: 600, // Use this value if not set in CSS or HTML
overlayOpacity: .85, // Use this value if not set in CSS or HTML
id: 'modal',
src: function (sender) {
return jQuery(sender).attr('href');
},
fadeInSpeed: 0,
fadeOutSpeed: 0
}
/**********************************
* DO NOT CUSTOMIZE BELOW THIS LINE
**********************************/
$.modal = function (options) {
return _modal(this, options);
}
$.modal.open = function () {
_modal.open();
}
$.modal.close = function () {
_modal.close();
}
$.fn.modal = function (options) {
return _modal(this, options);
}
_modal = function (sender, params) {
this.options = {
parent: null,
overlayOpacity: null,
id: null,
content: null,
width: null,
height: null,
modalClassName: null,
imageClassName: null,
closeClassName: null,
overlayClassName: null,
src: null
}
this.options = $.extend({}, options, _defaults);
this.options = $.extend({}, options, _settings);
this.options = $.extend({}, options, params);
this.close = function () {
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}
this.open = function () {
if (typeof options.src == 'function') {
options.src = options.src(sender)
} else {
options.src = options.src || _defaults.src(sender);
}
var fileExt = /^.+\.((jpg)|(gif)|(jpeg)|(png)|(jpg))$/i;
var contentHTML = '';
if (fileExt.test(options.src)) {
contentHTML = '<div class="' + options.imageClassName + '"><img src="' + options.src + '"/></div>';
} else {
contentHTML = '<iframe width="' + options.width + '" height="' + options.height + '" frameborder="0" scrolling="no" allowtransparency="true" src="' + options.src + '">&lt/iframe>';
}
options.content = options.content || contentHTML;
if (jQuery('.' + options.modalClassName).length && jQuery('.' + options.overlayClassName).length) {
jQuery('.' + options.modalClassName).html(options.content);
} else {
$overlay = jQuery((_isIE6()) ? '<iframe src="BLOCKED SCRIPT\'<html></html>\';" scrolling="no" frameborder="0" class="' + options.overlayClassName + '"></iframe><div class="' + options.overlayClassName + '"></div>' : '<div class="' + options.overlayClassName + '"></div>');
$overlay.hide().appendTo(options.parent);
$modal = jQuery('<div id="' + options.id + '" class="' + options.modalClassName + '" style="width:' + options.width + 'px; height:' + options.height + 'px; margin-top:-' + (options.height / 2) + 'px; margin-left:-' + (options.width / 2) + 'px;">' + options.content + '</div>');
$modal.hide().appendTo(options.parent);
$close = jQuery('<a class="' + options.closeClassName + '"></a>');
$close.appendTo($modal);
var overlayOpacity = _getOpacity($overlay.not('iframe')) || options.overlayOpacity;
$overlay.fadeTo(0, 0).show().not('iframe').fadeTo(_settings.fadeInSpeed, overlayOpacity);
$modal.fadeIn(_settings.fadeInSpeed);
$close.click(function () { jQuery.modal().close(); });
$overlay.click(function () { jQuery.modal().close(); });
}
}
return this;
}
_isIE6 = function () {
if (document.all && document.getElementById) {
if (document.compatMode && !window.XMLHttpRequest) {
return true;
}
}
return false;
}
_getOpacity = function (sender) {
$sender = jQuery(sender);
opacity = $sender.css('opacity');
filter = $sender.css('filter');
if (filter.indexOf("opacity=") >= 0) {
return parseFloat(filter.match(/opacity=([^)]*)/)[1]) / 100;
}
else if (opacity != '') {
return opacity;
}
return '';
}
_defaults = {
parent: 'body',
overlayOpacity: 85,
id: 'modal',
content: null,
width: 800,
height: 600,
modalClassName: 'modal-window',
imageClassName: 'modal-image',
closeClassName: 'close-window',
overlayClassName: 'modal-overlay',
src: function (sender) {
return jQuery(sender).attr('href');
}
}
})(jQuery);
And the style:
.modal-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #131313;
opacity: .85;
filter: alpha(opacity=85);
z-index: 101;
}
.modal-window {
position: fixed;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
z-index: 102;
background: #fff;
border: solid 8px #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.close-window {
position: absolute;
width: 47px;
height: 47px;
right: -23px;
top: -23px;
background: transparent url(../images/close-button.png) no-repeat scroll right top;
text-indent: -99999px;
overflow: hidden;
cursor: pointer;
}
Thanks a ton in advance everyone =-)
EDIT: Daniele suggested that the problem might be on this line:
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
I did what he suggested and the result was this: It still doesn't work at all on IE (meaning that it still asks to close the whole window and not just the modal), and correctly shows and closes a first modal in FF and chrome, but after closing the first one its not able to correctly show another one.

Replace close() method of modal with closeModal or something similar:
$.modal.closeModal = function () {
_modal.closeModal();
}
[...]
this.closeModal = function () {
jQuery('.' + options.modalClassName + ', .' + options.overlayClassName).fadeOut(_settings.fadeOutSpeed, function () { jQuery(this).unbind().remove(); });
}
[...]
$close.click(function () { jQuery.modal().closeModal(); });
$overlay.click(function () { jQuery.modal().closeModal(); });
for me it works...

Develop Reference

JavaScript is the programming language of the Web.

make tooltip work only in class not in title attribute - javascript

Related

Organizing buttons in div using only JavaScript

Update a data when I drag a point

Absolute Center on Dynamic Elements [duplicate]

Tooltipster not displaying for last array item

jQuery modal window closes incorrectly in Internet Explorer

Categories

Resources