I have a little problem there. I have accordion tabs with custom a tags. You can see the code below. I made a JS code to autoclick on different tab when the page is loaded. It works nice but it's scrolling down to the tab. I am not good in JS so I just come here to get help or advice. For me it will be better to not use "something a" but "#discussion" because there can be more tabs and I like to choose which tab will be autoclicked by the hash link not with "nth-child".
I can't use ID's on taband can't use jQuery (don't have permissions, just can use JS and adding code to body/head/footer)
Thank you! :-)
<div id="tabs-div" class="some-classes">
<ul id="tabs" class="some-classes">
<li class="ui-state-default ui-corner-top">
Description
</li>
<li class="ui-state-default ui-corner-top">
Discussion
</li>
</ul>
<div>
<script>
$link = $('#tabs li:last-child a');
$link[0].click()
</script>
Related
Hi i am creating tab using bootstrap. i know this question asked before many of time but my tab code is bit different i am using button to go on next tab here is my jquery code
$(document).ready(function () {
$(".btn_1").click(function (e) {
e.preventDefault();
var $active = $('.wizard .nav-wizard li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
Tab code
<ul class="nav nav-wizard">
<li class="active">
Location Information
</li>
<li class="disabled">
Contact Information
</li>
<li class="disabled">
Other information
</li>
<li class="disabled">
Business Keywords
</li>
<li class="disabled">
Upload Pictures
</li>
<li class="disabled">
Upload Videos
</li>
</ul>
i didn't post the rest because it is too big now everything is working fine it is going to next tab but what i want is to on page load it show the active tab not the first one i have also checked this question but again he is using click tab to go to next step and i am using button.
Here is the fiddle of my code
First of all your question in not clear. Try to make it in sync with Twitter Bootstrap. Having said that, what you are trying to do, is not recommended in Bootstrap; which provides these components ready-to-use in websites. Don't try to customize basic components in Bootstrap.
Your issue can be solved using this component in Bootstrap.
I am trying to use this menu on my web, but here have a problem, that is how to keeping the menu active?
I hope when the user browse the Home page, the menu bar will like this:
I found some example, like add the class ".active",
and put it in <li>, like:
<li class="active">Home</li>
But, it not working.
HTML:
<div class="rmm" data-menu-style='graphite'>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about-me'>About me</a></li>
<li><a href='#gallery'>Gallery</a></li>
<li><a href='#blog'>Blog</a></li>
<li><a href='#links'>Links</a></li>
<li><a href='#sitemap'>Sitemap</a></li>
</ul>
</div>
Here is the demo:
http://jsfiddle.net/7jgkzdf7/
Yesterday, I had been ask this question, however I make a lot of mistakes, I am sorry about that!
Now, I post again. Please help me to fix this problem!
Thanks!!!
Try something like this
JS:
$(".rmm ul li a").on('click', function () {
this.addClass('active');
});
CSS:
.rmm ul li a {
url('http://responsivemobilemenu.com/demo/rmm-img/graphite-menu-bg-hover.png')
}
But this RMM (responsive mobile menu) is not good practice ... try to use Bootstrap. They have easy documentation and very good mobile first elements.
Try it here Bootstrap
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
I'm trying to load a default tab in the tabbed ajax code that I've got, this is the source from the head tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://www.hastiefitness.com.au/wp-content/themes/hastie/jquery.fwd_tabs.js"></script>
And this is what I'm using in HTML:
<div class="tabs">
<ul class="tab-menu">
<li>TEAM TRAINING PROGRAM</li>
<li>VIRTUAL EDUCATION AND COACHING PROGRAM</li>
<li>PERSONAL COACHING PROGRAM</li>
</ul>
<div class="tab-content" id="tab-1">
The page in question is :
http://www.hastiefitness.com.au/programs/
The default tab is meant to be the middle one, which is tab-2.
How would I be able to perform this? I've searched and haven't been able to get it working at all.
Looks like the plugin used does not have any direct support for setting active tab so once the plugin is initialized trigger a click event on the desired anchor element
jQuery(function(){
$('.tabs').fwd_tabs();
$('.tabs a[href="#tab-2"]').click()
})
Demo: Fiddle
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.