I came across the following code:
Javascript:
var ElementClicked = document.getElementById(IdClicked);
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
CSS:
div.hidden{
height: 500px;
}
div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
The HTML contains two divs:
<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >
The author calls the JavaScript function with the first div.
I am unable to understand clearly what the JavaScript function is doing. I know what a conditional operator is and how it works.
Can someone explain briefly what the function basically does?
It toggles the hidden class. If the className was 'hidden', it is now ''. If it was anything else, it is now 'hidden'.
The class of variable ElementClicked is being toggled between 'hidden' and '' using a ternary operator ?.
If i explain it line by line than,
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
this conditional operator checks if is is hidden, n if it is changes its state to ''.
Now,
div.hidden{
height: 500px;
}
div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}
is a css code for beautification and setting it as hidden
and the last one is html code where division is having homepage
<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >
var ElementClicked = document.getElementById(IdClicked);
ElementClicked points/refers to the div with id=IdClicked.
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';
If ElementClicked owns the class "hidden", nothing appends. Else code adds class 'hidden' to ElementClicked.
Brief, this code add class hidden to ElementClicked. The element with id=IdClicked gets class hidden when the JS code is executed.
Related
Get guys,
The following code works ok when click the div opens but i need it to close back when click the button again
here is the JS
<script type="text/javascript">
function slide(){
document.getElementById("sliding").style.maxHeight = "1000px";
}
</script>
here is the css
#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}
and the html
<button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button>
<div id = "sliding">
<p>TEST</p>
</div>
could someone help me out making it to hide back the div when clicked on button again?
thanks a ton in advance
Add state to your dynamically changed html.
There are various approaches. The following code uses the value of the css property maxHeight on the div whose visibility is toggled, a property that is changed anyway when turning the text visible.
This is not the cleanest way to do it but will show the principle and keeps changes to the given code minimal:
function slide(){
if (parseInt(document.getElementById("sliding").style.maxHeight) === 0) {
document.getElementById("sliding").style.maxHeight = "1000px";
} else {
document.getElementById("sliding").style.maxHeight = "0px";
}
}
#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}
<button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button>
<div id = "sliding">
<p>TEST</p>
</div>
You could include a check in the function to see what the current maxHeight is and change the state of the maxHeight based on the result. Something like the following using inequality operators in case you decide to change your maxHeight later on.
function slide(){
elem = document.getElementById("sliding");
elemHeight = elem.style.maxHeight;
elemHeight.replace("px", "");
if (elemHeight > "0") {
elem.style.maxHeight = "0px";
}
else {
elem.style.maxHeight = "1000px";
}
}
You can use classList.toggle method.
function slide(){ document.getElementById("sliding").classList.toggle('sliding-show')
}
#sliding{
transition: 0.5s;
max-height: 0px;
display: none;
}
#sliding.sliding-show {
display: block;
max-height: 1000px;
}
<button onclick ="slide()" class="btn btn-primary">ADD COMMENT</button>
<div id="sliding">
<p>TEST</p>
</div>
I've made an element with a button and when you click on it, the second element appears. But I want to change the icon as well when that happens, but I have no clue how to incorporate that into the existing code.
This is my example: https://codepen.io/anon/pen/oRwLeo
I know I can do addClass/removeClass with jQuery, but I'm trying to avoid using it. What do I need to do to accomplish it with JS?
Is it something like:
function addClass(elem, className) {
if (!hasClass(elem, className)) {
elem.className += ' ' + className;
}
}
And how do I add it into the existing code, with FontAwesome icons and their classes? Thanks!
For the code pen example you provided, you can add an id to your <i> tag (<i id="icon">) and include this code in the toggleDiv method to change the icon.
HTML:
<a href="#" onclick="togglediv('item')">
button <i id="icon" class="fas fa-chevron-right"></i>
</a>
JS:
function togglediv(id) {
var div = document.getElementById(id);
div.style.visibility = div.style.visibility == "hidden" ? "hidden" : "visible";
div.style.opacity = div.style.opacity == "0" ? "1" : "0";
var icon = document.getElementById("icon");
icon.classList.toggle('fa-chevron-right');
icon.classList.toggle('fa-chevron-left');
}
Edit: Fix for issues where div does not show up on the first click.
CSS:
.right-side {
background: yellow;
padding: 30px;
display: inline-block;
width: auto;
transition:visibility 0.3s linear,opacity 0.3s linear;
position: absolute;
min-height: 100%;
}
.hide-div {
opacity: 0;
visibility: hidden;
}
.show-div {
opacity: 1;
visibility: visible;
}
HTML:
<div class="right-side hide-div" id="item">
text goes here
<p>text goes here</p>
<p>text goes here</p>
<p>text goes here</p>
</div>
JS:
var div = document.getElementById(id);
div.classList.toggle('hide-div');
div.classList.toggle('show-div');
First, your exemple is not HTML valid.
Best way to reach a goal is to make little steps, I propose you to start with that (put it on codepen).
HTML
<a onclick="test()">button</a>
JS
function test() { console.log('You clicked me'); }
HTML :
<input id ="input"/>
<div id="box"></div>
CSS :
#box{
width: 100px;
height: 100px;
}
JS :
$('#input').on('focus',function(){
$("#box").css('background', 'linear-gradient(red, transparent)')
})
However I want it to fade in so I tried this:
$("#box").css('background', 'linear-gradient(red, transparent)').fadeIn(1500);
And also this
$('#input').on('focus',function(){
$("#box").fadeIn(1500, function(){
$("#box").css('background', 'linear-gradient(red, transparent)');
});
})
But both don't work. Here's a fiddle
Any ideas?
Try to set display property as none initially,
JS:
$('#input').on('focus',function(){
$("#box").css('background', 'linear-gradient(red, transparent)').fadeIn(1500);
});
CSS:
#box{
width: 100px;
height: 100px;
display:none;
}
Technically, fadeIn() will not animate(fade in) an element which is already visible. Also we should not confuse display property with visible property. Even if visible property is set with hidden fadeIn will not work. display : none is the valid one for .fadeIn()
DEMO
The fadeIn() works on hidden elements so you could hide your box using hide() then fadein will works :
$('#input').on('focus',function(){
$("#box").hide().css('background', 'linear-gradient(red, transparent)').fadeIn(1500);
})
Hope this helps.
I'm new and have I think very simple problem to solve.
I have 4 buttons to show/hide each panel. What should I do to prevent child divs from moving to te left while hiding some div?
I prefer them to stay at the initial position.
This is my code:
HTML:
<button class="panel-button" data-panel="panel1">1</button>
<button class="panel-button" data-panel="panel2">2</button>
<button class="panel-button" data-panel="panel3">3</button>
<button class="panel-button" data-panel="panel4">4</button>
<div class="wrapper">
<div id="panel1">1</div>
<div id="panel2">2</div>
<div id="panel3">3</div>
<div id="panel4">4</div>
</div>
JS:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggle();
});
});
CSS:
.wrapper {
overflow: hidden;
width: 420px;
}
.wrapper > div {
width: 100px;
height: 100px;
background: green;
float: left;
margin-left: 5px;
margin-top: 10px
}
Apply css rule opacity = 0; to the div, instead of hiding it.
Like this:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
pnl.css('opacity', pnl.css('opacity') == '0' ? '1' : '0');
});
Solution for clickability issue:
$('.panel-button').on('click',function(){
var pnl = $('#' + $(this).data('panel'));
if(pnl.is(':visible'))
$('<div></div>').appendTo(pnl).width(pnl.width());
else
pnl.next().remove();
pnl.toggle();
});
But still you can use another approach
You can use the visibility property in CSS to achieve this as shown in the below Fiddle link : link
JS Snippet:
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
console.log($('#'+panelId).css('visibility'));
if($('#'+panelId).css('visibility') === 'hidden') {
$('#'+panelId).css('visibility','visible');
}
else {
$('#'+panelId).css('visibility','hidden');
}
});
});
The CSS visibility is designed to keep the space a DOM object occupies, but not actually rendering it. Opacity changes its appearance, but not its behavior (eg. still clickable).
So instead of .toggle(), combine visibility with jQuery's .toggleClass():
jsFiddle solution
$(function() {
$('.panel-button').on('click',function(){
var panelId = $(this).data('panel');// attr('data-panel')
$('#'+panelId).toggleClass('hideMe');
});
});
I've tried every possible combination that I could find but it still doesn't work. I'm trying to select the first, second, third... images and change the CSS properties.
The JavaScript:
$("#slider:eq(0)")filter(img).css("display","none");
$("#slider:eq(0)")filter(img).css("visibility","hidden");
The HTML:
<div id = "slider">
<img id = "slider_img5" class = "slider_image" src = "img/slider_image_5.png" width = "1000px" height = "400px" alt = "slider_image_5">
<img id = "slider_img4" class = "slider_image" src = "img/slider_image_4.png" width = "1000px" height = "400px" alt = "slider_image_4">
<img id = "slider_img3" class = "slider_image" src = "img/slider_image_3.png" width = "1000px" height = "400px" alt = "slider_image_3">
<img id = "slider_img2" class = "slider_image" src = "img/slider_image_2.png" width = "1000px" height = "400px" alt = "slider_image_2">
<img id = "slider_img1" class = "slider_image" src = "img/slider_image_1.png" width = "1000px" height = "400px" alt = "slider_image_1">
</div>
The CSS:
#slider{
position : absolute;
height : 400px;
width : 100%;
border-radius : 3px;
-moz-border-radius : 3px;
box-shadow : 1px 1px 5px #bbbbbb;
-moz-box-shadow : 1px 1px 5px #bbbbbb;
}
.slider_image{
position : absolute;
top : 0px;
left : 0px;
border-radius : 3px;
-moz-border-radius : 3px;
}
#slider_img1 , #slider_img2 , #slider_img3 , #slider_img4{
visibility : hidden;
display : none;
}
I hope someone can help me.
UPDATE 1
Thank you for all the answers but none of them work. I'm calling the function on document ready and it is definitely called (tested with alert(); ). I also preset the styles of all images so they are all hidden except for the first one.
UPDATE 2
Sorry guys, there was a semicolon missing. Thank you for all the help!
You need a space between #slider and :eq(0).
Without the space, it's looking for an element #slider that is the first, instead of the first descendant of #slider.
Note however, that :eq is a jQuery extension to selectors. For better performance you should use $('#slider img').eq(n), allowing the entire (valid) CSS selector to be parsed as quickly as possible, and then using .eq to get the element you want.
Alternatively, use the native CSS :nth-child() syntax instead, i.e. #slider :nth-child(1), but note that this uses numbers starting from 1 instead of 0.
Also, your filter(img) syntax as given is incorrect. It should be chained (i.e. .filter) and the parameter should be a valid selector, i.e. 'img' (with the quotes). However if your real HTML is as shown you don't need the filter because it's a NoOp - the previous function call can only return images.
Ok, you can do this with CSS. From what I understand, you want to display the first image, and hide the others? So add:
#slider_img5{
visibility : visible;
display : block;
}
or
#sider img:first-child{
/* same... */
}
The visibility property is unnecessary here because you're already hiding the element with display: none ...
This should work:
$('#slider img').eq(0).hide();
There's really no need to set visibility: hidden once display: none is already set. But that's more or less what .hide() does.
Should be using .find instead of .filter.
.find('img').css("display","none");