Sliding Panels sitting underneath content? - javascript

This is a follow up on a previous question...I was helped out by Marcatectura (thanks again!) , and this is the example they gave me: http://jsfiddle.net/rt9d5/10/embedded/result/
I decided to change the 'li' elements to 'div' elements, as it works better for my intended design. But as I'm not that well versed in jquery I've done something wrong in trying to get mine to look the same. http://fiddle.jshell.net/faedince/L4L4N/ (Here's a little bit of my code.)
#panelOne:after {
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
content: "";
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
$( '#panelOne' ).click(function(){
$( '#panelOne' ).removeClass( 'clicked' );
$(this).addClass( 'clicked' );
});
The red covers are sitting underneath the white panels, and are too far down the page. As per the example they're supposed to be on top of the white panels. Could someone tell me what I'm doing wrong please?

It looks like you need to add position: absolute to your :after classes (along with the top and left positioning). You can also get away with simplifying your JS a bit. Instead of trying to code for every possible click combination, make one bit of code that can apply to all of them.
Demo Fiddle
CSS: you can replace all of your individual :after css calls with the following.
.bigbox > div:after {
content: "";
position: absolute;
top: 0px;
left: 0px;
display: block;
background: red;
opacity: 0.9;
width: 350px;
height: 350px;
-webkit-transition: -webkit-transform 500ms ease-out 0s;
-moz-transition: -moz-transform 500ms ease-out 0s;
-o-transition: -o-transform 500ms ease-out 0s;
transition: transform 500ms ease-out 0s;
}
JS:
$('.bigbox div').on('click', function(){
$('.bigbox div').removeClass('clicked');
$(this).addClass('clicked');
});

Related

What do I change on JQuery Code to Click Text rather than change on Hover?

I am following the site shown below to create tabs on my Divi Site (on my localhost at the moment) but I was looking for some help in regards to changing the behaviour of the code.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-custom-testimonial-tabs-with-divi-free-download
I have managed to follow the tutorial and this works exactly as shown on the site but I would like to change the behaviour from hover to clicking the blurbs (names) but not sure what part of the jquery I need to change.
The following is the jquery code:
jQuery(function($){
$(document).ready(function(){
$('#testimonial-person-1').addClass('testimonial-active');
$('[id*="testimonial-person"]').hover(function() {
var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);
$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');
$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');
});
});
});
The CSS Code:
.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}
.testimonial-active {
transform: translateX(-10%);
}
[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
cursor: context-menu;
}
[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;
visibility: hidden;
opacity: 0;
}
I would appreciate it, if somebody could guide me in how I can make this change on my site.
Thanks in advance.
Thanks to David for pointing it out.
I have changed the following line:
$('[id*="testimonial-person"]').hover(function() {
and this does what I wanted.
Thank you so much.

CSS transition events extremely slow on IOS

I am developing a single-page Javascript application that runs on desktop browsers and also on mobile devices via Cordova/Phonegap.
I have a slide-out menu that is implemented using CSS transitions. I noticed that it works well on desktop browsers and android. However, on IOS there are serious performance issues. The transition does not appear to start on time, but once it starts the rendering and duration looks fine. The time between starting the transition and the transitionend event is way higher on IOS than other platforms. For example, the duration of the transition is 300ms but I'm not getting the transitionend event for 1500ms. On all other platforms, I get the transitionend event in 325-350ms.
Transitionend Event:
Expected: 350ms
Actual: 1500ms
Platforms:
Cordova 6.3.1
Xcode 8.1 GM Seed
IOS 10.1
Here is the CSS for the menu div. To slide-out the menu, I add the 'open' class. To close the menu, I remove the 'open' class. I've tried transitioning on the 'left' property and 'transform' property, but the results are identical.
/* Nav Menu */
#navmenu {
position: absolute;
top: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
/*
-webkit-transform: translate3d(-100%,0,0);
-moz-transform: translate3d(-100%,0,0);
-ms-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: -100%;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
#navmenu.open {
/*
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 300ms ease;
-moz-transition: -moz-transform 300ms ease;
-ms-transition: -ms-transform 300ms ease;
-o-transition: -o-transform 300ms ease;
transition: transform 300ms ease;
*/
left: 0;
-webkit-transition: left 300ms ease;
-moz-transition: left 300ms ease;
-ms-transition: left 300ms ease;
-o-transition: left 300ms ease;
transition: left 300ms ease;
}
Question: What might be causing the delay in starting the transition, only on IOS platforms? Are there any known solutions to circumvent the problem or speed things up? I have other transitions in the app that take over 5s to start, making the app unusable. I'm hoping the menu solution will apply throughout the app. Thanks for any help or ideas you can provide.
Here is the instrumented Javascript code that I use to open/close the menu...
utilities.addEventListeners(navMenuButtonDiv, function () {
var start = Date.now();
var menuDiv = navMenu.getDiv();
if (menuDiv.classList.contains('open')) {
menuDiv.classList.remove('open');
} else {
menuDiv.classList.add('open');
}
var handler = function (event) {
console.log('Transition: ' + (Date.now() - start));
menuDiv.removeEventListener('webkitTransitionEnd', handler, true);
};
menuDiv.addEventListener('webkitTransitionEnd', handler, true);
};
When moving elements around the screen, you want to maximize performance. Instead of transitioning the left property, you're better off using translation. Using translation, the device will use its GPU to render the onscreen change, on a layer above the DOM. This will result in a smoother, more performant transition.
Have a look at this example. Besides using a transform instead of changing the left property, notice that I removed a bit of redundancy. You don't need to redeclare the transition on the active state.
var open = document.getElementById("open"),
close = document.getElementById("close"),
nav = document.getElementById("navmenu");
open.addEventListener("click", function() {
nav.classList.add("open");
});
close.addEventListener("click", function() {
nav.classList.remove("open");
});
#navmenu {
position: absolute;
top: 0;
left: 0;
width: 90%;
max-width: 400px;
z-index: 20;
height: auto;
background-color: white;
transform: translate3d(-100%, 0, 0);
-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-ms-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
}
#navmenu.open {
transform: translate3d(0, 0, 0);
}
button {
margin-top: 100px;
}
<div id="navmenu">stuff in here</div>
<button id="open">Open Menu</button>
<button id="close">Close Menu</button>

How can I show a element on my site when hovered with only JS?

EDIT:
Hi, I would like to know how could I show a little X or remove icon when a user hovers over the inbox
I tried to hide the remove icon first and then add this effect to a <p> element :hover {display:block;} ,I don't know what I did wrong but it didn't work
http://jsbin.com/zijewohoru/1/edit?html,css,output
Is there anyway I could do it with JS or would it be a lot easier to do it with CSS?
I think something like this is what you are looking for.
/* Hide icon by default */
.box i {
display: none;
}
/* Show icon on containing element hover */
.box:hover i {
display: block;
}
For a fade-in transition, this would work.
.box i {
opacity: 0;
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
transition: opacity .3s ease-in;
}
.box:hover i {
opacity: 1;
}
Add this
.box:hover > i {
display: block;
}
.box > i {
display: none;
}

jQuery hide().slideDown() does not work when I have CSS animations enabled

I'm new to this.
I used jQuery to make three divs (buttons) slideDown at page load. Then I made them expand a little (downwards) when mouseover'd. This worked well in Safari but not in Firefox. So I changed around a few things.
Now I have CSS animations to make them expand on hover and a jQuery function to make them slideDown on load. But this slideDown doesn't seem to work properly.
HTML:
<div class="header">
<div class="button_container">
<div class="header_button home_button">Back to Home</div>
<div class="header_button projects_button">Projects</div>
<div class="header_button resume_button" >Resume</div>
</div>
</div>
CSS:
.header_button {
display: inline-block;
height: 130px;
line-height: 130px;
width: 300px;
background-color: lightgrey;
color: black;
box-shadow: 0 0 10px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
.header_button:hover {
background-color: lightyellow;
height: 140px;
-moz-transition: 0.5s all ease-in-out;
-ms-transition: 0.5s all ease-in-out;
-webkit-transition: 0.5s all ease-in-out;
-o-transition: 0.5s all ease-in-out;
}
Some of the stuff has been copy-pasted from all over Stack Overflow. But now I've got the hover-expand thing working.
jQuery:
$(document).ready(function() {
$('.header_button').hide().slideDown('slow');
});
Convenient jsFiddle.
Updated Fiddle
Check this code,
$(document).ready(function() {
$('.header_button').parent().hide().slideDown('slow');
});
Though you hide .header_button it has parent <a> which is still visible.

Apply JavaScript function to multiple elements

So I'm building a moch website and I'm adding a image zooming thingy with CSS3 and JavaScript, so first here is my code.
HTML:
<img id="img" onclick="image()" class="contentimgleft" src="test.jpg">
CSS:
.contentimgleft {
float: left;
margin: 5px 5px 5px 10px;
background-color: #888888;
width: 25%;
height: 25%;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
transition: all .4s linear;
}
.contentimgleftl {
float: left;
margin: 5px 5px 5px 10px;
background-color: #888888;
width: 97%;
height: 98%;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
transition: all .4s linear;
}
JS:
function image() {
if (document.getElementById("img").className.match(/(?:^|\s)contentimgleft(?!\S)/) ) {
document.getElementById("img").className="contentimgleftl";
} else {
document.getElementById("img").className="contentimgleft";
}
}
Now this works perfectly, until you have more than one image. So what I'm looking for is a better system that achieves the same results. I've tried a couple of things but it keeps coming back to having JavaScript code that works for all the images but zooms each one individually.
.contentimgleft and .contentimgleftl are the same except for the width and height. So I'm hoping there is some way to just change these two styles to individual images with the same JavaScript code?
Also note that the is a class for right floated images as well but I omitted them for simplicity as they are exactly the same.
I tried making a jsfiddle but it didn't like the (/(?:^|\s) bit for some reason.
IDs are unique, although there is nothing to stop you using the same ID more than once in a document. However, if you have a duplicate ID then document.getElementById("img") will usually return the first one - see behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?. So your code will only ever be manipulating the first id="img" element, no matter which one is clicked.
So you should remove the id attribute or have different id attribute values for each image. I doubt that you really need an id so in my example below they have been removed.
If the id is removed, there needs to be a way of making the image() function work on the img that is clicked. JavaScript has (at its core) the concept of scope which we can use to make each function execute on the correct image.
One way to do that is passing the argument this to the onclick function to access the HTML element that is handling the event - see How does the "this" keyword work?
HTML
<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/1"/>
<img onclick="image(this)" class="contentimgleft" src="http://lorempixel.com/50/50/abstract/2"/>
JavaScript
function image(img) {
if (img.className.match(/(?:^|\s)contentimgleft(?!\S)/)) {
img.className = "contentimgleftl";
} else {
img.className = "contentimgleft";
}
}
see demo
To answer the CSS question, yes you can declare the duplicate properties once and depending how you do it, you might need to change the way the JavaScript is matching class names.
If all the <img> elements require the same style, simply use
img {
float: left;
margin: 5px 5px 5px 10px;
background-color: #888888;
width: 25%;
height: 25%;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
transition: all .4s linear;
}
.contentimgleftl {
width: 97%;
height: 98%;
}
But if you want, you can use another CSS class for the common properties, for example
.zoomable {
float: left;
margin: 5px 5px 5px 10px;
background-color: #888888;
width: 25%;
height: 25%;
-webkit-transition: all .4s linear;
-moz-transition: all .4s linear;
-o-transition: all .4s linear;
-ms-transition: all .4s linear;
transition: all .4s linear;
}
.contentimgleftl {
width: 97%;
height: 98%;
}
with the following change to the HTML
<img onclick="image(this)" class="zoomable" src=""/>
However, the JavaScript would need changing to add or remove the contentimgleftl class rather than replace the img's className, because if you just replace it, you will lose all the .zoomable style.
"hasClass" with javascript?, How do I add a class to a given element?,
Remove CSS class from element with JavaScript (no jQuery) might be useful if you decide to use that approach.

Categories