Im trying to use jquery.addres plugin , to have many parent tabs with many children tabs, the first tab works fine, it shows all its subtabs but the second tabs doesn't work properly and on the example page they show the first tab with many subtabs, and the second tab with a simple content
here is the example link
here
I did reproduce the page Jbin
here you'll notice that tab2 doesn't have children tabs, how can I make it work
and here is my HTML which doesn't work on the second tab, my guess is that I shouldn't use the ID subtabs twice, and if I did change the ID to a class, and change the above script from "#" to ".", I still can't reproduce subtabs under the second tab, I'm sure it must be easy, but I just can't figure it out
<div class="page">
<h1>jQuery Address SubTabs</h1>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tab1">
<p>Tab 1</p>
<div id="subtabs">
<ul>
<li>SubTab 1</li>
<li>SubTab 2</li>
</ul>
<div id="tab1-subtab1">
<p>SubTab 1</p>
</div>
<div id="tab1-subtab2">
<p>SubTab 2</p>
</div>
</div>
</div> <!--end subtab1-->
<div id="tab2">
<p>Tab 2</p>
<div id="subtabs">
<ul>
<li>SubTab 1</li>
<li>SubTab 2</li>
</ul>
<div id="tab2-subtab1">
<p>SubTab 1</p>
</div>
<div id="tab2-subtab2">
<p>SubTab 2</p>
</div>
</div> <!--end subtab2-->
</div> <!--end tab2-->
</div> <!--end tabs-->
I ended up using jquery tools which it seemed to be the best option
http://jquerytools.org/demos/tabs/multiple-tabs.htm
hope it will help someone
Solution is in head:
var tabs,
separator = '-',
initialTab = 'tab1',
navSelector = 'ul.ui-tabs-nav a',
tabSelector = '#tabs, #tab1 > #subtabs';
var tabs,
separator = '-',
initialTab = 'tab1',
navSelector = 'ul.ui-tabs-nav a',
tabSelector = '#tabs, #tab1, #tab2 > #subtabs';
look... add #tab2
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
I make a test.html file like below:
<body>
<div data-role="page">
<!--Head of the main web-->
<div data-role="header" data-position="fixed">
<h2><img src="pic/jquery-logo.png" alt="1"></h2>
</div>
<div role="main" class="ui-content">
<div data-role="tabs" id="tabs">
<!--3 row navbar--!>
<div data-role="navbar">
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</div>
<!--first nav bar of the 3-->
<div id="one" class="ui-body-d ui-content">
<ul data-role="listview" data-inset="true">
<li><img src="pic/business_standard_room.png"></li>
</ul>
</div>
<div id="two">
<ul data-role="listview" data-inset="true" class="ui-alt-icon">
</ul>
</div>
<div id="three">
<ul data-role="listview" data-inset="true" data-divider-theme="a">
</ul>
</div>
</div>
<!--footer of the page-->
<div data-role="footer" data-position="fixed">
<h5>Powered by Atek</h5>
</div>
</div>
I put the order.html and the test.html in the same folder.but when I click the link in the first tab.it returns me error.here is the error the chrome developer console showed
XMLHttpRequest cannot load file:///media/IRM_CCSA_X6/Mobile%20Website/Hotel/order.html. Received an invalid response. Origin 'null' is therefore not allowed access.
jQuery Mobile uses AJAX for the navigation inside the website, so when you press the link an AJAX call is done in order to get the new page.
I suppose that you are not using a server to test your website (just the file:/// protocol), and I think that is the problem. It has been reported a bug that local files are not loaded correctly using AJAX on Chrome, so you should use other browser or deploy a server to test it on Chrome.
Or in case you don't want to use the AJAX navigation, you could add the atribute data-ajax to the link in order to disable it:
<a href="order.html" data-ajax="false">
Hope this helps!
I am trying to link one page to another using
about 1
about 1
about 1
on index.html (in the menu)
on about.html I have
<div id="1"><h2>About 1</h2></div>
<p>text text text</p>
<div id="2"><h2>About 2</h2></div>
<p>text text text</p>
<div id="3"><h2>About 3</h2></div>
<p>text text text</p>
when I click on the link in the menu on the index page it goes to the correct id when on my local machine, having uploaded the files to the server the link takes me to the top of the page only.
I tried linking the full url, tried applying the id to the h2 tags instead, everything works locally but not on the server, any ideas, it's driving me bonkers?
The main thing is that this works locally but not when uploaded to the server....
In context
<nav>
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>About1</li>
<li>About1</li>
<li>How3</li>
</ul></li>
<li>Ther
<ul>
<li>S</li>
<li>A</li>
<li>A</li>
</ul></li>
<li>Testimonials</li>
<li>Services
<ul>
<li>Price list</li>
<li>Descriptions</li>
</ul></li>
<li>Contact</li>
</ul>
</div>
</nav>
<div id="about"><h2>About 1</h2></div>
<p>text text text</p>
<div id="secondplace"><h2>About 2</h2></div>
<p>text text text</p>
<div id="thirdplace"><h2>About 3</h2></div>
<p>text text text</p>
I need to know how to create a navigation bar with Unsemantic framework (or 960gs).
My menu structure is
<div>
<ul>
<li></li>
</ul>
</div>.
I have tried so much, but still can't find out the problem.
EDIT
I use wordpress.So it creates navigation menu. the eventual code rendered in the browser is as follows:
<nav role="navigation" class="clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10" id="wp_nav_menu_wrapper">
<div class="grid-container">
<div class="menu">
<ul>
<li class="page_item page-item-2">
ُSample Page
</li>
<li class="page_item page-item-5">ُSample Page 2
</li>
</ul>
</div>
</div>
</nav>
While my Wordpress markup is as follows:
<div class='grid-100 height-auto black-gray-bg font-tahoma'>
<nav role='navigation' class='clearfix black grid-100 grid-parent mobile-grid-100 mar-top10 mar-bottom10' id='wp_nav_menu_wrapper'>
<div class='grid-container'>
<?php
wp_nav_menu();
?>
</div>
</nav>
</div>
The grid-container class is for the outer container and the grid-parent class for inner or nested containers. In your code you have this backwards.
The grid-parent class lets you align self-contained grids with normal grid items. The container holds all of the grid items. So the grid-parent is just an indicator that the or whatever will contain further items related to its scale and ordering on the page.
You can use this structure, or similar:
<nav class="grid-container">
<ul class="grid-100 grid-parent">
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
<li class="grid-25">...</li>
</ul>
</nav>
This is what I have in my layout view. Home tab and To Do tab.
And codes in my html:
<div id="tabs">
<ul>
<li id="li_tab1" onclick="HomeTab"><a>Home</a></li>
<li id="li_tab2" onclick="ToDoTab"><a>To Do</a></li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p>
The problem here is I tried to click on the To Do tab but it seems that the onclick is not working. Please help! Thanks.
//use this code istead of that..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="tabs">
<ul>
<li id="li_tab1">Home</li>
<li id="li_tab2">To Do</li>
</ul>
<div id="Content_Area">
<div id="HomeTab">
<p>Home tab content goes here.</p>
</div>
<div id="ToDoTab" style="display: none;">
<p>To Do tab content goes here.</p></div
Use this code it will work
Use this javascript it will work to hide the content
<script type="text/javascript">
var showcont = [];
var showcont_containers = [];
$('#tabs ul li a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
showcont.push(this);
showcont_containers.push($(this.hash).get(0));
};
});
$(showcont).click(function(){
$(showcont_containers).hide().filter(this.hash).fadeIn();
});
</script>
You can use JQuery UI:
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<p>Content of Tab 1</p>
</div>
<div id="tabs-2">
<p>Content of Tab 2</p>
</div>
</div>
Check out this link for more information