I already found a part of my problem but it still needs work.
What i want to achieve is when i hover over a div, others divs should have class added to them if the original class is the same.
So let's start.
I have a menu:
<ul id="listz"><li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/'><span>Smoke vents</span></a>
<ul>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-fum/'><span>Trape de fum</span></a>
<ul>
<li><a href='/rokvent-simplu-canat'>RokVent Simplu canat</a></li>
<li><a href='/pheonix-dublu-canat'>Phönix Dublu canat</a></li>
<li><a href='/megaphonix'>Megaphönix</a></li>
<li><a href='/megastar'>MegaStar</a></li>
<li><a href='/firefighter'>Firefighter</a></li>
<li><a href='/smokejet'>SmokeJet</a></li>
<li class='last'><a href='/multijet'>MultiJet</a></li>
</ul>
</li>
<li class='has-sub'><a href='/produse/trape-de-fum-si-ventilatie/trape-de-ventilatie-si-vizitare/'><span>Trape de ventilatie si vizitare</span></a>
<ul>
<li><a href='/rokvent-luminatoare-fixe'>RokVent(luminatoare fixe)</a></li>
<li class='last'><a href='/rokpas-luminatoare-acces'>RokPas(luminatoare acces)</a></li>
</ul>
</li>
</ul>
</li></ul>
As you can see i have Parent "Smoke vents" that has children.
The menu is on the left side. On the right side i will have a picture with a warehouse that has smoke vent elements. When you hover over them, they change color.
At that moment the menu needs to open and show the associated product that is in the menu. So when you hover over the element of the warehouse it should add class to the menu so i can change the background and show that that element is that product or products.
One problem is that i need it to match them by class (wich i will make unique by each element).
The second problem is that the menu does not open when i hover over a part of the image. If i have the menu open i can see the highlighted item in the menu.
This is the code that i got now and does the hovering part but only by matching in order.(what i mean is that if i add only to the parents the class it shows right but if i add to a child also then the last parent will not have a addClass):
<script type="text/javascript">
$("#listz1 li,#listz2 li").hover(function() {
var index = $(this).index();
$("#listz1, #listz2").each(function() {
$(".link1",this).eq(index).toggleClass("hoverz");
});
});
</script>
Related
Say for example, if you have menu bar with this structure:
<nav>
<ul class="nav">
<li class="menu1">Menu Item 1</li>
<li class="menu2">Menu Item 2
<ul>
<li class="menu2.1">Menu Item 2.1</li>
<li class="subMenu2">Menu Sub-Menu Item 2
<ul>
<li class="subMenu2.1">Menu Sub-Menu Item 2.1</li>
<li class="subMenu2.2">Menu Sub-Menu Item 2.2</li>
<li class="subMenu2.3">Menu Sub-Menu Item 2.3</li>
<li class="subMenu2.4">Menu Sub-Menu Item 2.4</li>
</ul>
</li>
<li class="menu2.2">Menu Item 2.2</li>
<li class="menu2.3"><a href="#">Menu Item 2.3</li>
</ul>
</li>
</ul>
</nav>
And the recorded class name subMenu2.2 is known, how would you go about in order to expanded this sub menu and its parent menu, so the contents of this menu can be viewed with an external call, rather than clicking on the menu bar itself.
So if subMenu2.2 was the item to be viewed, then the all the contents and menu bar section with class name menu2 would be shown or be in active state so it can be visible on the page.
Normally, to view an menu item you would work your way through the menu items, and on hover certain sub menus may be displayed.
My intended goal is to show the sub-menu or parent menu depending on the given/supplied class name.
You could give the pages a body id and style the menu or script the active state according to that. Here is an article that explains that further. I hope this helps.
css-tricks.com/id-your-body-for-greater-css-control-and-specificity
Is there any option to prevent routing of href links to next page, I want to display in index page with list?
</ul>
<li>Elevation Profile</li>
<li>Bookmark Widget </li>
</ul>
There are several ways to do this
<b>First</b>
<ul>
<li>Elevation Profile</li> //this method will take you to the top of the page on click
<li>Bookmark Widget </li>
</ul>
<b>Second</b>
<ul>
<li>Elevation Profile</li> // this method will stays at the same scroll position on click
<li>Bookmark Widget </li>
</ul>
I have a timeline for my product tour that has 4 main sections, with 4-5 subsections in between, it is set up like this:
<ul class="slideshow-timeline">
<li class="active-target-main main-section">Target
<ul class="current-section target-sub">
<li>Donor Profiles</li>
<li>Segmentation</li>
<li>Custom Lists</li>
<li>RFM Analysis</li>
<li>Wealth Screening</li>
</ul>
</li>
<li class="main-section">Connect
<ul class="current-section connect-sub">
<li>Email Marketing</li>
<li>Social Media</li>
<li>Direct Mail</li>
<li>Welcome Series</li>
</ul>
</li>
<li class="main-section">Convert
<ul class="current-section convert-sub">
<li>Donation Forms</li>
<li>Automated Receipts</li>
<li>Events</li>
<li>Member Mgmt</li>
<li>Moves Mgmt</li>
</ul>
</li>
<li class="main-section">Optimize
<ul class="current-section optimize-sub">
<li>Analytics</li>
<li>Campaigns/Funds/Appeals</li>
<li>A/B Testing</li>
<li>Task Management</li>
</ul>
</li>
</ul>
I am looking for a JS solution to allow me to hide the connect-sub, convert-sub, and optimize-sub while the .active-tour div has a class of target-panel.
I attempted this by using .css but was wondering if there would be a more-elegant solution?
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".connect-sub").css("display", "none");
$(".convert-sub").css("display", "none");
$(".optimize-sub").css("display", "none");
}
});
Since the timeline and slides are set as position:absolute and position:fixed it is not sitting in the page flow, so I can't just target it in css.
In theory, this JS should work, but for some reason, it doesn't want to hide the 3 sub sections. No errors are being thrown either. Here is my working page.
I will continue looking into a solution, but if any of you could point me in the right direction, I'd really appreciate it!
Updated to hide all subnavs and show with javascript:
$(function() {
if($('.active-tour').hasClass('target-panel')) {
$(".target-sub").css("display", "block");
}
});
Updated answer:
Use a containing div for both the main content and the footer timeline. Set the class on this outer div using jQuery and use css selectors to show the correct submenu items accordingly.
updated fiddle here
original answer:
Here's a quick and dirty way to do it:
$('.main-section').on('click',function(){
$('.main-section').removeClass('active-tour');
$(this).addClass('active-tour');
});
.current-section{
display:none;
}
li.active-tour .current-section{
display:block;
}
fiddle here
I am using UI Router for navigating the menu. When I am clicking on second menu it's getting the active class but still the first menu is highlighted. I am providing my code below.
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="product">Home</a></li>
<li ng-class="{'active': $state.includes('product.eVouchers')}" class="dropdown"><a ui-sref="product.eVouchers.dashboard" class="dropdown-toggle" data-toggle="dropdown">E-Vouchers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ui-sref-active="active"><a ui-sref="product.eVouchers.dashboard">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.code">Generate Voucher Code</a></li>
<li ui-sref-active="active"><a ui-sref="product.eVouchers.list">E-Voucher List</a></li>
</ul>
</li>
</ul>
When I am navigating to the second menu (i.e-E-Vouchers), at the same time the first menu is getting highlight with second menu. But when I am in the first menu only the first menu is getting the active class. Here I need when user will navigate to the any menu that menu only will get the active class.
I am using ui-router #version v0.2.15.
It's because of
<li ng-class="{active:$state.includes('product')}">
you add the class yourself for the parent menu so why don't you use the ui-sref-active like for other menus?
ui-sref-active="active"
ui-sref-active can live on the same element as ui-sref or on a parent element. The first ui-sref-active found at the same level or above the ui-sref will be used.
ui-sref-active will activate when the ui-sref's target state or any child state is active. If you need to activate only when the ui-sref target state is active and not any of it's children, then you will use ui-sref-active-eq
I have a navigation set up where I have a parent element and 3 children, the parent has content as do the three children. In bootstrap 3 however I can't access the parent because of the data-toggle for the children. I have it set to hover instead of click already for computer use which changes to the click for mobile use. Without breaking the mobile click on touch devices is there a way to make the parent element navigate to it's page? I've searched around but everything is either in PHP or the questions go un-answered.
This is the code I have for the navigation:
<ul class="nav">
<li>Home </li>
<li><a class="cms menulink" data-toggle="dropdown" href="/about">About</a>
<ul class="dropdown-menu">
<li>Who we are </li>
<li>Identity Mission </li>
<li>Origins </li>
</ul>
</li>
</ul>
I'm looking to either do this with just html/css or javascript/jquery.
Thanks