i have a 3-tier list that at the end goes to another page...so when i come back from the another page i want the list item to be open and indicate which item was clicked on.
how can this be done
<div data-role="collapsible" >
<h2>Header</h2>
<ul data-role="listview">
<li>item-1</li>
<li>item-2</li>
<li>item-3<span class="ui-li-count">12 set</span></li>
</ul>
</div>
-----------------------------------------------------------------
<div data-role="page" id="item1">
<div data-role="header">
Back
<h1>item1</h1>
</div>
<div data-role="content">
<div class="container">
<ul data-role="listview">
**<li>Set 1</li>**
<li>Set 2</li>
<li>Set 3</li>
</ul>
</div>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
-----------------------------------------------------------------
now from the main list when the uset click on item-1 it is presented with another list of set-1,set-2,set-3 etc now on clicking on set-1 the user is taken to another "external page".
when the user click the back button from the external page it show indicate that the set-1 was clicked and the collapsible set should be open..currently i getting the collapsible set collapsed and there is no indication where the user was
Its very easy to acchieve. One way to do this is to use cookies to store the list item you click as you navigate to other pages.
If you decide to use this method you will need the jquery cookies plugging -- https://github.com/carhartl/jquery-cookie
I didnt have much time for the demo its a quick one but you can easy see whats happening from the demo. All i did was to give the list items an id and the (a) classes id so we know which one was clicked and which one to turn the background color to indigate that it was clicked.
If you have multiple lists that expand then store the id of the expandable listview to another cookie and expand the correct one like i did in the demo with the items.
Demo
http://jsfiddle.net/wgt88h3n/
$("#listview").on("click", ">li", function(event, ui) { // this function gets the id from the list items
var id = $(this).closest("li").attr('id');
$.cookie('item', id); // store the id of the list item to a cookie
});
$("#topage2").on("click", function(event, ui) {
var item = $.cookie('item'); // lets get the item of the cookie
$(".item1, .item2, .item3").css({backgroundColor: '#f6f6f6;'}) // lets set the background color back to normal
$.mobile.changePage( "#page2" , { transition: "pop" }) ///change to page 2
});
$("#topage1").on("click", function(event, ui) {
$.mobile.changePage( "#page1" , { transition: "pop" })
$( "#mylist" ).collapsible( "expand" ); // expand the collapsible list. if you have more lists,,, to expand the correct one, use another cookie and use the same method when we stored the list item.
var item = $.cookie('item'); /// read the cookie item
$("." + item ).css({backgroundColor: 'rgba(72, 121, 49, 0.38)'}) ///set the background color of the last item clicked to green
});
Related
The content from "about-goal" is not showing upon clicking this navigation button. I need to show the "about-goal" content when clicking the About Me button and also for homepage to show up on the same page when clicking Home button. Please help.
PS: I'm a beginner to this, just attempting to create my first website. Thanks much!
$(document).ready(function(){
$('a').click(function(){
//alert("i am click");
var selected = $(this);
$('a').removeClass('active');
$(selected).addClass('active');
});
var $(a) = $('.a'),
$b = $('.b'),
$c = $('.c'),
$d = $('.d'),
$home = $('.home'),
$aboutGoal = $('.aboutGoal');
$a.click(function(){
$home.fadeIn();
$aboutGoal.fadeOut();
});
$b.click(function(){
$home.fadeOut();
$aboutGoal.fadeIn();
});
});
<ul>
<li class="a">Home</li>
<li class="b">About Me</li>
<li class="c">My Gallery</li>
<li class="d">Contact Me</li>
</ul>
<div class="aboutGoal">
<div class="about-me">
<h2>MY NAME IS...</h2>
<p class="p1">My name is... , 23 yrs. Old. I’m an aspiring web developer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic
looking websites.</p>
<p class="p2">I’ve been a Service Desk Engineer in IBM and am a life-long learner who's always interested in expanding my skills.</p>
</div>
<div class="goals">
<h2>MY GOALS...</h2>
<p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
<ul class="skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>jQuery</li>
<li>Photo Editing</li>
<li>Video Editing</li>
</ul>
<p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
</div>
</div>
first you have a typo with var $(a) = $('.a')change it to var $a = $('.a'),
you don't need to make a click event for every link
you can do something like this
give every link a PageSection property set its value to be the class of the sections you want to hide/show
also give it same class .nav so we can write only one click event
<li pageSection="aboutGoal" class="nav">
put every page section div inside a container div so we can fade them all together when clicking a link
<div id="Pages">
then use this click event
$(document).ready(function () {
//view only home section first time
$("#Pages").children().hide();
$(".Home").show();
//when clicking on a li element with class nav
$("li.nav").click(function () {
//fadout every div inside Pages div
$("#Pages").children().fadeOut();
// FadeIn element with class is the same name as the pageSection property from the Li we clicked
$("." + $(this).attr("pageSection")).fadeIn();
//remove active class for every li element with class nav
$("li.nav").removeClass("active");
//add active class for the li element we clicked
$(this).addClass("active");
});
});
live example:
https://codepen.io/vkv88/pen/gOaLgrj?editors=0010
Note: I am new to jQuery and tabs.
I am attempting to implement nested tabs with jQuery tabs in an MVC 5 web application. For some reason, the implementation is not working correctly and I assume there is a bug based on the behavior on the website and I suspect it is with how the active tab is being set.
When the user logs in, they are taken to a page for MainAppTabs. The two top tabs are Client and Account. The Client tab has nested tabs Client Info, Billing Selections, and About whereas the Account tab currently has only one nested tab called Account, which should only display a list of accounts.
With the current implementation below, the Account tab is the first tab to be displayed, as opposed to the Client tab, along with the nested Account tab. When I click on the Client tab then it will display fine with its nested tabs. However, when I click on the Account tab again then the page clears out and I must refresh the page (F5) in order to get the Account tab and its nested tabs to display. Also, the nested tab appears to be displayed twice where it is offset to the right and has a duplicate border, but the nested tab border and data spill outside of the parent tab border.
<div id="MainAppTabs">
<ul>
<li>#Html.ActionLink("Client", "ClientTabs", "ClientSetup")</li>
<li>#Html.ActionLink("Account", "AccountTabs", "AccountSetup")</li>
</ul>
</div>
<script>
$(function () {
$("#MainAppTabs").tabs({ active: 1 });
});
</script>
ClientTabs:
<div id="ClientSetupTabs">
<ul>
<li>#Html.ActionLink("Client Info", "Edit", "ClientSetup")</li>
<li>#Html.ActionLink("Billing Selections", "BillingSelections", "ClientSetup")</li>
</ul>
</div>
<script>
$(function ()
{
$("#ClientSetupTabs").tabs({ active: 1 });
});
</script>
AccountTabs:
<div id="AccountSetupTabs">
<ul>
<li class="active">#Html.ActionLink("Accounts", "Index", "AccountSetup")</li>
</ul>
</div>
<script>
$(function ()
{
$("#AccountSetupTabs").tabs({ active: 1 });
});
</script>
This appears to be an issue with nested tabs, possibly because of the way the ajax calls are made and the scripts within your partials (scripts should not be in partials). To make this work, you can provide placeholder elements for the content of each tab and have the links reference those elements using id attributes.
The html would be
<div id="main"> // main (parent) tabs
<ul>
<li>Client</li>
<li>Account</li>
</ul>
<div id="client"> // client tabs
<ul>
<li>Client Info</li>
<li>Billing Selections</li>
</ul>
<div id="client-info">
// content for client information
</div>
<div id="billing-selections">
// content for billing selections
</div>
</div>
<div id="account"> // account tabs
<ul>
<li>Accounts</li>
</ul>
<div id="accounts">
// content for accounts
</div>
</div>
</div>
and to initialize the tabs
$('#main').tabs({ ... }); // set options as required
$('#client').tabs({ ... });
$('#account').tabs({ ... });
To display the content, use #Html.Partial() if the model in the view contains the data need to generate the partial, or #Html.Action() if you want to call a server method that returns the partial. For example, if the Edit() method of ClientSetupController returns the partial view to show in your Client Info tab, then
<div id="client-info">
#{ Html.RenderAction("Edit", "ClientSetup"); } // or #Html.Action("Edit", "ClientSetup")
</div>
Where the controller method is
[ChildActionOnly]
public PartialViewResult Edit
{
var model = ... // initialize you model for the view
return PartialView("_Edit", model);
}
and _Edit.cshtml is a partial view and contains the html you want to display in the tab
I`m learning JQM and have a lot of questions. Not asking if not trying to do many things.
I have a listview element. When page is loaded it sets listview with autodivider alphabetically by name. When you click on the "category" navigation button it sets elements according to its category, grouping. All is fine there.
My problem is when trying to go back clicking on the "names" navigation button nothing changes. Please help.
Here is simplified sample: http://jsfiddle.net/smatisen/v382r874/
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
<div data-role="navbar">
<ul>
<li>Name</li>
<li>Category</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="todo-listview">
<li data-category="cat 1"><h2>Test Name 1</h2></li>
<li data-category="cat 2"><h2>Test Name 2</h2></li>
<li data-category="cat 1"><h2>Test Name 3</h2></li>
</ul>
</div>
</div>
In your jsFiddle code, when you click on the "Name" navigator button, the function that you have written called "showRecordsByName" is called. The code of that looks as follows:
function showRecordsByName()
{
$('.todo-listview').listview({
autodividers: true
});
$('.todo-listview').listview("refresh");
}
And ... that's all it does. It refreshes the listview with class ".todo-listview" but since the content of the list has not changed in any way, it remains exactly as it was before this code was executed.
Thank you for using jsFiddle, it makes examination much easier.
I found solution by adding hide and show elements on button click events and clonin listview with different class name. Not sure if this is elegant, but it is working. http://jsfiddle.net/smatisen/v382r874/2/
$(document).on('click', '#setTableOrder', function(event) {
console.log("DEBUG - SetTableOrder clicked");
$('.byNamelistview').closest('.ui-listview').hide();
$('.todo-listview').closest('.ui-listview').show();
showRecordsByCat();
});
All you need to do is modify the autodividersSelector on the show records by name function to get the first letter of the text:
function showRecordsByName(){
$('.todo-listview').listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.text().charAt(0);
return out;
}
});
$('.todo-listview').listview("refresh");
}
Updated FIDDLE
I have a set of jQuery UI tabs that is generated by a CMS, so content will be different for every page. Some tabs sets could have two tabs, others could have 5 etc.
I have looked around for a simple solution to this but cant seem to find it. i have looked at the history plugin as well as alternate codes.
Here's my sample markup
<div id="tabs">
<ul>
<li>TAB 1 HEADING</li>
<li>TAB 2 HEADING</li>
<li><a href="#tabs-3">TAB 2 HEADING<a></li>
<li>TAB 3 HEADING</li>
</ul>
</div>
<div id="tabs-1">tab1 content here</div>
<div id="tabs-2">tab2 content here</div>
<div id="tabs-3">tab2 content here</div>
<div id="tabs-4">tab4 content here</div>
I want to create a script that allows the user to alternately select a tab from a text link within the tabbed content. So for example, in the tab content div, have that links to the 3rd tab, as the tab navigation does. I don't want to have to manually code the index of the desired tab in the script.
I know this will work, but want to create something that is more robust across all my tabbed content.
$("#tabs").tabs("select" , "#tab-4");
Here is what i have so far, but doesnt seem to work. I am new to jQuery. I have added an onlick called tabJump to the anchor links.
function tabJump(){
//get href ID as a number
var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
// this should trigger the new tab based on this href id.
$("#tabs").tabs("select" , "#tabs-" + thisID);
};
And ideas on how i could get this to work? Essentially i want whatever the id of the tag as the href of the anchor link being clicked, and to target the new tab by this given id. I would want to have multiple instances of a link with these id hrefs.
Thanks in advance.
ok thanks guys, finally figured out what i needed.
I'll share below in case anyone finds this useful.
initiate function on click
<p>my text link</p>
and the script
function tabJump(obj) {
//grab the id in the clicked links href
var thisID = Number($(obj).attr('href').replace(/#tabs-/, ''));
//use this ID to trigger the click on the set of tabs
$("#tabs").tabs("select", "#tabs-" + thisID);
//then scroll to the top of the tabs set
$('html, body').animate({
scrollTop: $("#tabs").offset().top
});
};
So the way i'm using this is once the content in the tabs has been created in articles in my CMS, I'll end up with say 4 or 10 tabs. Then there's some copy in the first tab that needs to link to say, tab 4. So i add an onclick to the link and attach the jQuery script whenever i need it, as illustrated above.
Thanks guys for the help and the tips. If anyone has a cleaner way of doing this, feel free to post.
Peace
Not sure exactly if this is what you need, but see if this works.
Here is a working fiddle.
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>This is tab ONE</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
<div id="tabs-2">
<p>This is tab TWO</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
<div id="tabs-3">
<p>This is tab THREE</p>
<p>Go to next tab</p>
<p>Go to prev tab</p>
</div>
$("#tabs").tabs();
$("#tabs div a").on("click", function(){
var idx = Number($(this).parent().parent().attr('id').replace('tabs-','')) - 1;
if($(this).attr('class') == 'next'){
$( "#tabs" ).tabs( "option", "selected", idx + 1 );
}
else{
$( "#tabs" ).tabs( "option", "selected", idx - 1 );
}
});
I think your function tabJump might works. Just need to change the call for the method select to use just the number(thisID) instead of concatenating with the String "#tabs-".
Like this:
function tabJump(){
//get href ID as a number
var thisID = Number($(this).attr('href').replace(/#tabs-/, '')) - 1;
// this should trigger the new tab based on this href id.
$("#tabs").tabs("select" , thisID);
};
I am doing a leaderboard for a website we are working on.
Essentially, we have a div with this months winner for location A
Below we have ajax tabs, where user can click tabs which relate to locations, like :
Location A
Location B
etc etc
So by default, when page loads, tab A is open. And the div above we need to give a matching ID, because...
I want as the user clicks tab B for the div above to change, with different DIV ID. So basically we can change content in the div based on the tab the user clicks.
So the content div is like:
<div id="???"> content goes here </div>
The tabs are like:
<ul class="tabs">
<li><span class="stateTab">NSW</span></li>
<li><span class="stateTab">QLD</span></li>
<li><span class="stateTab">VIC</span></li>
<li><span class="stateTab">SA</span></li>
<li><span class="stateTab">WA</span></li>
<li><span class="stateTab">ACT</span></li>
<li><span class="stateTab">NT</span></li>
<li><span class="stateTab">TAS</span></li>
<li><span class="stateTab">AUSTRALIA</span></li>
</ul>
So if user clicks #tab2 then a different DIV loads into the div id="???" .
I think its fairly simple, just cannot figure it out. I realise I possibly have to set all the divs up, like so:
<div id="tab1"> content goes here </div>
<div id="tab2"> content goes here </div>
<div id="tab2"> content goes here </div>
And set visibility hidden to the divs.. any help appreciated.
*** ADDED INFO *******
The tabs, onclick ( presently ) display content from dataTables.
So obviously when we click on tab1, the content below the tabs , shows the content fetched from our dataTables, in a div with id1
The issue now is, with wanting to change the content ABOVE the tabs aswell as the content BELOW the tabs... the 2 id's are conflicting, and one shows and one hides...
The TABS also change content below them, presumably we need to chain the id actions somehow, to get two sets of content to change in harmony
Set it up the way you planned in HTML adding style="display: none" to each div except the one you want to show by default. Then add to you javascript (at the bottom, or in $(function(){ //Document ready });
$('.tabs a').click(function(){
$('div[id^=tab]').hide();
$(this.href).show();
return false;
}
);
As for your Update, you can change your divs to have a class instead of an id. Like
Content Above 1
Content Above 2
Tabs
<div class="tab1 tabContent">Content Below 1</div>
<div class="tab2 tabContent">Content Below 2</div>
Then you can change the javascript:
$('.tabs a').click(function(){
$('div.tabContent').hide();
$('div.'+this.href).show();
return false;
}
);
You'll also need to remove the hashes from your anchors, so the href becomes "tab1" instead of "#tab1"
You could use jQuery to do this: http://jsfiddle.net/YQdQm/
Not sure if this meets your requirements exactly (also, haven't yet tested on IE).
var tabs = $('div[id^=tab]');
tabs.hide();
$('#tab1').show();
$('.tabs a').click(function () {
var tab_id = $(this).attr('href');
tabs.hide();
$(tab_id).show();
});
I would suggest use existing tab control from jquery UI
however if not you will need markup like that
<div class='tabs'>
<ul>
<li data-id='tab1'>tab 1</li>
....
</ul>
<div id='tab1'></div>
<div id='tab2' class='expanded'></div>
...
</div>
and code
$('.tabs ul li').bind('click',function() {
var id = $(this).data('id');
$('.tabs div').removeClass('expanded');
$('#'+id).addClass('expanded');
});
I know this is a bit brute force, but I like to do it this way:
JS:
function hidetabs(){
$("#tab1").hide();
$("#tab2").hide();
//And so on
}
function shobwtab(id){
$("#"+id).show();
hidetabs();
}
HTML:
<li><span class="stateTab">NSW</span></li>
Of course you could also add click listeners in your docready function to run the functions instead of using onClick.