I have two buttons that are essentially "next" and "previous" buttons for my tabbed form with bootstrap. The code works when you go from the introduction tab to the applicant tab just fine the way it is. The only problem is there are 11 "tabs" in the element. I am needing essential parts in this <a> to change on each tab.
What I am needing to change is the href , .style.width , and the two classNames at the end of the `onclick' function each time the user progresses through the form.
Previous
Next
The sections that need to correspond with the buttons are identified with an id that is different for all 11 sections.
<div class="tab-pane" id="confirmation">
So for example when the users clicks the button "next" from the introduction tab I need the above to change to: (and vise versa for the previous button)
Previous
Next
and so on throughout the tab-panes.
I am figuring I could do something like, I just really don't know how to start it and how to change just the specific onclick elements like I am needing to.
if(this tab-pane is something?)
{
document.getelementById('previous').href="";
document.getelementById('previous').style.width="";
document.getelementById('previous').className="";
}
As Requested in the comments the tabs are laid out like so:
<div class="tab-content">
<div class="tab-pane" id="introduction">
//content here
</div>
<div class="tab-pane" id="applicant"> //and so on just like this for all 11 tabs.
//content here
</div>
</div>
Here you go...
This is using Twitter bootstrap and Jquery...
Hopefully its helpful to you...
The progress bar is a bit of a hack, but its a start and Im sure you can figure things out from there...
The only thing that sucks is that the tabs are clickable, and that isn't what you wanted, since you want them to progress through the form without being able to click on the tabs....But the nuts and bolts are here
DEMO HERE
$(document).ready(function(){
//Progress bar calculation
function setProgress(){
var length = $tabs.length;
var index = ($('li').index($(".active")))+1;
var width = (index/length)*100;
$('#progressBar').css('width', width+'%');
}
var $tabs = $('#tab_bar li');
setProgress();
$('#prevtab').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$('#nexttab').on('click', function () {
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
setProgress();
});
$tabs.click(function () {
setTimeout(setProgress, 200)
});
});
Then your HTML, I dunno what you had for < ul > , cuz you didn't provide that part... so I just hacked something up...but this should be similar to your structure
<ul class="nav nav-tabs" id="tab_bar">
<li class="active">Intro</li>
<li>SecondTab</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="introduction">
asdasdasdas
</div>
<div class="tab-pane" id="secondtab">
asdasdsagreteryterythhgh
</div>
<div class="tab-pane" id="thirdtab">
rthrthrthrthrt
</div>
<div class="tab-pane" id="fourthtab">
yujghjuyjyujedgjhegj
</div>
</div>
<a class="btn" id="prevtab" type="button">Prev</button>
<a class="btn" id="nexttab" type="button">Next</button>
DEMO HERE
Related
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 many questions here so please be patient with me, very new jquery/javascript user.
Here is my current page http://integratedcx.com/index.php/experience
Basically I would like each of the projects and project categories to have the hidden div, slidedown like a drawer not just appear as they do now.
I have tried to achieve this through jquery without much success, here is my working http://integratedcx.com/temp/slide.html
How do I get the div below the one opening to "ease" down instead of jump
How do I get my close feature (orange box) in recent projects to work properly
How do I get my the project list on the right side of image to hide (as it does on my current page) as well as have the drawer opening effect.
Is there an easy way to i.e. variable to assign this to multiple divs using jquery.
Thank you in advanced for any/all help.
For your question 4, With the following script (based on ComputerArts's answer above), you can easily add the slide effect to a large number of divs:
$(document).ready(function () {
$(".toggle-to-show").click(function (evt) {
var targetdiv = $(evt.currentTarget).attr("data-drawer");
$(targetdiv).slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('.bracket', evt.currentTarget).html('less');
$('.project', evt.currentTarget).hide();
$('.closebox', this).bind('click', function(e) {$(evt.currentTarget).triggerHandler('click');});
}
else {
$('.bracket', evt.currentTarget).html('more');
$('.project', evt.currentTarget).show();
$('.closebox', this).unbind('click');
}
});
})
})
Then, you can mark up the toggle buttons and sliders as follows:
<div class="toggle-to-show" data-drawer="#firstsection">
<div class="project">Project One Heading</div>
<div class="bracket">more</div>
</div>
<div id="firstsection">
<h3>Project One Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#secondsection">
<div class="project">Project Two Heading</div>
<div class="bracket">more</div>
</div>
<div id="secondsection">
<h3>Project Two Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
<div class="toggle-to-show" data-drawer="#thirdsection">
<div class="project">Project Third Heading</div>
<div class="bracket">more</div>
</div>
<div id="thirdsection">
<h3>Project Three Heading</h3>
stuff
<img class="closebox" src="close.jpg">
</div>
As for points #1 and #2, try this fiddle
I only changed the first script tag to
<script type='text/javascript'>
$(document).ready(function () {
$(".projectx-show").click(function () {
$("#projectx").slideToggle(1000, function() {
if ($(this).is(':visible')) {
$('#projectx-bracket').html('less');
}
else {
$('#projectx-bracket').html('more');
}
});
})
})
</script>
FYI, you don't need to use $(window).load and then $(document).ready... one is enough
As for #3, I don't understand what you're trying to say.
#4, yes there is a way, using classes and keeping the structure the same for every bloc in your page.
http://api.jquery.com/slideDown/
$("#link_id").click(function(){
$("#div_to_show").slideDown();
});
http://api.jquery.com/slideUp/
$('#div_to_close').slideUp();
Using both of the methods from 1, and 2
By using class names instead of IDs for your selectors. For example:
$(".link_class").click(function(){
$(this).parentsUntil('.ex-wrapper').find('.div_to_show').slideDown();
});
I have a nav menu bar based on twitter bootstrap that uses scrollspy to for hightlighting.
this works by matching the value after the # in a link (e.g. <a href="#foo"> when <div id="foo"> scrolls into view). pretty basic, here's the doco: http://twitter.github.com/bootstrap/javascript.html#scrollspy
my problem comes when I introduce a link to a bootstrap modal dialogue box within an element that is being spied on. imagine I have:
<ul class="nav">
<li>a link</li>
<li>modal</li>
<li>a different link</li>
</ul>
<p> .. my page .. </p>
<div id="info"><a name="info"></a>info on my product</div>
<div id="products"><a name="products"></a>a list of my products</div>
<div class="modal hide fade" id="demo" tabindex="-1" role="dialog">
<div class="modal-header">my header</div>
<div class="modal-body">some content</div>
<div class="modal-footer"><button>close</button></div>
</div>
<p> .. more page </p>
the div that represents my modal overlay also uses the #id-of-target format for its href, but since it's included inside the nav (of course) then scrollspy ALSO highlights when the (hidden) div is in view. Depending on where the modal code in on the page, this confuses the menu system's highlighting.
I can see that scrollspy should be modified to only link to items that are visible (and therefore not activate when "demo" scrolls into view) but can't work out how to modify the plugin to only fire if the element is visible, or override the event some other way.
can anyone give me some pointers?
funny how typing out a question sometimes makes you think in the right way to solve it, where just thinking about it does not.
to make this work, I modified the scrollspy component of bootstrap so that it tests the target is hidden and bails out of the activate routine (also doesn't raise the activated event, since it's not active)
here it is: around line 1432 for me (+if ..
, activate: function (target) {
var active
, selector
if (target.is(":hidden")) return
this.activeTarget = target
I have got links from several pages linking to a specific page where my accordion grid is. And on page load I want the target part of the accordion grid to collapse automatically for the user.
Take for example: Page A and Page B. Page A is where the user is coming from to view something on Page B. Page B has an accordion with 4 (e.g 1,2,3 & 4) parts. If the user click on link 2 from Page A to Page B, the number 2 part of the accordion should collapse for the user to see.
Find below the codes:
HTML:
<div id="accord_bar">
<ul id="accordion">
<li>Number 1 Header
<ul id="recent"><li>Number 1</li></ul>
</li>
<li>Number 2 Header
<ul id="recent"><li>Number 2</li></ul>
</li>
<li>Number 3 Header
<ul id="recent"><li>Number 3</li></ul>
</li>
<li>Number 4 Header
<ul id="recent"><li>Number 4</li></ul>
</li></ul></div>
Javascipt in the HEAD tag:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion(
{active: "a.default", header: "a.heading"}
);
});
Linked accordion Jquery file:
<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>
I really need to fix this asap and I will be very grateful if anyone can help...
You can built your own simple accorion with jQuery, no need ui.
For collapsing a specific part of an accordion with eq() method with this simple accordion structure.
Here is jsFiddle with hover trigger.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').hover(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('.content').stop(false,true).slideUp(600);
//used stop for prevent conflict
$('#'+takeID+'C').stop(false,true).slideDown(600);
///show's hovered ele's id macthed div
});
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1</div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2</div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3</div>
----------
Here is jsFiddle with click trigger and close button.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').click(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('#'+takeID+'C').slideDown(600);//show's clicked ele's id macthed div
});
$('span').click(function() {//close
var takeID = $(this).attr('id').replace('Close','');//strip close from id
$('#'+takeID+'C').slideUp(600);//hide clicked close button's panel
});
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1<span id="panel1Close">X</span></div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2<span id="panel2Close">X</span></div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3<span id="panel3Close">X</span></div>
Note: I've answered accordion related this answer before:
collapse and expand tabs jquery / simple accordion
I have a very simple tab switching code. Basically HTML looks like this:
<ul id="presentation">
<li><!--Some content--></li>
<li><!--Some content--></li>
<li><!--Some content--></li>
</ul>
<div class="presentation-slides">
<div id="slide-1" class="content">
<!--Some content-->
</div>
<div id="slide-2" class="content">
<!--Some content-->
</div>
<div id="slide-3" class="content">
<!--Some content-->
</div>
</div>
and javascript code is also very simple:
<script type="text/javascript">
// Setup Interval
setInterval(function(){
// Hide visible div, get reference to next
reference = $("div[id^=slide]:visible").hide().next("div[id^=slide]");
if(reference.size()){
$(reference).fadeIn();
$("a.tab").removeClass("active");
var tabName = $("div[id^=slide]:visible").attr('id');
$("a[name='"+tabName+"']").addClass("active");
}else{$("div[id^=slide]:first").fadeIn();}
// Do this every ten seconds
}, 10000);
</script>
Now the problem is that slides switch the way they are supposed to, but tabs don't. When last tab is switching to first, the last one stays active and I have absolutely no idea why. Could someone help me with this problem?
When you switch to the first slide, there is no code for setting the first tab to active.
else{$("div[id^=slide]:first").fadeIn();}
All you are doing is fading the first slide in. I think you are missing some code, something like:
else{
$("div[id^=slide]:first").fadeIn();
$("a.tab").removeClass("active").first().addClass("active");
}