jquery-masonry

I want to use Masonry in wordpress but it seems not working

北城以北 提交于 2019-12-11 02:56:36
问题 I'm working on a wordpress site and I want to use jQuery Masonry in one of my pages but it doesn't work. I searched and tried many changes but no results. Here I am: In header.php I added this: <?php wp_enqueue_script("jquery"); ?> <?php wp_head(); ?> <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.masonry.min.js"></script> <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts

Use JSON data outside of initial .ajax call - Access leftover JSON data

旧巷老猫 提交于 2019-12-11 01:38:24
问题 This is partly an extension to a Previous Question of mine: I can now successfully returned JSON data from my CI controller which returns: {"results":[{"id":"1","Source":"My Source","Title":"My Title". . . . The Controller: function outputAjax() { $this->load->model('my_model'); $data['results'] = $this->site_model->getInfo(); $this->output->set_output(json_encode($data)); } This is my current script I am using to retrieve the .ajax request: $(document).ready(function() { $.ajax( { url: 'http

Masonry not working using ajax and infinite scroll

左心房为你撑大大i 提交于 2019-12-10 23:36:09
问题 Currently I'm using AJAX to pull in data from our webservice. The issue I'm having is that it doesn't want to load the data into the masonry layout, everything in .social_block floats left one under the next (and I haven't set any float for these). So masonry isn't working :( I wanted the following to happen: Load initial items from webservice in the masonry layout and on "infinite" scroll it would make the paged request from the webservice to append new items into the masonry layout. So the

jQuery Masonry and CSS3

ぐ巨炮叔叔 提交于 2019-12-10 22:14:23
问题 How do i maintain the masonry layout yet involve the CSS3 transition with the current images? Heres my html <body> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="masonry.js"></script> <script> $(function () { $('#container').masonry({ columnWidth: 1, itemSelector: 'div' }); }); </script> <div id="imagetrans"> <img class="bottom" src="images/eventbox2.png" /> <img class="top" src="images/eventbox.png" /> </div> <div id="logo"> </div> <div id=

jQuery Masonry callback not working

白昼怎懂夜的黑 提交于 2019-12-10 19:45:13
问题 I am trying to get a callback function to execute when jQuery Masonry has done its positioning magic, preventing a flash of unstyled content in my code. For the purpose of testing, though, I am using a simple alert that isn't called at all. var $jigsaw = $('#jigsaw'); $jigsaw.imagesLoaded( function(){ $jigsaw.masonry({ columnWidth : 180, isAnimated : !Modernizr.csstransitions, isResizable : true, itemSelector : '.piece' }, function(){ alert('Completed'); }); }); I may be missing something

Problems with jQuery infinite scroll and masonry

为君一笑 提交于 2019-12-10 18:05:42
问题 I'm attempting to create a tumblr theme and I'm using the masonry and infinite scroll plugins for jquery. the masonry is working just fine. however, i cannot get the infinite scroll to work at all. here's my jQuery code: <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../masonry.js"></script> <script type="text/javascript" src="../jquery.infinitescroll.js"></script> <script type="text/javascript"> $('document').ready(function(){ $('

jQuery Masonry and media queries - reload masonry

﹥>﹥吖頭↗ 提交于 2019-12-10 14:26:51
问题 i have my site designed with media queries to cover different-sized layouts. i have masonry organizing a bunch of floats at the full-size width, no problem. at the mobile widths, all the floats, unfloat and just stack on top of each other. so i only need to re-run masonry when the site resizes to the tablet layout when 768px <= width <= 1000px. <script type="text/javascript"> //<![CDATA[ $(document).ready(function($){ $('ul.xoxo').masonry({ singleMode: true, itemSelector: '.widgetcontainer' }

HTML5 Masonry Margin / Gutter Issue when using fixed Sidebar (EDGE & Firefox)

为君一笑 提交于 2019-12-10 11:47:14
问题 I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine. This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to

Masonry not working with dynamic content

风流意气都作罢 提交于 2019-12-10 11:21:43
问题 Masonry is not working with my dynamic content, I don't know why. I don't think it's a bug on my side, at least I've looked at the code for a few hours now and I can't find anything that isn't working. //reads listbox.php and cycles through the array calling createbox function listboxs() { $.ajax({ url: '_php/listbox.php', success: function (output) { var jsonArray = $.parseJSON(output); $.each(jsonArray, function (i, box) { createbox(box.id, box.name, box.link, box.description, box.tags); })

How to float elements in a masonry layout like magazine/newspaper?

风流意气都作罢 提交于 2019-12-10 10:08:45
问题 I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled. Is there any way to achieve this layout only using CSS? The markup would be something like this: <article> <section