I need to be able to create Masonry items in jQuery rather than HTML. However, the below fails to output anything. By contrast, the commented out HTML equivalent works perfectly.
Is there a workaround for this?
HTML:
<div id="container" class="feed">
<!-- this would work fine:
<div class="item">hey</div>
<div class="item">hi</div>
<div class="item">hello</div>
-->
</div>
jQuery:
$("div.feed").html("<div class='item'>hey</div><div class='item'>hi</div><div class='item'>hello</div>");
EDIT
To be clear, that jQuery is appending what it's supposed to where the commented out HTML is. My issue is making Masonry respond to that - the three divs should be side-by-side.
Masonry lays out once and only once unless you bind resize to it using either one of
msnry.bindResize()
// or with jQuery
$container.masonry('bindResize')
In which case, when the window is resized, the Masonry instance will reload itself by recollecting the items and laying them out again. So there are two options to your problem.
Call window.resize() after adding items if you've binded resize.
Use masonry's appended method instead (passing the elements as a fragment): http://masonry.desandro.com/methods.html#appended
Edit:
You should really use the appended method. Here's an example using your html elements.
var $fragment = $("<div class='item'>hey</div> \
<div class='item'>hi</div><div class='item'>hello</div>");
$('div.feed').append($fragment).masonry('appended', $fragment);
JSFiddle: http://jsfiddle.net/5xfpF/
Related
I have two divs on the same page using CKEditor. I can get a toolbar to load for the first div, but not the second. I realize this is the case because I'm using an id for ckToolbar instead of a class. However, if I use a class, the toolbar doesn't show up.
Div 1
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtBody, value:txtBody, valueUpdate:'keydown'"></div>
</div>
Div 2
<div id="ckEditor">
<div id="ckToolbar"></div>
<div class="editor" data-bind="wysiwyg: txtHelpText, value:txtHelpText, valueUpdate:'keydown'"></div>
</div>
Config.js
config.extraPlugins = 'sharedspace';
config.sharedSpaces = { top: 'ckToolbar' };
I am also using Knockout JS. I created a custom binding and a div instead of a textarea because I couldn't use the CKEDITOR replace function with my binding.
You can't have two elements on the same page with same id's. How is JavaScript supposed to recognize which one you have in mind? You should either use classes or different id's and adjust you knockout code to handle that.
Sorry for the general answer but there is simply no way around it. You can't have two elements with same id on a single page.
NOTE: CKEditor auto replaces elements with ckeditor class however if you are using knockout, I don't think this will me much of a use for you.
After retrieving info, I want to show it inside a bootstrap panel by using jQuery.
I use the .html() function to show the panel.
$('#id_div').html('<div class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">'+my.awesome.title+'</h3></div><div class="panel-body">Content here :) There is more and this is becoming a super long line ...</div></div>');
I have found that there is a way to break this into several lines by using .append() . I have tried the following:
$('#id_div').append('<div class="panel-body">Adding more content here :) </div>');
This does not work, since the added text appears outside the panel.
How do I specify where exactly I want the code to be appended?
Solved.
According to David, by using the .find() function, you can specify where exactly you want the text to be appended.
$('#id_div').find('.panel-body').append('Adding more content here :)');
I have two hidden <div> elements which are hidden at the bottom of my page like so:
<div class="hidden-unit" style="display:none;">
<h1>ad unit one</h1>
</div>
<div class="hidden-unit" style="display:none;">
<h1>ad unit two</h1>
</div>
Further up my page I have another two div elements, like so...
<div class="visible-unit"></div>
<div class="visible-unit"></div>
I would like to loop through each of the hidden units, place the content from the first .hidden-unit into the first .visible-unit and then likewise for the second.
The content that sits within each .hidden-unit will actually be an inline script used for displaying ads, this is passed through from an array into a view that I have created in PHP so there is a strong possibility that more content could be added to the array or removed, so this loop needs to accommodate for such situations.
I have tried a number of solutions using jQuery's .each() but I can't seem to get it right. I've also created a JSFiddle should anyone want to demonstrate a solution:
https://jsfiddle.net/p89sq2df/3/
I've tried loads of different combinations and the latest attempt only seems to be populating the .visible-unit elements with the 'ad unit two' text.
$('.hidden-unit').each(function() {
$('.visible-unit').html($(this).html());
});
Anyone had to do anything like this before? I appreciate it's an odd one.
You can try using the index:
$('.hidden-unit').each(function(index) {
$('.visible-unit').eq(index).html($(this).html());
});
var visibleUnits = $('.visible-unit').toArray();
var x = 0;
$('.hidden-unit').each(function() {
visibleUnits[x].html($(this).html());
x++;
});
The gotcha is that there could be more .hidden-unit elements than .visible-unit elements, which would cause an exception. But this you put you on the right track.
You need to use the index the elements so you update matching instances. This can be done using each or html(function)
$('.visible-unit').html(function(index){
return $('.hidden-unit').eq(index).html();
});
Since you mention that the content is loaded by script originally, you may need to allow time for any asynchronous loading (if any) in the scripts
DEMO
Rather than trying to match indices and having to maintain two lists of divs, you can clone the hidden divs and add them to a container, or insert them before or after another element if you really don't want a container element.
$(".hidden-unit").clone()
.removeClass("hidden-unit")
.removeAttr("style")
.addClass("available-unit")
.appendTo(".container");
Working fiddle here: https://jsfiddle.net/ygn34zL8/
I am using this photo gallery from Codrops to display the images. Instead of manually inserting the image links into the html, I'm using a PHP script to display the images from a directory. I am trying to call the php script using jQuery - something like this:
HTML:
<div id="thumbsWrapper">
<div id="content">
<?php /* include_once('display.php'); */ ?>
<div class="placeholder"></div>
</div>
</div>
jQuery:
$('#content').load('display.php');
However, that breaks the gallery and although it displays the images, nothing happens when I hover or click on the image. Firebug throws the error:
no element found.
Where am I going wrong?
I believe load will replace the contents of #content, which includes <div class="placeholder"></div>. If that div is needed for the gallery then it won't work.
Something like this should fix it:
$.get('display.php', function(data) {
$('.placeholder').before(data);
});
In addition, make sure this call to load happens before you initialize the gallery. If you initialize the gallery first and then add these images, depending on how the gallery is coded, it may not work.
Finally, what was wrong with the approach of loading it through the php (I see you commented it out). Seems like a good way to go to me.
use livequery plugin for newly added dom elements to work and function the same. livequery
I am quite new to jQuery and are currently despairing of trying to insert a dynamically created expander into a jQuery-Mobile page which looks like the following:
<div data-role="page" id="myPage">
<div data-role="content">
<div id="myContainer"></div>
</div>
</div>
As the expander should be inserted into "myContainer", I am writing:
var expander = $("<div data-role='collapsible' data-collapsed='true'><h3 class='category' /><div class='content' /></div>");
$("#myContainer").append(expander);
expander.find(".category").text(/*Some text*/);
expander.find(".content").text(/*Some text*/);
However, only a unthemed and not collapsible div appears in my document.
I guess, I will have to manually toggle the creation of the expander similar to refreshing a listview - I did not find anything about that in the documentation, however.
Unfortunately, neither
expander.Refresh();
//nor
expander.Expander();
seems to exist.
Many thanks in advance for your responses!
This question is in fact a duplicate happening so often that I created a FAQ about it.
You need to use .page() on the topmost element that you add to DOM.
See here for details:
http://jquerymobiledictionary.dyndns.org/faq.html
[edit]
I have also reached the moment when I wanted to use .page inside a page* event and the solution was rather obvious to me - use a semaphore.
If you don't know how to implement a semaphore, see my dual column plugin code as an example (it's on the same site)