http://www.spencedesign.netau.net/singaporehomemenu.html
This is the link to my page. When you click on menu it closes, or opens the menu, by bringing you to the other page, that doesn't have the menu. But, on the other page the menu button is not lined up. Even though the code for the button is the same on each page. Could someone tell me what I can do to fix this. Also, I don't know any javascript, so I had to make two pages instead of making the menu button work as an actual button and bring up/close the menu on one page. If anyone knows javascript, and knows a simple way to make the above scenario possible that would be greatly appreciated. Thank you.
You can do it using javascript.
Add this to your < head > tag:
<script type="text/javascript">
function showMenu() {
if (menu.style.display != "none") {
menu.style.display = "none";
}
else {
menu.style.display = "block";
}
}
</script>
And write this in your < body > section:
<div id="menuButton" onclick="showMenu()">Menu
</div>
This ought to do the trick. :)
Related
When in mobile view, the hamburger menu appears and the user clicks the icon it opens, when you click the close icon. its closes.
I'm attempting to allow users to click outside of the menu to close the menu. Unfortunately the JS code provided above, Allows users to click Anywhere on the site, to Open & close the menu. I Don't want this, I just want the menu to be closed when a user clicks outside of it.
How can I achieve this? Any help is appreciated.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
The issue I'm attempting to solve is on my website
Summary:
Hamburger menu is being activated with a click anywhere on the site.
You can implement something like below:
It uses an if statement to see if the .nav-open class is active, in case is not there, nothing will happen. In opposite case it will be removed.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
});
*{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div>
I am new to JQuery and Javascript, and after searching for an answer to my problem I am having a difficult time resolving it. I have a Javascript function openNav that is working perfectly to open and close a sidebar that I have built on my webpage, but I have a line of JQuery inside of the function that doesn't seem to work initially.
The goal of the code is to have a glyphicon change when the menu is opened and closed, and it works fine when clicking on the glyphicon itself. There are about 12 additional "menu" buttons that will also open the side bar. The sidebar opens just fine when clicking any of these buttons, however I cannot get the glyphicon to change on the initial click.
function openNav() {
var sideNavBarElement = document.getElementById("sideNavBar");
if (sideNavBarElement.style.width == "0px")
$('#menutoggle').find('span').toggleClass('glyphicon-menu-right').toggleClass('glyphicon-menu-left');
sideNavBarElement.style.width = "250px";
document.getElementById("main-body").style.marginLeft = "285px";
}
I have added this function into the code for each of my menu buttons, and after the menu is opened the first time the glyphicon will alternate using this code, but the very first time it is clicked it does not change. Any help is appreciated. Thanks!
I am using the script below on my wordpress sidebar menu and it works perfectly. However on some of the menu options I want to slide the div AND link to a page. I've worked on this all morning with no success. Can you please tell me what I need to add to this script to make it work? Thank you in advance for your help.
function slideonlyone(thechosenone) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);
} else {
$(this).slideUp(500);
}
}
);
}
The page I am referencing is: http://www.nicksardone.com/slide-down.php
The javascript in the question is a function that when a top level menu item is selected it slides the selected div down to show other links. The question is I want the top level menu option (Human resources) for example to slide the div down AND link to another page on the site. Hope that clarifies...
the question is not clear, what do you mean with "and link to page" ?
EDIT:
if your problem is that clicking on the div it works fine but clicking on the link doesn't work.
you have to call the slideonlyone function on the href property of the link passing as parameter the id of his parent div.
link this:
<a id="someID" href="javascript:slideonlyOne(MyParentDivID)">text</a>
but if you want that it opens another page:
function slideonlyone(thechosenone, url) {
$('div[name|="events"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).slideDown(500);window.open(url);
} else {
$(this).slideUp(500);
}
}
);
}
I have a JS script that shows and hides a div when clicked. What I am trying to do is when the close link at the bottom is clicked it jumps back up to the open link. Can't figure it out and everything I searched wants to remove this from happening.
Open link:
Click Here
Close link:
Click Here to Close.
JS code I am using:
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
I am sure it's something easy to fix but as per previous questions any attempts to understand JS have ended in bitter resentment.
The easiest way is to use the link's default functionality.
Click <a id="openLink" href="javascript:ShowContent('require')">Here</a>
Click Here to Close.
Okay, so I have questions about two things. Look at my drag and drop script on: http://bouncygames.org/smell.php. First of all, when I click the X button on the draggable window I made, I need to click it twice, the first time I click it, things get all messed up, then I have to click it again for everything to disappear. How do I make it so I can only click the X one, to get the window div to disappear Also, I want it so only if you drag the TITLE place, it drags, not the main part of the div. How can I make it so I can control the window with only the title? Thanks.
or better
function setVisibility(id) {
document.getElementById(id).style.display = 'none';
//What is the rest here?
if(document.getElementById('aid').value=='Hide Layer'){
document.getElementById('aid').value = 'Show Layer';
document.getElementById(id).style.display = 'none';
}else{
document.getElementById('aid').value = 'Hide Layer';
document.getElementById(id).style.display = 'inline';
}
}
I created an example for you where:
The dialog is dragged using only the title bar.
The close button closes the dialog.
I know it is not a answer with deal with your code and I'm using jQuery and jQueryUI (the draggable module), but I think that using this approach would be better since the draggable issues are well controled by a tested library like jQueryUI.
Tale a look: http://jsfiddle.net/davidbuzatto/s9T4b/