I need to show a hidden div that is attached to a .box div , my masonry code is
$(function(){
var $container = $('.content');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box',
isAnimated : true,
isResizable : true,
});
});
});
Its loads a boxes with images and text , but when i want to show a specified DIV
Masonry want move in height , so my hidden div is showing behind a .box div
$('.commentopen').live("click",function()
{
var ID = $(this).attr("id");
$("#commentbox"+ID).fadeIn('slow');
return false;
});
Any ideas how to extend a height in the same window with out reloading
i tries masonry .reload or .reloadItems but with no luck , i think because of .imagesLoaded function
Here a visual explanation
All I can understand is that when a "hidden" div is shown, your Isotope layout does not react correctly (repositioning the other elements when the height grows). So, maybe this fiddle here is of some help. If you'd post a link to your sandbox or provide a jsfiddle yourself, it'd be easier to debug. You seem to also load large images via imagesLoaded, so if that's not correctly implemented, it could also play a role.
Related
I have created MasterPage and page layout. Then I created a page using page layout. Then by editing the page, I added content editor web part but there was one issue that web part context menu was going inside div. Kindly see attached image.
your response would be highly appreacited.
Thanksenter image description here
it may helped somebody that I managed it programmatically using javascript.
when icon will be clicked then javascript function will be fired which will check the height of context menu and if the height is greater than the height of the web part then it will increase the height of the zone height. please see code below.
var menulistheight;
var zoneid;
jQuery('.js-webpart-menuCell').click(function (e) {
if (!menulistheight) {
var dd = jQuery('.ms-core-menu-list');
dd = dd.height();
menulistheight = dd;
}
var zone = $(e.target).closest("#MSOZone")[0];
var id = jQuery(zone).attr("zoneid");
var zHeight = jQuery(zone).height();
if (zHeight < menulistheight) {
jQuery(zone).css("height", zHeight + menulistheight - 100 + "px");
}
});
I'm making a page builder type thing. For normal view the iframe needs to resize accordingly, but for mobile / tablet views it needs to be a set size.
using iframe-resizer https://github.com/davidjbradshaw/iframe-resizer by #david-bradshaw
parent window:
<script type="text/javascript" src="javascript/iframeResizer.min.js"></script>
....
$("iframe")[0].iFrameResize({
checkOrigin: false,
enablePublicMethods : true,
heightCalculationMethod: "bodyScroll",
});
....
The viewpoint size changer does this :
// set the iframes width and height "before" iframeresizer does stuff to make it look seemless
_this.editor.css({
"width":mapper[size].width,
"height":mapper[size].height
})
Only way I saw the .size() working is from the iframe itself
// fire off a sendMessage cause only way i saw .size() working is from the iframe itself
_this.editor[0].iFrameResizer.sendMessage({
"width":mapper[size].width,
"height":mapper[size].height,
"forceSize":true
});
iframe window
<script>
var iFrameResizer = {
messageCallback: function(message){
console.log("messageCallback")
console.log(message)
if (message.forceSize==true){
console.log(window.parentIFrame)
window.parentIFrame.autoResize(false);
window.parentIFrame.size(message.height); // Set height to 100px
} else {
// apply auto resizing again
}
}
}
</script>
<script type="text/javascript" src="javascript/iframeResizer.contentWindow.min.js"></script>
I was hoping for an easier way like on parent disableIframeResizer() or something, or being able to set .size() from parent since that's where the choose your viewpoint parts live.I can't seem to figure it out :(
My issue is: I need to somehow tell the iframe not to do its resizing when forceSize = true and then when the message comes in then to resize accordingly .
Thanks for a pretty decent library tho!
I don't think I understand your question 100%. But I tried to answer your question as best as I understood.
You can set an iframe's size really simply in html. You can also do it with the help of CSS.
You could do this: <iframe href="https://google.com" width="100%" height="100%">Your Browser Does Not Support Iframe</iframe>.
You could also set the exact diameter like this: <iframe href="https://google.com" width="300px" height="100px">Your Browser Does Not Support Iframe</iframe>
You could also use php to automatically change the diameter of it.
I am struggling to force Masonry to properly position the elements of the boostrap's full width grid.
As you will see home page is using the container with fixed width of the elements and everything is working as expected. But on the other hand, news page is using the full width fluid system and for some reason ,,blocks" on the news page won't fit the window.
Here is my call for masonry:
self.$("#masonry").masonry({
itemSelector: '.parallax',
isAnimated: !Modernizr.csstransitions,
columnWidth: function( containerWidth ) {
return containerWidth / 6;
});
And here is an example link http://wheniamplaying.com/kitchenV3/en/home
Is it possible to use masonry in this scenario?
On my WordPress site the Masonry script is included in my functions.php and Infinite-Scroll is activated with the plugin. Looks like everything is working (although elements overlap sometimes).
But new appended elements are animated from top left, instead from the bottom.
This is the callback in WP admin:
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
The last 'true' means 'isAnimatedFromBottom', not?
Demo site: http://goo.gl/9XVIl
There's a bug in masonry v2 that prevents the isAnimatedFromBottom parameter from working with CSS transitions.
You have a few options.
Switch to JS animation using the isAnimated: true option. But the animation may be slow.
Patch the code using the code in suggested in the issue.
I am new in programming(javascript) but I've done quite a research the past few days in order to make my tumblr theme work correctly. I know my question is common but as it seems I don't have enough knowledge to integrate correctly parts of code that were given in many similar examples.
My theme is supposed to override the "15 posts per page" limitation of tumblr and with an "endless scroll" option it should put all my posts (all of them pictures) in one endless page. Well, It doesn't. With a little help from here, I managed to wrap my {block:Posts} with the and with a couple of random changes in the masonry() call I ended up with this
As you can see my pictures are not overlapping (at last!) but after the 15 first posts it looks like a new page is created and the last pictures are not correctly aligned.
my jQuery masonry code is this:
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
I know, its a mess...
Would really appreciate some help.
I'm not used to work with tumblr, but I can what is happening:
Line 110:
This script is creating a wrapper div around the entries each time you call to masonry, because of the script, each load looks like a new page, I think you can simply remove it.
Some tips:
You don't have to wait $(windows).load to execute masonry, change it by $(function()
To avoid image overlapping use appened masonry method and imagesLoad: Refer this
I see you're using masonry 1.0.1, be sure you're using masonry last version (2.1.06)
Example code:
$(function() {
//$('.autopagerize_page_element').masonry();
var $container = $('.autopagerize_page_element');
//wait until images are loaded
$container.imagesLoaded(function(){
$container.masonry({itemSelector: '.entry'});
});
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".entry",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
//function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
and be sure to remove the last script in this header block:
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script> <!-- last masonry version -->
<script src="http://static.tumblr.com/df28qmy/SHUlh3i7s/jquery.infinitescroll.js"></script>
<!--<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>-->
Hope it helps