Your Time:
Our Time:
← Back to discussions

Homepage flexslider does not resize on ajaxify load

Need help with a different issue? Search the forums or open a new ticket.
Open a support ticket

This topic has 11 replies, 3 voices, and was last updated 10 years, 7 months ago by B.

  • 2016-01-10 at 3:29 am
    Support Expired
    #12113
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Hello,

    I know I’ve seen this topic before a number of times, but all of the solutions are marked private so I cannot seem to resolve this myself.

    I have a slider on the homepage (flexslider, built into the theme) that works fine on page load, but if I go to another page (with ajaxify enabled) and then go back to the homepage, the height is sometimes not properly sized. If I resize the page, it begins working again.

    Please let me know how I can trigger the slider to recalculate height on ajaxify page load, or force it to the proper height manually.

    Thanks.

    2016-01-10 at 3:30 am
    Support Expired
    #12114
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33
    This reply has been marked as private.
    2016-02-03 at 1:38 am
    Support Expired
    #12670
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Hi there,

    I’m still awaiting a solution to this– I’ve tried a few things and nothing works reliably. How can I fix this issue?

    Note that it also appears to be a load related bug– I’ve noticed it happening on occasion on first page load, as well as unpredictably on subsequent loads. The issue is simply that flexslider is called too early, and/or on a jQuery(‘window’) event that does not trigger in ajaxify mode.

    Thanks.

    2016-02-03 at 12:53 pm
    #12690
    Fem
    Keymaster
    • Topics: 2
    • Replies: 5215
    • Total posts: 5217
    • Post count: 6003

    Its not an issue with the frontend loading but as you said it was an issue triggering in the ajaxify mode i tried your site and my site everything seems to be working fine at my end. But still i will see it on a low speed internet connection somewhere i find and see if can get hold off.

    2016-02-03 at 8:22 pm
    Support Expired
    #12706
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Hi Fem,

    The described behavior is still a problem quite regularly. To replicate, 1. load the homepage 2. click any other page in the menu 3. click the logo in the upper left to return to the homepage.

    On occasion, the same problem occurs on initial (non-ajax) page loads as well, due likely to the weight of the javascript in the theme.

    I see the same broken functionality in your demos, and a clean install of the theme as well (so its not just with my modifications).

    Its worth noting that this occurs on any page that contains a flexslider, not just the homepage– but I imagine it affects the vast majority of people on the homepage.

    It seems this has been an issue for a number of other people. A quick search of the forums yielded:

    The promising hack-fix appears to be triggering a jQuery(window).trigger('resize');, but doing so in the WP WYSIWYG editor for the homepage does not appear to work, so I’m not sure where to put it. (That’s also just a hack, not a fix.)

    It seems like this should really be a priority, since its pretty core theme functionality.

    Please advise– thanks.

    2016-02-05 at 6:21 pm
    #12754
    Anonymous
    Inactive
    • Topics: 0
    • Replies: 3227
    • Total posts: 3227
    • Post count: 0

    I have made changes in flex-slider.css file. Now you can clear your cache and check it once and let me know.

    2016-02-05 at 6:25 pm
    Support Expired
    #12755
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Thanks! I’ll let you know if it works. Meanwhile, could you please let me know:

    • What change you made?
    • How on earth you made it? –File edits are disabled on my WP backend; how did you modify one of my files without FTP access?

    Many thanks, Shailaja.

    2016-02-08 at 9:59 am
    #12769
    Anonymous
    Inactive
    • Topics: 0
    • Replies: 3227
    • Total posts: 3227
    • Post count: 0

    You have provided wp-logins 2 weeks back for this post “Artists Shortcode Pagination not working”. We have made changes through wpide plugin which is a wordpress code editor plugin.

    2016-02-08 at 11:18 am
    Support Expired
    #12771
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Okay, could you please let me know which changes you made, not only because I use a managed code base in git (so your changes will just be overwritten next time I push code), but also because others in this thread will probably want to know the solution?

    I also need to move your change to another site– the password I provided was for a dummy install just for your support purposes, so that’s not actually the live site. It appears your change may have fixed it, though, so I’d love to play more with it.

    Thanks!

    2016-02-08 at 2:00 pm
    #12780
    Anonymous
    Inactive
    • Topics: 0
    • Replies: 3227
    • Total posts: 3227
    • Post count: 0

    Just renamed a class “.flexslider” to “.flexsliders” in flex-slider.css file. In future, if you want to remove you can.

    2016-02-08 at 6:09 pm
    Support Expired
    #12786
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Thanks, Shailaja!

    I’m not sure how or why, and am surprised this was the fix, but it appears adding the following to your site’s CSS (or modifying it in flexslider.css on L49) does indeed do the trick:

    
    .flexsliders { /* Theme ajaxify load fix */
    	min-height: 100px;
    	background: #ffffff url('images/ajax-loader.gif') no-repeat center center;
    	position: relative; 
    	margin: 0; 
    	padding: 0; 
    	overflow:hidden; 
    }
    

    I’ll post back if I see the problem occur again. (Am mostly testing in Webkit)

    I would strongly encourage the theme developers to incorporate this CSS fix into the theme, without modifying Flexslider’s original files. I’m sure lots of people would like this solution!

    Thanks.

    2016-02-08 at 8:03 pm
    Support Expired
    #12797
    B
    Participant
    • Topics: 3
    • Replies: 21
    • Total posts: 24
    • Post count: 33

    Sadly, looks like the bug just happened to me again, twice. I’ve confirmed that even with the CSS change, the ajaxify javascript does not appear to trigger the right function on each reload. I could be wrong, but I think what we need here is a javascript solution.

    Thanks, Shailaja.

You must be logged in to reply to this topic.