So I've been working on this for a while, I've tried many examples found here on stackoverflow, and then starting reading up on js/jquery for most of the day, but am still having trouble with this.
Basically I was able to create a hidden menu item that slides on to screen when clicked, and I was able to change the button used to open in by toggling the class, and send it back.
But after the first time through that process when I try to open it again, it opens and then closes automatically.
I built a jsfiddle, but have done it wrong as it's not working the same as on my site.
fiddle: http://jsfiddle.net/VpnrV/1/
site: http://ericbrockmanwebsites.com/dev4/
code - html:
<div id="dashboard">
<nav id="access">
<div class="open"></div>Here's a bunch of content representing the nav bar.
</nav>
</div> <!-- dashboard -->
css:
#dashboard {
font-size:30px;
float:left;
position: absolute;
right: -653px;
z-index: 100;
}
#access {
display: block;
float: right;
margin: 10px auto 0;
width:730px;
}
.open {
background: #cabd32 url(images/open.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
.close {
background: #cabd32 url(images/close.png) top left no-repeat;
float:left;
padding:13px 30px 16px;
}
my laughable js:
$(document).ready(function() {
$('.open').click(function() {
$('#dashboard').animate({ right: '0' });
$(this).toggleClass('close');
$('.close').click(function() {
$('#dashboard').animate({right: '-653'});
}
);
});
Any help is greatly appreciated!
You are actually binding the class .close to multiple callback every time you click the button.
you can try this:
$('.open').bind('click',function(){
$('#dashboard').stop().animate(
{
right: $(this).hasClass('close') ? '-653px' : '-400px'
});
$(this).toggleClass('close');
});
Having stop() infront of animate() will cancel the current animation and do the next animation without queueing multiple animations up.
You can actually do this in one click event. All this does is every time you click open it looks for the close class, if it's there, close the menu, if not open it. Then toggle the close class:
$(document).ready(function () {
$('.open').on("click", function () {
if ($(this).hasClass('close')) {
$('#dashboard').animate({
right: '-653'
});
} else {
$('#dashboard').animate({
right: '0'
});
}
$(this).toggleClass('close');
});
});
I don't know if this is the most effecient but it works for your example. I updated it as well: http://jsfiddle.net/VpnrV/3/
Related
i have sidebar if i click on button and then side bar appears from left, and when i click on body side bar hides, but why it is happening only for once.
FIDDLE
HTML
<body>
<div class="site-overlay"></div>
button ☰
<nav id="menu" class="panel" role="navigation">
<ul>
<li>Home</li>
<li>The Ballad of El Goodo</li>
<li>Thirteen</li>
<li>September Gurls</li>
<li>What's Going Ahn</li>
</ul>
</nav>
</body>
JS:
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
$('body').addClass('menu-open');
});
});
CSS:
a.menu-link {
float: right;
padding: 20px
}
nav#menu {
background: lightblue;
z-index: 100000000000000
}
.site-overlay {
display: none;
}
.menu-open .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
-webkit-animation: fade 500ms;
animation: fade 500ms;
}
HOW CAN I MAKE IT WORK IT MANY TIMES, instead of only one time.
After the click, you're showing your overlay, but because it has z-index: 9998, the overlay is being placed on top of the button, so when you try to click the button, you're actually clicking on the overlay, not on the button.
You should make an event when the overlay is clicked to remove that class, like this:
$('.site-overlay').click(function() { $('body').removeClass('menu-open') })
This is because the added class is not removed.
You can control it by adding a toggle value for that button.
Instead of addClass put toggle.
On the way you put you will add "menu-open" once and it will never be removed.
you have more information about this here: https://www.w3schools.com/howto/howto_js_toggle_class.asp
You can do it by this JS code.
$(document).ready(function() {
$('.menu-link').bigSlide({
easyClose: true
});
$('.menu-link').click(function() {
event.stopPropagation();
$('body').addClass('menu-open');
});
$('body').click(function(){
$('body').removeClass('menu-open');
})
});
I have a portfolio grid of images and when a user hovers or taps on a mobile a transparent overlay with some text and a button appears
I am using the on click function
It works fine on my touch screen laptop but not on my iOS phone or tablet
The overlay appears on first tap, but when I tap again it does not disappear unless I tap another grid image.
I would like it to disappear on 2nd tap
I have tried various ways of making this work, and the closest I have got it for it to disappear when another grid image is tapped
Here is my code:
HTML
<div class="col-xs-12 col-sm-7"><div class="image-wrap">
<div onclick="on()">
<img src="assets/images/pic.jpg">
<div class="overlay blue">
<h3>Portfolio item 1</h3>
<hr>
<p><strong>Coming Soon</strong><br> some overlay text here</p>
<br>
View Website
</div>
</div>
</div>
</div>
JS
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
CSS
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
}
I initially tried this with just CSS which gave me the desired result on all devices apart from iOS!
So I have decided to use the on click function to be more sure it works on all devices. I added the on click function to my existing code which I wrote to be used with CSS, but as I am rather new to JS I am wondering if I have it in the wrong place (the on-click)? I have tried lots of variations but this is the best I can get it to work
Any ideas of suggestions on how I can make the overlay disappear on the 2nd click would be great!
js fiddle
https://jsfiddle.net/49h450g9/14/
Please note: This works fine on touch-screen laptops, just not mobiles!
Thanks!
Your functions on and off on jsfiddle example are not working at all. What happening is your hover effect on normal screen which as the behavior of mobile work like focus on mobile device.
Moreover, from your description here I believe that you have more than one portfolio on your project. So you have several element with the id overlay and multiple use of same id is not validate for html and also will cause JavaScript error.
To let your project work properly follow my list below:
Make sure you have jQuery added on your project (generally before </body>)
Now let us thinks of these portfolio item below
<div class="portfolio">
<img src="images/portfolio-1.jpg" alt="...">
<div class="overlay">Link</div>
</div>
<div class="portfolio">
<img src="images/portfolio-2.jpg" alt="...">
<div class="overlay">Link</div>
</div>
<div class="portfolio">
<img src="images/portfolio-3.jpg" alt="...">
<div class="overlay">Link</div>
</div>
Then give the normal hover css styles inside media query like this. So that it never effect your js styles (I decide medias less than 992px as mobile device):
.portfolio{
background-color: #f1f1f1;
position: relative;
}
.portfolio .overlay{
background-color: rgba(0, 0, 0, 0.7);
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: all 0.3s ease;
width: 100%;
height: 100%;
}
#media all and (min-width:992px){
.portfolio:hover .overlay{
opacity: 1;
}
}
Now with jQuery you can use event while user click any of the .portfolio item and toggle a class on it by which we will add further css to it:
$(document).ready(function(){
'use strict';
$(.portfolio).on('click', function(){
$(this).siblings('.portfolio').removeClass('hovered');
$(this).toggleClass('hovered');
});
});
Now it will add hovered class on 1st click and remove the hovered class on 2nd click. Also it will remove .hovered from other portfolio items. Now add the same css to it as the hover effect:
.portfolio.hovered .overlay{
opacity: 1;
}
Try this:
$("*").on("click, touchend", function(e) { $(this).focus(); });
or to achieve the opposite;
$("*").on("click touchend", function(e) { $(this).hover(); });
However the hover event doesn't work well on ios or other mobiles.
Another suggestion is to try replace any css using
:hover with :active.
I wanted to make the navbar to stay displaying, not until i left my pointer hovered to that portion. What happens is that if I hover my pointer to the navbar, the display keeps getting toggled (displaying in then hiding.. it's on loop?) I just want it to stay. Then hide again when my pointer left
<script>
$(document).ready(function(){
$(".menu-trigger").hover(function(){
$("li").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('show','');
});
});
});
</script>
img {
padding: 0px;
max-width: 100%;
max-height: auto;
}
.menu-trigger {
pointer: cursor;
display: block;
position: fixed;
font-family: Sans-serif;
font-size: 15px;
background-color: #664c7d;
height: 35px;
width: 100%;
}
li{
display: none;
}
li.navbar ul {
}
}
div.nav-expanded {
display: block;
}
Your code has a few errors and it is not entirely clear what you are trying to accomplish (.css('show', '')?).
I assume that what you need is an element that will toggle its class when hovered and will change back to its original state when it is not hovered anymore.
What you need to do, is toggle the class of your navigation bar every time your mouse goes over the element and out of it.
Assuming $nav is your navigation bar, you can use:
$nav.on('mouseover mouseout', function(){
$nav.toggleClass('show');
});
Alternatively (and arguably safer):
$nav.on('mouseover', function(){
$nav.addClass('show');
}).on('mouseout', function(){
$nav.removeClass('show');
});
You can see usage in this JSFiddle.
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
Hello I want help to close the toggle option when document is loaded, but if you try my current code you will notice that the #A is visible when page is loaded, also i tried all other ways to hide it but on every solution i used it automatically hides the toggle button/link please help me to find a way to initially close the toggle here is my code
html
<div id="A">SideBar</div>
<div id="B">Toggle</div>
JavaScript
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});
CSS
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 250px;
bottom: 0px;
background:#404041;
z-index:999999;
}
#B {
top: 0px;
left: 250px;
right: 0;
bottom: 0px;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}
Not sure if this is what you are looking for, but your question is a bit unclear.
Just call toggle on the #A on load.
Here is a fiddle
e.g.
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#A').toggle();
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('');
$('#B').toggleClass('extended-panel');
return false;
});
});