When click CLICK HERE div id photo will set css to top: 300px; left: -400px; transform: rotate(-60deg) how can i add animate into this process ?
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
You can simply add transition:
<script type="text/javascript">
function swipeLike() {
var photo = document.getElementById("photo");
photo.style.top = "300px";
photo.style.transition = "0.4s";
photo.style.left = "-400px";
photo.style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
It depends on which type of animation you want. You can use css3 transition property to animate things.
W3Schools Transition property
Easiest is to define a class with the elements that need to be animated. See below, hope this helps.
function swipeLike() {
document.getElementById("photo").classList.add("anim");
}
#photo {
transition: all 3s;
}
.anim {
top: 300px;
left: -400px;
transform: rotate(-60deg);
}
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div style="transition:all 1s linear;" id="photo">
MOVING
</div>
</div>
Related
I am trying to add a class when you click on a box then remove the class when you click the button. But no class os added or removed.
var leftBox = document.getElementsByClassName("left");
var rightBox = document.getElementsByClassName("right");
function expandLeft() {
leftBox.className = leftBox.className + "zero-width";
rightBox.className = rightBox.className + "full-width";
}
function expandRight() {
leftBox.className = leftBox.className + "full-width";
rightBox.className = rightBox.className + "zero-width";
}
function originalLeft(){
leftBox.removeClass(leftBox, "zero-width");
rightBox.removeClass(rightBox, "full-width");
}
function originalRight(){
leftBox.removeClass(rightBox, "full-width");
rightBox.removeClass(leftBox, "zero-width");
}
<div class="row">
<div class="wrapper flex full-width">
<div class="form_wrapper flex full-width">
<div class="left">
<div class="form_wrapper--left" onclick="expandRight()">
<div><button id="shrink" onclick="originalLeft()">click here</button> .
</div>
</div>
</div>
<!-- END OR RIGHT BOX --
<!-- START OR RIGHT BOX -->
<div class="right">
<div class="form_wrapper--right" onclick="expandLeft()">
<div>
<button id="shrink" onclick="originalLeft()">click here</button>
</div>
</div>
</div>
<!--- END of Right Box --->
</div>
</div>
</div>
The effect should be that when you click one box it expands left and you can click a button and it returns. Vice versa for the other side.
You can use .toggleClass() in jQuery.
maybe this link helps:
https://api.jquery.com/toggleclass/
try this:
document.getElementById("test").addEventListener("click", enlarge);
document.getElementById("btn").addEventListener("click", resume);
function enlarge() {
document.getElementById("test").classList.add("enlarge");
}
function resume() {
document.getElementById("test").classList.remove("enlarge");
}
#test {
width: 100px;
height: 100px;
background-color: green;
margin-bottom: 20px;
}
.enlarge {
transform: scaleX(2);
}
<div id="test"></div>
<button id="btn">
Resume
</button>
I have following HTML code:
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
What I would like is to when hover on "box1"to change background-image to something else. I know that I can't do that with CSS, tried few things with JS, but seems like I'm only able to select parents element, not parents-parent element though. Any suggestions?
document.getElementsByClassName('') can be use to select element by class name.
<html>
<head>
<style>
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("backimage1.jpg");
background-size: cover;
}s
</style>
<script type="text/javascript">
function changeBgMouseOver() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage2.jpg')";
}
function changeBgMouseOut() {
var x = document.getElementsByClassName("background");
x[0].style.backgroundImage = "url('backimage1.jpg')";
}
</script>
</head>
<body>
<div class="background">
<div class="wrapper">
<div class="box1" onmouseover="changeBgMouseOver()" onmouseout="changeBgMouseOut()">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošaca</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
</body>
</html>
Using jquery hover function - changing the background-color :
In your case you can try this with background-image css property
$(document).ready(function(){
$(".box1").hover(function(){
$(this).parent().css("background-color","coral");
}, function(){
$(this).parent().css("background-color","");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
Here is JQ solution for you it's pretty straightforward:
$(".box1").hover(function(){
$('.background').css("background", "url(https://placebear.com/200/300)");
}, function(){
$('.background').css("background", "url(https://placebear.com/300/300)");
});
.background {
width: 100%;
height: 800px;
margin: 0 auto;
background-image:url("https://placebear.com/300/300");
background-size: cover;
}
.box1 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background">
<div class="wrapper">
<div class="box1">
<span class="title">Pozitivan feedback naših klijenata i njihovih potrošača</span><br />
<span class="description">Vrhunski kvalitet naših proizvoda</span>
</div>
</div>
</div>
Just using ".closest()" should be fine, ".parent().parent()" could also be a solution.
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).closest(".background").css("background-image","url('anotherimage.jpg')");
});
});
$(document).ready(function(){
$(".box1").mouseover(function(){
$(this).parent().parent().css("background-image","url('anotherimage.jpg')");
});
});
This is the jquery
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).animate({'transform' : 'scale(0.8)'}, 'slow');
});
layer.on('mouseleave', function() {
$(this).animate({'transform' : 'scale(1)' }, 1000);
});
});
This is the html
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<%= image_tag "233HHH.jpg", class: 'img-profile' %>
</div>
</div>
</div>
It's in rails hence the image_tag.. but I don't understand why nothing is happening when mouse hovers over.
transform is not a property that can be animated using jQuery.
You can use transition to set the animation properties like
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).css({
'transform': 'scale(0.8)'
});
});
layer.on('mouseleave', function() {
$(this).css({
'transform': 'scale(1)'
});
});
});
.project-layer1 {
transition: all ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
There is no need to use scripting for this effect, you can just use the :hover css rule
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
});
.project-layer1 {
transition: all ease 1s;
}
.project-layer1:hover {
transform: scale(0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
In my project every div has a video so I'm trying to check if a div is in viewport, so if it is that video to start playing and if it's not to pause or to stop. I'm jusing jekyll.
For example my html code for only one div looks like this :
<div class="container">
<div class="row">
<input type="button" id="play" value="Play"></input>
<input type="button" id="pause" value="Pause"></input>
<br/><br/>
<div class="col-lg-5 col-lg-offset-1 col-sm-push-6 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Vjetersia</h2>
<div class="lead"><p class="justify"> Vjetersia</p></div>
</div>
<div class="col-lg-5 col-sm-pull-6 col-sm-6">
<div class="gifv-player" id="">
<video preload="none" loop="loop">
<source type="video/webm" src="all_files/1.webm" />
</video>
<img src="example.png" alt="Animated Gif" />
</div>
</div>
<div class="col-lg-3 col-sm-pull-2 col-sm-2"></div>
</div>
</div>
I tried to do it on button click and it works:
$( document ).ready(function() {
player = new GifvPlayer();
$("#play").click(function() {
$('.gifv-player').find('video').show();
$('.gifv-player').find('video')[0].play();
});
$("#pause").click(function() {
$('.gifv-player').find('video')[0].pause();
});
});
but how can i modify it so it can work on stroll if a div is visible to start to play its video ? Any help?
easy quick and dirty example how you could implement it. play/pause like changing colors of the divs ... http://jsfiddle.net/7mkdj4ak/1/
var scrollPosition = $(window).scrollTop();
var windowViewHeight = $(window).height();
var videoWrapHeight = $('.container').outerHeight();
$(window).on('scroll', function(){
scrollPosition = $(window).scrollTop();
playVideos(scrollPosition);
});
$(window).on('resize', function(){
windowViewHeight = $(window).height();
});
var playVideos = function(scrollPosition) {
$('.container').each(function(i){
var thisContainerTopPosition = $(this).offset().top;
var thisContainerBottomPosition = thisContainerTopPosition + videoWrapHeight;
if(
thisContainerTopPosition >= scrollPosition &&
thisContainerBottomPosition <= (scrollPosition + windowViewHeight )
) {
/* div is in view PLaY */
$(this).css('background-color','orange');
} else {
/* div is out of view PausE */
$(this).css('background-color','#afafaf');
}
});
};
playVideos(scrollPosition);
.container {
width: 100%;
height: 100px;
background-color: #afafaf;
margin: 20px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>my Video 1</h1>
</div>
<div class="container">
<h1>my Video 2</h1>
</div>
<div class="container">
<h1>my Video 3</h1>
</div>
<div class="container">
<h1>my Video 4</h1>
</div>
You can refer this demo
.growme {
background-color: #990000;
height: 0;
width: 0;
position: absolute;
filter: alpha(opacity=0);
opacity: 0;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
DEMO HERE
I have this sort of html:
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
Now, here I want to capture div class for the div I will click on.
the function I am trying is but it is not working as expected. It keep giving only first div class:
$(document).ready(function () {
$('.outerDiv').click(function () {
alert($(this).attr('class'));
});
});
The following can get the class name of the exact element on which the click happened.
$(document).ready(function () {
$('.outerDiv').click(function (e) {
alert(e.target.className);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
The problem is about the selector. And opening the selector you have to stop the propagation to not have all parents firing the same event.
Try this:
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.outerDiv, .outerDiv div').click(function (e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
</script>
$(document).ready(function () {
$('.outerDiv ').click(function (e) {
console.log(e.target.className);
});
});
Would work like a charm, plus its better that you use console.log rather than alert to view things
Try this:
$(document).ready(function () {
$('.outerDiv').click(function () {
var className = $(this).attr('class');
alert(className);
});
});
It will alert the class of the div on which the event has been attached to. You will need to bind the events for all the divs you need the class for. And in case you need the class for the parent div, just refer it within the bound function.
If you're looking for a specific class present or not then you can use ".hasClass('className')"
If you want all the classes on the div
$(document).ready(function () {
$('.outerDiv').click(function () {
var className = this.className;
alert(className);
});
});
This is a native JS method, not jquery.
If you want that, on clicking of any div from your page will alert class name for that div, than you Need to bind .click() event on all of div present in your page.
Also prevent your click event to propagate to parent div, so that it will show only current div click class name.
Try this code :
$(document).ready(function () {
$('div').on('click', function(e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
Here is Jsfiddle Demo
jQuery(document).ready(function () {
$('div').on('click', function(e) {
console.log(e.target.className);
e.stopPropagation();
});
});