I am new to JavaScript and I am trying to write a simple function that will trigger multiple div hovers. Until now I tried with many things but I assume this code will be closer to the solution. If someone could help me I would be really grateful.
$(function() {
$(document).on('mouseenter','.Test1', function() {
if($('.Test2').hasClass('Test2')) {
$('.Test2').toggleClass('Test2:Hover');
}
});
});
.Test1{
position:relative;
width:200px;
height:200px;
background-color:#951159;
}
.Test1:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
.Test2{
position:relative;
width:200px;
height:200px;
background-color:#147852;
}
.Test2:Hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
<div class="Test1">1</div>
<div class="Test2">2</div>
Thanks in advance.
PS: I know that it could be done only with CSS but I need it with Javascript.
It's best to use CSS classes. and add and remove them by javascript.
$(function(){
//reset box
$('.Test1').hover(function() {
$('.Test2').addClass('hover');
}, function(){
$('.Test2').removeClass('hover');
});
});
.Test1{
position:relative;
width:200px;
height:200px;
background-color:#951159;
}
.Test1:hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
.Test2{
position:relative;
width:200px;
height:200px;
background-color:#147852;
}
.Test2:hover, .Test2.hover{
position:relative;
width:200px;
height:200px;
background-color:#654654;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="Test1">1</div>
<div class="Test2">2</div>
$(document).on('mouseenter','.Test1', function() {
if($('.Test2').hasClass('Test2')) {
$('.Test2').trigger('mouseover');
}
});
Related
Well I am very new with javascript, have always loved to work on my own codes as it is easier to edit.
I am working on making a website which animates on scroll.
By seeing many tutorials I am able to make the div animation on a particular scroll from top
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate").className = "boxl1";
} else {
document.getElementById("animate").className = "";
}
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate1").className = "boxl2";
} else {
document.getElementById("animate1").className = "";
}
}
#main{
width:1000px; height:2000px; float:left; background-color:#000;
}
#left{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
.boxl1{
width:100px;
height:100px;
float:left;
background-color:#FFF;
background-image:url(gif/1.png);
transform:scaleX(-1);
animation-name:lefty;
animation-duration:5s;
}
#keyframes lefty{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(270deg);
}
}
#right{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
.boxl2{
width:100px;
height:100px;
background-color:#FFF;
background-image:url(gif/1.png);
float:right;
animation-name:travel;
animation-duration:5s;
}
#keyframes travel{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(360deg);
}
}
#leftd{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
#rightd{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
<div id="main">
<div style="margin-top:400px;">
<div id="left">
<div id="animate"></div>
</div>
<div id="right">
<div id="animate1"></div>
</div>
<div id="leftd">
</div>
<div id="rightd">
</div>
</div>
</div>
Now all i want into this is that it should not complete the animation until i scroll down and reverse it when i scroll up.
the method i think is, i can create many boxes in css (like boxl1, boxl2,boxl3,...n) with different margins, and make a switch statement, but as i am too new to this, can you help me how does it works? I saw many tutorials they all show day and date, or names nothing for class and divs
Many answers here ask to get a js library and stuff, but i want to write it myself, if you can help, it would be great, thanks in advance!
I have a website menu bar that has two separate divs that a site visitor can toggle between just by tapping. Here's the fiddle and the actual code:
HTML:
<div id="container">
<div id="div">
<div id="next1">MENU 1</div>
<div id="next2">MENU 2</div>
</div>
</div>
CSS
#container{
height:100px;
width:50%;
position:relative;
overflow:hidden;
}
#div{
height:100px;
width:100%;
position:relative;
}
#next1{
height:100px;
width:100%;
top:0;
left:0;
background:green;
position:absolute;
}
#next2{
height:100px;
width:100%;
top:0;
left:100%;
background:orange;
position:absolute;
}
JavaScript
$("#next1").click(function () {
targetLeft = "-100%";
$("#div").animate({left: targetLeft},400);
});
$("#next2").click(function () {
targetLeft = "0";
$("#div").animate({left: targetLeft},400);
});
The code works well, but I'd like to do this without JQuery, and am wondering if anyone knows how this could be done? (If it can be done without JavaScript as well, that would be ideal but I'm not sure that's possible.)
Thanks for reading!
You could use CSS3 transitions instead:
Example Here
document.getElementById('next1').addEventListener('click', function () {
document.getElementById('div').style.left = '-100%';
});
document.getElementById('next2').addEventListener('click', function () {
document.getElementById('div').style.left = '0%';
});
#div {
height:100px;
width:100%;
position:relative;
left: 0;
transition: left 400ms ease-in-out;
}
I have made a JavaScript of a changing image but it disables some other codes. You will understand what i am telling you after you see the code i wrote below. Take a gander and see whats wrong. Any help of any sorts is appreciated :D
Here is the code
HTML
<div class="Wrapper2">
<div id="HomeRooms"/> </div>
</div>
CSS
#HomeRooms {
position:absolute;
top:100%;
left:0px;
width:100%;
height:100%;
background-size:cover;
background-position:50% 50%;
background-repeat: no-repeat;
background-image: url(Images/Home/HomeRoomImage.jpg);
margin:0px;
padding:0px;
}
.Wrapper2 {
width:100%;
height:100%;
}
I don't know that much JavaScript and i am just a beginner. So i don't know what i just did.
Here is the JavaScript
var picCount=0;
var picArray= ["Images/Home/HomeRoomImage.jpg","Images/Home/HomeRoomImage2.jpg"]
function nextPic()
{ picCount=(picCount+1<picArray.length)? picCount+1 : 0;
var build='<img border="0" src="'+picArray[picCount]+
'" position:absolute;top:100%;left:0px;width:100%;height:100%;background-size:cover;background-position:50% 50%;background-repeat: no-repeat;background-image: url(Images/Home/HomeRoomImage.jpg);margin:0px;padding:0px;" >\n';
document.getElementById("HomeRooms").innerHTML=build;
setTimeout('nextPic()',2000)
}
First of all, you didn't specify for the code to execute on page load/document ready. Second of all, in jsfiddle, you forgot to import jquery. Also you forgot to call the initial function. You also forgot the style attribute in the img tag.
JSFIDDLE UPDATE
EDIT: Now with image being responsive. P.S make sure your images all have the same width, althought I know that for the example you used two dummy images.
Html:
<div class="Wrapper2">
<div id="HomeRooms"></div>
</div>
CSS:
#HomeRooms {
position:absolute;
top:0%;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#HomeRooms img{
max-width:100%;
}
.Wrapper2 {
width:100%;
height:100%;
}
I corrected the code. Here's the new version:
//Document ready
$(function(){
var picCount=0;
var picArray= ["http://bit.ly/1uxYSSb","http://bit.ly/1oOrsO6"];
//Initial call to execute the function
nextPic();
function nextPic()
{
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
var build='<img border="0" src="'+picArray[picCount]+'" />';
document.getElementById("HomeRooms").innerHTML=build;
setTimeout(function(){nextPic();},2000);
}
});
http://jsfiddle.net/7wez07qn/3/#&togetherjs=TlopaRQOy7
Collaboration. I cant explain explain it so see me here to help me. I am going now.
This is the current code.
<div class="Wrapper2">
<div id="HomeRooms"> </div>
</div>
JS
$(function(){
var picCount=0;
var picArray= ["http://bit.ly/1uxYSSb","http://bit.ly/1oOrsO6"];
nextPic();
function nextPic()
{ picCount=(picCount+1<picArray.length)? picCount+1 : 0;
var build='<img border="0" src="'+picArray[picCount]+
'" style="" />';
document.getElementById("HomeRooms").innerHTML=build;
setTimeout(function(){nextPic();},6000);
}
});
CSS
#HomeRooms {
position:absolute;
top:0%;
left:0px;
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#HomeRooms img{
max-width:100%;
}
.Wrapper2 {
width:100%;
height:100%;
}
I have got some problems here finding my mistake. Debugging Console says:" Can't find variable: mouseover/mouseout." I don't know what she's trying to say to me. I want to fade a div with lessCss to 50% transparency with the onmouseover/onmouseout event.
<div id="right" class="" onMouseOver="javascript: mouseover(this);" onMouseOut="javascript: mouseout(this);"></div>
<script type="text/javascript">
function mouseover(this) {
this.setAttribute("class", "mouseover");
}
function mouseout(this) {
this.setAttribute("class", "");
}
</script>
lessCss code:
#right {
position:fixed;
top:320px;
right:0px;
z-index:5;
height:200px;
width:30px;
background-image: url(images/right);
border-radius:5px;
background-color:fade(darken(#bg-color, 50%),50%);
cursor:pointer;
}
.mouseover {
background-color:darken(#bg-color, 50%);
}
You dont need a javascript function, use CSS selector "hover":
#right {
position:fixed;
top:320px;
right:0px;
z-index:5;
height:200px;
width:30px;
background-image: url(images/right);
border-radius:5px;
background-color:fade(darken(#bg-color, 50%),50%);
cursor:pointer;
}
#right:hover {
background-color:darken(#bg-color, 50%);
}
Your div will simply need to have "right" as id:
<div id="right"></div>
I saw a fiddle. When cursor is hovering over it, it animates from bottom to top.
How could I change it, so that on click, it would animate from right to left, and after that, the content would be hidden? When the content is hidden, there would be a button, where I could click to have the content show up again.
HTML
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<p>Hover over red div please!!</p>
</body>
</html>
CSS
.wrapper{
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
margin-top:200px;
color:white;
}
jquery
$(document).ready(function(){
var innerHeigth = $(".inner").outerHeight();
$(".wrapper").hover(function(){ $(".inner").stop().animate({top:-innerHeigth},1000);
//alert(innerHeigth)
},function(){
$(".inner").stop().animate({top:0},1000);
});
});
and here is the fiddle http://jsfiddle.net/qGVfp/
There's 2 changes you need to make. First adjust the stylesheet so the moving div is off to the left instead of the bottom:
.inner{
width:200px;
height:100px;
position:absolute;
background-color:black;
left:-200px;
color:white;
}
And then change the javascript to react to clicks, be based on width and modify the left property. Note, there is a toggle method that behaves a lot like hover, but it's getting removed from jQuery, so you have to have a boolean that tracks state.
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
Here's an updated fiddle: http://jsfiddle.net/qGVfp/30/
.wrapper2{
background-color:blue;
width:400px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner2{
width:200px;
height:200px;
position:absolute;
background-color:black;
margin-left:400px;
color:white;
}
$(".wrapper2").hover(function(){
$(".inner2").stop().animate({marginLeft:200},1000);
//alert(innerHeigth)
},function(){
$(".inner2").stop().animate({marginLeft:400},1000);
});
});
http://jsfiddle.net/bighostkim/vJrJh/
You are basically there just need to change a few things around.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="inner">
Sliding div here!! Yay!!
</div>
</div>
<button id="btn">click</button>
</body>
</html>
CSS
.wrapper {
background-color:red;
width:200px;
height:200px;
position:relative;
overflow:hidden;
color:white;
}
.inner {
width:200px;
height:100px;
position:absolute;
background-color:black;
left:200px;
color:white;
}
SCRIPT
var hidden = true;
$(document).ready(function(){
$("#btn").click(function() {
if(hidden) {
$(".inner").stop().animate({left:0}, 1000);
hidden = false;
}
else {
$(".inner").stop().animate({left:200},1000);
hidden = true;
}
});
});
Here is a fiddle to show this: http://jsfiddle.net/qGVfp/31/