In my mobile project I can press a menu tab (Tab2) and the tab becomes active (with background color for the active class) and the corresponding div (Div2) below will appear on the screen.
If I press another tab, that tab gets active with corr. div etc...all in all, works perfect!
But now I have the opposite problem, I want to press (in my case, swipe) a div onto my screen and have the corresponding tab above to be active (with color). e.g. swipe in Div1 on screen, Tab1 should be active and have a certain background color. Swipe in Div2, then Tab2 should be active instead etc. but can't get it to work.
Below are my li tags:
<ul class="nav nav-pills mobileNavbar">
<li onclick="swipeFunction(0)" class="col-xs-4 tab1" data-index="0">STREAM</li>
<li onclick="swipeFunction(1)" class="col-xs-4 tab2" data-index="1">CHAT</li>
<li onclick="swipeFunction(2)" class="col-xs-4 tab3" data-index="2">IDE</li>
</ul>
And my jQuery:
$('#carousel-example-generic').on('slid.bs.carousel', function() {
var savedIndex = $(this).find('.active').index();
if (savedIndex === 0){
// I want Tab1 to be active here
} else if (savedIndex == 1){
// I want Tab2 to be active here
} else if (savedIndex == 2){
// I want Tab3 to be active here
}
});
For more details into what I'm trying to build, incl. libs, images (and my previous problem, solved by "Pieter"):
Link to a section on horizontal web page
As I commented above, you are doing same thing in all the conditions. All you need to do is, to activate the navigation item by index you are getting from carousel. Try this:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var savedIndex = $(this).find('.active').index();
$('.nav-pills>li:eq(' + savedIndex + ')>a').css('background', 'yellow');
});
EDIT:
I would recommend to play with a CSS class instead of inline css. Try this:
$('#carousel-example-generic').on('slid.bs.carousel', function () {
var savedIndex = $(this).find('.active').index();
$('.nav-pills>li:eq(' + savedIndex + ')>a')
.addClass("active") // add active class to the current one
.parent().siblings() // select sibling navigation items
.removeClass("active"); // remove active class from the other navigations
});
You conveniently already have classnames "tab1", "tab2", "tab3" on the tabs, which can be matched easily based on savedIndex:
$('#carousel-example-generic').on('slid.bs.carousel', function() {
$('.nav li').removeClass('active'); // clear the old one
var savedIndex = $(this).find('.active').index();
$('.tab'+ (savedIndex+1)).addClass('active'); // add the new one
});
(I believe index() returns an integer, but if not you may need to parseInt it before adding 1.)
Related
I am building an accordion for school and I feel like it should work. I know I have everything right up until the if else statement. Any suggestions appreciated
$(document).ready(function () {
//
// Set up a click event handler for clicked <li>
//
$('#accordion li').click(function() {
// find first ul that is a child of this (the clicked <li>)
var $nextUL = $(this).children('ul:first-child');
// Select all siblings of the clicked <li> and then
// select any direct children <ul>'s
// that are visible - this is so we can close any visible
// <ul> before opening the <ul> for the clicked <li>
var $visibleSiblings = $(this).siblings().children('ul:visible');
// If any other <ul>s are visible, slide the visible <ul>
// up and then, after the slide up is complete, slide down
// the clicked <li>'s <ul> into view
if ($visibleSiblings.length > 0) {
$visibleSiblings.slideUp('normal', function() {
$nextUL.fadeIn('normal');
});
} else {
// either no <ul>s were open (open the clicked item)
// or the user clicked on the currently open one so close it
$nextUL.slideToggle('normal');
}
});
});
There is no 'normal' for duration with Jquery fadeIn().
$nextUL.fadeIn('normal');
Reference http://www.w3schools.com/jquery/eff_fadein.asp
speed: Optional. Specifies the speed of the fading effect. Default value is 400 milliseconds
Possible values:
milliseconds
"slow"
"fast"
I'm building a site in Bootstrap 3 and have figured out that you can indeed place both a top nav-tab and bottom nav-tab section on the same page. These two separate tab menus will trigger the same tab content areas to show/hide.
Doing this works just fine with one problem. The tabs work independently of one another. I need the top and bottom tabs to show the same active tab. Right now if you click tab 4 on the top tab menu, it will take you to tab 4 but the bottom menu still shows the active tab as tab 1.
So, can Javascript/Jquery handle this issue? Just need them to act as the same menu.
Thanks in advance for any help.
<div class="tabbable tabs-below">
Should match top nav tabs.
http://jsfiddle.net/UT6ex/1/
Instead of listening to raw clicks, listen to the events triggered by the Bootstrap Tab class: show.bs.tab and shown.bs.tab. That will ensure future versions of Bootstrap markup won't break your setup.
This code finds <li> elements after a shown event to add and remove classes (working JSFiddle):
$('a[data-toggle="tab"]').on('shown.bs.tab',
function(event) {
var $relatedTarget, $target;
if (event.relatedTarget != null) {
$relatedTarget = $(event.relatedTarget);
$('a[data-toggle="' +
$relatedTarget.attr('data-toggle') +
'"][href="' +
$relatedTarget.attr('href') +
'"]').parent('li').removeClass('active');
}
if (event.target != null) {
$target = $(event.target);
$('a[data-toggle="' +
$target.attr('data-toggle') +
'"][href="' +
$target.attr('href') +
'"]').parent('li').addClass('active');
}
}
);
Sth like this is ok i suppose:
$('.nav-tabs').find('li').on('click', function(){
var location = $(this).find('a').attr('href'),
children = $('.nav-tabs').find('li'),
links = children.find('a');
links.each(function() {
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.closest('li');
miParents.removeClass('active');
if(miHrefs == location)
{
miParents.addClass("active");
}
});
})
Ok this works fine. Have a look here http://jsfiddle.net/UT6ex/4/.
I have a page with a row of boxes that are responsive........
so the smaller you resize the window the amount of boxes on each row lessens
heres a fiddle to show you whats going on
http://jsfiddle.net/abtPH/6/
Right now the behavior is......if you click on a box then a div appears under it.....if you click on the next box the div slides up a bit then slides down revealing the new content...
I want it so that if the box is on the same row and the user clicks the next one it does not slide up then down but fades the content in
I only want it to slide up when the box is on a different row...like underneath
heres my jquery so far
$('li').on('click', function(e){
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
$(this).toggleClass('active', 400);
});
The trick is detecting what is on the same line. For that I think the position() function is what you need. When a list item is clicked, check to see if there is an active one already, if so, check to see if the current and active items have the same top value. If they do crossfade otherwise toggle.
$('li').on('click', function(e){
var active = $(this).siblings('.active');
var posTop = ($(this).position()).top;
if (active.length > 0) {
var activeTop = (active.position()).top;
if (activeTop == posTop) {
active.toggleClass('active', 400).find('.outer').fadeOut('slow');
$(this).find('.outer').fadeIn('slow');
} else {
$(this).siblings('.active').toggleClass('active', 400).find('.outer').slideToggle();
$(this).find('.outer').slideToggle();
}
} else {
$(this).find('.outer').slideToggle();
}
$(this).toggleClass('active', 400);
});
jsFiddle
I would like to change the src of an img when the parent of listed children is clicked. I am using some code I have been working with that I found on StackOverflow because I was having problems with slideup and slidedown.
Next to each uppermost item (parent), to the left will be an arrow icon pointing to the right. Upon clicking the icon, this image should change to an arrow pointing down.
I can get the image to change onClick, but unless you click on the image, the image does not change back. Therefore, I believe I need the change to be pegged to the slideup and slide down functions. The image should also change back if you click on the close link or when clicking on a new Parent.
I can live without the 'only one list can be shown at a time' functionality, which would eliminate the need for the image to also change on clicking a new parent.
For this fiddle, I have only applied what I was trying to do to the first parent of the list: http://jsfiddle.net/9aa5n/51/
HTML:
<li><img src="arrowright.png"></li>
<li class="show_hide" id="1C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="2C">
<p>lkjlkjasdfasdf</p>
Close
</li>
<li>Edit</li>
<li class="show_hide" id="3C">
<p>lkjlkjasdfasdf</p>
Close
</li>
jQuery / Javascript:
$(document).ready(function() {
$('.show_hide').slideUp(0);
$('.edit_this').click(function() {
$('.show_hide').slideUp(300);
var takeID = $(this).attr('id');
$('#' + takeID + 'C').slideDown(300);
});
$('.close').click(function() {
var takeID = $(this).attr('id').replace('Close', '');
$('#' + takeID + 'C').slideUp(300);
});
});
$('#img-tag').on({
'click': function() {
var src = ($(this).attr('src') === 'arrowright.png')
? 'arrowdown.png'
: 'arrowright.png';
$(this).attr('src', src);
}
});
I updated your jsfiddle: http://jsfiddle.net/9aa5n/53/
Since you didn't provide absolute paths to images, I added some from the net.
I removed your click event, and replaced it with this, I believe your issue was how you were referencing the elements in jQuery.
$(".edit_button").click(function() {
var img = $(this).find("img").first();
console.log(img.attr("src"));
if (img.attr("src") === 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png') {
img.attr("src", 'http://png-3.findicons.com/files/icons/2315/default_icon/256/arrow_down.png');
console.log(img.attr("src"));
} else {
img.attr("src", 'http://iconizer.net/files/Brightmix/orig/monotone_arrow_right.png');
console.log(img.attr("src"));
}
});
This should get you started to finish polishing up the UI,
i.e. closing all .edit_button and then open only the $(this).find("img").first() element ...
I have a list of a list that uses jquery toggle and slideToggle so that when items are clicked on, explanatory text slides out and the class changes on the h3. The html for the items looks like:
<li><h3>What do I know about javascript?</h3>
<div class="check_list_wrap feature1">Not a lot, apparently.</div>
</li>
I included the jquery files and then write this in the header:
<script type="text/javascript">
$(function() {
$("#listfeatures h3 a").toggle(function(){
$(this).addClass("check_list_selected");
}, function () {
$(this).removeClass("check_list_selected");
});
$("#listfeatures h3 a").click(function() {
$("."+this.id).slideToggle('fast');
return false;
});
});
</script>
This makes it so that if a link is clicked on, it will toggle the class change of the h3, the display:block/display:inline and the sliding out of the div. It works fine.
BUT, now I want it so that with a url like index.php#feature1, the toggling for that list item will be activated as if it'd been clicked on. I know I need to use location.hash but I'm not sure how to do that. Where should I start?
location.hash contains everything in the URL including and after the hash (#) mark. So, if went to index.php#feature1 and wanted the div with id "feature1" to show on load, you could do
$(document).ready(function() {
if(location.hash) {
var id = location.hash.slice(1); //Get rid of the # mark
var elementToShow = $("#" + id); //Save local reference
if(elementToShow.length) { //Check if the element exists
elementToShow.slideToggle('fast'); //Show the element
elementToShow.addClass("check_list_selected"); //Add class to element (the link)
}
}
});