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);
}
});
Related
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);
}
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?
So I am trying to basically create a div that slides out using transforms, as those work best in Chrome. I'm using a plugin called Animo.js that uses .css classes to animate using jquery, but I can't seem to get my code right. I'd rather not use class toggles or jquery toggles of any sort.
Code example
$(document).ready(function()
var $hTog = 0
$('#home').click(function()
{
if( $hTog.val() == 0)
{
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog.val() == 1;
};
else
{
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog.val() == 0;
};
})
})
Thanks in advance guys.
There are several things you can do in your code try this:
$(document).ready(function(){ // the '{' not there add this
var $hTog = 0;
$('#home').click(function(){
if( $hTog == 0){
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog = 1;
}else{
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
$hTog = 0;
}
});
});
Remove .val() from the if conditions.
Remove the ; from the closing of if condition and else part too.
Also after the .animo() method runs update the value of var with removing .val() and you don't need == to update the values.
You are referencing .val(), but you assigned $hTog the value 0, without properties. Try this:
$(document).ready(function() {
var hTog = 0
$('#home').click(function() {
if (hTog === 0) {
$('#hSlider').animo({animation: 'hGrow', iterate: 1, duration: 10, keep: true, timing: 'linear'});
hTog = 1;
}
else {
$('#hSlider').animo({animation: 'hShrink', iterate: 1, duration: 10, keep: true, timing: 'linear'});
hTog = 0;
}
});
});
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.
I have a basic jquery-ui dialog widget that is set to execute on a click handler:
jQuery(document).ready(function() {
$('.menu_link').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 0;
var verticalPadding = 15;
$('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
autoOpen: true,
width: 600,
height: 550,
modal: true,
resizable: true,
autoResize: true,
scrolling: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.9,
background: "white"
}
}).width(580 - horizontalPadding).height(550 - verticalPadding);
});
});
what I'd like to do is set it so that it executes on page load instead. Also (lower priority) is there an easy way I can set it on a timer... eg., the dialog launches after the page has been loaded for 5 secs?
Remove the click handler and wrap the code into a function (here called showIFrame).
To start it after 5sec, use setTimeout.
Enter the url for the iframe in line 2.
function showIFrame() {
var url = '>enter url here<';
var horizontalPadding = 0;
var verticalPadding = 15;
$('<iframe id="externalSite" class="externalSite" src="' + url + '" />').dialog({
autoOpen: true,
width: 600,
height: 550,
modal: true,
resizable: true,
autoResize: true,
scrolling: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.9,
background: "white"
}
}).width(580 - horizontalPadding).height(550 - verticalPadding);
}
setTimeout(showIFrame, 5000);
Also see this example with or without code.