Using ASP.NET + BootStrap 3 and trying to create tabs. Everything works fine except that I want that fine border to appear around the currently active tab. For this purpose I need to apply active class on that li (and remove active from other li elements). I'm trying to achieve that through the following simple JS function. But when I click a tab header, it tells me that the function activateTab() is not defined. Any clues?
<EditItemTemplate>
<script type="text/javascript">
function activateTab(tab) {
$("#ItemTabs ul li").removeClass("active");
$(tab).addClass("active");
}
</script>
<div id="ItemTabs">
<ul class="nav nav-tabs">
<li>Details</li>
<li>Additional Info</li>
...
</ul>
</div>
</EditItemTemplate>
N.B: I'm not a seasoned web developer and may be reinventing the wheel here. Plz let me know if there is an easier way.
when javascript file is having some compile error , that time it gives these kind of problem.
You can try with this :
from $("#ItemTabs ul li").removeClass("active") TO this
$('div#ItemTabs > ul li').removeClass('active')
Related
I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.
I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?
Below is the html.
Here's the site: www.nomad8.com
<header class="edgtf-mobile-header">
<div class="edgtf-mobile-header-inner">
<div class="edgtf-mobile-header-holder">
<div class="edgtf-grid">
<div class="edgtf-vertical-align-containers">
<div class="edgtf-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="edgtf-mobile-opener-icon-holder">
<i class="edgtf-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<nav class="edgtf-mobile-nav">
<div class="edgtf-grid">
<ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><span>menuiteams</span></li></span></a></li>
</ul>
</div>
</nav>
</div>
</header>
UPDATE:
I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
});
$('.edgtf-mobile-nav > li').click(function(){
$('.edgtf-mobile-nav').fadeIn('fast');
});
});
})(jQuery);
I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.
But i am guessing that your wrapper is edgtf-mobile-menu-opener
However, you can target the wrapper that contains mobile menu list and the do something like this:
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(2000)
});
fadeToggle will fade the menu in and it will stay until you click the menu-icon again
Just try that first and lets see
Well, clear the cache.
However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.
Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.
.dropdown-backdrop{
position: static;
}
That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header.
Try to change the toggle selector to .edgtf-mobile-opener-icon-holder.
Thanks to #Dayo-Greats answer I managed to work this out..kind of.
Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?
Here's my code:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
// return;
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
// return;
});
});
})(jQuery);
I don't have a privilege to make a comment yet.
However, you did not pass the function argument(function()) before you called e.stopPropagation(); as seen below:
(function($) {
$(document).ready(function(){
....
e.stopPropagation();
Quickly fix a bug in the your new code like this function(e)
(function($) {
$(document).ready(function(e){
....
e.stopPropagation();
Try it again and lets see
At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:
....
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle('slow', function(){
#-> trying to target ul>li
$('.edgtf-mobile-nav > li').click(function(){
#-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
$('.edgtf-mobile-nav').fadeIn('fast');
})
...just thinking anyway
I'm working on ul with javascript/jquery and I'm facing a very strange issue. It was working fine before I worked with some tags and, after that, it is creating an issue: it is adding an additional class "ui-selectable" which is not used anywhere in the whole code and it is messing with the functionality of the code.
See the code below
<div class="row"><ul id="selectMe" class="selectMe1">
<li class="myList">Monday</li>
<li class="myList">Tuesday</li>
<li class="myList">Wednesday</li>
<li class="myList">Thursday</li>
<li class="myList">Friday</li>
<li class="myList">Saturday</li>
<li class="myList">Sunday</li>
The url of the project is here see at the end on business hours
here is the screen shot screenshot
Find jQuery UI method selectable() in your code and remove that method.
Alternatively you can remove particular class like below:
jQuery('ul#selectMe').removeClass('ui-selectable');
(EDIT)
I found script in your page source:
$(function(){
$("#selectMe").selectable();
});
Just remove that script if you are not using.
if You are using Jquery-UI or any other framework then this class is coming from that way But if you are thinking this is additional and should not be part of ul class then You can remove the class with Jquery:
$('ul#selectMe').removeClass('ui-selectable');
I have built a drop down menu in pure css and it works perfectly. Right now it only works when hovered over. Hovering over #headerNav causes the menu to my .dropdownMenu to drop down and as soon as cursor is taken away from dropdownMenu or the #headerNav the menu disappears.
Because I want users with js enabled to have a better experience, I've decided to use some jquery to get the same effect as click here. Which basically keeps the drop down menu open after a click and click only not hovering.
By default I have set .dropdownMenu to "display: none" and then to show the drop down menu I have something like this:
#headerNav:hover .dropdownMenu {
display:block;
//more code
}
Here is my html:
<header>
<div id='headerContent'>
<div id='LogoHolder'>
</div>
<nav id='headerNav'>
<ul>
<li id='photoThumbnail'></li>
<li id='currentUser'>
<ul class="dropdownMenu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I've been experimenting for 2 days now and can't seem to come up with a way of doing this. I'd appreciate some help with clear examples. Thanks
Kind regards
Instead of targeting your nav by it's ID, add a class to it, say hover-nav and update your CSS accordingly:
.hover-nav:hover .dropdownMenu
Then in your javascript remove the css class from the ul
$(#headerNav').removeClass('hover-nav');
and use your click to show plugin as you normally would.
I think the most elegant way to deal with javascript enabled/disabled is to add :
<html class='no-js'>
then removing the class with Javascript.
So, in your case, you would use
.no-js #headerNav:hover .dropdownMenu {
display:block;
}
to target only users with javascript disabled.
See : http://paulirish.com/2009/avoiding-the-fouc-v3/ for more details.
Nathan hit it on the head. I'll go ahead and paste the code, since I was already nearly finished with it.
CSS
#headerNav .hideable{ display:none; }
#headerNav:hover .hideable{ display:block; }
HTML (just add hideable to your UL)
<ul class="dropDownMenu hideable">
jQuery
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(){
$(this).find('.dropDownMenu').slideToggle();
});
Replace above with this jQuery to add the ability to close the menu if anywhere else is clicked.
$('.hideable').hide().removeClass('hideable');
$('#headerNav').click( function(e){
$(this).find('.dropDownMenu').slideToggle();
e.stopPropagation();
});
$('html').click( function(e){
$('.dropDownMenu').slideUp();
});
Try something like this:
$(document).ready(function(){
$('#headerNav .dropDownMenu').hover(function() {
$(this).show();
});
$('*:not(#headerNav .dropDownMenu)').click(function() {
event.stopPropagation();
$("#headerNav .dropDownMenu").hide();
});
});
Your CSS is .dropdownMenu
Your Html is class="drop DownMenu"
CSS is case sensitive.
I don't know if I'm in the right place to ask this question.
I'm looking for examples or tutorials of vertical or side tabbed content where contents appear on the side. Like normal tabbed contents but this time sideways (preferably tabs on the left). But it seems that there's not a single thing about it online even using Google. Therefore I'm lost.
Or maybe I don't know the name of this technique.
Also I don't want to use jquery ui for this.
Can someone show me the way please?
Many thanks
Without jQueryUI you could do something very easy and clean like this (demo => http://jsfiddle.net/steweb/zwaBx/)
Markup:
<ul id="tabs-titles">
<li class="current"> <!-- default (on page load), first one is currently displayed -->
first
</li>
<li>
second
</li>
<li>
third
</li>
</ul>
<ul id="tabs-contents">
<li>
<div class="content">first content first content first content</div>
</li>
<li>
<div class="content">second content</div>
</li>
<li>
<div class="content">third content</div>
</li>
</ul>
CSS:
#tabs-titles{
float:left;
margin-right:10px;
}
#tabs-titles li{
cursor:pointer;
}
#tabs-titles li.current{
font-weight:bolder;
}
#tabs-contents{
background:#F2F2F2;
margin-left:100px;
padding:5px;
}
#tabs-contents li{
display:none;
}
#tabs-contents li:first-child{
display:block; /* first one content displayed by default */
}
JS: (simple jQuery, no UI)
var tabs = $('#tabs-titles li'); //grab tabs
var contents = $('#tabs-contents li'); //grab contents
tabs.bind('click',function(){
contents.hide(); //hide all contents
tabs.removeClass('current'); //remove 'current' classes
$(contents[$(this).index()]).show(); //show tab content that matches tab title index
$(this).addClass('current'); //add current class on clicked tab title
});
Here's one of many free tutorials: Vertical Tabs for jQuery lovers!
I found this one in pure javascript with no jquery:
http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html
Haven't tested it yet. I also found this one that uses no jquery, but leverages html5 and css3:
http://www.my-html-codes.com/javascript-tabs-html-5-css3
It seems my most successful search phrase for this topic is "pure javascript tabs" (without the quotes, of course). You'll find a those above plus some others if you run that search.
Found an example using jQuery UI
http://jquery-ui.googlecode.com/svn/trunk/demos/tabs/vertical.html
If you look at the source, it seems like they're just adding a class which positions it vertically and not horizontally
I've been having nothing but problems with this script for a simple hide/show gallery of testimonials.
I think the java is somewhat self explanatory...
When the page loads, I tell it to show the first testimonial in the line up (as the css is display:none) and gives it a selected class name. Works fine in across the board.
On click I want it to remove the selected class place it to another, and then hide the first testimonial and pull up a corresponding one. Except all that happens here is the first testimonial disappears (hide) and the selected class is added.
<script type="text/javascript">
$(document).ready(function(){
$(".testimonial:first").show();
$("li.testID:first").addClass("selectedName");
$("li.testID").click(function(){
$("li.testID").removeClass("selectedName");
$(this).addClass("selectedName");
$(".testimonial").hide();
$(this).next(".testimonial").fadeIn("slow");
});
});
</script>
Example of markup
<ul id="testName">
<li class="testID">Persons Name</li>
<blockquote class="testimonial">
<span class="bqStart">“</span>
Testimoinal here
<span class="bqEnd">”</span><br /><br />
<span class="testAuthor"><b>Name</b><a target="_blank" href="#">Website</a> Company</span>
</blockquote>
As a side note this is working fine in FF and Safari
Your help is greatly appreciated.
Thanks.
It's probably not working in IE because it's not valid markup: you can't have a blockquote as a direct child of a UL, so IE probably stores them in some weird place in the DOM tree which means .next doesn't find them. Can you move the blockquote elements into the li?
Is .testimonial the class you have given to your lists? <ul> or <ol>
It seems as if you are trying to get the next testimonial list to show, when infact you are actually getting the next <li> which has a class of .testimonial which I suspect is incorrect as you are using .testID as the class for your list items.
Please try this instead:
$(this).parent().next(".testimonial").fadeIn("slow");