Span up when mouse is on button - javascript

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.

Related

Close popup when clicking on another popup eventListener

I've used eventListener to close popups when I click off them but the popup still shows when I click on another popup. Is there a way to fix this without changing too much of my code?
I'm new to JS so I'm keeping things as simple as possible. Ideally I want to keep the eventListener function because it works really well to close the popups without having to manually close each one, apart from this one thing.
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup.classList.contains('show')) myFunction();
});
var popup2 = document.getElementById("myPopup2");
function myFunction2() {
popup2.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup') && popup2.classList.contains('show')) myFunction2();
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
You're very close, but the way you've written it is making it difficult. We can better solve this using a forEach loop and generic function:
JSFiddle: https://jsfiddle.net/vpr4Lh62/
// constants
const SHOW_CLASS = 'show'
// clears any active popups by removing the show class from all popup texts
// note: could be further optimized by storing the "active" popup in a variable whenver it's clicked, and only unsetting that one in this function
const clearPopups = () => {
document.querySelectorAll('.popuptext').forEach(text => text.classList.remove(SHOW_CLASS))
}
// keep behavior to clear popups when clicking outside of popup
window.addEventListener('click', ({ target }) => {
if(!target.classList.contains('popup')) {
clearPopups()
}
})
// instead of creating click handlers for each popup, we can create them all at once using a forEach loop
// first grab all the popups on the page
const popups = document.querySelectorAll('.popup')
// set a click handler on each popup
popups.forEach(popup => {
// we can also set the event listener on the popup, instead on the entire window
popup.addEventListener('click', ({ target }) => {
// grab the first child, which will be the span
const span = popup.children[0]
// clear all the popups first
clearPopups()
// then set this one to be shown
span.classList.add(SHOW_CLASS)
})
})
This also means we can simplify our HTML:
<body style="text-align:center">
<h2>Popup</h2>
<!-- You should never use onclick, this is old. Click handlers should be set using javascript -->
<div class="popup">Click me to toggle the popup!
<!-- We also don't need the ID here anymore -->
<span class="popuptext">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup again!</span>
</div>
</body>
To keep it as simple and least amount of change (but by far not an ideal solution) is this:
For the window click handlers you need to be able to differentiate between the two popups, currently you are using a .popup class as a check if it's not the closest thing in both cases, so when you click on a second popup, the myFunction() is not executed.
What I added here is new class names to the popups, 'one' and 'two' respectively.
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup one" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<h2>Popup2</h2>
<div class="popup two" onclick="myFunction2()">Click me to toggle the popup!
<span class="popuptext" id="myPopup2">A Simple Popup again!</span>
</div>
</body>
Then in your javascript code you can target them by modifying the selectors ever so slightly:
var popup = document.getElementById("myPopup");
function myFunction() {
popup.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup.one') && popup.classList.contains('show')) myFunction();
});
var popup2 = document.getElementById("myPopup2");
function myFunction2() {
popup2.classList.toggle("show");
}
window.addEventListener('click', ({ target }) => {
if (!target.closest('.popup.two') && popup2.classList.contains('show')) myFunction2();
});
Again, this is by no means a good coding standard nor the best solution but effectively the simplest one with least alteration to the code.
I hope this helps in terms of making sense why the issue occurred in the first place.
This is the solution to your problem.
Mohd Belal Toggle popus JsFiddle
Points covered in this jsfiddle
1. 2 Popus have been taken for now
2. Popus will toggle other popup opened
3. Clicking on area other than popup will close the popup
Hope you got your solution #Joe

How to get div to uncollapse

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>

Selecting child of previous parent jQuery

Lately I've been trying my hand at animation using CSS and jQuery, it went well, however, now I want to do a bit more.
That is, once the user clicks information should show up on top of the image.
At the moment, I just have a few tags on which I perform the animations and class toggles.
My question is, I've thought about doing the following:
<div class= "singleImage">
<img src.... class="actualImage">
<p>text to put over the image</p>
</div>
This would be done per image which means that I'll have about 5 of them with different images.
However, I don't know how to go about selecting the previous element of class "actualImage".
Has anyone got any suggestions?
Thank you
Use the jQuery prev function. Example: Assume you want to select the image previous to the second image:
var foo = $(".singleImage").eq(1);
var bar = $(foo).prev().find('.actualImage');
Fiddle
Try this:
$('singleImage').children('.actualImage').prev();
I'm not sure why you are trying to select the previous element, but you could do something akin to this:
Bind a function to the click event for the element containing your image and caption.
Inside this function, toggle the caption.
Also, bind a click event handler to the body to detect clicks "off" the containing element.
HTML:
<a href="#" class="has-caption">
<img src="http://placehold.it/300x300" />
<span class="caption">This is a caption</span>
</a>
CSS:
a.has-caption { position: relative; }
a.has-caption .caption {
background: rgba(0, 0, 0, .25);
bottom: 0;
color: #fff;
display: none;
height: 20px;
left: 0;
line-height: 20px;
position: absolute;
width: 100%;
}
a.has-caption img { vertical-align: bottom }
JavaScript
$('a.has-caption').on('click', function(e) {
e.preventDefault(); e.stopPropagation();
var self = $(this)
, tmpId = 'toggle-' + Date.now();
self.addClass(tmpId);
$('span.caption', self).toggle();
$('body').one('click', function(e) {
if (!$(event.target).closest('.' + tmpId).length) {
$('span.caption', '.' + tmpId).hide();
self.removeClass(tmpId);
};
});
});
http://jsfiddle.net/83s7W/

Change href when anchor is clicked

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/

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.

Categories