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>
Related
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'); }
I'm trying to do this: when the mouse is on the button, the span's bottom-padding must increase.
This is my button:
<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
<span id="move" class="fa fa-chevron-up"></span></button>
I have tried to add a class, with bottom-padding bigger than the default(3px), with js.
My class:
.set {
padding-bottom:13px;
}
and this is my js:
window.onload = function() {
document.getElementById("myBtn").onmouseover = function() {
document.getElementById("myBtn").classList.add(" set");
}
}
but it doesn't work for me.
Can you help me? (i must do that when the mouse is no longer on button, the span's bottom-padding come back at 3px too) Thank you.
You can simply do it with css:
.btn-circle:hover span{
padding-bottom:13px;
}
Explain
:hover // when mouseenter to elment
You have to do it padding-bottom:13px; instead of padding-bottom=13px;
A possible solution could be the usage of CSS3: https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1.
Instead of manipulating the width, you have to change the padding-bottom value.
Remove space in your class assignment " set" should be "set". You can also set document.getElementById("myBtn") in a variable say elem so that you do not need to repeat the get element again from DOM.
window.onload = function() {
var elem = document.getElementById("myBtn");
elem.onmouseover = function() {
elem.classList.add("set");
}
}
.set {
color: red;
}
<button class="btn btn-success btn-circle" id="myBtn" title="Go to top">
<span id="move" class="fa fa-chevron-up">someIcon</span></button>
Im not completely sure if i get it … i think you want to move the inner span upwards and not increase the padding of the button itself … so:
#myBtn:hover #move {
position: relative;
top: -3px; // or whatever you want
}
You could animate that like so:
#move {
position: relative;
top: 0px;
transition: all ease-in-out 0.3s;
}
#myBtn:hover #move {
position: relative;
top: -3px; // or whatever you want
}
PS: There are many answers here with padding-bottom like in your question. But padding-bottom will affect the parents size ... i think that is not what you want … so top in combination with position: relative seems much more robust.
After clicking the scroll button, the buttons inside tabs div are supposed to be scrolled to the left for a certain amount of pixels, but I sometimes end up with some buttons that are visible only just part of them.
So my question is how do I make sure that the start button inside the visible area of the tabs div is always visible 100%?
I have tried calculating with clientWidth, offsetWidth and many other variables and do not know how to proceed.
FYI, I do not know how many buttons will there be in advance and buttons have a different length.
JavaScript:
function moveLeft(){
var items = document.getElementsByClassName('item');
var wrapper = document.getElementById('tabs')
var clientWidth = wrapper.clientWidth;
var scrollWidth = wrapper.scrollWidth;
for (var i = 0; i < items.length; i++) {
items[i].style.left = '-'+clientWidth.toString()+'px'
}
}
CSS:
#wrapper {
width: 300px;
white-space: nowrap;
}
button {
display: inline-block;
}
#tabs {
width: 300px;
display: inline-block;
overflow: hidden;
}
.item {
position: relative;
left: 0;
transition: left 1s;
margin-right: 20px;
}
HTML:
<div id="wrapper">
<div id="tabs">
<button class="item">Tab1</button>
<button class="item">Tab2Tab2Tab2</button>
<button class="item">Tab3Tab3Tab3Tab3Tab3Tab3</button>
<button class="item">Tab4</button>
<button class="item">Tab5Tab5Tab5Tab5</button>
<button class="item">Tab6</button>
<button class="item">Tab7</button>
<button class="item">Tab8</button>
<button class="item">Tab9</button>
<button class="item">Tab10</button>
<button class="item">Tab11</button>
<button class="item">Tab12</button>
<button class="item">Tab13</button>
<button class="item">Tab14</button>
<button class="item">Tab15</button>
</div>
<button onclick="moveLeft()">></button>
</div>
I would recommend not to go the certain pixel size way but move it by a length of let's say 2 divs. This way you would have to have a counter to see how many times was the event fired to keep track of with which elements' width should you calculate.
So the code would look something like this.
var widthToMove = items[counter*2].clientWidth + items[counter*2+1].clientWidth + 40 //40 for the margin in between
for (var i = 0; i < items.length; i++) {
items[i].style.left = items[i].offsetLeft - widthToMove + 'px';
}
I would not use the clientWidth for this as when you move the elements to the left the width increases. Which would mean that it would move differently everytime it was fired.
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 have a question about how I can dynamically change a href="" in a button.
The jsfiddle below shows a button fixed at the bottom of the viewport starting at the landing page:
http://jsfiddle.net/Hm6mA/3/
The html of the button is like so:
<div class="button">
<a href="#first" class="" style="width: 80px; height: 80px; opacity: 1;">
<img src="img/down.png" alt="down">
</a>
</div>
When it is clicked I want it to scroll to the next section and change the href="" to the following section of the page. So, when it is first clicked, the href will change to #second. It would obviously also need to change when the user manually scrolls past a section.
This is for a single page website. How would I go about such a thing?
Use .prop() to change its value
$(".button").on('click', function(){
$('.button').find('a').prop('href', '#services');
});
Demo
You can use fullPage.js plugin to achieve what you want. Maybe it is faster than coding it from cero :)
Demo fullPaje.js
Page
I am not used to jquery. Here is a pure javascript solution. It surely changes the hash value.
<body>
<div id="sections">
<section id="s100">asdfasd</section>
<section id="s101"></section>
<section id="s102"></section>
<section id="s103"></section>
<section id="s104">asdfasdasdfsdf</section>
<section id="s105"></section>
</div>
<div class="nav-bar">
<a id="next-button" class="button" href="#s100">Next</a>
</div>
<script type="text/javascript">
var sections = document.getElementById("sections");
var nextButton = document.getElementById('next-button');
sections.onscroll = function (evt) {
}
var counter = 100;
var limit = 105;
// closure
nextButton.onmouseup = function (evt) {
var incCounter = function () {
// add your custom conditions here
if(counter <= limit)
return counter++;
return 0;
};
var c = incCounter();
if(c != 0)
this.setAttribute('href', "#s" + c);
}
</script>
</body>
CSS
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
#sections {
height: 50%;
width: 100%;
overflow: scroll;
}
.nav-bar {
margin: 30px 20px;
}
.button {
text-decoration: none;
border: 1px solid #999;
padding: 10px;
font-size: 120%;
}
I have written a small jQuery plugin for that, just pushed it to GitHub. https://github.com/ferdinandtorggler/scrollstack
What you basically want to do is calling
$('.button').scrollstack({stack: ['#first', '#second', ... ]});
You dont even need the link when you call it on the button. So check it out and let me know if it works for you. ;)
Here you can try it and read more: http://ferdinandtorggler.github.io/scrollstack/