I am struggling with trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container...
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much...So, if you could simply take a look at the demo above, it might be easier on the eyes ;)
JAVASCRIPT:
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});
Did you mean this?
$('.info_box p a').click(function () {
var id = this.id; //get the id of the clicked item
var a = $('#profile_list a[href="#' + id +'"]'); //construct the selector to select the menu item which has the same href
$('#profile_list a').not(a.addClass('active')).removeClass('active'); //now do the add/remove class
});
Fiddle
I did this and it worked. I hope it is what you're looking for:
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a.panel[href=' + $(this).attr('href') + ']').addClass('active');
});
jsFiddle
Related
I‘m using Pollate Template for creating polls. There is a list of user's created Polls, after clicking 3 dots (menu icon), the dropdown list shows up with the option to delete this poll. If the submenu is shown and you click anywhere on the screen it hiding.
But I found a bug, that if you clicking on another sub-menu icon it not hiding other sub-menus (look at the image below).
It should be hidden when clicking anywhere, even if it's a sub-menu icon of another entry.
There is HTML structure:
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
<div class="pl-options">
<ul class="dropdown"></ul>
</div>
After clicking a - dropdown shows up.
There is JQuery:
$.puerto_droped = function( prtclick, prtlist = "ul.dropdown" ){
$(prtclick).livequery('click', function(){
var ul = $(this).parent();
if( ul.find(prtlist).hasClass('open') ){
ul.find(prtlist).removeClass('open');
$(this).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
} else {
ul.find(prtlist).addClass('open');
$(this).addClass('active');
if(prtclick == ".pl-mobile-menu") $('body').addClass('active');
}
return false;
});
$("html, body").livequery('click', function(){
$(prtclick).parent().find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
}
prtclick -> .pl-user-options
I think that this function $("html, body").livequery('click', function(){... should be edited, but can't achieve it successfully. I've tried in many ways but failed.
One of my tries was:
$(prtclick).click(function(evt){
$(prtclick).find(prtlist).removeClass('open');
$(prtclick).removeClass('active');
if(prtclick == ".pl-mobile-menu") $('body').removeClass('active');
});
But now it not showing sub-menu at all. I need to make an exception for the current entry. Have you any ideas? Thank you.
Before you check for .open class, you can toggle off all other ul.dropdowns.
$(this).closest('.row').siblings('.row').removeClass('active')
.find('ul.dropdown').removeClass('open');
Get current clicked a main parent which has 'row' class,
get its siblings, remove 'active' class of them,
get all ul.dropdowns inside those siblings and remove 'open' class of those uls
Im kind of new to javascript, and I have tried for several hours now to make this fadeIn function to work.
First of all, look at my code here.
I have also included the following in my header:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
This is how I want the page to work,
When a user enters the site, the home selection will fadein
The menu is based on <ul> and <li> itmes for categories and in each category we have different comapnies. Each category have a <a href="category-id"> and each company have a <a href='company-id'> to the div tag made later in the body.
A user should be able to switch between the menu options, and each time the time should fade in.
So the problem as you see in my code, it works on page load, but I cant choose anything from the menu.
Any suggestions would be helpful
If I understood correctly you wanted it to function something like this :
$('#menu a').click(function () {
$("#content div").hide(); //Hide all content
var id = $(this).attr('href');
$(id).fadeIn(); // Show content for current tab
});
You didn't need this line (it is deleting the id) :
$("#menu li").attr("href", ""); //Reset id's
This is line I don't even know what it's for:
$(this).parent().attr("href", "current"); // Activate this google parent!
If you want to add a class to the current active menu item, use something like
$(this).parent().addClass('active');
Also you don't need to add '#' because you already had that in you href atrribute:
$($(this).attr('href')).fadeIn(); // Show content for current tab
You can check what kind of id you're getting by alerting it or logging it :
var id = $(this).attr('href');
alert(id);
$(id).fadeIn();
Are you sure with this line of Code?
$("#menu li").attr("href", "");
You do not override your ID here. You remove your link href.
you are resetting the "href" attribute. Thus, when you try to make a fadeIn the "href" attribute value is changed to "current".
Those two lines:
$("#menu li").attr("href", ""); //Reset id's
....
$('#' + $(this).attr('href')).fadeIn();
are wrong because $(this).attr('href') is equal to "" (empty string)
also you made a mistake because you did
$("#content div:last").fadeIn(); // Show first tab content
but the command and what you expect are not coherent. Here you are using fadeIn on the last tab content instead of the first.
You can try something like this: http://jsfiddle.net/546Jn/4/
$(document).ready(function () {
$("#content div").hide();
$("#content div:first").fadeIn(); // Show first tab content
$('#menu a').click(function () {
$("div#content div").hide(); // Hide all pages
$('div' + page).fadeIn(); // Show content for current tab
});
});
I was takeing a peek at stackoverflowe for very long time and now it happend - have to first time ask a question, so here it is:
I've got page with anchor menu sticked to browser top (so its always visible and so on),
the point is that I'm trying to make the active (visible content of this one) anchor another color than those non-active.
For example I have a menu with links (menu1, menu2)
And Conent of menu1, and Content of menu2.
When I see content of menu1, the link "menu1" is green, menu2 is red
when I see content of menu2, the link "menu2" is green, menu1 is red
I hope its clear.
I tried with jqueryinview but I don't full understand it,
as far as I understand this globaly it should work like that:
when browser see classA
then add classB to classC
where classA is content, classB is style for "active" anchor in menu, classC is anchor in menu.
I would really apreciate some help.
jQuery inview is a good solution for your case. What you need is a js code that calculates the top offset for the content element versus the top window offset. If it is approximate, then you add the active class to the relative menu.
Check https://github.com/zuk/jquery.inview , I'm using it with jQuery 1.10, it works just fine.
Basic usage is:
$(el).on("inview", function(ev,visible){
if (visible)
something();
});
This is the flawless way I have always used jQuery to highlight the current menu item
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
With DOM ready
$( document ).ready(function() {
$(function () {
var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$('[href$="'+url+'"]').parent().addClass("active");
});
});
I have built a simple accordian style menu. It works, but I would like it to have a specific section toggled open when in a path related to that menu. So if I would be in the "Mens" part of the clothing store, the Mens section of the menu with the child would be visible or toggled. Right now you can click and toggle open each section, but they are all closed when the page first loads. The website section I am referring to is here: http://bemidjisports.designangler.com/men The menu is on the left side.
I assume it has something to do with the jQuery .toggle() method, but I am not sure. Could someone give me an example of this based on the code below?
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(e) {
e.preventDefault();
$(this).siblings("ul").slideToggle("fast");
});
});
$(document).ready(function() {
$("#nav_1489829 li.link-header a").click(function(f) {
var href = this.href;
window.location = href;
});
});
$(document).ready(function() {
$("#nav_1489829 li.selected").ready(function(g) {
$("li.selected").toggle();
});
});
Try
$("#nav_1489829 li.selected a").trigger('click');
Referring from
http://mehdi.biz/blog/2010/02/05/vertical-tabs-for-jquery-lovers/
i know it's very easy but i couldn't able to find a solution..
Just want to hide panel(content) when users move their mouse out from that icons.(Acting like a menu not like tabs don't want an active tab.)
How can i add that jquery code?
var $items3 = $('#vtab>ul>li');
$items3.mouseleave(function()
{
$('#vtab>div').hide();
}).mouseleave();
tried that code..it hides the tabs so i cant visit content of panel..
Ex: http://arkansas.gov/
panel at right side
You are triggering the mouseleave right after you have attached it. Why?
Instead of the javascript on vertical-tabs and yours use this:
Add display: none; to #vtab > div in the css.
var $items = $('#vtab>ul>li');
var $contents = $('#vtab>div');
$items.on('mouseenter', function() {
$items.removeClass('selected');
$(this).addClass('selected');
$contents.hide();
var index = $items.index($(this));
$contents.eq(index).show();
});
$('#vtab').on('mouseleave', function(){
$items.removeClass('selected');
$contents.hide();
});
try it here.
This will only display the tab content and select the tab on mouseenter and hide the content and de-select the tab on mouseleave.