I am using a circular button,
border-radius:50%;
And I have an element inside of my element, in order to make the entire button clickable, and not just the content inside of my element.
When I add padding to the element, it makes it so that the entire button is clickable, but due to the fact that the border-radius is 50%, the corners of the button that shouldn't be clickable, are clickable.
I hope this outlines my problem enough, I'll include a jsfiddle if possible.
https://jsfiddle.net/nmcloota/7c95q1ov/5/
add overflow: hidden; to your parent button, so child's content will be hidden
button {
height:200px;
width:200px;
background-color:gold;
border-radius: 50%;
overflow: hidden;
}
https://jsfiddle.net/nd5po7rg/1/ I updated your fiddle
EDIT:
I applied some more styles to make text more centered
take a look: https://jsfiddle.net/1fd5rksg/19/
Hi If I understand correctly, what you're looking for is something like that:
// Show an element
var show = function (elem) {
elem.classList.add('is-visible');
};
// Hide an element
var hide = function (elem) {
elem.classList.remove('is-visible');
};
// Toggle element visibility
var toggle = function (elem) {
elem.classList.toggle('is-visible');
};
// Listen for click events
document.addEventListener('click', function (event) {
// Make sure clicked element is our toggle
if (!event.target.classList.contains('toggle')) return;
// Prevent default link behavior
event.preventDefault();
// Get the content
var content = document.querySelector(event.target.hash);
if (!content) return;
// Toggle the content
toggle(content);
}, false);
.toggle-content {
display: none;
}
.toggle-content.is-visible {
display: block;
}
button {
height:200px;
width:200px;
background-color:gold;
border-radius: 50%;
cursor: pointer;
}
.with-padding {
padding:50px;
}
<button>
<a class="toggle with-padding" href="#example">
Click me to make my friend appear/disappear
</a>
</button>
<button class="toggle-content" id="example">
I am friend</button>
I hope this will help you.
Related
I'm trying to make a dropdown and riseup banner without using jQuery.
I want it to descend and rise smoothly when the triangle will be pressed, as in the picture. The triangle decorated as text for now (but it can be as button too).
The question is how to change the behavior of an element (triangle) after pushing it several times. If I pressed it for the first time, the banner will dropdown and then the triangle must change its direction to up, and 'Show' will change to 'Hide'. If I pressed it again, the banner will rise up and the triangle must change its direction to go down.
Adding a picture for clarity:
According to muka.gergely I simplified the example for myself:
HTML:
<div class="dropdown-wrapper">
<div class="btn-dropdown">
Show ▼
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
</div>
JavaScript:
<script>
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
/* Changing the name of the 'Banner' is not working */
/* const initialText = "Banner"
/*if (btn.textContent.toLowerCase().includes(initialText.toLowerCase())) {
btn.textContent = 'Hide a Banner';
} else {
btn.textContent = initialText;
}
*/
e.target.classList.toggle('open');
});
})
</script>
CSS:
.btn-dropdown {
position: relative;
cursor: pointer;
padding: 8px 16px;
border: 1px solid gray;
}
.dropdown-content-container {
overflow-y: hidden;
max-height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
max-height: 500px;
transition: all 1.50s;
}
jsfiddle
For your first problem, the smooth transition, just change or remove the max-height properties and replace them with just the height property.
Max-height is not required here and messes with the css transition.
And the second transition property is not needed as it is already defined.
.dropdown-content-container {
overflow-y: hidden;
height: 0;
transition: all 1.50s;
}
.btn-dropdown.open>.dropdown-content-container {
height: 500px;
}
For your second problem of changing the name, well you must put the text you want to change into an element so you can access it directly and only change that label and not all of the element (including the container).
So first we need to change the HTML code (I used span but it doesn't matter)
<div class="btn-dropdown">
<span class="dropdown-content-label">Show ▼</span>
<div class="dropdown-content-container">
<!--Banner-->
</div>
</div>
and then we need to slightly adjust the JS code to fit this HTML adjustment by getting the label and not the whole dropdown element.
const btns = document.querySelectorAll('.btn-dropdown')
btns.forEach(btn => {
btn.addEventListener('click', function(e) {
const initialText = "Show ▼"
const label = btn.querySelector(".dropdown-content-label");
if (label.textContent.toLowerCase() === initialText.toLowerCase()) {
label.textContent = 'Hide ▲';
} else {
label.textContent = initialText;
}
btn.classList.toggle('open');
});
})
I have the following javascript that adjusts my div height when a user clicks trend_exp_bt.
It works fine at the moment. However, if the user clicks trend_exp_bt again, i want to reset the div height (130px).
Please can someone show me how to do this, i've tried to look at toggle function on google but these don't seem to be working for me.
<script>
$('.trend_exp_bt').click(function(){
$('.trending_contain').animate({height:'500'})
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
})
</script>
Maybe toggling a class would work for you?
document.getElementById('trend_exp_bt').onclick = function() {
document.getElementById('exp-panel').classList.toggle('expanded')
}
.panel {
width: 250px;
height: 130px;
border: 1px solid blue;
background-color: lightgrey;
transition: all 0.3s;
}
.expanded {
height: 300px;
}
<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>
If you want to use click handlers, you will have to remove the "expand" handler and add a "collapse" handler after it is expanded. You will have to do the opposite when a user collapses the div element.
function expandDiv() {
$('.trending_contain').animate({height:'500'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
$('.trend_exp_bt').off('click').on('click', collapseDiv)
}
function collapseDiv() {
$('.trending_contain').animate({height:'200'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∨");
$('.trend_exp_bt').off('click').on('click', expandDiv)
}
$('.trend_exp_bt').click(expandDiv);
I'm trying to implement a simple dropdown with a slideDown effect. To build this effect I used a CSS transition applied to the height property.
Problem is that if I press the Tab ↹ key, any targetable element (tab stops) inside the dropdown will be targeted, even when it is hidden as I am not using display: none.
Here's the code:
const button = document.getElementById('button');
const dropdown = document.getElementById('dropdown');
dropdown.style.setProperty('height', 'auto', 'important');
dropdown.style.setProperty('height', dropdown.clientHeight + 'px');
button.addEventListener('click', function(e) {
e.target.classList.toggle('active');
e.target.nextElementSibling.classList.toggle('active');
});
#dropdown {
overflow: hidden;
transition: height 330ms linear;
background-color: lightgrey;
height: 200px;
}
#dropdown:not(.active) {
height: 0 !important;
}
#dropdown.active {
visibility: visible;
}
<button id="button">Click me!</button>
<div id="dropdown">
I should not be accessible with tab when dropdown is hidden
</div>
<div id="info">This link will be focused after three tabs, instead of two: Tab me!</div>
I have tried to modify the code a little bit using the transitionend event to add and remove display: none when the transition ends thus making any targetable elements inside the dropdown untargetable, but this messes up with the starting animation of the transition.
See:
const button = document.getElementById('button');
const dropdown = document.getElementById('dropdown');
dropdown.style.setProperty('height', 'auto', 'important');
dropdown.style.setProperty('height', dropdown.clientHeight + 'px');
dropdown.classList.add('hidden');
button.addEventListener('click', function(e) {
if (!e.target.classList.contains('active'))
dropdown.classList.remove('hidden');
e.target.classList.toggle('active');
e.target.nextElementSibling.classList.toggle('active');
});
dropdown.addEventListener('transitionend', function(e) {
dropdown.classList.add('hidden');
});
#dropdown {
overflow: hidden;
transition: height 330ms linear;
background-color: lightgrey;
height: 200px;
}
#dropdown:not(.active) {
height: 0 !important;
}
#dropdown.active {
visibility: visible;
}
a {
display: block; /* so it doesn't move when dropdown is hidden */
}
.hidden {
display: none;
}
<button id="button">Click me!</button>
<div id="dropdown">
I should not be accessible with tab when dropdown is hidden
</div>
<div id="info">This link will now be focused after <strong>two</strong> tabs, as expected: Tab me!</div>
Try setting attribute "tabindex" to -1, this should prevent link from selecting with tab. You can also simply remove this attribute with JS when dropdown is active
You can modify the element’s tabIndex (-1 to make it untargetable, very high number to make it targeted last). How to ignore HTML element from tabindex?
What I want to do is to dismiss the sidebar when I press anywhere on the screen.
How can it be done? How can I make it so that when I hover over my image, my text would appear instead of it being visible the whole time?
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("toggle").style.position = "static";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("toggle").style.marginRight = "0";
document.getElementById("toggle").style.position = "relative";
}
#toggle {
position: relative;
left: 400px;
font-size: 1.2em;
visibility: visible;
}
#toggle:hover {
color: white;
transition: 0.5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: transparent;
overflow-x: hidden;
transition: 0.5s;
padding-top: 50px;
}
.sidenav a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
<div>
<ul id="topBar">
<li id="ixora">Ixora</li>
<li class="lists">2014</li>
<li class="lists">2015</li>
<li id="toggle" onclick="openNav() ">☰</li>
</ul>
</div>
<div id="mySidenav" class="sidenav">
×
<span class="textImage">Outing</span>
<img src="outing.jpg">
<span class="textImage">Prom Night</span>
<img src="prom.jpg">
<span class="textImage">PortDickson Trip</span>
<img src="pd.jpg">
<span class="textImage">Merdeka</span>
<img src="merdeka%20(2).jpg">
</div>
I honestly think you should be using jQuery here as it's fantastic for DOM manipulation. If for some reason you have to use vanilla js then it's going to be a little trickier.
Adding jQuery to your project is easy and well explained on the jQuery site. Here;s a comparison of selecting an element in js/jquery:
Vanilla JS:
document.getElementById("mySidenav")
jQuery:
$('#mySidenav')
To get things to happen when events happen (i.e. button press, or clicking away from a menu) you set up event handlers.
It's hard to picture from your code as there seems to be CSS missing for #topBar so I can't see your site very well (here's your code running in jsfiddle).
But lets say you have a button with ID of #openToggle. You would set up your sideNav in css with the correct width, height, etc, and leave it as display: none. Then we create an event handler to do something when you click that button:
//event handlers go at the bottom of your js file or script tag
$('#openMenu').on('click', openMenu);
That example is basically saying when the element with ID 'openMenu' is 'clicked' the run the 'openMenu' function - simple! :)
The openMenu function would look something like (basic example):
function openMenu() {
var $menu = $('#sideNav');
$menu.show();
};
A better way would be to have a toggle function that toggles the menu based on whether it's already open or closed:
function toggleMenu() {
var $menu = $('#sideNav');
if (($menu).is(':visible')) { //if it's visible
$menu.hide(); //hide the menu
} else { //else it's hidden
$menu.show(); //so show it
}
};
// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);
With regards to closing the menu when you click away from it, you could bind an event handler to the body of the page and use jQuery's .one() function (runs only once) which will detect if the body is clicked and then run the menuToggle funtion - you'd end up with 2 handlers for this:
// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);
$('body').one('click', toggleMenu);
Alternatively you could have the menu close when your mouse pointer leaves the menu?:
//event handlers
$('#menuToggle').on('click', toggleMenu);
$('#sideNav').mouseleave(toggleMenu);
The mouseleave handler is basically saying, once the mouse pointer leaves the element with ID of 'sideNav' then run the toggleMenu function.
I'm a newb too so my examples may not be great, but I hope I helped at least a little. Hopefully some real javascript devs will be along shortly to add to this or give better examples.
Cheers,
Dave
JQuery
$( document ).onclick(function() {
$("#mySidenav").hide();
}
Reference documentation:
JQuery .on
JQuery .hide
With javascript, you can do the following:
document.onclick = function(e){
if(e.target.id == "mySidenav"){
return false;
}
closeNav();
}
I see that you already have functions to open and close your sidebar,
clicking "anywhere" is the same as "clicking on the body", But I guess that you don't want your sidebar to close when you're clicking on it.
So, here's what you can do :
var myNav = document.getElementById("mySidenav");
myNav.onclick = function(e) {
e.stopPropagation();
}
document.body.onclick = function(e) {
closeNav();
}
So, when you click on your sidebar, you won't click on the body because the event propagation is stopped, and when you click elsewhere, it will close your sidebar.
Hope it helps,
best regards
I have some buttons close to eachother. when hovering on them their child pop out and when hover done the effect is gone.
The problem is with css (:hover) I cant prevent jittery state. so I try to use mouseenter and mouseleave and use stopPropagation function to prevent jittery state when unwanted hover on child trigger parent eventListener.
but it doesnt work, I checked the other answers but dont know what is my problem
here is the link of my work
full code on >> https://jsfiddle.net/fe3m74xn/
var el = document.querySelectorAll('#slideShow_control a');
var slideShow_control_hoverIn = function(e, i) {
e.stopPropagation();
var bool = e.target.classList.contains('hover');
el.forEach.call(el, function(e){e.classList.remove('hover')});
if(!bool) {
e.target.classList.toggle('hover');
}
};
var slideShow_control_hoverOut = function(e, i) {
e.stopPropagation();
el.forEach.call(el, function(e){e.classList.remove('hover')});
};
el.forEach.call(el,function(e){e.addEventListener('mouseenter',slideShow_control_hoverIn,false)});
el.forEach.call(el,function(e){e.addEventListener('mouseleave',slideShow_control_hoverOut,false)});
Forget about event.stopPropagation() and use the pointer-events CSS property instead : it's able to set any element transparent to mouse interactions.
Only use it on the "pop out" element when the <a> is not hovered:
#slideShow_control figure {
/* ... */
pointer-events: none;
}
#slideShow_control a:hover figure {
/* ... */
pointer-events: all;
}
I also added an invisible pseudo-element to the <a> when it's hovered, just to make the link to the "pop out" element if your mouse cursor goes up over it and you want it to stay visible:
#slideShow_control > a:hover:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
left: 0;
top: -20px;
/* background-color: red; */ /* uncomment to understand */
}
Here is the link to your edited Fiddle: https://jsfiddle.net/m6ephL81/