I'm having one problem is:
I've one javascript running on all pages and I want to keep it active even if you change pages inside of the website (not refresh) but the problem is that I've one menu toggle and every time that I changed the page, the script starts again. so I changed my code menu and added an attribute to link rel="history".
After doing that, the script works without interrupts, but every time I click on the menu link, the menu toggle doesn't close... remains open when I change the page. and cannot know why. anyone can help me? Thanks in advance.
<a class="toggle-menu">
<i></i>
<i></i>
<i></i>
</a>
<div class="menu-drawer">
<ul>
<li>main</li>
<li>Press</li>
<li>Contacts</li>
</ul>
</div>
$(function() {
$(".toggle-menu").click(function() {
$(this).toggleClass("active");
$('.menu-drawer').toggleClass("open");
});
});
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
I have a side-menu on my bootstrap webpage which is open by default.
If the screen is too small there is a button placed behind it to open the menu again.
When a user clicks on a link I would like the menu to close automatically.
The button I already have opens the menu perfectly, but I have no way of closing it?
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"><img src="/content/img/AAA.png" width="27px" />Menu</li>
<li data-ng-hide="!authentication.isAuth">Welcome {{authentication.userName}}</li>
<li data-ng-hide="!authentication.isAuth">Page1</li>
<li data-ng-hide="!authentication.isAuth">Logout</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-user"></span> Login</li>
<li data-ng-hide="authentication.isAuth"><span class="glyphicon glyphicon-log-in"></span> Sign Up</li>
</ul>
</div>
</div>
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">
Menu
</a>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
You could add in another event handler for the a elements.
$(".sidebar-nav li a").click(function() {
$("#wrapper").removeClass("toggled");
});
Here are a few things that you could do:
You could use hide/show with jQuery(I can see you are already using it).
Instead of makeing a "toggled" class, Bootstrap has a built in "hidden" class that you could use.
You could also toggle it's css "display" value.
You could use the "animate" class to slide the menu on and off the screen.
You could have a variable to store the state of the menu("true" for out, "false" for in), and change it when the toggle button is clicked.
I had a similar issue, and I placed a close button on the menu, and added a seperate click handler that would close the menu. The close button would then hide with the menu, leaving just the button to open the menu again.
I have a toggle open/close DIV with UL list in it that look like this:
<div id="dropdown-1">
<div class="option-heading">
<i class="fa fa-angle-double-up"></i>
<i class="fa fa-angle-double-down"></i>
<h5>Title</h5>
</div>
<div class="option-content">
<ul class="check_list check_list_show">
<li><a href="#>Item 1</a><li/>
<li><a href="#>Item 2</a><li/>
<li><a href="#>Item 3</a><li/>
</ul>
</div>
</div>
And a JS code is:
<script>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
$(".option-heading").click(function(){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
});
});
</script>
Once user selects a link from that list, the same page refresh and a results are displayed on it.
But, that DIV gets automatically closed and i would need it to stay open.
I am not a JS developer and i dont have any ideas on how to pass the open state of this after a refresh.Any suggestion would be greatly appreciated!
Fiddle: http://jsfiddle.net/bumL495j/
pass a query string in url (i. anchor tag) lik
<li>Item 1<li/>
$(document).ready(function() {
$(".option-content").hide();
$(".fa-angle-double-up").hide();
var urlstring = window.location.href; // check for menu toggle you can pass itemid also based on that you can highlight menus
if(urlstring.indexOf("menutoggle=open")>0){
$(this).next(".option-content").slideToggle(500);
$(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
}
});
you need to paste this script in every page of that menu items links. i didn't know about localstorage but you can also google for it.
hey guys so i have this drop down menu using ul and anchor and when i click on one an image should be displayed. the problem is when i click it the image appears but only for a second then disappears. the coding i used i copy pasted from one of the threads on this site and i think it worked for the person who had trouble.
but it isnt working for mine, why?
HTML
<ul>
<li> 6 Seater
</li>
<li>8 Seater
</li>
<li>10 Seater
</li>
</ul>
<img id="banquetsix" class="banq" src="image/banquet6.jpg" />
CSS
.banq {
visibility:hidden
}
My guess is that your code is working but the HREF is causing the page the reload after you have clicked your link.
Try adding a return false to your onclick event.:
onclick="document.getElementById('banquetsix').style.visibility='visible';return false"
I have a navigation menu at the top of my webpage with a drop down. For example the service page under nav has a drop down of our other services that go to a service page with a tab structure like so:
<section class="tabs">
<ul class="tab-nav">
<li class="active">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
<div class="tab-content">
<p>Here's the first piece of content</p>
</div>
<div class="tab-content active">
<p>My tab is active so I'll show up first! Inb4 tab 3!</p>
</div>
<div class="tab-content">
<p>Don't forget about me! I'm tab 3!</p>
</div>
</section>
and I would like like to make it so that I could use my achor tags on my home page to link directly to tab 3 or 1 or 2 of my choosing as well as when I refresh the page with the tabs the tab doens't jump to the active tab. How can I do this with javascript? I attempted it with this hash check function bit of code:
$(function () {
$(".tab-content").hide().first().show();
$(".tab-nav li:first").addClass("active");
$(".tab-nav a").on('click', function (e) {
e.preventDefault();
$(this).closest('li').addClass("active").siblings().removeClass("active");
$($(this).attr('href')).show().siblings('.tab-content').hide();
});
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');
});
The problem is, is that when I click the second tab, it shows the content on the first tab... but tab 3 looks fine. But when I click on tab 3 and then go back to tab 2, no content displays under tab 2. Maybe someone can simply my code for what I'm trying to accomplish?
ps. I'm using the gumby framework for my tabs
First of all, $($(this).attr('href')) isn't going to find anything, so none of the tabs would be working anyway.
Apart from that, the hash linking code seems to be fine.
I've rewritten the code so that it works now below.
Link: http://jsfiddle.net/s8Ttm/2/
Code:
$(".tab-nav a").bind('click', function (e) {
e.preventDefault();
$(this).parents('li').addClass("active").siblings().removeClass("active");
$('.tab-content').removeClass('active').hide();
console.log($('.tab-content:eq('+$(this).index()+')'));
$('.tab-content:eq('+$(this).parents('li').index()+')').addClass('active').show();
});
$('.tab-nav a').first().click();
var hash = $.trim( window.location.hash );
if (hash) $('.tab-nav a[href$="'+hash+'"]').trigger('click');