Problems with scrolling using tabs in IE/FF
psenior1
Registered Users Posts: 125 Major grins
I've just implemented Lamah's code from HERE so I can use tabs for my prices page.
Its all working well apart from when in IE and FF and you click a tab the window jumps (scrolls) to the top. It doesn't do in in Safari.
Any help appreciated, page is http://www.snrmac.com/Info-and-Prices/Weddings
CSS
HTML
Its all working well apart from when in IE and FF and you click a tab the window jumps (scrolls) to the top. It doesn't do in in Safari.
Any help appreciated, page is http://www.snrmac.com/Info-and-Prices/Weddings
CSS
/* Hide the radio buttons used to remember the selected tab by shoving them way off-screen */
.ss-tabs > input[type="radio"] {
position: absolute;
left: -9999px;
top: 0;
}
/* Default style for tab headers */
.ss-tabs > input[type="radio"] + label {
display: inline-block;
border-radius: 5px 5px 0 0;
border-bottom: none;
padding: 6px 14px 6px 14px;
font-size: 105%;
position: relative;
z-index: 0;
cursor: pointer;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Active style of tab headers */
.ss-tabs > input[type="radio"]:checked + label {
/* Grow a pixel taller */
padding-bottom: 7px;
margin-bottom: -1px;
vertical-align: bottom;
/* Float on top of the tab content panel border */
z-index: 2;
-webkit-box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.5);
}
/* Tab body style */
.ss-tabs > div {
display: none;
position: relative;
z-index: 1;
background-color: rgba(5, 5, 12, 0.5);
border-radius: 0 5px 5px 5px;
min-height: 300px;
}
/* Support a reasonable number of possible tabs: */
.ss-tabs > input:nth-of-type(1):checked ~ div:nth-of-type(1), .ss-tabs > input:nth-of-type(2):checked ~ div:nth-of-type(2), .ss-tabs > input:nth-of-type(3):checked ~ div:nth-of-type(3), .ss-tabs > input:nth-of-type(4):checked ~ div:nth-of-type(4), .ss-tabs > input:nth-of-type(5):checked ~ div:nth-of-type(5), .ss-tabs > input:nth-of-type(6):checked ~ div:nth-of-type(6), .ss-tabs > input:nth-of-type(7):checked ~ div:nth-of-type(7), .ss-tabs > input:nth-of-type(8):checked ~ div:nth-of-type(8), .ss-tabs > input:nth-of-type(9):checked ~ div:nth-of-type(9), .ss-tabs > input:nth-of-type(10):checked ~ div:nth-of-type(10), .ss-tabs > input:nth-of-type(11):checked ~ div:nth-of-type(11), .ss-tabs > input:nth-of-type(12):checked ~ div:nth-of-type(12), .ss-tabs > input:nth-of-type(13):checked ~ div:nth-of-type(13), .ss-tabs > input:nth-of-type(14):checked ~ div:nth-of-type(14), .ss-tabs > input:nth-of-type(15):checked ~ div:nth-of-type(15), .ss-tabs > input:nth-of-type(16):checked ~ div:nth-of-type(16), .ss-tabs > input:nth-of-type(17):checked ~ div:nth-of-type(17), .ss-tabs > input:nth-of-type(18):checked ~ div:nth-of-type(18), .ss-tabs > input:nth-of-type(19):checked ~ div:nth-of-type(19), .ss-tabs > input:nth-of-type(20):checked ~ div:nth-of-type(20) {
display: block;
}
/* Use SmugMug-like coloured tabs for inactive tabs */
.ss-tabs > label {
color: white;
}
.ss-tabs > input[type="radio"]:nth-of-type(1):not(:checked) + label {
background-color: #014D87;
}
.ss-tabs > input[type="radio"]:nth-of-type(2):not(:checked) + label {
background-color: #014D87;
}
.ss-tabs > input[type="radio"]:nth-of-type(3):not(:checked) + label {
background-color: #014D87;
}
.ss-tabs > input[type="radio"]:nth-of-type(4):not(:checked) + label {
background-color: #014D87;
}
HTML
<form action="">
<div class="ss-tabs">
<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" checked="checked" />
<label for="ss-tab-radio-1" class="sm-panel-content sm-panel-flat">Digital Package</label>
<input id="ss-tab-radio-2" type="radio" name="ss-selected-tab" />
<label for="ss-tab-radio-2" class="sm-panel-content sm-panel-flat">Premium Storybook</label>
<input id="ss-tab-radio-3" type="radio" name="ss-selected-tab" />
<label for="ss-tab-radio-3" class="sm-panel-content sm-panel-flat">Luxury Mounted</label>
<input id="ss-tab-radio-4" type="radio" name="ss-selected-tab" />
<label for="ss-tab-radio-4" class="sm-panel-content sm-panel-flat">Additional Options</label>
<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
<h2><span style="text-decoration: underline; font-size: 16px;"><img src="http://www.snrmac.com/photos/i-HQHDRMw/1/S/i-HQHDRMw-S.jpg" alt="" style="border: 0px solid ; width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" />Digital
Package</span><span style="font-size: 16px;"> -
Peak £1495 / Off-peak £995</span></h2>
<p><br />
</p>
<p><span>* Attendance from bridal
preparation through to the first dance </span></p>
<p><span> * Two photographers </span></p>
<p><span> * 300+ creatively processed and
retouched images </span></p>
<p><span> * DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span> * Dynamic MP4 video slideshow </span></p>
<p><span> * Pre-wedding consultation at
the venue </span></p>
<p><span> * Media presentation case</span></p>
</div>
<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
<h2><span style="font-size: 16px; text-decoration: underline;">Premium Storybook Album Package</span><span style="font-size: 16px;">
- Peak from £1795 / Off-peak from £1395</span></h2>
<p><img style="width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" alt="" src="http://www.snrmac.com/photos/i-mFM3Jrv/1/S/i-mFM3Jrv-S.jpg" /><br />
</p>
<p><span>* Stunning digital storybook
album, available in 12x8", 14x10" and 16x12" </span></p>
<p><span> * Attendance from bridal
preparation through to the first dance </span></p>
<p><span> * Two photographers </span></p>
<p><span> * 300+ creatively processed and
retouched images</span></p>
<p><span> * DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span> * Media presentation case </span></p>
<p><span> * Dynamic MP4 video slideshow </span></p>
<p><span> * 1hr engagement shoot </span></p>
<p><span> * Pre-wedding consultation at
the venue </span></p>
<p><span> * Full album design </span></p>
<p><span> * Beautiful album presentation
box</span></p>
</div>
<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
<h2><span style="font-size: 16px; text-decoration: underline;">Luxury
Mounted Album Package</span><span style="font-size: 16px;"> -
Peak from £2195 / Off-peak from £1795</span></h2>
<p><img style="width: 250px; height: 166px; float: right; margin-top: 20px; margin-bottom: 20px;" alt="" src="http://www.snrmac.com/photos/i-mv4CMrj/1/S/i-mv4CMrj-S.jpg" /><br />
</p>
<p><span id="">* The ultimate in luxury and
quality, available in 10x10", 12x12" and 14x14" </span></p>
<p><span>* Attendance from bridal
preparation through to the first dance </span></p>
<p><span>* Two photographers </span></p>
<p><span>* 300+ creatively processed and
retouched images</span></p>
<p><span>* DVD of high resolution Jpeg’s
for home printing and sharing online </span></p>
<p><span>* Media presentation case </span></p>
<p><span>* Dynamic MP4 video slideshow </span></p>
<p><span>* 1hr engagement shoot </span></p>
<p><span>* Pre-wedding consultation at the
venue </span></p>
<p><span>* Full album design </span></p>
<p><span>* Beautiful album presentation box</span></p>
</div>
<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
<h2><span style="font-size: 16px; text-decoration: underline;" id="yui_3_8_0_1_1392741978180_7918">Additional Options</span><span style="font-size: 16px;"> -
Contact us for details<br />
</span></h2>
<p><img style="width: 250px; height: 200px; float: right; margin-top: 0px; margin-bottom: 0px;" alt="" src="http://www.snrmac.com/photos/i-sGMPk7c/0/S/i-sGMPk7c-S.jpg" /><br />
</p>
<p id=""><span>* Photobooth - fantastic fun and a
great way to start the evening reception<br />
</span></p>
<p><span>* </span><span>Parent and bridesmaids albums</span>
</p>
<p><span></span></p>
<p><span>* Premium canvas wraps and canvas
blocks<br />
</span></p>
<p><span>* Luxury framed prints</span></p>
<p><span>* Wide selection of wall products</span></p>
<p><span>* Invitations and thank-you
cards </span></p>
</div>
</div>
</form>
0
Comments
facebook - my facebook page please LIKE me!
Mel Jones Photography Ltd.
School and Nursery Photographer working in Blackpool and Lancashire, UK.
Google+ Page / Local | Facebook Page
Looks like the issue is that the browser attempts to jump to the position of the hidden input (which exists to remember which tab you have selected), and that ends up being placed near the top of the page. Add this CSS to move it closer and virtually eliminate jumping:
.ss-tabs { position: relative; }I've posted the amended code for tabbed pages on SmugMug to my site now: http://www.sherlockphotography.org/Customisations/Tabbed-pages
Please check out my gallery of customisations for the New SmugMug, more to come!
facebook - my facebook page please LIKE me!
Wouldn't it be easier to just hide the input? That's what I used for my similar sort of implementation using radio buttons (An FAQ section).
Mel Jones Photography Ltd.
School and Nursery Photographer working in Blackpool and Lancashire, UK.
Google+ Page / Local | Facebook Page
Please check out my gallery of customisations for the New SmugMug, more to come!
Ah, perhaps you're right. I've not tested it myself in all browsers!
Mel Jones Photography Ltd.
School and Nursery Photographer working in Blackpool and Lancashire, UK.
Google+ Page / Local | Facebook Page
facebook - my facebook page please LIKE me!
Please check out my gallery of customisations for the New SmugMug, more to come!
facebook - my facebook page please LIKE me!
facebook - my facebook page please LIKE me!