Develop Reference

Positioning of jQuery tooltip

I´m using the jQuery UI tooltip plugin.
How can I change the tooltip position depending on the windows´ resolution?
At the moment I still need to reload the browser so the script takes effect. It can´t adjust the position in real time when changing the browser windows´ size
var res = $(window).width();
var arr = {};
if(res < 960){
arr = {my: "left+3 bottom-3", of: event, collision:"fit"};
}else{
arr = {my: "left+153 top+20", collision: "flipfit" };
}
init_tooltip(arr);
function init_tooltip(param){
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slideData",
delay: 0
},
position: arr,
});
}
$('*[data-id]').hover(function (event, ui) {
let $tooltip = $(this);
let id = $tooltip.attr("data-id");
ajaxManager.add({
url: "../datenbank/itemscript.php",
type: "GET",
cache: "true",
data: {
"var": id
},
success: function (data) {
console.log(data);
$tooltip.tooltip({
content: data
});
}
});
});

You could use ternary operator:
var res = $(window).width();
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slideData",
delay: 0
},
position: (res < 960 ? {my: "left+3 bottom-3", of: event, collision:"fit"} : { my: "left+153 top+20", collision: "flipfit" }),
});
or classic if else
var res = $(window).width();
function init_tooltip(param){
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slideData",
delay: 0
},
position: param,
});
}
to trap the change of window width:
$(window).resize(checkWidth);
checkWidth();
function init_tooltip(param){
$('*[data-id]').tooltip({
tooltipClass: "tooltipitem",
content: '<div class="loading">Laden...</p>',
hide: {
effect: "slideData",
delay: 0
},
position: param,
});
}
function checkWidth(){
var res = $(window).width()
var arr = {};
if(res < 960){
arr = {my: "left+3 bottom-3", of: event, collision:"fit"};
}else{
arr = {my: "left+153 top+20", collision: "flipfit" };
}
init_tooltip(arr);
}

Measures for the code that prevents iFrame execution

I want to implement iFrames, but this pagination code gets in the way.
If I don't comment out this pagination code, iFrame will not be executed.
pagination code ( pagination.js ):
////////// this part or ↓
function tpl(data) {
var html = '';
$.each(data, function(index,item) {
html += '<section class="item">' + item + '</section>';
});
return html;
}
//////////
$(function() {
var len = $('.item').length;
$('#no-p').pagination({
dataSource: function(done) {
var result = [];
for (var i = 0; i < len; i++) {
var $item = $('.item').get(i);
if ($item) result.push($item.innerHTML);
}
done(result);
},
pageSize: 8,
showPageNumbers: false,
showNavigator: true,
autoHidePrevious: true,
autoHideNext: true,
////////// iFrame will not be executed unless this part is deleted ↓
callback: function(data,pagination) {
var html = tpl(data);
$('#items').html(html);
}
//////////
});
});
iFrame code ( iziModal.js ):
$(document).on('click', '.item1', function (event) {
$(".item1").click(function (event) {
event.preventDefault();
$('#iframe').iziModal('open');
$('#modal').iziModal('open', {
iframeURL: $(this).data('href')
});
});
$("#modal").iziModal({
iframe: true,
width: '98%',
iframeHeight: 650,
zindex: '110',
iframeURL: "data.html",
group: 'works',
overlayColor: 'rgba(0,0,0,0.1)'
});
$(".item1").off('click');
});
However, I need both iFrame and pagination.
How can I implement both?

JqvMap onRegionClick (bootstrap) PopOver fires only clicking twice

I am using JqvMap and I want to click on a region and this shall prompt a (bootstrap) popover with the name of the country as title, and the content should be some html links. This is my code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: 'true',
onRegionClick: function(element, code, region) {
$(".popover-title").html(region);
jQuery('.jvectormap-region').popover({
placement: 'top',
container: '#vmap',
content: 'page 1</br>page 2</br>page 3</br>page 4</br>',
trigger: 'click',
html: 'true',
title: ' '
});
},
onRegionOver: function (event, code, region) {
document.body.style.cursor = "pointer";
},
onRegionOut: function (element, code, region) {
document.body.style.cursor = "default";
$('.jvectormap-region').popover('destroy');
// $('#vmap').vectorMap('deselect', code);
}
});
});
</script>
My problem at the moment is that I need to click twice on the map to make popover show up. I read it may be due to the fact that it is not initialized, but I can't seem to initialize it (where? how?)!
Can someone help me with these issues? I can't seem to figure out what the problem is..

So I kinda fixed it (probably in a nasty way but it does the trick).
Hope it will help someone else.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#vmap').vectorMap({
map: 'world_en',
backgroundColor: '#333333',
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: false,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
regionsSelectableOne: true,
});
runPopOver();
});
</script>
<script type="text/javascript">
function runPopOver() {
var currentRegion;
jQuery('#vmap').bind('regionMouseOver.jqvmap',
function(event, code, region) {
document.body.style.cursor = "pointer";
currentRegion = region;
}
);
jQuery('#vmap').bind('regionMouseOut.jqvmap',
function(event, code, region) {
document.body.style.cursor = "default";
}
);
jQuery('#vmap').bind('regionClick.jqvmap',
function(event, code, region) {
if ($('#vmap [id^="popover"]').length > 1) {
$('#vmap [id^="popover"]').first().remove();
}
var snapshot_url = "http://www.business-anti-corruption.com/country-profiles/europe-central-asia/" + region + "/snapshot.aspx";
$(".popover-title").html(region);
$(".popover-content").html('Snapshot</br>page 2</br>page 3</br>page 4</br>');
}
);
jQuery('.jvectormap-region').popover({
placement: 'left',
container: '#vmap',
html: 'true',
title: ' '
});
}
</script>
So basically when I click on a region if there is more than 1 popover (even to be opened) I get a list of all the popover (2), take the first and remove it from the DOM (.first().remove()).

Here's a more permanent fix:
in the jquery.vmap.js find this bit of code:
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e) {
if (!params.multiSelectRegion) {
for (var key in mapData.pathes) {
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
map.countries[key].setFill(map.countries[key].getOriginalFill());
}
}
var path = e.target;
var code = e.target.id.split('_').pop();
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
if (!regionClickEvent.isDefaultPrevented()) {
if (map.selectedRegions.indexOf(code) !== -1) {
map.deselect(code, path);
} else {
map.select(code, path);
}
}
//console.log(selectedRegions);
});
Replace it with this:
jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mousedown mouseup', function (e) {
var PageCoords;
if (e.type == 'mousedown') {
pageCoords = event.pageX + "." + event.pageY;
}
if (e.type == 'mouseup') {
var pageCoords2 = event.pageX + "." + event.pageY;
if (pageCoords == pageCoords2) {
//we have a click. Do the ClickEvent
if (!params.multiSelectRegion) {
for (var key in mapData.pathes) {
map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
map.countries[key].setFill(map.countries[key].getOriginalFill());
}
}
var path = e.target;
var code = e.target.id.split('_').pop();
regionClickEvent = $.Event('regionClick.jqvmap');
jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
if (!regionClickEvent.isDefaultPrevented()) {
if (map.selectedRegions.indexOf(code) !== -1) {
map.deselect(code, path);
} else {
map.select(code, path);
}
}
}
}
Instead of triggering a click immediately, the script now checks if it's a click or a drag. If it's a click, it fires the code you put in our onRegionClick.

How to create multiple jQuery dialogs in a loop

I am trying to generate multiple jQuery Dialogs within a loop. Funny thing is, if I hardcode the dialogs in the function(), like #dialog1.dialog({...}) and #dialog2.dialog({...}) and so on it works!
But if I generate these functions in a loop it doesn't work!!!
Here is an exemplary code:
<div id=object><div>
<script type="text/javascript">
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for(var i = 0; i < 7 ; i++) {
$( "#dialog"+array[i]).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
$( "#opener"+array[i]).click(function() {
$( "#dialog"+array[i]).dialog( "open" );
});
}
});
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
};
</script> `
It would be very kind if someone could help me!

Include the below code in document ready function
for(var i = 0; i < 7 ; i++) {
$("#object").append("<button id=\opener"+array[i]+">Details</button> ");
$("#object").append("<div class=\"dialog\" id=\"dialog"+array[i]+"\"title=\"Details\"></div>");
}

You need to swap your loops over. At the moment you are trying to access #dialogX elements before they exist in the DOM. In fact, you can combine both loops into one, which creates the button and dialog elements and then instatiates the dialog.
var array =['1','2','3','4','5','6','7','8'];
$(document).ready(function () {
for (var i = 0; i < array.length; i++) {
var $dialog = $('<div />', {
class: 'dialog',
id: 'dialog' + array[i],
title: 'Details'
}).dialog({
autoOpen: false,
width: "auto",
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 500
}
});
var $button = $('<button />', {
id: 'opener' + array[i],
text: 'Details'
}).click(function () {
$("#dialog" + array[i]).dialog("open");
});
$("#object").append($button, $dialog);
}
});

Script doesn't work on elements loaded with infinite scrolling

I'm using this script on my tumblr page, which gives posts different random text colors:
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;}
$(function() {
$(".post").each(function() {
$(this).css("color", get_random_color());
}); });
The thing is the script isn't working for elements loaded with infinite scrolling. Can anyone help me rewrite this code? I don't know how to write javascript sadly.

Take a look at your blog's main.js script. You can call your custom function when you grab the new elements from another page. This is my proposed revision of your main.js file.
$(window).load(function () {
var $wall = $('#content');
$wall.imagesLoaded(function () {
$wall.masonry({
itemSelector: '.post',
isAnimated: false
});
});
$wall.infinitescroll({
navSelector: '#pagination',
nextSelector: '#pagination li a.pagination_nextlink',
itemSelector: '.post',
loadingImg: "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
loadingText: " ",
donetext: " ",
bufferPx: 100,
debug: false,
errorCallback: function () {
$('#infscr-loading').animate({
opacity: .8
}, 2000).fadeOut('normal');
}
}, function (newElements) {
var $newElems = $(newElements);
$newElems.hide();
$newElems.each(function(value){
value.css("color", get_random_color());
});
$newElems.imagesLoaded(function () {
$wall.masonry('appended', $newElems, {
isAnimated: false,
animationOptions: {
duration: 900,
easing: 'linear',
queue: false
}
}, function () {
$newElems.fadeIn('slow');
});
});
$(document).ready(function () {
$("a[rel^='prettyPhoto']").prettyPhoto({
deeplinking: false,
default_width: 600,
default_height: 550,
allow_resize: true,
});
});
});
$('#content').show(500);
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
What I've done is add your get_random_color function and called it from within the Infinite Scroll call to add a custom color to each of the elements in $newElems so really, all I've done is taken your code and integrated it differently than what you were trying to do, which wasn't working. This should, theoretically, work. If it doesn't or you have questions, let me know.