I am using masonry rails gem in order to have my posts nicely transition depending on the screen size and stuff but for some reason I always need to refresh the page in order for masonry to start working. Whenever I first visit a page it has all the posts in one column on the left hand side of the screen, then when I refresh the page is displays the posts properly using the masonry transitions. Has any one experienced this before or possible know a solution to resolve this?
Thanks in advanced!
UPDATE: looking into the console as I thought maybe some css ids or classes weren't being applied on the first load but they all are. I also had disable cache checked so I thought that could have been causing it but after unchecking it the problem persists.
I would greatly appreciate any input on what may be causing this.
UPDATE2: I have tried deleted the masonry code to see if its the masonry causing this to occur or previous styling. It appears to be the styling as the page loads with everything in one column on the left when the masonry is disabled. I am not sure why this happening.
I was able to figure it out. I was not including
*= require 'masonry/basic'
in my application.css.scss
After applying this and fixing all the post divs to be the same size masonry is working as it should an no longer are the columns all being pushed to one side. Hooraahh!!
Related
I set up masonry rails on my website and when I click the logo to go to root path, the gutters disappear as if they were never there.
Also when adding more the 4 posts for a second row it also glitches.
Image of the posts overlapping
Image no longer overlapping after hitting the link to go to root path
So I found the answer to this here
Masonry Jquery in Rails - doesn't work without refreshing the page
Apparently you need to run turbolinks
Please see this jsbin test page that illustrates the issue
I have a simple jqm page with two page divs. The only initialization is being done inside a $(document).on('pageshow', function(){}); block. Inside the block, I initialize a fullcalendar.js calendar.
If I load the page as an external page (the first link in the menu) it loads without a hitch (but it's not using ajax, so the page flickers and there's no transition).
If I load the page using the jqm convention of linking to the id of the second page div with an anchor tag, it loads the calendar div as a page with no data.
If I then refresh the page, the data is displayed. Subsequent use of the menu displays both page divs as pages without issue.
I've seen a lot of discussion about which event of the pagecontainer widget to use, and I'm aware that document.ready() is not the way to go. I've tried all the possibilities, I think (pagebeforeshow, pageshow, pageinit, etc.) There's more detail in the demo, where you can see all the code. If I need to post it here, too, I can do that, but it's easier to see the issue if you load the test at jsbin. I suggest running it in a separate window, so you can refresh the page.
If anyone else has solved this or has an idea what I'm doing wrong, I'd really appreciate the help and / or suggestions.
I put all of the pagecontainer events into my test jsbin code and stepped through them. (Thanks to Gajotres for providing useful documentation on the various pagecontainer hooks). It turns out that the one I needed was 'pagecontainerhide' instead of pageshow, pageinit, or any of the others. Once I modified the code to use that event, the calendar displayed properly on the page div, with transition, and I no longer had to click on refresh to see load the "page".
Since I have all the events there, perhaps others with page change issues can benefit from the test page....
You can see my app at kogarah.herokuapp.com
I'm having a problem getting this to look ok in IE8 and I need to make it work with this version of the browser. I suspect it's something to do with container width.
The li in the navbar are all showing underneath each other rather than in a straight horizontal line, and there are similar issues with the main parts of the pages too, where I use bootstrap's grid system.
I have read the bootstrap documentation about IE8 compatibility but have still not been able to solve this.
If anyone can help I'd be very grateful.
Thanks
How to close colorbox automatically, and stay on the page ... neither redirect to another page nor reload the page ...
I have tried to use
parent.$.fn.colorbox.close();
or
$.fn.colorbox.close();
or
$.colorbox.close();
but those were not work
Any idea? Thx u
Those all work depending on the situation. There isn't an alternative answer to how to close colorbox, you have something setup incorrectly. Maybe you are loading colorbox twice or something. There isn't enough information to determine why it isn't working from your post. Consider adding a demo.
I am trying to build a sortable navigation tree using jQuery UI Sortable. I have it working great in Firefox with no prblems. In IE it works pretty well, however, there seems to be some inconsistent issues when trying to move an item with a nested list down in its navigational tier. The list doesn't expand to create a drop point for the list in motion and it often fails, however, sometimes the sort works anyway. I have played with this for longer than I care to admit! Does anyone have any ideas?
Here is a link to a demo with source.
To duplicate the problem: In IE drag the row (Move Show Item 12) up a few rows then try to move it back down to where it started. (Note: to move items you must click and hold on move)
You might get what you want if you try setting placeholder in the .sortable() call, i.e:
$("#list").sortable({
placeholder : 'placeholderClass'
}
Then make sure you have a class .placeholderClass defined, and you can choose what styles to apply when a block is being dragged - Not sure of this is what you want - just a suggestion.
Check out these pages if you need more info.
I noticed that if you drag below the list and then back up into it it works just fine. It must be some kind of jQuery UI / IE bug.