If I have the following html added statically the CSS style is applied correctly
HTML:
<li class="connector">
<a href="#">
<img src="css/images/temp/connector2.png" alt="" width="192" height="192">
<span class="sr-only">box</span>
</a>
</li>
However if I do the following in Javascript to dynamically render the HTML the CSS does not seem to get applied.
JavaScript:
element.innerHTML += "<li class='connector'>" +
"<a href = '/connector/" + i + "'>" +
"<img src ='/" + i + "/background' />" +
"<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +
"</a>" +
"</li>";
The list shows, but without the CSS styling.
Any suggestions?
"<span class='sr-only'>" + $.get("/" + i + "/getName") +"</span>" +
get is asynchronous method. This addition is wrong.
The problem was with how I was using the Isotope Javascript library. The way I was adding the content was bypassing it.
After reading their documentation, I was able to get it to work properly.
I used the following instead
$.get("/connectorCount", function(data){
for (var i = 0; i < data; i++)
{
var $newItems = $('<li class="connector"> <img src = "/' + i + '/background" /> <span class="sr-only">' + $.get("/" + i + "/getName") + '</span></li>');
$('.connectors').isotope('insert', $newItems);
}
refreshSearch(data);
});
Related
I'm trying to style a Google Maps InfoWindow. For each of my map markers I have a window that works perfectly on a local site and in a JSFiddle. However, when I add the code to a Drupal block, it strips the closing div tags.
I've tried this way:
`var message =
"<div class='window-container'>" +
"<div class='window-content'>" +
"<div class='window-header'>" +
"<div class='window-title'>" + name + "</div>" +
"<div class='window-subtitle'>" + org + "</div>" +
"</div>" +
"<div class='window-body'>" + summary + "...</div>" +
"</div>" +
"</div>";`
And this way:
`var message =
'<div class="window-container">\
<div class="window-content">\
<div class="window-header">\
<div class="window-title">' +name+ '</div>\
<div class="window-subtitle">' +org+ '</div>\
</div>\
<div class="window-body">' +summary+ '</div>\
</div>\
</div>';`
And this way with a Babel compiler:
`var message = '
<div class="window-container">
<div class="window-content">
<div class="window-header">
<div class="window-title">${name}</div>
<div class="window-subtitle">${org}</div>
</div>
<div class="window-body">${summary}</div>
</div>
</div>'`
And on the page, in my console, it always comes out like this!
`var message =
"<div class='window-container'>" +
"<div class='window-content'>" +
"<div class='window-header'>" +
"<div class='window-title'>" + name + "" +
"<div class='window-subtitle'>" + org + "" +
"" +
"<div class='window-body'>" + summary + "..." +
"" +
"";`
It removes all the closing div tags! Why?
If you paste your code into ckeditor or other filters you'll have some trouble like that.
So it's recommanded to create a custom block programmatically, like explained here :
https://www.drupal.org/docs/creating-custom-modules/creating-custom-blocks/create-a-custom-block
I have a list of elements that are dynamically appended after an Ajax call. I am using a plugin that creates a lightbox click event for the anchors dynamically appended. It works fine except sometimes it says that the title is undefined. I realize this is because the plugin gets initiated before the title attribute is completely done appending to the DOM. I know of several ways to do this, but what is the BEST way to check that all these elements are completely appended?
Ajax call is already made and data parsed with this function (colorbox title is the one that evaluates to 'undefined' for only some):
function pageImages(images,_q){
for(var i = 0; i < images.count; i++){
$('#pageImages').append('<div class="pageImageItem"><a href="' + images.data[i]._clickurl + '" title= "' + images.data[i]._title + '">\
<img src="' + images.data[i]._thumbnailUrl + '" alt= "' + images.data[i]._title + '"/>\
</a><div class="hoverInfo"><h2>' + images.data[i]._title + '</h2><p>' + limitCharacters(images.data[i]._clickurl,40) + '</p></div></div>');
}
$(".pageImageItem a").colorbox({maxWidth:'95%', maxHeight:'95%', title: function(){
var url = $(this).attr('href'),
title = $(this).attr('title');
console.log(title);
return '<h2>' + title + '</h2>' + limitCharacters(url,40) + '';
}});
}
And here is a picture of what is happening (anchor highlighted is the element that clearly has a title attribute but is showing undefined in lightbox):
You can wrap the jQuery element find block in a timeout without timevalue. The timeout will wait for all javascript to be finished with all processes. Example:
window.setTimeout(function() {
$(".pageImageItem a").colorbox({maxWidth:'95%', maxHeight:'95%', title: function(){
var url = $(this).attr('href'),
title = $(this).attr('title');
console.log(title);
return '<h2>' + title + '</h2>' + limitCharacters(url,40) + '';
}});
});
I have a html code that I have to repeat many times, in those blocks of code , only 3 parts change,2 string and a link to an image.
My question is if I could use js loops to repeat the html code, changing these 3 parts using a js array or two different js variables so I don't have to write the html 200 times.
Thanks.
This is the code html block, the 3 parts I want to change are, STRING1, STRING2 and IMAGE LINK.
<li class="item-thumbs span3 STRING1 ">
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="STRING2" href="IMAGE LINK">
</li>
Thank you
var htmlInsert = "",
documentNode = document.getElementById('someDiv');
someArray.forEach( function( item, index ) {
htmlInsert+= '<li class="item-thumbs span3' + item.STRING1 + '"> <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="' + item.STRING2 + '" href="' + item.STRING3 + '"></li>'
};
someDiv.innerHTML = htmlInsert;
var html = "";
for(var i = 0; i < your_data.length; i++){
html += '<li class="item-thumbs span3' + your_data[i].STRING1 + '"> <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="' + your_data[i].STRING2 + '" href="' + your_data[i].STRING3 + '"></li>';
}
console.log(html); //this is what you want
I need help with a little script ...
when i append content and drigger create tho content is loaded...
but then when i use $('#set').empty(); for the second time the content is loaded but no JQM style is added (just plain text)
i have read about this problem but i dont find any solution ... i guess that $('#set').collapsibleset('refresh');as it should... any idea ?
thanks
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
Instead of
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content).trigger("create");
$('#set').collapsibleset('refresh');
try
$('#set').empty();
var content ="<div data-role='collapsible' id='set" + i + "'><h3>Sectionit " + i + "</h3><p>I\'m collapsible number ' + i + '</p></div>";
$('#set').append(content);
$('#set').collapsibleset().trigger("create");
In this way you only call trigger('create') once after all content has been added.
Here is a DEMO
The scenario is the following:
I call the buldMyStuff function to build images many times the following way. Wrapping the img into an "a" tag is not an option.
function buildMyStuff(item){
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
return tag;
}
function doClick(type,data){
//do stuff
}
Lets assume that the item.type value is "type" and the item.data value is "data".
The problem with this that when I click the image it says type is not defined. Therefore (and I checked in the built html structure) the img eventually looks like this:
<img src="someimg.png" onclick="doClick(type,data)" />
What I need to achieve is:
<img src="someimg.png" onclick="doClick('type','data')" />
However as I am using the ' character to wrap the whole tag and the " character to wrap the attribute I cannot use anything else. Does someone know the solution for this?
Thank you in advance.
You can use '\' to escape special characters.
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
=>
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';
this is invalid;
var tag = <img src="someimg.png" onclick="doClick(' + item.Type + ',' + item.data+ ')" />';
It should be
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';
function buildMyStuff(item){
var tag = '<img src="someimg.png" onclick="doClick(\'' + item.Type + '\',\'' + item.data+ '\')" />';
return tag;
}