So I have this menu and when I click on a button I need to create another div under the menu. I have done that. But when I click on another button on the menu that div is still there and I want it to dissapear/collapse. So how should I do it? What I found until now is how to hide a div when clicking on a specific show/hide button, but I need to hide that div when I click any button on my page...
Any help is highly appreciated.
My code is this but I don't think it is relevant (I am interested in the process, how should I do it):
<div id="container">
<ul id="nav">
<li>Despre noi</li>
<li>Projects</li>
<li>Implica-te</li>
<li>Stiri</li>
<li>Contact</li>
</ul>
</div>
So this is my menu and when I click on projects this div shows up
<div id="menu_lava">
</div>
which is a lavalamp submenu. But how can I make it to collapse when I click on other buttons on my main menu?
Hide all info-div's on a click and just show the sepcific one:
Here's a jsfiddle (using jQuery):
http://jsfiddle.net/FKeAF/1/
Related
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!
Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu
Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu
Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.
I am working on a bootstrap website. I have a button that I click on one pageA to an href tab on pageB. I want to be able to click on the button on pageA and open the tab and the connected panel on pageB.
Here is what I have researched and tried:
jQueryUi tabs to set a specific tab to active
$('#learn2').click(function(){
$('#tactical-tab').tabs('select', 4);
});
jQuery triggers to simulate an event
$('#learn2').click(function(){
$('#tactical-tab').trigger('click');
});
Adding a class via css to set tab to active
$('#learn2').click(function(){
$('#tactical-tab').addClass(".ui-tabs-active");
});
Here is some code for the button.
<h4>Learn More</h4>
Here is some code for the tabs and tab-panels
Tabs
<div id="tabs">
<ul>
Tactical Transparency
</li>
</ul>
Panel
<div id="service-five">
<h4>Tactical Transparency</h4>
<p>Sample paragraph</p>
</div>
Any help or input would be appreciated as I am not sure where the next place to research would be or if I am just missing something.
How do I show a fixed position element, when it's parent element is hidden (display: none)?
My scenario.
I have a bottom, fixed toolbar with five buttons across the bar. One of those buttons is a More/Less button that expands and retracts the toolbar showing even more buttons. Inside each button div is a panel element. So, when a button is clicked its panel element is shown and moved so that it sits above the selected button.
Here is some sample markup:
<div id="dashbar" class="dashbar">
<div id="dashbar-apps" class="dashbar-apps">
<!-- The More/Less Button -->
<!-- My First Button -->
<div id="dash-projects" class="dash-button">
<i class="fa fa-area-chart fa-fw icon"></i>
My Projects
<ul class="dash-menu" id="dash-projects-menu">
<li>Some</li>
<li>Links</li>
<li>Here</li>
</ul>
</div>
<!-- Any number of additional appbar buttons -->
</div> <!-- for the appbar that is always visible -->
<div id="app-deck" class="dash-app-deck">
<!-- The exact same markup for the buttons -->
</div>
</div> <!-- for the dashbar as a whole -->
The More/Less button toggles the appdeck visibility with a simple slide animation.
What I want is for someone to be able to expand the dashbar and click one of the buttons in the appdeck portion. Then the toolbar retracts automatically and displays the panel element associated with that button.
Everything works fine except that when the toolbar retracts, it hides the appdeck and (therefore) all the elements inside it -- including the panel element I'm trying to show.
I've played with detaching and moving the element to the body, but that seems excessive. Is there another way to simply show the element when it's parent is hidden?
Thanks.
I'm trying to do a show / hide menu button using jQuery.
The menu is contained in a div, and I am trying to setup a button to show and hide it. Here's my code:
<div class="menu">
<div id="items">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>
JS:
<script>
//DOM loaded
$(document).ready(function() {
// Hide the top info bar
$('#btn-hide').click(function(){
$("#items").toggle("slow");
});
});
</script>
The problem is when I click the button, it hides the content, and then it shows it again... Any idea where I'm wrong?
This works fine for me but one thing you could try:
$('#btn-hide').click(function(e){
e.stopImmediatePropagation();
$("#items").toggle("slow");
});
This will stop any other "clicks" on that element or parent elements.
http://api.jquery.com/event.stopimmediatepropagation/