Not sure where to apply transition CSS for element [duplicate] - javascript

This question already has answers here:
JavaScript - add transition between display:none and display:block
(8 answers)
Closed 2 years ago.
I thought this would be nice and simple; however, I cannot seem to get it to work.
I am trying to get a DIV element to fade in and out depending on if a checkbox is selected, instead of just appearing and disappearing in an instant.
Here is my code:
HTML -
<div id="logPad" name="logPad" class="buttonZ logPad" onclick="remfunc2();"></div>
<div class="logSlider">
<input type="checkbox" name="logSlider" class="logSlider-checkbox"
id="logSlider" tabindex="0" onclick="sliderJS();" />
<label class="logSlider-label" for="logSlider">
<span class="logSlider-inner"></span>
<span class="logSlider-switch"></span>
</label>
</div>
CSS for the 'logPad'-
.logPad {
min-width: 225px;
display: none;
max-height: 200px;
min-height: 15px;
transition: 10s;
}
Now I'm not sure where the transition should be applied, I was thinking through JavaScript most likely, so I have tried a few things, but I am still learning JS and not that great at it.
This is my JS for hiding and showing the logPad div on 'checkbox' toggle, the toggle has been converted into a slider rather than a checkbox, this is done through CSS but I'm not sure this is relevant here as im sure the CSS for the slider is not where the transition for the logPad div will go.
function sliderJS() {
var checkBox = document.getElementById("logSlider");
if (checkBox.checked == true) {
document.getElementById('logPad').style.display = "block";
} else {
document.getElementById('logPad').style.display = "none";
}
}
Please can someone explain where this would be applied? the current transition in the class does not have an effect.

Short answer: you can't transition display.
You can, however transition opacity.
Also, it would be nice to use a class for a hidden state with opacity: 0 and then you can do something like:
document.getElementById('logPad').classList.toggle('hidden', !checkBox.checked);

Related

Jquery this parameter for selecting child not working

I've been trying to change image source on hover, however i can use mousehover function with class name and do this. The challenge here is i'm going to dynamically call more divs with same class name so i'm trying to achieve this using the this method. for some unknown reason i couldn't execute my below code. can anyone suggest what seems to be the problem? Pasting my code below
$(".img_staff").mouseover(function() {
alert(2);
$(this).find('.staffimg:first-child').css("display","none");
$(this).find('.staffimg:nth-child(2)').css("display","block");
alert(3);
});
Both the alerts are working fine just the inbetween 2 lines are not working. i want to achieve this effect like moca tucson site's contact page
https://moca-tucson.org/contact/
I'm trying to recreate the same effect using Jquery
Apart from changing the image, the link that your provided also uses CSS transitions to bring that "image transition" effect.
Here's the similar effect with just CSS, without any javascript.
HTML:
<div>
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_001-800x800.jpg">
<img src="https://moca-tucson.org/wp-content/uploads/2017/05/Ginger_Staff_Photos_002-800x800.jpg">
</div>
CSS:
div img:last-child { opacity: 0 }
div:hover img:first-child { opacity: 0 }
div:hover img:last-child { opacity: 1 }
img {
position: absolute;
transition: 0.3s;
}

Hide CSS Element Without Changing Display Property [duplicate]

This question already has answers here:
Equivalent of jQuery .hide() to set visibility: hidden
(6 answers)
Closed 4 years ago.
I would like to keep a element with initial display preserved but that is hidden (at first). I know there are other methods of hiding an element with CSS, however I also don't want the element to take up space at first. As an example
.target_element {
display: table;
}
// event happens later...
$('.loader').hide()
$('.target_element').show()
Is there a way to accomplish this? I don't want to set display to 'none' and then later come back and set it to 'table' in some JS when I want to show it.
There are several ways. Either you can make the element position: absolute or position: fixed so it doesn't take up any room and then use any of visibility: hidden, opacity: 0, etc. One thing you'd need to look out for is that if they don't have display: none, they can still receive click events, so use pointer-events: none to stop that.
My preferred combination:
#myElement {
position: absolute;
opacity: 0;
pointer-events: none;
}
And then when you want to show it:
$("#myElement").css({
'position': 'static',
'opacity': 1,
'pointer-events': 'all'
})
The bonus here is that you can transition the opacity, as opposed to visibility or display.
display:none; is definitely the way to go, unless I'm misunderstanding your question. If your issue is that .show() switches it to display:block; then just use jQuery to add a class to the element instead.
setTimeout(function() {
$('table').addClass('visible');
}, 2000);
table {
display:none;
}
table.visible {
display:table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
<tr><td>Test</td><td>Test</td></tr>
</table>
How long do you want to hide your element for?
There are various ways to do this, you can set a cookie in your browser or you can use a Javascript function such as setTimeout to display an element after a fixed period of time.
setTimeout( function() {
$("#your_element").show();
}, 5000); // Time in milliseconds
Use a wrapper for hiding and showing your table.
HTML
<div class="target_wrapper">
<div class="target_element"></div>
</div>
CSS
.target_element {
display: table;
}
.target_wrapper {
display: none;
}
JS
$('.target_wrapper').show()
Explanation
.show() sets display: block;. To avoid chanding the property of your table, use a wrapper, that does not depend on that property. It will be simply shown as soon as you trigger $('.target_wrapper').show() and shows up your table correctly.
// styles.css
.e.hidden {
position: 'static',
opacity: 0,
pointer-events: 'all'
}
// main.js
setTimeout(() => {
$('.e').removeClass('hidden')
}, 5000)
// index.html
<div class="e hidden">
...
</div>
How about this?
It sounds like the simplest solution would be to use visibility hidden
.target_element {
visibility: hidden;
}
Based on comments, it seems you don't want to affect your overall layout so this will make the item "invisible" but it will still take up place.

Using Javascript I want a button to show or hide a div by changing the css [duplicate]

This question already has answers here:
toggle show/hide div with button?
(8 answers)
Closed 6 years ago.
Using JavaScript, I want a button to show or hide a div by changing the CSS.
HTML:
<div id="bottomContainer">
<div id="count" class="count">...</div>
<div id="visualizations>...</div>
</div>
CSS:
.bottomContainer {
display: block;
}
I want to use javascript to do the following
[button]
When button is clicked Javascript changes the CSS for bottomContainer to the following
.bottomContainer {
display: none;
}
Is this possible?
Yes, a number of ways. With vanilla JS, you would do something like:
document.getElementById('myButtonId').addEventListener('click', function () {
document.getElementById('bottomContainer').style.display = "none";
}
This is just one of a few ways. You could also make a css rule for a .hide class that has the display: none rule, or do this with jQuery's .hide() method, or any number of framework-based means.
This will work if you only want the button to hide the container and not toggle its visibility.
<button onClick="document.getElementById('bottomContainer').style.display = 'none';">Click me</button>

Responsive design for display:none

Any help with this would be greatly appreciated, I cant work it out.
I have a list of information contained within seperate div
On page load only the title of each div is showing.
<div class='listing' >
<a href="#" onclick="toggle_visibility('interactive');">
<h3 class='title'>Title</h3>
</a>
<div id="interactive" style="display:none;">
<div class="web"><p>#</p></div>
<div class="phone"><p>Tel: #</p></div>
<div class="email"><p>#</p></div>
<p>copy: ipsum blah </p>
<p>Blah Blah</p>
</div>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
onclick toggles the visibility of the content. So far so good.
Say now I start to add some simple responsive design. If on small screen I want one column of div, no problem. If slightly wider I make a media query to adjust the width of the div accordingly.
Say I have 2 columns. If I onclick to toggle visibility it of course still shows the content in the 4 column responsive layout. But I want the unhidden content to now revert to full width (might be lot of content, and looks strange to extend down only half a column). So essentially I need the onclick toggle visibility div to always be full screen width.
Can I do this in css? I've tried styling the 'revealed' div but no joy.
Any pointers would be most welcome???!!!! Im sure its easy but Ive tried everything and Im still learning all this!
I recommend avoiding using JavaScript to change style directly whenever possible. Classes are better for this, and they let you do things like customize the styling via media queries, as well as animating content changes.
First, change your HTML to use a class rather than a hard style:
<div id="interactive" class="listing-item">
Next, change your JS to toggle the class, rather than change the style directly:
function toggle_visibility(id) {
var e = document.getElementById(id);
// Note: classList is IE10+, so you might have to do more work
// to support older browsers
e.classList.toggle('visible');
}
Finally, use CSS to handle the magic:
.listing-item {
display: none;
}
.listing-item.visible {
display: block;
}
#media (...) {
.listing-item.visible {
...
}
}
If you want to get fancy, try some CSS3 styling:
.listing-item {
overflow: hidden;
max-height: 0;
transition: all 0.2s ease-in-out;
}
.listing-item.visible {
// pick something reasonable here, to make sure your
// content is visible. Too high, and the animation will be off.
max-height: 999px;
overflow: visible;
}

Fire CSS3 Transform from Javascript button click

I am new to CSS3 transitions. I am trying to make a image slideshow for webkit only. there are 3 images aligned next to each other inside a wide DIV. This wide DIV is inside a container DIV whoose overflow property has been set as hidden. the width of the container DIV is equal to each Image, hence user can see only one image at a time.
here is the HTML and CSS for that.
HTML
<div id = "imageHolder">
<div id="slide1_images">
<img src="./images/fish.jpg" />
<img src="./images/desert.jpg" />
<img src="./images/space.jpg" />
</div>
</div>
CSS
#imageHolder
{
width: 320px;
height: 240px;
border: 1px solid grey;
overflow: hidden;
position: relative;
}
#slide1_images
{
position:absolute;
left:0px;
width:960px;
-webkit-transition: -webkit-transform 0.5s;
}
Now I have added a CSS hover selector in the code just to test the transition. when user hovers over the image (the inner DIV, to be precise), the whole set moves to left by 320 pixels (which is the width of each image).
CSS for hover
#slide1_images:hover
{
-webkit-transform:translate(-320px,0);
}
Upto this the code works perfectly, when I hover mouse over the first image, the set moves left and the 2nd image fits perfectly in the outer DIV.
What I want is, to perform the same action on Javascript button click. I have added a button called btnNext in my page. How can I fire the translate from the button click event? I tried the below but it does not work.
Javascript
<script type = "text/javascript">
function btnNext_clicked()
{
document.getElementById("slide1_images").style.-webkit-transform = "translate(-320px,0)"
}
</script>
I am sure I have done something stupid! could you please help me out fixing the Javascript function? Thanks a lot in advance :)
With the obvious caveat its for webkit browsers only you just need to use
.style["-webkit-transform"] = ..
as - cannot be used in an inline propery name here: style.-webkit-transform
From JavaScript you can access -webkit-transform property in this way:
var style = document.getElementById("slide1_images").style;
style.webkitTransform ='translateX(-320px)';
You can make it cross-browser friendly by accessing following properties:
transform
webkitTransform
MozTransform
OTransform
msTransform

Categories