I have searched for about 2 hours now and I just can't get a hold of this.
I am using bootstrap and I want to have three columns with "col-xs-6" placed next to each other. However, when I click the button, I want the outer column that is visible to collapse in and the column on the other side to show up. The blue column in the middle should not change at all, just the visibility of the outer columns.
I know I could just use display: none but this would not look as smooth as a CSS3 Transition.
The fade Out works perfectly fine, but instead of fading in, the div will just be at 50% width right after the display property has set.
Here is a fiddle:
Fiddle
And here is the Code:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 red fadeIn">
Hello i am the red div
</div>
<div class="col-xs-6 blue">
Hello i am the blue div
</div>
<div class="col-xs-6 green fadeOut is-out">
Hello i am the green div
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-right">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-plus"></span> TOGGLE
</button>
</div>
</div>
</div>
</div>
JS:
$('.btn').click(function(){
var eleForFadeIn;
var eleForFadeOut;
if ($('.green').hasClass('is-out')){
eleForFadeIn = $('.green');
eleForFadeOut = $('.red');
}
else {
eleForFadeIn = $('.red');
eleForFadeOut = $('.green');
}
eleForFadeIn.addClass('fadeIn');
eleForFadeIn.removeClass('fadeOut');
eleForFadeOut.addClass('fadeOut');
eleForFadeOut.removeClass('fadeIn');
setTimeout(function() { doFadeIn(eleForFadeIn); }, 150);
setTimeout(function() { doFadeOut(eleForFadeOut); }, 1500);
});
function doFadeIn(element){
element.removeClass('is-out');
}
function doFadeOut(element){
element.addClass('is-out');
}
CSS:
.red{
background-color: red;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.blue{
background-color: blue;
height: 250px;
}
.green{
background-color: green;
height: 250px;
-webkit-transition: width 2s;
transition: width 2s;
}
.fadeOut{
width: 0px;
}
.fadeIn{
width: 50%;
}
.is-out{
display: none;
}
Thanks in Advance!
Edit: The timeout functions are used because i want the display property to be none at the end of the transition. Yes i tried to build in the transition eventlistener but it did not work... So if you know how to implement int i would appreciate any suggestions :-)
Edit2: Trying to express myself a bit more cleary about my goals.
display:none can't really be animated and that is where your problem lies. Change it to this and all should be well.
.is-out {
visibility: hidden;
padding: 0;
}
The JSFiddle you show doesn't produce three adjacent columns. Regardless, the reason the column takes up 50% of the width after the fade out is because it has the class col-xs-6. This class uses Bootstrap's grid system to size the element to 6/12 == 1/2 the available horizontal space.
If you want three adjacent columns, I suggest using col-xs-4 since 12/3 == 4. After fading out the outer two columns. You should adjust the class of the remaining one to be col-xs-12 instead of col-xs-4 so it will take up the entire horizontal width.
Related
I am using onclick method on a link in order to display a div. However, it doesn't slide, it simply appears. How do I make it appear with a slide effect without using jQuery. The reason I don't want to use jQuery is because I want the page to load as fast as possible.
function view() {
document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
display: none;
}
<header>
<div id="topbar">
<img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
It can be done using Javascript
setInterval() and clearInterval() functions.
See code samples here
JavaScript slidedown without jQuery
You can't apply transition to display property - you can transition scale instead - see demo below:
function view() {
// add a class to show the element
document.getElementById('topmenu').classList.add('show');
}
#topbar {
background-color: yellow;
overflow: auto;
}
#topmenu {
transform: scaleY(0); /* scale to zero vertically */
transform-origin: top; /* set origin to top */
overflow: hidden;
transition: transform 1s; /* apply transition to only scale */
}
#topmenu.show {
transform: scaleY(1); /* scale to full height */
}
<header>
<div id="topbar">
<img src="https://via.placeholder.com/50" style="float: left;">
<span style="float: right;">MENU</span>
</div>
<div id="topmenu">
some text here
</div>
</header>
I'm trying to create a series of sliding divs triggered on press of a button. The idea is that each div will have a thumbnail and some text tied to it. Upon clicking left/right button, the divs will move their position accordingly.
My code can be seen in the jsfiddle below. I'm encountering 3 problems:
1) The "transition: left 2s" rule isn't applying on the first transition effect, it does on the subsequent ones.
2) I'd like the repeat pressing of the corresponding buttons to apply the left property value again so that I can slide the divs repeatedly.
3) Instead of the "right" button re-positioning the "left" property back to 0, I'd like to shift it back in the opposite direction with the previous left property value.
Essentially I'm trying to recreate the slider found on this side.
http://www.euphoriumbakery.com/
Any help or input will be greatly appreciated.
Thank you very much for your help.
https://jsfiddle.net/kshatriiya/g709swLg/1/
window.onload = function() {
$("#left").on("click", function() {
$("#view").css("left", "-262px");
});
$("#right").on("click", function() {
$("#view").css("left", "0px");
});
}
#galwrapper {
width: 650px;
height: 400px;
display: block;
overflow: hidden;
}
#view {
position: relative;
width: 1423px;
transition: left 2s;
}
.col-md {
display: inline-block;
margin-top: 100px;
width: 18%;
}
.thumb img {
opacity: 0.9;
height: auto;
width: auto;
max-height: 150px;
max-width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="galwrapper">
<div id="view">
<div class="col-md">
<div class="thumb">
<img class="img-rounded" src="http://netdna.walyou.netdna-cdn.com/wp-content/uploads/2010/09/retrocake1.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</div>
</div>
<div class="col-md">
<a href="#" class="thumb active">
<img class="img-rounded" src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Strawberry Cake</h4>
</div>
</a>
</div>
<div class="col-md" id="mid">
<a href="#" class="thumb">
<img src="https://i.ytimg.com/vi/dh8ii5sbvyc/maxresdefault.jpg">
<div class="caption">
<h4>Retro Cake</h4>
</div>
</a>
</div>
#view {
position: relative;
width: 1423px;
left:0;
transition: left 2s;
}
Initially make left:0; for the div with id view https://jsfiddle.net/81tqeof4/6/
and for sliding effect get the current left position and update the position.check fiddle for an example
$("#left").on("click", function(){
var leftPosition = parseInt($("#view").position().left) - 256;
$("#view").css("left", -Math.abs(leftPosition));
});
transition works only on an existing property
So initially(in your CSS) you do not have a left property available in your #view. It is only later on a click that your JavaScript adds the left and your transition starts working.
So basically you need to set the left property to a value in your CSS, before your JavaScript takes effect and adds the left
#view {
position: relative;
width: 1423px;
left: 0; //initiate
transition: left 2s;
}
Currently using foundation 6 Off canvas with basic html here
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right">
Menu off canv
</div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-options="marginTop:0;" data-sticky data-sticky-on="small" style="width:100%;">
<div class="top-bar">
<div class="row column">
columns content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The Problem here is when user scrolls and then click on offcanvas menu they get brought to the top ( same thing as foundation's doc ) and when they scroll down again the sticky menu acts really funny.
also the offcanvas menu doesn't stick to the side as the user scrolls, which is what the doc on foundation does as well.
I noticed when toggled there is a is-open class on the big wrapper that does a css translate x
this is what is breaking the sticky from position absolute.
when I switched that class to margin-left: -250px; everything works again.
I was looking on the web but couldn't find anything that is related and was wondering if it is just my html structure being incorect or is that really a bug.
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-position="right" data-force-top="false">
this prevents scroll to top on the button action.
.off-canvas.position-right { position:fixed; right:-250px; top:0; z-index:1; transition:0.5s ease; }
.is-open-right .off-canvas.position-right { right:-0px; }
.admin-bar .off-canvas.position-right { top:32px; }
.off-canvas { background-color: transparent; }
.is-open-right { -webkit-transform: initial; transform: initial; margin-left: -250px; }
.off-canvas-wrapper-inner { transition: margin 0.5s ease; }
.sticky.is-stuck { left:0px !important; transition:0.5s; }
.is-open-right .sticky.is-stuck { left:-250px !important; }
my css restructure to use the good old margin negative.
These changes makes it look just like how it acts before.
In a sequence of animations I have a small bug I can't figure out. I am running delays for different parts of the animation to sequence them in. For those divs, I style them to display:none and then I fade them in after their delay.
Well for this particular animation, I am toggle sliding a "mask" off of it, so not fading anything in like normal. This is causing an overlapping over my other divs to where I thought originally it was a z-index issue well, not that's not the case. The problem is, I am not displaying none because I am not initiallizing it with a fadeIn, so the background-color always shows and disrupts other elements.
This is blue background overtop of the teal is the background-color of the home-learn div....
I need help figuring out how I keep my div home-learn displaying none until the delay has processed and then to display it somwhow.
Here is the code:
#home-learn {
color: #FFF;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 2.3em;
z-index: 99;
display: none;
}
#curtain-div {
width: 100%;
height: 100%;
position: absolute;
background-color: #0085A1;
top: 0;
left: 0;
z-index: 1;
}
$(function(){
$('#home-learn').css('display', 'block');
$("#curtain-div").delay(15800).toggle("slide", {
direction: "right"
}, 1000);
});
<div id="home-learn">
<div id="curtain-div"></div>
Discover more...
</div>
I need to figure out how I can make $('#home-learn').css('display', 'block'); work after the delay.
If you need to see this live, comment below and I will add the site.
UPDATE - ADDED HTML
<div class="blue">
<div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
<span class="hand-text">HELLO</span>
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
<div id="circle-text">We're Optimum<br>Designs</div>
<div class="aqua">
<div id="aqua-text1">We transform ideas...</div>
<div id="aqua-text2">...into reality.</div>
</div>
<div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
<div id="home-learn">
<div id="curtain-div"></div>
Discover more...
</div>
For this question:
I need to figure out how I can make $('#home-learn').css('display', 'block'); work after the delay.
Add the line just after the delay method with queue() method:
$("#curtain-div").delay(15800).queue(function() {
$('#home-learn').css('display', 'block');
}).toggle("slide", {
direction: "right"
}, 1000);
EDIT
To proof this works, I add a fiddle here:
https://jsfiddle.net/4vLLnxt1/
You must to see the blue box appears after the 4 seconds of delay. That works perfectly.
Second EDIT
Due the comments below, try changing with this:
$("#curtain-div").delay(15800).queue(function() {
$('#home-learn').css('display', 'block');
$(this).toggle("slide", {
direction: "right"
}, 1000);
});
Third EDIT
As we talk in comments, all is solved with next parameter. The whole code:
$("#curtain-div").delay(15800).queue(function(next) {
$('#home-learn').css('display', 'block');
next();
}).toggle("slide", {
direction: "right"
}, 1000);
JSFiddle : https://jsfiddle.net/ttpkfs9s/
I have a UI component that should arrange elements into a row and displays them with elements on the left and on the right, with the active element being in the middle:
[1][2][3] [4] [5][6][7][8][9]
So far I have been achieving this by floating elements left and right, while keeping the one in the middle float: none; (this is good enough).
However, way too late into implementing the navigation JS I realised that I've made a huge mistake, and that the actual order the elements are displayed in are as follows:
[1][2][3] [4] [9][8][7][6][5]
Which is a huge problem as these elements are supposed to be clickable /facepalm
Are there any at most not too invasive CSS/HTML options I can use to get the displayed order correct?
EDIT: I missed the part about you needing the active div to always be in the center of the row.
You could contain the div's inside a container, and float the container insted, but that would probably be hard to do.
I took the liberty of changing things up abit, maybe you can use it, maybe u can't.
I set all items to the same width, and made a function for resizing the div's after u click one of the items.
https://jsfiddle.net/ttpkfs9s/1/
html
<div class="row">
<div class="item left">1</div>
<div class="item left">2</div>
<div class="item left">3</div>
<div class="item left">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
css
.row {
height: 150px;
background: blue;
width: 100%;
}
.item {
float: left;
padding: 2.5px;
color: white;
width: 9.4%;
height: 100%;
background: red;
margin: 0 0.3%;
box-sizing: border-box;
transition: 0.7s linear;
}
.active {
color: black;
background: yellow;
}
js
function setWidth(){
if($(".item").hasClass("active")){
$(".item").width("6%");
$(".active").width("40%");
};
}
$(".item").click(function(){
$(".item").removeClass("active");
$(this).addClass("active");
setWidth();
})