jellekralt / Responsive-Tabs

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
http://jellekralt.github.io/Responsive-Tabs/
MIT License
531 stars 228 forks source link

IE shows all accordion content, firefox and chrome don't #67

Closed peggythrasher closed 8 years ago

peggythrasher commented 9 years ago

I took this project over from someone else, so I may be overlooking something simple. I have 5 tabs, each with a search bar in the content. When I display in Firefox and Chrome I only see one search bar (whichever tab is selected). In both IE11 and IE8 I see all of the search bars. How can I make IE behave?

Thanks

jellekralt commented 9 years ago

Hi there, I don't know what might be causing this, but I honestly doubt that this has something to do with the plugin. If you are still having this issue, please supply a link to your site (or a jsbin/jsfiddle/etc) with an example.

peggythrasher commented 9 years ago

The problem is only occurring on IE8, so it is probably not worth fixing.

Thanks for your response!

Peggy

From: Jelle Kralt [mailto:notifications@github.com] Sent: Thursday, August 06, 2015 3:30 PM To: jellekralt/Responsive-Tabs Cc: Thrasher, Peggy Subject: Re: [Responsive-Tabs] IE shows all accordion content, firefox and chrome don't (#67)

Hi there, I don't know what might be causing this, but I honestly doubt that this has something to do with the plugin. If you are still having this issue, please supply a link to your site (or a jsbin/jsfiddle/etc) with an example.

— Reply to this email directly or view it on GitHubhttps://github.com/jellekralt/Responsive-Tabs/issues/67#issuecomment-128481127.


Please consider conserving our natural resources before printing this e-mail and/or any attachments.


This electronic message and any attachments may contain information that is confidential and/or legally privileged in accordance with NH RSA 91-A and other applicable laws or regulations. It is intended only for the use of the person and/or entity identified as recipient(s) in the message. If you are not an intended recipient of this message, please notify the sender immediately and delete the material. Do not print, deliver, distribute or copy this message, and do not disclose its contents or take any action in reliance on the information it contains unless authorized to do so. Thank you.

jellekralt commented 9 years ago

I've tried reproducing it on IE8 by adding text fields to the tab contents, but everything looks fine. It definitely worth fixing on IE8 if something is really broken :) so if you have more information (a piece of example code would be even better), let me know!

peggythrasher commented 9 years ago

See library.dover.nh.gov (the top search bar)

Thanks!

Code is:

            <div id="search_tabs">
            <ul>
                            <li><a href="#tab-01">Library Catalog</a></li>
                            <li><a href="#tab-02">Library Web Site</a></li>
                            <li><a href="#tab-03">Overdrive Downloads</a></li>
                <li><a href="#tab-04">Hoopla Downloads</a></li>
                            <li><a href="#tab-05">Magazines &amp; Articles</a></li>
            </ul>
            <div class="tab_content" id="tab-01">
                            <form action="http://librarycatalog.dover.nh.gov/cgi-bin/koha/opac-search.pl?idx" method="get">
                             <input class="hsinput" name="q" placeholder="Search Library Catalog" type="text" value="Search Library Catalog" onFocus="this.value=''">
                     <input class="hsbutton" type="submit" name="submit" value="submit">
                            </form>
            </div>

            <div class="tab_content" id="tab-02">

            <div class="tab_content" id="tab-03">
                            <form action="http://nh.lib.overdrive.com/BANGSearch.dll?Type=FullText&amp;URL=SearchResults.htm&amp;PerPage=20" method="post" target="_blank">
                                            <input name="FullTextField" type="hidden" value="All">
                                            <input class="hsinput" name="FullTextCriteria" placeholder="Search Audiobooks, eBooks and Magazines" type="text" value="Search Audiobooks, eBooks and Magazines" onFocus="this.value=''">
                                            <input class="hsbutton" type="submit" name="submit" value="submit">
                            </form>
          </div>

          <div class="tab_content" id="tab-04">
                            <form action="https://www.hoopladigital.com/search?" method="post" target="_blank">
                                            <input name="FullTextField" type="hidden" value="All">
                                            <input class="hsinput" name="q" placeholder="Search Music, Movies, TV Shows, Audiobooks, eBooks and Comics" type="text" value="Search Music, Movies, TV Shows, Audiobooks, eBooks and Comics" onFocus="this.value=''">
                                            <input class="hsbutton" type="submit" name="submit" value="submit">
                            </form>
          </div>
          <div class="tab_content" id="tab-05">
            <script src="http://support.ebscohost.com/eit/scripts/ebscohostsearch.js" type="text/javascript"></script>
            <div id="header-search-bottom-form-magazines-articles">
           <form action="" id="ebscohostCustomSearchBox" method="post" name="ebscohostCustomSearchBox" onsubmit="return ebscoHostSearchGo(this);">
                            <input id="ebscohostwindow" name="ebscohostwindow" type="hidden" value="1">
                            <input id="ebscohosturl" name="ebscohosturl" type="hidden" value="http://search.ebscohost.com/login.aspx?direct=true&site=ehost-live&scope=site&type=1&db=f5h&mode=and&lang=en">
                            <input id="ebscohostsearchsrc" name="ebscohostsearchsrc" type="hidden" value="url">
                            <input id="ebscohostsearchmode" name="ebscohostsearchmode" type="hidden" value="+AND+">
                            <input id="ebscohostkeywords" name="ebscohostkeywords" type="hidden" value="">
                            <input class="hsinput" id="ebscohostsearchtext" name="ebscohostsearchtext" placeholder="Search Magazines and Articles" value="Search Magazines and Articles" onFocus="this.value=''" type="text">
                            <input class="hsbutton" type="submit" name="submit" value="submit">
                            <!-- BEGIN HIDDEN EBSCOhost HIDDEN SEARCH FEATURES/CONFIGURATION -->
                                                            <div class="limiter" style="display:none;">
                                                                            <input id="chkFullText" name="chkFullText" type="checkbox">
                                                                            <label for="chkFullText">Full Text</label>
                                                            </div>
                                            <div class="limiter" style="display:none;">
                                                            <input id="chkReferencesAvailable" name="chkReferencesAvailable" type="checkbox">
                                                            <label for="chkReferencesAvailable">References Available</label>
                                            </div>
                                            <div class="limiter" style="display:none;">
                                                            <input id="chkPeerReviewed" name="chkPeerReviewed" type="checkbox">
                                                            <label for="chkPeerReviewed">Peer Reviewed</label>
                                            </div>
                </form>
              </div>
            </div>
          </div>

<!-- Responsive Tabs JS  -->
From: Jelle Kralt [mailto:notifications@github.com] Sent: Saturday, August 08, 2015 2:51 PM To: jellekralt/Responsive-Tabs Cc: Thrasher, Peggy Subject: Re: [Responsive-Tabs] IE shows all accordion content, firefox and chrome don't (#67) I've tried reproducing it on IE8 by adding text fields to the tab contents, but everything looks fine. It definitely worth fixing on IE8 if something is really broken :) so if you have more information (a piece of example code would be even better), let me know! — Reply to this email directly or view it on GitHubhttps://github.com/jellekralt/Responsive-Tabs/issues/67#issuecomment-129034272. --- Please consider conserving our natural resources before printing this e-mail and/or any attachments. --- This electronic message and any attachments may contain information that is confidential and/or legally privileged in accordance with NH RSA 91-A and other applicable laws or regulations. It is intended only for the use of the person and/or entity identified as recipient(s) in the message. If you are not an intended recipient of this message, please notify the sender immediately and delete the material. Do not print, deliver, distribute or copy this message, and do not disclose its contents or take any action in reliance on the information it contains unless authorized to do so. Thank you.
jellekralt commented 9 years ago

Thanks for the example! I've tested the site on IE8 (both on XP and Win7) and as far as i can tell, I don't see all the tab contents, but only the content of the selected tab. Do you maybe have more info for me?

peggythrasher commented 9 years ago

I just tried it on an XP machine (so it is IE8) and the tabs worked OK, but there were other funky formatting things (I love IE!!).

It shows up funny on my Win7 machine when I use Compatibility mode (see screen shot). A co-worker also saw it on her computer in compatibility mode.

I’m on version 11.0.9600.17959, update version 11.0.22

What else can I tell you?

From: Jelle Kralt [mailto:notifications@github.com] Sent: Wednesday, August 26, 2015 4:37 PM To: jellekralt/Responsive-Tabs Cc: Thrasher, Peggy Subject: Re: [Responsive-Tabs] IE shows all accordion content, firefox and chrome don't (#67)

Thanks for the example! I've tested the site on IE8 (both on XP and Win7) and as far as i can tell, I don't see all the tab contents, but only the content of the selected tab. Do you maybe have more info for me?

— Reply to this email directly or view it on GitHubhttps://github.com/jellekralt/Responsive-Tabs/issues/67#issuecomment-135162995.


Please consider conserving our natural resources before printing this e-mail and/or any attachments.


This electronic message and any attachments may contain information that is confidential and/or legally privileged in accordance with NH RSA 91-A and other applicable laws or regulations. It is intended only for the use of the person and/or entity identified as recipient(s) in the message. If you are not an intended recipient of this message, please notify the sender immediately and delete the material. Do not print, deliver, distribute or copy this message, and do not disclose its contents or take any action in reliance on the information it contains unless authorized to do so. Thank you.

jellekralt commented 8 years ago

Unfortunately, compatibility mode is not that reliable :worried:. If this only happens in compatibility mode, I don't think it is worth investigating/debugging any further. Thanks for the information though!

peggythrasher commented 8 years ago

Sounds good to me. Thanks for looking at it.

From: Jelle Kralt [mailto:notifications@github.com] Sent: Thursday, December 10, 2015 3:33 PM To: jellekralt/Responsive-Tabs Cc: Thrasher, Peggy Subject: Re: [Responsive-Tabs] IE shows all accordion content, firefox and chrome don't (#67)

Unfortunately, compatibility mode is not that reliable [:worried:] . If this only happens in compatibility mode, I don't think it is worth investigating/debugging any further. Thanks for the information though!

— Reply to this email directly or view it on GitHubhttps://github.com/jellekralt/Responsive-Tabs/issues/67#issuecomment-163741544.