Onclick simple JS menu. I need some advice - javascript

Hi there I am working on this simple tabbing solution for an onpage sub menu. It works with 2 options "about-bio-txt" and "about-eb-txt". When I tried to add a third option, I am having issues. I have edited the text down to a few words, but the code is exactly the same.
<ul id="switch-menu">
<li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt").hide(); $("#about-3").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
<li id="about-bio"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-3").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
enter code here
<li id="about-3"><a href="#" onclick='$("#about-eb-txt").hide(); $("#about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>
The content for the tabs is is just before this menu.
<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3">I AM A TREE</div>
I was wandering if someone could tell me what I am doing wrong and if I am able to add MORE tabs if I need to.

Your menu div ID for the 3rd option and associated tab container have been given the same ID - #about-3
The below should work. Also reduced the JS required from multiple object targets for the same hide request...
<li id="about-eb" class="on"><a href="#" onclick='$("#about-bio-txt, #about-3-txt").hide(); $("#about-eb-txt").show(); return false;'>About Everyday Bright</a></li>
<li id="about-bio"><a href="#" onclick='$("#about-eb-txt, #about-3-txt").hide(); $("#about-bio-txt").show(); return false;'>Bio</a></li>
<li id="about-3"><a href="#" onclick='$("#about-eb-txt, #about-bio-txt").hide(); $("#about-3").show(); return false;'>About Three</a></li>
<div id="about-eb-txt">The Constitution</div>
<div id="about-bio-txt">Science is life</div>
<div id="about-3-txt">I AM A TREE</div>

Related

How to keep submenu opened after page load in JavaScript

I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>
You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color
You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.

Navbar dropdown list auto open and auto close?

I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.
You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});

how to put isActive for More than one page in angularjs

I have a side bar menu collapsible submenu in my Angular project. I used isActive comment for showing active state. When i refresh any page it should show the particular menu with active state. it works on when i refresh submenu's first link. If i click submenu's second link, it doesn't work.
I dont know how to declare active more than a link. ng-class="{show:isActive('/create-workorder')}"
My code is below
<ul>
<li>Work
<ul class="second_level" ng-class="{show:isActive('/create-workorder')}">
<li>
<a href="#/create-workorder" class="" ng-class="{active_sub:isActive('/create-workorder')}">
<div class="create_wo"></div>Create WO</a>
</li>
<li>
<a href="#/workorder-all" class="" ng-class="{active_sub:isActive('/workorder-all')}">
<div class="overall_queue"></div>Overall all</a>
</li>
</ul>
</li>
<li>Status
<ul class="second_level" ng-class="{show:isActive('/history')}">
<li>
<a href="#/history" class="" ng-class="{active_sub:isActive('/history')}">
<div class="status"></div>History</a>
</li>
<li>
<a href="#/recent" class="" ng-class="{active_sub:isActive('/recent')}">
<div class="recent"></div>Recent</a>
</li>
</ul>
</li>
</ul>
A common technique to use to determine active menu is to use the URL itself.
On page refresh you can check the URL and highlight corresponding menu.
For parent-child menu, you can choose to code the relationship, e.g. specify that you should also highlight "status" when you highlight "history".
Or you can use URL itself for the structure, e.g. #/status/history instead of #/history.

How do I make my mobile menu button reveal and hide the navigation bar as well as hide on click in negative space

I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});

bootstrap dropdown open on pageload

Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.

Categories

Resources