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
Related
My Cordova/Ionic (v1.3.0) App consists primarily of a JQuery App that builds the HTML for complex forms. The same JQuery App is used to build the complex forms for the web browser with only a few places where it inserts mobile-specific code.
I am now trying to have a horizontally scrolling table section within the vertically scrolling form (the form itself doesn't scroll horizontally, just the table section). The section horizontal scrolling works in Safari/Chrome/Firefox on the computer, in Safari on iOS, and in the Android version of our Cordova/Ionic app but it doesn't horizontally scroll in the iOS app.
I tried various fixes based on these SO questions and documentation (q1,q2,q3,q4) where I changed it from a <div/> to <ion-content/> and added the overflow-scroll="true" direction="xy" delegate-handle="tableGroup" properties and called $ionicScrollDelegate.$getByHandle('tableGroup').resize() after the JQuery app loaded but nothing worked. I also tried using TinyScrollbar based on this question but that wasn't loading right. So I've tried going many directions but haven't gotten anywhere. Any suggestions?
I actually figured this out on my own. I put a couple variations of a simple scrolling elements in containers on the Ionic page and <ion-scroll/> worked. Then I tried putting it in the JQuery app with a delegate handle sectionScroll and called $ionicScrollDelegate.$getByHandle('sectionScroll').resize(); after the JQuery app loaded but got a console warning saying that it couldn't find anything named sectionScroll and that I should put it in a $timeout(). I tried that but it still didn't work. Then I realized that since <ion-scroll/> is an angular directive that is created as part of a long template string inserted into the Ionic app using JQuery, it needed to be compiled by Angular to be recognized as below:
let toCompile = angular.element('#formContent');
let linkFn = $compile(toCompile);
linkFn($scope);
$ionicScrollDelegate.$getByHandle('sectionScroll').resize();
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!!
So, I've got this app I'm working on. I've got a nav built and it sort of works. But not right. I'm pretty confident I'm screwing this up some where.
The nav looks like this. The problem is, that it never shows the current view highlighted in the nav (except for dashboard) unless i go directly to that page. But, if I do go directly to the page, none of the angular stuff works? The second problem is, under the Admin menu, I can't get any views to appear. But, if I refresh the page, then I can? That seems odd.
This is what my routes look like. What am I missing?
UPDATE:
Ok, so, if I start from dashboard, then navigate to other pages (such as admin/create or admin/manage) then it doesn't work (except for /properties) and I don't see the view update correctly (again, except for /properties). However, if I start in /properties, refresh the page, I see the content (minus any of the angular stuff), but I can navigate to admin/create and admin/manage. Again, Angular doesn't work, but I can at least navigate and see the rails partials.
UPDATE 2:
So, I figured out my own first mistake. I needed to add the routes into the angular side as well as the rails side. Now, I just need to figure out why highlighting isn't working?
Move the partials to it's own foler:
example: app/views/shared/_partial_name.html.erb
right now, you have the partials under the layout folder. And my guess is that is causing the rendering problem.
Keep application.html.erb as the only file under the layouts
then render the partials as shared/partial_name
In chrome, I click on the nav links on my page and it takes me to the intended path, but instead of being at the top of the page, it's offset depending on how much I was scrolled down on the page I clicked from. I think it's a chrome issue/feature, since it doesn't happen in firefox.
I'd like to have the links just go to the top of the page like how firefox behaves. My links don't have any anchors in them.
I'm testing with chrome Version 31.0.1650.63
I had the same issue. I resolved it by updating my turbolinks gem from '1.1.1' to '2.1'
This issue was addressed in issue #66 'reset scroll position on page replacement'
https://github.com/rails/turbolinks/issues/66
Hope that resolves the issue for you.
We're trying to put a fixed navigation to scroll the different sections of a page.
i have 3 links to link to different sections of the same page. and the position of the div containing this links are fixed.i am caling a function when that link clicked.
We're using jquery scrollTo().to scroll.it is wrking fine on desktop applications.
Only on ipad, the first click pass without problem, but after this one, the on the navigation seems to be disabled. If we scroll, even a little bit, with the hand, then the link's work again.
I used:
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
ofter scrollto but no luck....
Please help me
Jquery mobile anchor linking will prevent you from doing that. you might have to write a custom js to do the scroll.
More here -
https://forum.jquery.com/topic/jquery-mobile-anchor-linking