Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am completely new to the jquery scene, and so am having some trouble trying to figure this out. My problem is:
I am creating a website for a project, and this website is based of a square (700px by 700px) that has been divided into 4 smaller squares - all 350px by 350px.
What I want to do is have each of these smaller squares have a panel covering them, that when clicked, move away to reveal the content behind them. The two panels on the left side would slide to the left and disappear, and the two on the right would slide to the right and disappear.
If possible I would like only one panel to disappear at a time. So as one would click a new panel, the previous one would slid back into position, hiding its content again.
Any help would be greatly appreciated!
There are many ways to do the sort of thing you're interested in. CSS transitions have already been mentioned. I've included a working example but it is very basic - it should get you moving in the right direction. Please take a look at the links below - they've got a lot of great information.
If you have four elements, and the main function of the covers is just to cover, you could use :after (or :before) CSS pseudo-elements. Here's what that HTML markup could look like if your panels were li elements:
<ul>
<li id="panelOne">One</li>
<li id="panelTwo">Two</li>
<li id="panelThree">Three</li>
<li id="panelFour">Four</li>
</ul>
Since the covers are only there to hide your four panels and they're pseudo-elements, you'd style them in your CSS. You could start by styling your HTML elements:
ul {
display: block;
background: black;
width: 700px;
height: 700px;
margin: 0 auto;
}
li {
float: left;
position: relative;
background: white;
border: 1px solid black;
width: 350px;
height: 350px;
}
Then style your :after covers:
li:after {
display: block;
/*the background color is just to make the covers more visible */
background: red;
position: absolute;
top: 0;
left: 0;
width: 350px;
height: 350px;
content: "";
}
If you use jQuery to add a class (for example, ".clicked") to one panel at a time, you'd style the .clicked pseudo-elements so they move to the left or right:
li#panelOne.clicked:after, li#panelThree.clicked:after {
-webkit-transform: translateX(-350px);
-moz-transform: translateX(-350px);
-ms-transform: translateX(-350px);
-o-transform: translateX(-350px);
transform: translateX(-350px);
}
li#panelTwo.clicked:after, li#panelFour.clicked:after {
-webkit-transform: translateX(350px);
-moz-transform: translateX(350px);
-ms-transform: translateX(350px);
-o-transform: translateX(350px);
transform: translateX(350px);
}
And use jQuery to add or remove the class:
$( 'li' ).click(function(){
//first remove the class from ALL panels
$( 'li' ).removeClass( 'clicked' );
//then add to the panel that's been clicked
$(this).addClass( 'clicked' );
});
And one more step: since you want the covers to slide to the left or right, you'll need to add CSS transitions to achieve that. You'd place them in your :after pseudo-element styles:
-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;
And here's how that would all look in a jsfiddle: http://jsfiddle.net/rt9d5/10/embedded/result/
Try using the Jquery UI Accordion http://jqueryui.com/accordion
You can create multiple collapsible panels and set whether it to have one panel open at a time (or multiple if you want).
My Suggestion would be to look at this, do a little research, and if you have any more questions post a more specific question on stackoverflow.
Related
First of all, I'm using Volusion. Here's my website: www.gtsimulators.com
So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:
I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.
Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.
I do have access to the main html, css and js files.
I will be glad to provide more information if needed.
Please help. Thanks!
UPDATE:
First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.
Just added this code into my CSS file and it worked perfectly:
.vnav__subnav, .overlay{
transition: opacity 0.2s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
transition-delay: .5s;
}
Again, thanks Adam for the prompt response.
Try something like this
(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)
<style>
a{
color:black;
transition:color 0s;
transition-delay:0;
}
a:hover{
color:red;
transition-delay:0.5s;
}
</style>
Well i wanted to show you generic usage.
You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)
<style>
.vnav__subnav, .overlay{
transition: opacity .5s, max-height 99s;
display: block!important;
opacity: 0;
pointer-events: none;
max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
opacity: 1;
pointer-events: auto;
max-height:9999px;
transition: opacity .5s, max-height 0s;
}
</style>
This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)
I have three divs on the same line. You can check the example here: http://yoyo.ro/abw just scroll to the bottom of the page to the three boxes: Made to Measure, Instagram and Video Tracking.
When I click the left one, I want the other two to slide to the right and some text to appear. I tried to do it, but it seems that I complicated it so much and it isn't even smooth.
function hideTest(){
$(".instagram").addClass("slideout");
$(".videotracking").addClass("slideout");
$(".instagram").animate({left:"150%"},500);
$(".videotracking").animate({left:"150%"},500);
}
function showTest(){
$(".instagram").animate({left:"33.3%"},500);
$(".videotracking").animate({left:"66.6%"},500);
$(".instagram").removeClass("slideout");
$(".videotracking").removeClass("slideout");
}
$(".madetomeasure").on('click',function(){
var testwidth = $(this).find(".vc_btn3-container").width();
$(this).find(".vc_btn3-container").css("width", testwidth);
if(!$(this).hasClass("openslide")){
hideTest();
$(".madetomeasure").addClass("openslide");
$(this).find(".txtbox").animate({left:0},500);}
else {
$(this).find(".txtbox").animate({left:"-100%"},500);
$(".madetomeasure").removeClass("openslide");
showTest();
}
});
here is the css relevant to the JS
.txtbox{
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 66.5%;
display:none;
left:-100%;
padding:0px 15px;
float:left;
position:relative;}
.instagram, .videotracking{position:static;}
.instagram {left:33.3%;}
.videotracking{left:66.5%;}
.instagram.slideout{position:absolute;}
.videotracking.slideout{position:absolute;}
.madetomeasure .button{
z-index:1;
height:300px;
background: url(http://yoyo.ro/abw/wp-content/uploads/2016/02/instagram.jpg) 100% 30% !important;
border: none !important;}
.madetomeasure.openslide {width:100%;}
.madetomeasure.openslide .wpb_wrapper {display:flex;}
.madetomeasure.openslide .txtbox {display:block;}
Thank you so much for the patience... :) I really appreciate it
As far as I know, your problem of smoothness is because:
jQuery change the inline styling of the animated element per frame. That is a lot of work and you can actually see the action if you inspect your element when it's animating.
CSS does poorly on animating left and right. There are many articles about this but here's one if you don't want to search: https://css-tricks.com/tale-of-animation-performance/
The Solution
Fiddle: https://jsfiddle.net/kv5twc64/1/
The solution is very common, and is used by many CSS libraries, a trick using .active, CSS animation and some JS.
Here I used the transition property for .card:
.card {
display:inline-block;
float:left;
max-width:33.333%;
position:relative;
cursor: pointer;
transition: 0.5s all ease-out;
}
If you don't know, transition will create a tweening effect when the elements' property has changed.
And here is the trick: By using ~ selecting the siblings in CSS and the transform property:
.card.active .desc {
transform: translateX(0);
}
.card.active ~.card {
transform: translateX(66.666vw);
}
There are several upsides on using CSS in this case:
You can simplify your JS. The JS became:
$(function(){
$(".card").eq(0).click(function(){
$(this).toggleClass("active");
})
})
You can improve webpage performance
You can have more choices on (simple) easing functions in CSS (jQuery only offers "swing" by default). Check this out: http://easings.net You can do something like this:
transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
Hope this can help. But the lesson here is: Use CSS rather than JS when you can!
P.S. 66.666vw means 2/3 the width of the viewport width.
I want to implement the fade and scale effect shown here:
http://tympanus.net/Development/ModalWindowEffects/
but for a page (with width and height of 100% of the browser) not a modal.
How can I do that using jquery or css? I tried copying the code on the page but it works best for modals not for pages that have width and height of 100%.
On the page are elements with minimum width of 1024px.
Updated the jsFiddle to show it containing elements that are at least 1024px.
You'll want to put your entire page into a wrapper element, and then give it the animation class on DOM Ready.
The CSS will be something like:
body,html{
height:100%;
margin:0;
}
.page-wrapper{
height:100%;
overflow:auto;
overflow-y:auto;
overflow-x:hidden;
transform:scale(0);
opacity:0;
transition: transform 1s ease, opacity 1s ease;
}
.page-wrapper.fade-and-scale{
transform:scale(1);
opacity:1;
}
And the jQuery will be something like this:
$(document).ready(function(){
$('.page-wrapper').addClass('fade-and-scale');
});
This solution has the benefit of:
"Growing" from the centre of the page, and falling back gracefully on older browsers
Falling back gracefully on older browsers
Not animating any fundamental css properties (ie. width or height)
Fiddle: https://jsfiddle.net/gk5c08rc/4/
Did you mean something like this?
https://jsfiddle.net/rn8ho7wL/
Wrap your page in a wrapper, and set a smaller (or whichever style you like to go FROM) into the base styles for that wrapper. Add in a transition-duration property.
#wrapper {
transition: all 2s;
-webkit-transition: all 2s;
width: 10%;
height: 10%;
background: red;
margin: 0 auto;
opacity: 0;
}
Then, define a class where you want the page to go TO. Styled the same way.
#wrapper.open {
width: 100%;
height: 100%;
opacity: 1;
}
And in your javascript file (assuming jQuery is loaded), simply apply the style.
$(function(){
$('#wrapper').addClass('open');
});
Bear in mind that CSS3 transitions are not supported by IE9 and below, and also require some vendor prefixes to be largely compatible. For using the transform, as described in another answer, apply the following:
-webkit-transform: scale(0); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
-ms-transform: scale(0); /* IE 9 */
transform: scale(0);
Edit:
The issue with the min-width can easily be solved by adding overflow: auto to your wrapper element.
https://jsfiddle.net/rn8ho7wL/2/
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
I have been looking around the internet for a while to find a good library or way of making a mobile full width/height div
And when I click a button it swipes to the right revealing another div
with new content, and pushing the current div to the left ( or right )
The blue box is my viewport, mobile in this case
Here's a crappy illustration to show what I mean
I have tried using CSS ( with semi-success ) I can reveal another div using
.slide {
position: absolute;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out;
}
#slide-options {
background: #eee;
transform: translate(100%, 0);
}
#slide-options.active {
transform: translate(0,0);
}
But it's just sliding over the 1st div, not pushing it along
Any idea's or existing libraries?
Thank you!