Working fine in desktop, expanding automatically on mobile

  • Resolved Eyeful

    (@apisani)


    8 years, 2 months ago

    Hi there.

    First of all – absolutely love your product. Had tested a bunch of alternatives and kept running into problems!

    I had to implement the collapse function via javascript instead of shortcode, and it works fine when it’s at the top of my pages, but I wrote some conditional code to move the copy to the bottom of the page for mobile and it loads auto-expanded there.

    This is the code I’m using to trigger the function on my store & category pages:
    <div id=”my_id” class=”collapseomatic” title=”Trigger Text”>Keep reading…</div>
    <div id=”target-my_id” class=”collapseomatic_content”>
     

    </div>

    The best way to show you an example is on a particular store page

    If you load the page on desktop, the collapse code works fine (you can see it at the top of the page), but now if you load the same page in mobile (break point ~420px) you’ll see that it’s fully expanded. The collapse function is definitely there because I can click on “keep reading” and it shuts it, but it’s expanded by default which looks sloppy.

    I’d rather not go in and touch each store and category page individually (that’s where the description text lives). Is there something that I can tweak in the plugin files or my template to make it work the same for both desktop and mobile? The description code is nested in a table and also within a div that is set to only show at 420px (ie anything above that is set to display:none), but there aren’t any other tweaks that I’ve made.

    Please let me know if there are other details which I can provide!

    Thanks,
    Antonella

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Baden

    (@baden03)

    Hello Antonella,

    Sorry for the delay… we where off grid for the last weeks. Now, on to your question.
    1. when you say:

    I had to implement the collapse function via javascript instead of shortcode

    do you mean that you used the roll-your-own method, or did you write some custom scripts?

    2. Does the conditional code use jquery or php to ‘move’ the code to the bototm in the mobile view? You probably only need to call the function collapse_init(); once the bottom collapse element is displayed.

    Let us know if that helps, or if you need more direction!

    Thread Starter Eyeful

    (@apisani)

    Hi Baden

    Sorry for the delay on my part now – was traveling.

    For #1, yes, it’s the roll your own.

    For #2, I am using CSS to move it down once the window gets to a certain size. For anything above 420px, it loads the description (<?php echo term_description(); ?>) at the top of the page, and for anything below 420px it loads that description at the bottom of the page.

    The roll your own code is embedded within the description which exists at the individual level, not within the template itself.

    For your suggestion, would I just need to add the function in front of <?php echo term_description(); ?>? Or is there something else I’d need to do?

    Sorry, I”m not a developer so I may need a bit more hand holding than most…

    ap

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Working fine in desktop, expanding automatically on mobile’ is closed to new replies.