I'm running into an issue where I am attempting to get inline-block elements to display: none on page load, but then I want them to fadeIn one by one in their original inline-block form. However, when I do a normal jQuery fadeIn the elements display as block.
My jQuery is like this right now:
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500);
$('.fadeBlock2').delay(400).fadeIn(500);
};
CSS
.dark-blue-box, .light-blue-box {
height: 50%;
width: 25%;
display: inline-block;
/*display: none; ********I replaced the inline-block with this.
vertical-align: top;
padding: 0;
margin: 0;
transition: all .8s ease-in-out;
}
Is there something I can do to the jQuery to get these to fadeIn as inline-block elements?
You can try this,
$(document).ready(function(e) {
$('.fadeBlock').css('display','none');
blueBoxDelays();
function blueBoxDelays(){
var delay = 0;
$('.fadeBlock').each(function(i){
$(this).delay(400+delay).fadeIn(1000);
delay = 400*(i+1);
});
};
});
.fadeBlock {
height: 100px;
width: 100px;
display: inline-block;
}
.dark-blue-box{
background-color: blue;
}
.light-blue-box{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
DEMO
Note:
Remove the opacity from .dark-blue-box, .light-blue-box
you could achieve the desired result by using opacity with transition property.
initially it'd be
.fadeBlock1 {
opacity:0;
transition: all 0.5s ease-in-out;
}
$('.fadeBlock1').css('opacity','1');
Do you want something like this??
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.dark-blue-box{
display:inline-block;
border:1px solid #19248c;
background-color:#19248c;
height:50px;
width:50px;
}
.light-blue-box{
display:inline-block;
border:1px solid #6699cc;
background-color:#6699cc;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div class='dark-blue-box'>
</div>
<div class='light-blue-box'>
</div>
<script>
$(document).ready(function(e) {
$('.dark-blue-box').css('display','none');
$('.light-blue-box').css('display','none');
boxFadeIn();
});
function boxFadeIn(){
$('.dark-blue-box')
.delay(200)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
$('.light-blue-box')
.delay(400)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
}
</script>
</body>
</html>
try this one
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500).css('display','inline-block');
$('.fadeBlock2').delay(400).fadeIn(500).css('display','inline-block');
};
Related
Okay, so I'm basically trying to achieve that if you click div1, the width of this specific div changes to 50%, and all the other divs their widths change to, let say 2%. (see jsfiddle for more clarity)
I've tried to do this by giving them a separate class, so the div being click is Online, the rest of Offline. I thought it might work if I then said something like; if .. hasClass .. do this.
In the end, I've managed to indeed scale the div on click to 50%, but sadly enough I made quite a mess of the rest. I'll include the code, and I hope someone can explain to me how I should proceed. I also thought of an Array but did not know how to move forward with this.
https://jsfiddle.net/6cjmshrq/
1
$(".sliding-panel1").click(function(){
$(".sliding-pane2").addClass("Active");
$(".sliding-pane2").addClass("Offline");
$(".sliding-pane3").addClass("Offline");
$(".sliding-pane4").addClass("Offline");
$(".sliding-pane5").addClass("Offline");
$(".sliding-pane6").addClass("Offline");
$(".sliding-pane7").addClass("Offline");
$(".sliding-pane8").addClass("Offline");
$(".sliding-pane9").addClass("Offline");
$(".sliding-pane10").addClass("Offline");
$(".sliding-pane11").addClass("Offline");
});
2
$(".sliding-panel1").click(function(){
if ( $(this).hasClass("Active") ) {
$(this).animate({
width: '9%',
height: '100%'
});
} else {
$(this).animate({
width: '50%',
height: '100%'
});
}
$(this).toggleClass("Active");
});
3
$(function(){
$('.sliding-panel1').click(function(){
$(".container").children().each( function(){
if (!$(this).hasClass('Active') ){
$(this).animate({
width: '9%'
})
else {
$(this).animate({
width: '50%'
})
};
4
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
elements[i].style.widht='2%';
elements[i].style.height='100%';
}
5
$(".sliding-panel1").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
You can minimize the css your css isnt dry , just use a single default class for the default state and add a class with name .Active in css with the transition property and you dont have to write that much jquery code too to control the width and height, instead you add or remove the .Active class see a demo below if that is how you want it
$(".container div").on('click', function(e) {
var $this = $(this);
$(".container div").filter(function() {
return !$(this).is($this);
}).removeClass('Active').addClass('Offline');
$this.removeClass('Offline').addClass('Active');
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: grey;
}
.panels {
width: 9%;
float: left;
height: 100vh;
background-color: red;
border: 1px black solid;
}
.Active {
width: 50%;
transition: 1s linear;
}
.Offline {
width: 5%;
transition: 1s linear;
}
<div class="container">
<div class="panels">1
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Maybe this is:
$("[class^='sliding-panel']" ).click(function(){ //selector part of class name
$("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all
$(this).addClass("Active").removeClass("Offline"); //for this element
});
Slight adjustment of Muhammad Omer Aslam's answer to account for shrinking the un-clicked divs instead of pushing them off screen (if I'm seeing it right):
script:
$(".container div").on('click', function() {
$(".container div").removeClass('Active');
$(".container div").addClass('Inactive');
$(this).removeClass('Inactive');
$(this).addClass('Active');
});
append to his css:
.Inactive {
width: 2%;
transition: 1s linear;
}
I have a test code like this:
<html>
<head>
<style>
.jeden {
display: none;
color: red;
height: 0px;
}
.dwa {
display: block;
}
.trzy {
color: blue;
opacity: 0.5;
transition: all 2s;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<p class="jeden"> Wczoraj </p>
<button>ddd</button>
<span id="hej">hej</span>
<script>
function dodaj(callback) {
document.getElementsByTagName("p")[0].classList.add("dwa");
alert(1);
alert(2);
callback();
}
function dodajKlase() {
document.getElementsByTagName("p")[0].classList.add("trzy");
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
dodaj(dodajKlase)
})
</script>
</body>
</html>
which I'm playing with, cause I don't understand a certain mechanism. In the above code the transition in trzy class works fine. But if I delete alert(1) and alert(2) the transition doesn't work.
Generaly, I'm trying to solve an issue:
Add a class with a display: block to an element - element appears,
Then add a class with transitions via callback function.
but this model doesn't work (I'm not quite sure I understand callback functions correctly in that case).
You should force a browser redraw in your dodaj function, there are several ways to do it, one would be: element.getBoundingClientRect()
Read more about it here: gist
<html>
<head>
<style>
.jeden {
display: none;
color: red;
height: 0px;
}
.dwa {
display: block;
}
.trzy {
color: blue;
opacity: 0.5;
transition: all 2s;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<p class="jeden"> Wczoraj </p>
<button>ddd</button>
<span id="hej">hej</span>
<script>
function dodaj(callback) {
var element = document.querySelector("p.jeden");
element.classList.add("dwa");
element.getBoundingClientRect();
callback();
}
function dodajKlase() {
document.getElementsByTagName("p")[0].classList.add("trzy");
}
document.getElementsByTagName("button")[0].addEventListener("click", function() {
dodaj(dodajKlase)
})
</script>
</body>
</html>
Little side note: You should force yourself to code in english, so other people can understand your function and variable names.
Wrap the callback into a setTimeout() and it works.
function dodaj(callback) {
document.getElementsByTagName("p")[0].classList.add("dwa");
setTimeout(callback, 100);
}
I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)
Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.
You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>
$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/
Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>
I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.
I had working code until I tried to make the style.css page apply only to a certain div on the index.html file. This is the current code I have: http://codepen.io/anon/pen/LEXxeM
All that I did (which made it stop working) was completely wrap the style.css page in "adder { }", and put all the code in the body in a div tag.
Any ideas as to why this was an incorrect step?
In case codepen can't be accessed, below is the code.
HTML:
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/styleok.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<div class="adder">
<div id="container">
<header>
<h1>Task ListO</h1>
Clear all
</header>
<section id="taskIOSection">
<div id="formContainer">
<form id="taskEntryForm">
<input id="taskInput" placeholder="Add your interests here..." />
</form>
</div>
<ul id="taskList"></ul>
</section>
</div>
</div>
</body>
</html>
CSS
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
adder {
* {
padding:0;
margin:0;
}
body {
background:url('');
background-color:#2a2a2a;
font-family:'Open Sans', sans-serif;
}
#container {
background-color: #111216;
color:#999999;
width:350px;
margin: 50px auto auto auto;
padding-bottom:12px;
}
#formContainer {
padding-top:12px
}
#taskIOSection {
}
#taskInput {
font-size:14px;
font-family:'Open Sans', sans-serif;
height:36px;
width:311px;
border-radius:100px;
background-color:#202023;
border:0;
color:#fff;
display:block;
padding-left:15px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
box-shadow: 0px 0px 1pt 1pt #999999;
background-color:#111216;
outline:none;
}
::-webkit-input-placeholder {
color: #333333;
font-style:italic;
/* padding-left:10px; */
}
:-moz-placeholder {
/* Firefox 18- */
color: #333333;
font-style:italic;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #333333;
font-style:italic;
}
:-ms-input-placeholder {
color: #333333;
font-style:italic;
}
header {
margin-top:0;
background-color:#F94D50;
width:338px;
height:48px;
padding-left:12px;
}
header h1 {
font-size:25px;
font-weight:300;
color:#fff;
line-height:48px;
width:50%;
display:inline;
}
header a{
width:40%;
display:inline;
line-height:48px;
}
#taskEntryForm {
background-color:#111216;
width:326px;
height: 48px;
border-width:0px;
padding: 0px 12px 0px 12px;
font-size:0px;
}
#taskList {
width: 350px;
margin:auto;
font-size:16px;
font-weight:600;
}
ul li {
background-color:#17181D;
height:48px;
width:314px;
padding-left:12px;
margin:0 auto 10px auto;
line-height:48px;
list-style:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
}
JS:
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var taskID = "task-" + i;
$('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#taskEntryForm').submit(function () {
if ($('#taskInput').val() !== "") {
var taskID = "task-" + i;
var taskMessage = $('#taskInput').val();
localStorage.setItem(taskID, taskMessage);
$('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
var task = $('#' + taskID);
task.css('display', 'none');
task.slideDown();
$('#taskInput').val("");
i++;
}
return false;
});
$('#taskList').on("click", "li", function (event) {
self = $(this);
taskID = self.attr('id');
localStorage.removeItem(taskID);
self.slideUp('slow', function () {
self.remove();
});
});
});
Thank you.
Normally for these one off or different pages I would consider adding a style class directly to the body tag, rather than wrapping all the content in an additional div, since it serves no semantic purposes and it is really for styling only purposes.
<body class="adder">
<div id="container">
<!-- other code -->
</code>
</body>
Then add some specific styles for your custom styles pages in the same stylesheet. These need to be declared after the original definition.
/* adder overrides */
.adder #container {
background-color: #0094FF;
}
.adder header {
background-color:#00FF7F;
}
.adder #taskEntryForm {
background-color:#0043FF;
}
Since the style .adder #container is more specific in this instance this is what will get applied. It's a compound set of styles, so first the stlye #container will be applied and then the styles from .adder #container will override anything that is specific in this class.
If you are using Google Chrome then press F12 and you can see the style chain in the Elements tab (as well as change them in that window for learning/demo purposes)
Demo on CodePen
your CSS syntax is incorrect. Unless you were working with SASS in which case it would be ok. Remove adder.
I also see no point to wrapping your CSS in this adder class? It add's nothing HTML/CSS wise. If you explain what you're actually trying to achieve then maybe we can assist a bit more.
Below is a simple example of using css.
#outer{
background-color:grey;
height:100px;
width:100px;
}
#inner{
border:1px solid green;
width:100px;
height:100px;
margin:10px;
}
#outer > #inner{
color:red;
line-height:100px;
text-align:center;
margin:0;
}
<div id="outer">
<div id="inner">
Hello
</div>
</div>
<div id="inner">
Hi
</div>
I have a div with an id outer and two divs with an id inner out of which one is inside the outer div and the other is outside the outer div.
The css for inner div which is inside the outer div is written inside #outer > #inner{}
and the css for both div with an id - inner is written inside #inner{}
I have given a margin of 10 px for inner div but that isn't applied for the one which is inside the outer div.
this happened because the code which is inside #outer > #inner{} is overriding the code which is inside #inner{}
You can target a css based on id using '#' or class using '.' or html elements or Pseudo-class.
you can get a complete reference for css in this link