Announcement

Collapse
No announcement yet.

JQuery CSS conflict / Want to implement collapsible data areas

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    JQuery CSS conflict / Want to implement collapsible data areas

    Converting to the Optic ready them in Miva 9. All is good, however a problem I'm having is my old site has a lot of long text descriptions. This type of thing works totally fine on a desktop website, but is a bit overkill for the mobil platform. However, my dilemma is that I feel much of the text explanations are important.

    So i have used Jquery in the past with no issues (outside of MIVA), but I can't get it work with MIVA, which I'm assuming is due to CSS conflicts. The way the jquery thing would work would be to put the following in the HEAD section:

    <!-- Include the jQuery Style Sheet -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- Include the jQuery Mobile library -->

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


    ...and then in the <BODY> reference the data-role="collapsible" within a <div> to create a collpasible section as I have demonstrated below.
    <div style="width: 100%;" data-role="collapsible">
    <h1>Sample Title</h1>
    <p>
    Sample text to be collapsed blah blah blah blah.
    </p>
    </div>

    The problem is as soon as I link to the JQuery CSS file above nothing renders in Miva and I get a blank white screen.. I must be barking up the wrong tree here. Any ideas?

    #2
    Re: JQuery CSS conflict / Want to implement collapsible data areas

    bump. Anyone every use JQuery in a Miva store?

    Comment


      #3
      Re: JQuery CSS conflict / Want to implement collapsible data areas

      Yup, the new readyThemes use it extensively. Try moving your jquery to the Global Footer.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        Re: JQuery CSS conflict / Want to implement collapsible data areas

        Thank you for your reply.

        Well, that worked, but now getting an error above and below it (see error below). ANy ideas?

        'CSSUI\u005FGlobalHDFT:footer:template\u005Fcode', 'Insert' );

        Comment


          #5
          Re: JQuery CSS conflict / Want to implement collapsible data areas

          Can you post a URL?
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            Re: JQuery CSS conflict / Want to implement collapsible data areas

            THanks! Here is a link to the non-production site that I'm developing using the ready theme. I put in the above code on this page to test:

            http://dev.guitar-mod.com/mm5/mercha...ry_Code=PEDALS

            Comment


              #7
              Re: JQuery CSS conflict / Want to implement collapsible data areas

              It looks like the code that is displaying is part of this

              Code:
              javascript:PopupTextAreaColorSelector( 'CSSUI\u005FGlobalHDFT:footer:template\u005Fcode', 'Insert' );
              what does the code in the template look like?
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment


                #8
                Re: JQuery CSS conflict / Want to implement collapsible data areas

                Looks like you forgot <script></script> around the script.
                Bruce Golub
                Phosphor Media - "Your Success is our Business"

                Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                phosphormedia.com

                Comment


                  #9
                  Re: JQuery CSS conflict / Want to implement collapsible data areas

                  Got it working, but now the color scheme is all messed up. What i did was reset the global footer back to the factory default, and then re-paste in the 3 includes there at the very bottom of the global footer. It seems to be working, but has unfortunately changed the color scheme so I reset it back again.
                  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

                  <!-- Include the jQuery library -->
                  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                  <!-- Include the jQuery Mobile library -->

                  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

                  Last edited by wolfman645; 10-14-15, 06:26 PM.

                  Comment


                    #10
                    Re: JQuery CSS conflict / Want to implement collapsible data areas

                    Note: Suviant uses its OWN version of jQuery which could conflict with yours (or visa versa) I would not try loading another version (because one of them isn't going to be doing anything).
                    Bruce Golub
                    Phosphor Media - "Your Success is our Business"

                    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                    phosphormedia.com

                    Comment


                      #11
                      Re: JQuery CSS conflict / Want to implement collapsible data areas

                      Well, first i must THANK all of you. Second, I am happy to report I got a solution working amazingly, and NOT using JQuery!!

                      To take a look at this page on my DEV site. At the bottom you will see a bunch of collapsible panels. You can use either a desktop of mobil device: http://dev.guitar-mod.com/mm5/mercha...oduct_Code=100

                      I am using a solution posted below which is to use Javascript and CSS, but NOT JQuery. As many have pointed out, JQuery will cause both style and javascript conflicts, and besides that it degrades performance. Below is much slimmer and solution with a narrow focus of only handling the collapsible region feature. I must say it works like a charm!!!

                      http://www.media-division.com/javasc...ut-frameworks/

                      Comment


                        #12
                        Re: JQuery CSS conflict / Want to implement collapsible data areas

                        Well, you still have jQuery powering your ReadyTheme. So it is being loaded anyway. I see it is 2.1.1. Hope you don't have any IE users because that version of jQuery does not automatically handle IE (mis)behaviors like the 1.x branch.

                        jQuery IS JavaScript, so it would be more accurate to say that JavaScript can cause JavaScript errors. ReadyThemes also use JavaScript/jQuery to affect your styling, so ANY JavaScript conflicts can result in style issues.

                        Nevertheless, congrats on finding a simple solution.
                        Gordon Currie
                        Phosphor Media - "Your Success is our Business"

                        Improve Your Customer Service | Get MORE Customers | Edit Any Document Easily | Free Modules | Follow Us on Facebook
                        phosphormedia.com

                        Comment

                        Working...
                        X