Im trying to hide a nested p tag when its parents width is 0. essentially I want the nested p tag to follow the parent as its width approaches 0, as well as when it expands. I'm sure its something simple, thanks for any help in advance.
Fiddle
HTML:
<div class="container">
<div class="floater1">
<p id="icon">X</p>
</div>
<div class="floater2">
<p>This is a test</p>
</div>
</div>
<button>click</button>
CSS:
.container {
width: 100%;
height: 35px;
border: 1px solid #000;
}
.floater1 {
float: left;
width: 0px;
height: inherit;
background: red;
text-align: center;
transition: width 200ms ease-in-out;
}
.show {
width: 30px;
}
.floater2 {
height: inherit;
background: yellow;
overflow: hidden;
padding-left: 15px;
}
p {
margin: 0;
line-height: 35px;
}
JS:
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
You have to set the overflow:hidden; property to ".floater1" class. So that the p tag will be hidden when the parent width is 0.
var trigger = $('button');
var deleteBtn = $('.floater1');
trigger.click(function(){
console.log("hello")
deleteBtn.toggleClass('show');
})
.container {
width: 100%;
height: 35px;
border: 1px solid #000;
}
.floater1 {
float: left;
width: 0px;
height: inherit;
background: red;
text-align: center;
transition: width 200ms ease-in-out;
overflow:hidden;
}
.show {
width: 30px;
}
.floater2 {
height: inherit;
background: yellow;
overflow: hidden;
padding-left: 15px;
}
p {
margin: 0;
line-height: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="floater1">
<p>X</p>
</div>
<div class="floater2">
<p>This is a test</p>
</div>
</div>
<button>click</button>
See the working fiddle here
https://jsfiddle.net/davidsekar/7uk9n0ev/
Add the overflow hidden to .floater1
.floater1 {
overflow: hidden;
}
https://jsfiddle.net/murtoza/7jusow54/1/
just add these to your css:
.floater1 p {
opacity: 0;
transition: opacity 250ms ease;
}
.floater1.show {
width: 30px;
}
.show p {
opacity: 1;
}
hope this can help!
Related
I am trying to make a game and I have been trying to get the character button to disappear and reappear on click. I think the if else statements is the best way to do it but I am probably wrong because I am new to javascript. I managed to make it disappear but couldn't make it appear again on click
html:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display="block" == true) {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
css:
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
By applying a display:none to the button ( as your code and the other answers do ) means that once the button is hidden there will be nothing to click a subsequent time to unhide the element. Did you instead intend something akin to the following which sets a visibility property rather than display so that the animation is not reset each time?
document.querySelector('button#character').addEventListener('click', function(e) {
this.parentNode.querySelector('#block').classList.toggle('hidden');
});
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
}
.hidden{visibility:hidden}
div:before{content:attr(id)}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Alternatively to hide the button itself the opacity property might be more suitable as the button still occupies the space but is merely invisible so can be clicked a second time to reveal itself?
document.querySelector('button#character').addEventListener('click', function(e) {
this.classList.toggle('hidden');
});
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
display: block;
transition:ease-in-out all 250ms;
}
.hidden {
opacity:0
}
div:before {
content: attr(id)
}
<div id="game">
<div id="block"></div>
<button id="character"></button>
</div>
Try this:
<body>
<div id="game">
<div id="block"></div>
<button id="character" onclick="myFunction()"></button>
</div>
<script>
function myFunction() {
if (document.getElementById("character").style.display==="block") {
document.getElementById("character").style.display="none";
} else {
document.getElementById("character").style.display="block";
}
}
</script>
</body>
</html>
What are you going to click in order to show the hidden box,since you have made it disappear ?
I created this snippet below to explain the logic you could follow in order to toggle between visible and hidden black boxes,you definitely need to click something to initiate visibility for the desired elements so i created a button for that.
function showElements(arr) accepts an array of id's you want to bring them back to page.
.black-box {
height: 50px;
width: 50px;
background-color: black;
position: relative;
display: block;
margin:5px;
float: left;
}
<html>
<body>
<div id="game">
<div id="block"></div>
<button onclick="showElements(['character','character2'])">SHOW ELEMENTS</button>
<button class="black-box" id="character" onclick="hideThisElement(this)" style="display:block"></button>
<button class="black-box" id="character2" onclick="hideThisElement(this)" style="display:block"></button>
</div>
<script defer>
function hideThisElement(e){
e.style.display = "none";
}
function showElements(arr){
arr.forEach(el => {
let elId = document.getElementById(el)
if(document.body.contains(elId)){
if(elId.style.display == "none"){
elId.style.display = "block"
}
}
})
}
</script>
</body>
</html>
let x = 0;
document.getElementsByTagName('body')[0].addEventListener('click',function(){
let char = document.getElementById('character')
if(x%2 == 0){
x++;
char.classList.remove('show')
char.classList.add('hide')
}else{
x++
char.classList.remove('hide')
char.classList.add('show')
}
})
.hide{
display:none;
}
.show{
display:block;
}
*{
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
#keyframes block {
0%{left: 400px;}
100%{left: -50px;}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
top: 250px;
margin-left: 15px;
position: absolute;
}
<body>
<div id="game">
<div id="block"></div>
<button id="character" class='show'></button>
</div>
</body>
When I was working with focus event and scroll event I saw when I focus an element by TAB key from keyboard at the same time scroll event which I bind with window also gets fired. To accomplish my requirement I have to stop firing scroll event when i focus with TAB key.
Can anyone help me out ?
Thanks in advance for any type of suggestion regarding this issue.
The code snippet is given below :
function toggleSection() {
var elm = document.getElementById("support-bar");
if(elm.style.right === "") {
elm.style.right = "0";
} else {
elm.style.right = "";
}
}
function expandIfNot() {
console.log('Focussed');
var elm = document.getElementById("support-bar");
if(elm.style.right === "") {
elm.style.right = "0";
}
}
document.addEventListener("scroll", function(){
console.log('Scrolled New');
var elm = document.getElementById("support-bar");
elm.style.right = "";
});
body {
height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
div.container {
width: 100%;
height: 100%;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
footer {
position: absolute;
bottom : 0;
width:100%;
}
#support-bar {
display: table;
overflow: hidden;
position: absolute;
top: 50%;
right:-330px;
transition: margin-left ease 0.2s;
}
#support-bar-toggle {
position: relative;
box-sizing: content-box;
display: inline-block;
height: 100%;
width: 35px;
line-height: 35px;
margin-right: -1px;
padding: 25px 0;
color: white;
text-transform: uppercase;
background: #42b4e6;
border: 0;
cursor: pointer;
z-index: 0;
}
#support-bar-toggle > span {
display: inline-block;
color: #fff;
white-space: nowrap;
font-size: 16px;
text-transform: uppercase;
font-weight: normal;
-webkit-transform: translate(0, 100%) rotate(-90deg);
-ms-transform: translate(0, 100%) rotate(-90deg);
transform: translate(0, 100%) rotate(-90deg);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
#support-bar-toggle > span:after {
content: "";
float: left;
margin-top: 100%;
}
#support-bar-icons {
display: table-cell;
vertical-align: middle;
position: relative;
z-index: 1;
}
#support-bar-icons ul {
display: table;
padding: 0;
margin: 0;
}
#support-bar-icons li {
display: table-cell;
width: 110px;
text-align: center;
text-transform: uppercase;
color: #333333;
line-height: 1.5em;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<header>
<h1>Test Gallery</h1>
</header>
<br/>
<label>Test Label</label>
<input type="text"></input>
<button name="button">Click Me</button>
<div id="support-bar">
<div id="support-bar-toggle" onclick="toggleSection()">
<span>
<span>Google Apps</span>
</span>
</div>
<div id="support-bar-icons">
<ul>
<li>Email</li>
<li>Drive</li>
<li>YouTube</li>
</ul>
</div>
</div>
<footer>Copyright © </footer>
</div>
</body>
</html>
I have created Menu bar and menu icon
What i am trying to do is when hover on menu icon the menu bar should be toggled from left side but it is not working so please help me to do it...
follow the link to Codepen.io
Following is My code
body {
background-color: #F2D7EE;
margin: 0;
padding: 0;
}
.menuico {
background-color: black;
cursor: pointer;
width: 20px;
height: 4px;
margin: 2px;
position: relative;
left: 170px;
z-index: 1;
}
.navmenu {
position: fixed;
background-color: #0E103D;
height: 100%;
//width: 0px;
width: 150px;
color: #F2D7EE;
font-size: 25px;
}
.nav {
margin: 5px;
margin-top: 10px;
}
.mainMenu {
margin-top: 70px;
}
.mainMenu:hover {
cursor: pointer;
}
.menuico:hover .navmenu {
width: 150px;
display: block;
transition: 1s;
}
<div class="navmenu">
<div class="menuico"></div>
<div class="menuico"></div>
<div class="menuico"></div>
<div class="nav">
<div class="mainMenu">AboutMe</div>
<div class="mainMenu">contact-us</div>
<div class="mainMenu">Project</div>
<div class="mainMenu">Blog</div>
<div class="mainMenu">More</div>
</div>
</div>
You can not control ANY element on others hover, only those which are inside the element or after it.
.menu {
width:20%;
left:-20%;
height:100%;
position:fixed;
background-color:red;
transition: left 0.5s ease-in-out;
}
.icon:hover + .menu {
left:0%
}
<div class="icon">icon</div>
<div class="menu"></div>
I'm "required" to make a webpage:
In a page I want a side menu and when clicking each option it shows in the right some content, but without "loading" another page (this would be the easier way, just making a page for each "option" and then just clicking in each button would lead me to that page with the content in the right).
I found this:
<script type="text/javascript">
function toggle(IDS) {
var sel = document.getElementById('pg').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
if (sel[i].id != IDS) { sel[i].style.display = 'none'; }
}
var status = document.getElementById(IDS).style.display;
if (status == 'block') { document.getElementById(IDS).style.display = 'none'; }
else { document.getElementById(IDS).style.display = 'block'; }
return false;
}
</script>
I just added it to the side menu and when each part is clicked it shows what I want :
<div id="sidebar2">
<div>
<h2 class="title">TEXT</h2>
<ul>
<li>TEXT</li>
<li>TEXT2</li>
</ul>
</div>
<div>
And in the content of each "option":
<div id="pg">
<div id="pg0" class="pg">
<h2 class="title">TEXT</h2>
<p><img src="images/test.png" alt=""/></p>
</div>
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p><img src="images/test2.png" alt=""/>HERE GOES THE DIV POPUP BUTTON</p>
</div>
I want a button to open a pop up image. It appears toggle() sets everything inside each div to display:none; and when I click only changes to block the outer part. But if I have a div inside, it remains hidden.
I've tried these two codes for the popup:
<div id="test">
<a href="#" class="JesterBox">
<div id="image1"><img src="bg.jpg"></div>
</a>
Image 1
With the corresponding JesterBox definition in CSS:
.JesterBox div {
visibility: hidden;
position: fixed;
top: 5%;
right: 5%;
bottom: 5%;
left: 5%;
z-index: 75;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.JesterBox div:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 74;
background-color: rgba(0, 0, 0, 0);
transition: all 0.5s ease-out;
}
.JesterBox div img {
position: relative;
z-index: 77;
max-width: 100%;
max-height: 100%;
margin-left: -9999px;
opacity: 0;
transition-property: all, opacity;
transition-duration: 0.5s, 0.2s;
transition-timing-function: ease-in-out, ease-out;
}
.JesterBox div:target { visibility: visible; }
.JesterBox div:target:before { background-color: rgba(0, 0, 0, 0.7); }
.JesterBox div:target img {
margin-left: 0px;
opacity: 1;
}
And this other:
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
With its corresponding CSS:
.box {
width: 20%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
I can't make it work. How could I make, for example, the 2nd option (the div class="box") work inside the div?
<div id="pg1" class="pg">
<h2 class="title">TEXT2</h2>
<p>
<div class="box">
<a class="button" href="#popup1">TEXT</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Title</h2>
<a class="close" href="#">×</a>
<div class="content">
TEXT TEXT
</div>
</div>
</div>
I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.
You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});
Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});
Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ