What I want to happen is when I hover the cursor to an image, it will start the looping animation. And when I leave the cursor, it stops the animation. It indeed stops but the looping animation does not work anymore when I hover it to a image again.
$(".right-section img").mouseenter(function() {
var hoveredImage = $(this).attr("id");
function loop() {
$("#" + hoveredImage).animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop();
});
}
loop();
$("#" + hoveredImage).mouseleave(function() {
$(this).dequeue();
$(this).css({
bottom: ""
});
});
});
To do what you require call stop() to clear the animation queue for the img:
$(".right-section img").mouseenter(function() {
function loop($img) {
$img.animate({
bottom: "15px"
}, 500).animate({
bottom: 0
}, 500, function() {
loop($img);
});
}
loop($(this));
}).mouseleave(function() {
$(this).stop(true);
});
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
That being said, a far better approach would be to use CSS for the animation. CSS performs better, and also it better meets the separation of concerns principle. Try this:
.right-section img {
width: 100px;
height: 100px;
display: block;
background-color: #C00;
position: absolute;
bottom: 0;
}
.right-section img:hover {
animation: bounce 1s ease-in-out infinite;
}
#keyframes bounce {
0% { bottom: 0; }
50% { bottom: 15px; }
100% { bottom: 0; }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="right-section">
<img />
</div>
Related
I need you guys to help as, I am new to programming. Why my second key code is not working. I'm not sure am I suppose to type that for my if loop. What I want my program to be is, when pressing "1", it goes to my first position that I set. And if I press "2" it will go to the second position if the current position is at my first position, if not it will go back to my start position.
Please help, below is my coding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- <meta http-equiv="refresh" content="30"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 600px;
}
</style>
</head>
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style= width:30px; height:40px" src="pic_8.PNG">
</div>
<script>
var move = function(event) {
if (event.keyCode === 49) {
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot_end_left");
}, 2000);
}
if (event.keyCode === 50) {
if (document.getElementById("app") === appDiv.classList.add("robot_end_left"))
{
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function() {
appDiv.classList.add("robot2_end_left");
}, 2000);
}
else{
const appDiv = document.getElementById("app");
setTimeout(function() {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function() {
appDiv.classList.add("robot3_end_right");
}, 0)
setTimeout(function() { window.location.reload(true); }, 4000);
}}
};
</script>
</body>
</html>
Your missing a quotation (") in the style attribute of the img tag. I'm fixing that in the code below.
Important
I strongly suggest that you refactor the code so it's easier to build on, and to debug. I show how that can be done in the code below. The "move" methods are pretty similar, so you can write one function to handle all of them, instead of having separate methods that does almost the same thing.
Implementation
You need to remove all classes before adding new ones, or you will end up with having lots of classes on the #app element. But if you remove the classes, position: fixed will disappear, so I broke that property out and placed it under #app in the CSS. I also moved your "style" properties into an CSS class – #robot.
I renamed "move" to "moveRobot" as well. Gives more context when the methods are called moveTopLeft within the moveRobot method.
I also removed the last zero in the CSS classes, so the robot is visible when you're running the snippet.
Down below, I implemented your thoughts, but commented out all setTimeouts, so it's easier to follow what's going on. What you will discover is that if you remove the classes, the transition wont happen, because #app doesn't remember the last position of left and top.
What you actually need is to set left and top in code (ex. appDiv.styles.left = '300px'), and abandon the idea of adding classes to the robot. I believe that this will make the code shorter as well.
const appDiv = document.getElementById("app"); // Make this public so it's accessible everywhere;
var lastKeyStroke = -1;
var moveRobot = function(event) {
const KEY_NUM_ONE = 49,
KEY_NUM_TWO = 50;
let keyStroke = event.keyCode;
let pressedSameKeyTwice = keyStroke === lastKeyStroke; // not implemented
removeAllPreviousClasses();
console.clear();
if (keyStroke === KEY_NUM_ONE) {
console.log("pressed 1");
moveTopLeft();
}
else if (keyStroke === KEY_NUM_TWO) {
console.log("pressed 2");
moveTopRight();
}
else {
console.log("pressed anything else");
moveBottomRight();
}
lastKeyStroke = keyStroke;
}
function removeAllPreviousClasses() {
appDiv.className = "";
}
function moveTopLeft() {
//setTimeout(function() {
appDiv.classList.add("robot_end_top");
//}, 0);
//setTimeout(function() {
appDiv.classList.add("robot_end_left");
//}, 2000);
}
function moveTopRight() {
//setTimeout(function() {
appDiv.classList.add("robot_end_top");
//}, 0);
//setTimeout(function() {
appDiv.classList.add("robot2_end_left");
//}, 2000);
}
function moveBottomRight() {
//setTimeout(function() {
appDiv.classList.add("robot3_end_down");
//}, 2000);
//setTimeout(function() {
appDiv.classList.add("robot3_end_right");
//}, 0)
//setTimeout(function() { window.location.reload(true); }, 4000);
// removed excessive ending curly bracket
// }
}
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 980px 400px, cover;
}
#app {
position: fixed;
transition: left 2s, top 2s;
}
#robot { /* added these */
width: 30px;
height: 40px;
}
.robot3_end_down, /* added these together */
.robot_start_top {
top: 28px;
}
.robot_start_left {
left: 60px;
}
.robot_end_left {
left: 57px;
}
.robot_end_top {
top: 18px;
}
.robot1_start_left {
left: 57px;
}
.robot2_start_left, /* added these together */
.robot1_end_left {
left: 52px;
}
.robot2_end_left {
left: 47px;
}
.robot3_end_right {
left: 60px;
}
<body onkeydown="moveRobot(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" src="https://simpleicon.com/wp-content/uploads/android.png">
</div>
</body>
There were some problems with the if else conditions and the const appDiv in the code its working fine now
var move = function (event) {
const appDiv = document.getElementById("app");
if (event.keyCode === 49) {
setTimeout(function () {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function () {
appDiv.classList.add("robot_end_left");
}, 2000);
}
else if (event.keyCode === 50) {
console.log('2')
if (document.getElementById("app") === appDiv.classList.add("robot_end_left")) {
const appDiv = document.getElementById("app");
setTimeout(function () {
appDiv.classList.add("robot_end_top");
}, 0);
setTimeout(function () {
appDiv.classList.add("robot2_end_left");
}, 2000);
}
}
else {
console.log('3')
const appDiv = document.getElementById("app");
setTimeout(function () {
appDiv.classList.add("robot3_end_down");
}, 2000);
setTimeout(function () {
appDiv.classList.add("robot3_end_right");
}, 0)
setTimeout(function () { window.location.reload(true); }, 4000);
}
}
;
body {
height: 100%;
width: 100%;
background-image: url("TPHRG floorplan1.png");
background-repeat: no-repeat;
background-attachment: fixed;
/* background-position: center; */
background-size: 980px 400px, cover;
}
.robot_start_top {
top: 280px;
transition: top 2s;
}
.robot_start_left {
position: fixed;
left: 600px;
transition: all 2s;
}
.robot_end_left {
left: 570px;
}
.robot_end_top {
top: 180px;
}
.robot1_start_left {
position: fixed;
left: 570px;
transition: left 4s;
}
.robot1_end_left {
left: 520px;
}
.robot2_start_left {
position: fixed;
left: 520px;
transition: left 4s;
}
.robot2_end_left {
left: 470px;
}
.robot3_end_down {
top: 280px;
}
.robot3_end_right {
left: 600px;
}
<body onkeydown="move(event)">
<div class="robot_start_left robot_start_top" id="app">
<img id="robot" style=width:30px; height:40px"
src="https://petapixel.com/assets/uploads/2019/02/mooncompositemain-800x800.jpg">
</div>
</body>
I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?
You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
I have a CSS slider that works for the most part except for two things I cannot figure out. The first being, how to get my slider navigation buttons to work the way I am after. Right now, if you click on one, my addClass adds .active to all of the buttons instead of only the one clicked on. Along with that I cannot figure out how to associate the slider position with the navigation menu. What I mean is if the user does not click any of the buttons I still want the buttons to show which slide is active.
MY second issue is whenever the buttons are clicked it stops the slide show.
What am I doing wrong in my attempts?
Off-topic, but would it be difficult to transition what I have now to fade in the slides rather than sliding them?
$('.control-button').click(function() {
button = $(this).attr('id');
id = button.replace('slide', '');
pos = (id - 1) * 100;
$('div#slider figure').css('animation-play-state', 'paused');
$('div#slider figure').removeClass('figure2');
$('.control-button').addClass('active');
posStr = '-' + pos + '%';
$('.figure').css('left', posStr);
});
$('img').click(function() {
$('div#inner').css('left', '0px');
$('div#slider figure').addClass('figure2');
$('div#slider figure').css('animation-play-state', 'running');
})
div#slider {
width: 100%;
overflow: hidden;
}
div#slider .figure {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
/*animation: 20s company-slider infinite;*/
}
.figure2 {
animation: 20s company-slider infinite;
}
#keyframes company-slider {
0% {
left: 0%;
}
30% {
left: 0%;
}
35% {
left: -100%;
}
55% {
left: -100%;
}
60% {
left: -200%;
}
90% {
left: -200%;
}
95% {
left: -300%;
}
100% {
left: -300%;
}
}
div#slider figure img {
width: 25%;
min-height: 100%;
float: left;
}
/*div#slider figure:hover { animation-play-state:paused; }*/
div#slider li {
list-style: none;
}
div#slider label {
background-color: #111;
bottom: .5em;
cursor: pointer;
display: block;
height: .5em;
position: absolute;
width: .5em;
z-index: 10;
}
#controls {
width: 100%;
height: auto;
}
#control-container {
padding: 25px 12%;
}
.control-button {
display: inline;
margin: 0 2%;
width: 25%;
background: gray;
height: 10px;
border: none;
}
.control-button.active {
display: inline;
margin: 0 2%;
width: 25%;
background: black;
height: 10px;
border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="slider">
<figure class="figure figure2">
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
<img src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
<img src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
<img src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>
<div id="controls">
<div id="control-container">
<button id="slide1" class="control-button"></button>
<button id="slide2" class="control-button"></button>
<button id="slide3" class="control-button"></button>
</div>
</div>
</div>
This makes all of the buttons active:
$('.control-button').addClass('active');
Replace it with:
$('.control-button').removeClass('active');
$(event.target).addClass('active');
Add the event parameter to the function so you can use event.target:
$('.control-button').click(function(event) {
EDIT:
Making the control buttons activate "naturally" as the images slide is a bit harder.
Make each image have an attribute that says which slide it is:
<figure class="figure figure2">
<img data-number="slide1" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
<img data-number="slide2" src="http://i.cbc.ca/1.3376224.1450794847!/fileImage/httpImage/image.jpg_gen/derivatives/4x3_620/tundra-tea-toss.jpg" alt>
<img data-number="slide3" src="https://static.pexels.com/photos/22804/pexels-photo.jpg" alt>
<img data-number="slide4" src="https://iso.500px.com/wp-content/uploads/2016/02/stock-photo-139669245.jpg" alt>
</figure>
Create a system to detect when the image comes into view:
window.setInterval(function() {
Detect which image is being shown:
var activeImage = document.elementFromPoint($(window).width()/2, 10); // The image at the horizontal midpoint of the screen
Set the class of the corresponding control button to active:
$('.control-button').removeClass('active');
$("#"+$(activeImage).attr("data-number")).addClass('active'); // Sets whichever control button that corresponds to the image under the horizontal midpoint of the screen as active
Set how often you want to check at the closing of the setInterval:
}, /*time interval in miliseconds*/);
As far as adding 'active' to all buttons you should replace this:
$('.control-button').addClass('active');
with this:
$('.control-button').removeClass('active'); //this removes all '.active' first
$(this).addClass('active');
What's happening here is that within the .control-button click function, $(this) represents the current .control-button element.
https://jsfiddle.net/q3j01xrs/
What about this? I improved your script. I took out your CSS animation and replaced it by another JavaScript animation. Have a look!
$('.control-button').click(function() {
clearInterval(setInt);
$('.control-button').removeClass('active');
$(this).addClass('active');
var getIndex = $(this).index('.control-button');
$('.figure img').hide();
$('.figure img').eq(getIndex).show();
setInt = setInterval(slide, 5000);
});
function slide() {
var getIndex = $('.figure img:visible').index('.figure img');
$('.control-button').removeClass('active');
$('.figure img:visible').animate({
width: 'toggle'
}, 350);
getIndex++;
if ((getIndex) == $('.control-button').length) {
$('.control-button').eq(0).addClass('active');
$('.figure img').eq(0).animate({
width: 'toggle'
}, 350);
} else {
$('.control-button').eq(getIndex).addClass('active');
$('.figure img').eq(getIndex).animate({
width: 'toggle'
}, 350);
}
};
var setInt = setInterval(slide, 5000);
When hover on the first and second element, some element will animate to the left, it works well if hovered with a normal speed, but will crashed if hovered too fast for some times
(the text won't show or the text won't move back to its original place when mouseoff, checkout the figures below).
Any suggestions would be appreciated.
1.text won't show
2.text won't move back to its original place
$(document).ready(function() {
var flag = false;
$(".tab-ico").hover(function() {
var f = $(this);
f.data('timeout', window.setTimeout(function() {
f.find(".tab-text").stop(true, true).animate({
left: "-=64"
}, 300, function() {
flag = true;
});
}, 300));
}, function() {
clearTimeout($(this).data("timeout"));
if (flag === true) {
$(this).find(".tab-text").stop(true, true).animate({
left: "+=64"
}, 300, function() {
flag = false;
});
}
});
});
.pfm-toolbar-wrap {
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 35px;
z-index: 9990;
}
.pfm-tbar-tab-Spike {
position: relative;
width: 35px;
}
.pfm-toolbar-tabs {
border-right: 5px solid #7a6e6e;
height: 100%;
}
.p-tab div.tab-ico {
background: #7a6e6e;
}
.tab-text {
border-radius: 3px;
color: #fff;
height: 32px;
left: 0px;
line-height: 32px;
position: absolute;
text-align: center;
width: 70px;
padding-right: 5px;
z-index: -1;
background: #7a6e6e;
}
.tab-text a {
color: #fff;
display: block;
}
.p-tab {
left: 0;
margin-top: -100px;
position: absolute;
top: 50%;
width: 35px;
z-index: 9;
text-align: center;
}
.p-tab div.tab-ico:hover {
background: #e20531;
cursor: pointer;
}
.p-tab div.tab-ico:hover .tab-text {
background: #e20531;
}
.tab-ico {
width:35px;
height:35px;
margin-bottom:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
<div class="pfm-toolbar-tabs">
<div class="p-tab">
<div class="pfm-tbar-tab-Spike m_b15">
<div class="tab-ico cart"> <i class="cbl-icon"></i> <em class="tab-text"> text</em>
</div>
</div>
<div class="pfm-tbar-tab-group m_b15">
<div class="tab-ico "> <i class="cbl-icon"></i>
<em class="tab-text"> text2</em>
</div>
</div>
</div>
</div>
</div>
you can use css transition-delay property as follows:
transition-delay: 1s; /* delays for 1 second */
-webkit-transition-delay: 1s; /* for Safari & Chrome */
Find more info here.
I suggest that you use CSS transition, here are two links that will help you make that with less code and using CSS transition
https://css-tricks.com/almanac/properties/t/transition/
https://blog.alexmaccaw.com/css-transitions
I have this infobox that will slide to show on hover on a arrow connected to that infobox. See the jsfiddle I've linked further down for more insight.
The thing I'm struggling with is that it's sort of laggy. It jumps back and forth really fast as it likes and it bothers me a lot. I've done some research and found out that the .stop(true, false) is the thing messing it up, but that you can't really go without it either. Haven't found any smooth solution yet though...
I would like it, if possible, to...
...when hovered, fully animate the animation even though the mouse leaves.
...animate when #infoboxArrow is hovered and then animate back when the mouse leaves its parent #infocontainer.
$('#infoboxArrow').hover(function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 250
}, 600);
}, function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Try listening to mouseenter and mouseleave events instead of hover:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Also note you don't need the image. And you are mixing em units with px, so your layout could break if the font size changes. Consider this code:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position: fixed;
height: 28em;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
position: relative;
top: 50%;
margin-top: -59px;
border: 59px solid #FFC0CB;
border-right: 100px solid #000000;
border-left: none;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 100%;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id="infoboxArrow" class="slideOutTab"></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>