I'm beginner in JS and I need to help someone to do one task but I'm stuck.
She need to move element from bottom outside of the screen to the middle of the screen at the display of the page.
She try this but nothing happened:
$(document).ready(function(){
var myimg = $( this ).find(" div ");
//Just trying to move div but nothing
myimg.animate({transform: 'translateY(150px)'}, 800, 'ease')
})
#first {
margin-top: 150px;
margin-left: 170px;
display: block;
float: left;
}
#middle {
margin-top: 150px;
margin-left: 100px;
display: block;
float: left;
}
#last {
background-color:#F16668;
margin-top:150px;
margin-left:100px;
display:block;
width:300px;
height:100px;
float:left;
}
<div id="first">
lama
</div>
<div id="middle">
lama
</div>
<div id="last">
lama
</div>
Can you help me please ?
Thank you a lot !
I hope this helps you understand how to animate with CSS classes and transitions.
setTimeout(function () {
$("#middle").addClass('goUp');
}, 1000); // move up after 1 second
$("#middle").click(function () {
$(this).toggleClass('goUp');
}); // move on click
div {
border: 1px solid red;
position: relative;
transition: all 0.5s;
}
#middle {
display: block;
top: 100px;
}
#middle.goUp {
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="middle">Click to move</div>
Related
I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>
It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>
I want to change the CSS of a div when hovering its parent div.
This is my HTML:
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
Here is the CSS:
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height:1px;
background:#0081C5;
width:126px;
margin-top:67px;
margin-left:40px;
position:absolute;
}
Note: .hover-on-div-1 is the class I use for a JQuery function that changes the image, the <span> is used only for a text-transform and the text-align class is pretty self explanatory.
How do I change the .line1 div when hovering over #box1?
I managed to change everything inside the #box1 div when I hover but not the .line1. Did some search on SO but since I'm a total noob when it comes to JQuery/JavaScript it didn't helped too much.
https://jsfiddle.net/nLg8Lr7x/
You don't need JS for this - your #line1 div is child of #box1 div.
Just add some css like this:
#box1:hover #line1 {
/* Changes for #line1 when #box1 hovered */
}
Here is examle on jsbin.
If you want to do it with jQuery you can make use of mouseover and mouseleave functions to change css like below.
Notes: I suggest you to make use of addClass and removeClass functions instead of setting hard codded css in functions.
$('#box1').mouseover(function() {
$('#line1').css("background", "red"); // change css
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5"); // change back css as it was
});
$('#box1').mouseover(function() {
$('#line1').css("background", "red");
});
$('#box1').mouseleave(function() {
$('#line1').css("background", "#0081C5");
});
#box1 {
height: 295px;
width: 220px;
background-color: #86d1f4;
float: left;
margin-left: 30px;
margin-right: 120px;
margin-top: 55px;
color: #0081C5;
}
#box1:hover {
background-color: #494c5b;
color: #BFB6AF;
}
#line1 {
height: 1px;
background: #0081C5;
width: 126px;
margin-top: 67px;
margin-left: 40px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="hover-on-div-1">
<img src="images/1.png" alt="" />
<div id="line1"></div>
<div class="text_align"><span>Text here</span>
</div>
</div>
I would like to be able to add an animation to this simple query for when the div is transitioned to its new position.
<div class="container">
<div class="left-side-bar">
<div class="long blue" id="1">
1
</div>
<div class="short red" id="2">
2
</div>
</div>
<div class='middle-side-bar'>
<div class='long green' id="3">
3
</div>
</div>
<div class='right-side-bar'>
<div class='short yellow' id="4">
4
</div>
</div>
</div>
the CSS
.left-side-bar{
clear: both;
width: 32%;
text-align: center;
float: left;
margin-top: 1%;
margin-bottom: 100px;
}
.middle-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.right-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.green {
background-color: green;
}
.long {
height: 300px;
}
.short {
height: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
Basically I want the div to be moved to its new place as an animated transition, rather than have it simply appear.
here is the jsfiddle
DEMO
Unfortunately, the replaceWith method does not work with animate in jQuery. Instead, you will probably need to find an alternative method to your solution. Here's one that slowly transitions the red box on top of the yellow box... http://jsfiddle.net/aeyg89rd/4/
I added the following jQuery, note that I used offset() to get the left and top properties of the yellow box, then I moved the red box to those left and top positions using animate() :
$(document).ready(function () {
var num4 = $("#4").offset();
$("#2").animate({ top: num4.top, left: num4.left }, 1000);
});
And I changed some CSS attributes for .red class so that I can move it around with the jQuery code above. More specifically, I changed its position to absolute, and gave it a width dimension:
.red {
position: absolute;
top: 320px;
background-color: red;
width: 150px;
}
I am currently working with a banner ad and the jquery slidedown function.
My desired goal is to simply have the banner slide down after several seconds and cover up the header of my page, until the user either completes the form (or clicks the "x", which I haven't placed yet.
I got it working just fine within the jsfiddle environment, but for the life of me, I can't figure out why it will not "slide down" in my live environment.
Here is my jsfiddle: http://jsfiddle.net/tXumG/13/.
Here is the banner on my live page: http://online.saintleo.edu/the-saint-leo-experience/faculty-spotlights.aspx
Any help would be GREATLY appreciated. Thank you very much.
HTML:
<div class="hidden">
<body>
<div id="blog-subscribe-outer-container">
<div id="blog-subscribe-overlay">
<div id="blog-subscribe-left"><img src="http://online.saintleo.edu/media/150491/blog-logo-
icon.png" /></div>
<div id="blog-subscribe-center"><span style="color: #FF0000; font-family: arial; font-size:
35px">Subscribe Now!</span></div>
<div id="blog-subscribe-right">
<script charset="utf-8" src="//js.hsforms.net/forms/current.js"></script>
<script>
hbspt.forms.create({
portalId: '206683',
formId: '3c8d4d75-6e0e-4d1a-a39d-c2728223e2d9'
});
</script>
</div>
</div>
<div id="blog-subscribe-base">
</div>
</div>
</body>
</div>
----------------------------
JS:
jQuery(function($) {
$('.hidden').delay(4000).slideDown("slow");
});
-----------------------------
CSS:
.hidden {
display: none
}
#blog-subscribe-outer-container {
width: 100%;
position: relative;
}
#blog-subscribe-overlay {
background-color: orange;
position: fixed;
text-align: center;
width: 100%;
z-index: 1;
}
#blog-subscribe-base {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #275d39;
}
#blog-subscribe-left {
float:left;
}
#blog-subscribe-center {
display: inline-block;
margin:0 auto;
padding-top: 45px;
}
#blog-subscribe-right {
float:right;
width: 33%;
padding-top: 10px;
}
#blog-subscribe-inner-container {
width:100%;
text-align:center;
}
I suggest to use Css Transitions
And Then use jquery to add the class to element:
$(document).ready(function() {
$('.blog-subscribe-hidden').addClass('animated');
});
Working Fiddle: http://jsfiddle.net/tXumG/14/
I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
});
It doesn't show anything when I put it my code.
Add this css
<style>
img {
float: left;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#img1 {
background: #b00;
}
#img2 {
background: #c00;
}
#div1 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #077;
left: 10px;
}
#div2 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #0b0;
left: 10px;
}
br {
clear: both;
}
</style>
This js codes
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(e) {
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#img2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
And you HTML
<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>
It should work. Most probably you did not included jQuery library. I added it.
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
Using it should solve your porblem probably.