I have bootatrsp accordion in my site. in one accordion panel I have a lot of content. when I scroll down to read the rest of the content and then click the next panel, then the one above(wich is open) closes and move up. the rest of the panels move up with it and now I can't see the relevat content because it scrolled up.
how can I make the open panel of the accordion to always be in viewport of the screen no metter which panel i clicked.
here is the code i used:
<div class="row divAccordion" id="referNav">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default visible-True">
https://box.2beweb.chttps://jsfiddle.net/tartash/y5nc0u4w/3/# <a name="collapseOne"></a>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a id="referLink1" class="openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-plus-circle fa-minus-circle"></i>
Lorem Ipsum
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus
eros, a consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue
erat et elit fringilla, at feugiat dolor luctus. Nulla facilisi.
</div>
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-True">
<a name="collapseTwo"></a>
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a id="referLink2" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"><i class="fa fa-plus-circle"></i>
Duis
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc sed porta libero, ac interdum urna.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseThree"></a>
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a id="referLink3" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"><i class="fa fa-plus-circle"></i>
Aliquam
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis,
tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium
vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in
dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseFour"></a>
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a id="referLink4" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"><i class="fa fa-plus-circle"></i>
Lorem ipsum dolor
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut orci magna. Pellentesque sagittis nibh in venenatis dapibus. Duis vitae accumsan enim, nec viverra mauris. Curabitur posuere, odio id sagittis consectetur, quam sapien cursus eros, a
consequat enim lacus a dolor. Sed urna augue, ullamcorper sed urna id, hendrerit tristique mi. Mauris id lorem a nisi viverra venenatis et ac ligula. Aenean varius neque sed lectus elementum, in fermentum metus commodo. Fusce congue erat et elit
fringilla, at feugiat dolor luctus. Nulla facilisi. Duis tempor molestie maximus. Phasellus aliquet hendrerit ante quis condimentum. Vestibulum scelerisque, nibh in ornare tincidunt, arcu mauris rhoncus lectus, vel blandit leo diam eget dui. Nunc
sed porta libero, ac interdum urna. Fusce quis libero eu neque congue gravida et vitae mi. Mauris egestas ex eu neque consequat suscipit. In mattis diam non metus luctus rhoncus. Donec elementum consectetur ipsum, vel fringilla leo ullamcorper
sit amet. Sed vestibulum pretium rutrum. Pellentesque hendrerit ipsum magna, aliquam vestibulum justo varius in. Proin iaculis velit felis, at posuere nunc mattis quis. Mauris mattis lectus in tempus volutpat. Curabitur sed nibh vel tellus aliquet
faucibus. Maecenas sit amet enim ullamcorper, fringilla odio vitae, elementum metus. Quisque at justo vitae lectus porttitor pretium. Aliquam at lorem id nibh blandit feugiat. Curabitur fermentum, ligula a aliquet malesuada, augue ligula feugiat
odio, quis lobortis nisl tortor a nisl. Etiam vitae lacus sit amet odio placerat faucibus. Suspendisse orci diam, mollis eget interdum quis, tincidunt non lorem. Quisque imperdiet, tellus et iaculis lobortis, massa tortor ullamcorper neque, posuere
sollicitudin massa risus commodo tellus. Phasellus a tristique nibh. Sed aliquet quam velit. Sed lorem mi, sodales vitae varius quis, pretium vitae enim. Donec eu congue eros. Praesent quis felis neque. Sed volutpat volutpat sodales. Cras nulla
orci, fermentum et urna nec, tincidunt suscipit arcu. Maecenas imperdiet ornare commodo. Praesent luctus tellus vel blandit pretium. Donec in dolor ut lectus vehicula efficitur vel nec leo. Proin sit amet fermentum elit. Integer luctus dapibus
sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa sem, mattis
in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis cursus tellus
suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra feugiat arcu
nec tempor. Quisque tempor vitae arcu non euismod. Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus
lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae, molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla
dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis.
Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis mauris velit, et dictum ex scelerisque et.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-False">
<a name="collapseFive"></a>
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a id="referLink5" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"><i class="fa fa-plus-circle"></i>
Nullam eu sem
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
Nullam eu sem id quam pharetra blandit quis ut massa. Quisque molestie scelerisque lacus in ultricies. Nam venenatis scelerisque nunc, sed pellentesque tortor ultrices vel. Curabitur ac finibus lacus. Morbi bibendum urna interdum, ullamcorper sapien vitae,
molestie orci. Vestibulum viverra mollis purus, sed mattis metus convallis sed. Quisque ipsum nisi, tincidunt pretium commodo et, vestibulum a tortor. Donec imperdiet diam non nulla dictum malesuada. Maecenas pellentesque dolor vel erat hendrerit
pellentesque. Nulla in eros et nunc varius dapibus. Aliquam pharetra ornare facilisis. Phasellus pharetra mauris vel felis porttitor efficitur eget nec sem. Etiam vel fringilla turpis. Suspendisse potenti. Ut fringilla feugiat lacinia. Etiam mattis
mauris velit, et dictum ex scelerisque et.
</div>
</div>
<!------------------------------------------------------------------->
<div class="panel panel-default visible-True">
<a name="collapseSix"></a>
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a id="referLink6" class="collapsed openPanel" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix"><i class="fa fa-plus-circle"></i>
Integer luctus
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
Integer luctus dapibus sagittis. Vestibulum eget lectus id felis suscipit hendrerit ullamcorper vel nisl. Duis facilisis ligula eget ultrices fringilla. Etiam volutpat luctus nulla quis dictum. Sed consequat lorem id magna efficitur rhoncus. Donec massa
sem, mattis in massa non, fringilla ultricies nisi. Proin aliquet rutrum lectus id tempus. Donec justo lorem, blandit ac hendrerit vitae, dictum in ligula. Sed ut mollis sem, eu consequat turpis. Aliquam ultrices risus vel nulla finibus, quis
cursus tellus suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce non est lacus. Sed sed ultricies neque. Morbi nunc dui, varius bibendum erat non, semper tincidunt nulla. Etiam viverra
feugiat arcu nec tempor. Quisque tempor vitae arcu non euismod.
</div>
</div>
<!------------------------------------------------------------------->
</div>
</div>
</div>
thank you in advance
Related
I've got a long list of links in an offcanvas div. These are in the form because I want to use them to navigate a very long background page. (Effectively, it is a table of contents)
The offcanvas pops up happily. The navigation links work; jumping the background page to the correct position. Hurrah!
But... when you've selected and link and navigated the background page to a location and then close the offcanvas the background page resets to the top of the page! Argghh...
How can I keep the background page from resetting position, when I close the offcanvas?
Thanks for any help available.
div.head{
font-weight: bold;
margin-top: 10px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group btn-group-sm" role="group" aria-label="spec_tools">
<a class="btn btn-outline-primary" data-bs-toggle="offcanvas" href="#offcanvasNav" role="button" aria-controls="offcanvasNav">Navigator</a>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<strong>
<div>
Item0
</div>
</strong>
<div class="ms-2">
Item 1
</div>
<div class="ms-2">
Item 2
</div>
<div class="ms-2">
Item 3
</div>
<div class="ms-2">
Item 4
</div>
<div class="ms-2">
Item 5
</div>
</div>
</div>
<!-- Page Content -->
<div class="head" id="item0">Item 0</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item1">Item 1</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item2">Item 2</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
<div class="head" id="item3">Item 3</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus ullamcorper nunc eu luctus. Etiam congue placerat lorem, id congue massa ornare sed. Morbi imperdiet turpis eu urna semper tincidunt. Praesent ultrices mollis arcu vel elementum. Duis sollicitudin ultrices felis, nec vehicula massa congue in. Sed urna quam, sollicitudin ac felis et, ullamcorper dictum mauris. Morbi eu magna sit amet est placerat mollis sit amet at nisi. Phasellus viverra maximus posuere. Aenean et urna ac metus elementum pretium. Donec eu tortor id libero sollicitudin facilisis sit amet id nibh. Duis id eros tortor.</div>
<div class="head" id="item4">Item 5</div>
<div>Phasellus at efficitur orci. In imperdiet ut purus a semper. Mauris cursus ipsum vel finibus efficitur. Sed sit amet sem euismod, volutpat lacus ac, euismod justo. Pellentesque tincidunt justo in quam vulputate tincidunt. Curabitur porttitor felis arcu, et pellentesque odio malesuada quis. Aliquam hendrerit sapien tortor, eu ornare lorem laoreet interdum. Suspendisse velit lectus, sagittis eget ex nec, dictum finibus ex. Proin eget mollis nisl. Suspendisse porttitor placerat gravida. Vestibulum nec tempor eros, a congue ipsum. Ut est libero, viverra semper dapibus et, consectetur non risus. Cras at mauris pulvinar mauris accumsan ullamcorper. Aliquam nec ex libero. Suspendisse rhoncus erat sit amet tellus congue, sit amet sodales leo faucibus. Fusce risus diam, ullamcorper sit amet pulvinar eu, tempor vulputate eros.</div>
Bootstrap is re-focusing and scrolling to the offcanvas trigger element when the offcanvas is closed. I've opened a bug report on this: https://github.com/twbs/bootstrap/issues/34447, however the behavior may be by-design.
Workaround:
Bootstrap currently checks to see if the trigger element is visible in the viewport when the offcanvas is hidden. Therefore, a workaround is to make the trigger element always visible on the page using fixed positioning...
For example,
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNav" data-bs-scroll="true" aria-labelledby="offcanvasNavLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavLabel">Navigator</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close" tabindex="-1"></button>
</div>
<div class="offcanvas-body">
...TOC nav
</div>
</div>
<div class="container-fluid py-2">
<div class="row">
<div class="col-2">
<!-- fixed position trigger always visible -->
<button class="btn btn-outline-primary position-fixed" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav" role="button" id="btnTrigger" aria-controls="offcanvasNav">Navigator</button>
</div>
<div class="col">
<div class="head" id="item0">Item 0</div>
.. more page content
</div>
</div>
</div>
https://codeply.com/p/gALtKp3xd4
If anyone finds this still, using the "hidden" event of the offcanvas to stop the scroll to top worked for me:
let y = window.scrollY;
let offcanvas = document.getElementById('offcanvas');
offcanvas.addEventListener('hidden.bs.offcanvas', (e) => {
window.scrollTo(0, y);
});
Here is the undesired result I'm getting:
Click for image (can't embed yet)
Note how the tabs instead of being next to each other all stretch to 100% width and are lined up like a list.
The HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
JS:
$("#tabs").tabs();
Jquery version: 1.11.0.
Jquery-ui version: 1.10.4.
CSS is the jquery-ui.css you get by downloading 1.10.4 from the official site.
Here is the link to my ThemeRoller just in case (though I've tried with default theme also, to no avail).
I've tried upgrading / downgrading, disabled any other css I have on the page - But I just can' get the tabs to look OK even with no edits or custom code (I've changed some colors but it was done using official jquery-ui ThemeRoller).
Ooops!!!! When downloading the theme from the jquery ui site, I just noticed the components were toggled off! Hence no .css for the Tabs component.
One of those moments...
And something to be aware of for others.
(I will accept this as answer but I have to wait 2 days. As a famous Austrian once said: I'll be back. -- I have now accepted the answer).
I want to use jquery UI tabs in more than one pages. However the number of tabs are different and I am stuck on how to adjust the tab width on every page.
On one page I have this :
<div id="tabs">
<ul>
<li>5 Star Hotel in Delhi</li>
<li>Budget Hotels in Delhi</li>
<li>50th IIGF Officials Hotels</li>
</ul>
it is ok and working fine. Now on second page I have again this :
<div id="tabs1">
<ul>
<li>About Delhi</li>
<li>Reaching Delhi</li>
<li>Delhi Attractions</li>
<li>Other Places of interest in Delhi</li>
<li>Nearby City Tours from Delhi</li>
</ul>
Now I have to adjust the tab li width as well as anchor font size of this to get them on single row.
Hope now it is clear
I don´t understand your question.
If you are using jQuery UI tabs you call the "plugin" like this:
$( "#tabs" ).tabs();
});
Your DOM Elements should look like this:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
If you add a new Tab, jQuery automatically build the wrapper around it.
The width of each element is fluid or made with CSS.
Hi; i have a big problem jqueryui. i want to use jqueryui tab but error return öe. This error:
Microsoft Jscript runtimeerror: The value of the property '$' is null or undefined not a Function object. i have last version 1.8 . this error incredible. How to solve it?
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite_FullExtNet.Master" Inherits="System.Web.Mvc.ViewPage<GenSystem.Models.MinuteSchedule>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
<%=Html.ValidationSummary("Please correct the erros and try again.") %>
<% using (Html.BeginForm())
{
%>
<%=Html.HiddenFor(q=>q.JobSchedulerId) %>
<span><%:Html.LabelFor(m=>m.JobName) %>: <%:Html.TextBoxFor(m=>Model.JobName) %></span>
<span><%:Html.LabelFor(m=>m.StartDateTime) %>: <%:Html.TextBoxFor(m=>Model.StartDateTime) %></span>
<span><%:Html.LabelFor(m=>m.EndDateTime) %>: <%:Html.TextBoxFor(m=>Model.EndDateTime) %></span>
<span><%:Html.LabelFor(m=>m.RepeatCount) %>: <%:Html.TextBoxFor(m=>Model.RepeatCount) %></span>
<span><%:Html.LabelFor(m=>m.RepeatInterval) %> : <%:Html.TextBoxFor(m=>Model.RepeatInterval)%></span>
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<%} %>
</asp:Content>
Most probably you have not included the java script files in the correct order.The jquery library must be loaded before the libraries for the ui.This can be solved if you include the files in the correct order.
I need to create tabs dynamically based on db results, but since I am just starting to learn jquery and UI, I thought of creating something simple first.
basically I am starting with three tabs initially, and trying to add another through jquery
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<img src="content/user_avatars/User_full_blank.jpg" width="200px" height="300px"/>
</div>
</div>
As you can see, I simply tried creating a list item in the ul, before calling the tabs method.
$(function(){
$('#tabs ul').append('<li><span>New Tab<span></li>');
$('#tabs').tabs();
})
This worked great in firefox, but in IE, I see "New Tab" appear as simple text beside the three initial tabs, it is not stylised or clickable or anything.... any help?
I don't think IE likes the span inside of the anchor.
This works:
$(function(){
$('#tabs ul').append('<li>New Tab</li>');
$('#tabs').tabs();
});