I'm learning Jquery right now and I'm stuck on how I move my boxes from left to right, then right to left. They have a delay meter that I can use as well to change the speed. I just don't know what I'm missing to make the boxes move in the two specified directions (Left To Right, Right To Left). I'm assuming it's something simple, that's usually the case. But, I'm not sure what to change. Any Help would be greatly appreciated.
Here is my code:
var easingsList = [
"swing",
"easeInQuad",
"easeOutQuad",
"easeInOutQuad",
"easeInCubic",
"easeOutCubic",
"easeInOutCubic",
"easeInQuart",
"easeOutQuart",
"easeInOutQuart",
"easeInQuint",
"easeOutQuint",
"easeInOutQuint",
"easeInSine",
"easeOutSine",
"easeInOutSine",
"easeInExpo",
"easeOutExpo",
"easeInOutExpo",
"easeInCirc",
"easeOutCirc",
"easeInOutCirc",
"easeInElastic",
"easeOutElastic",
"easeInOutElastic",
"easeInBack",
"easeOutBack",
"easeInOutBack",
"easeInBounce",
"easeOutBounce"
];
var moveRight = function(){
var n = 0;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxRight(n, e, d);
var n = 1;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxRight(n, e, d);
}
var moveLeft = function(){
var n = 0;
var e = easingsList[n];
var d = parseInt($)"#delay").val());
moveBoxLeft (n, e, d);
var n = 1;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxLeft(n, e, d);
}
var moveBoxRight= function(n, easing, duration)
{
var id = "#button" + n.toString();
var pageWidth = $("body").width();
var boxWidth = 150;
$(id).animate({"margin-left":pageWidth-boxWidth + "px"}, duration, easing);
}
var moveBoxLeft= function(n, easing, duration)
{
var id = "#button" + n.toString();
var pageWidth = $("body").width();
var boxWidth = 150;
$(id).animate({"margin-left" : "0px"}, duration, easing);
}
*******and heres my HTML*********
<!doctype html>
<html>
<head>
<title> jQuery animate()</title>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
<script src="jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="test.js" type="text/javascript">
</script>
<style>
body
{
margin: 0;
}
.button{
height:50px;
width:150px;
display: block;
border: solid 1px black;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
line-height: 50px;
}
</style>
</head>
<body>
<h1> jQuery Animate Easing Examples </h1>
<input placeholder='delay; 100ms, 1s etc.' id='delay'>
<input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1) etc.' id='endColor'>
<br>
<a href='javascript:moveLeft()' class='link' id='button1'> Move Left </a>
<a href='javascript:moveRight()' class='link' style='float:right' id='button1'> Move Right </a>
<div class='button' id='button0'> swing </div>
<div class='button' id='button1'>easeInQuad</div>
<div class='button' id='button2'>easOutQuad</div>
<div class='button' id='button3'>easeInOutQuad</div>
<div class='button' id='button4'>easeInCubic</div>
<div class='button' id='button5'>easeOutCubic</div>
<div class='button' id='button6'>easeInOutCubic</div>
<div class='button' id='button7'>easeInQuart</div>
<div class='button' id='button8'>easeOutQuart</div>
<div class='button' id='button9'>easeInOutQuart</div>
<div class='button' id='button10'>easInQuint</div>
<div class='button' id='button11'>easeOutQuint</div>
<div class='button' id='button12'>easeInOutQuint</div>
<div class='button' id='button13'>easeInSine</div>
<div class='button' id='button14'>easeOutSine</div>
<div class='button' id='button15'>easeInOutSine</div>
<div class='button' id='button16'>easeInExpo</div>
<div class='button' id='button17'>easeOutExpo</div>
<div class='button' id='button18'>easeInOutExpo</div>
<div class='button' id='button19'>easeInCirc</div>
<div class='button' id='button20'>easeOutCirc</div>
<div class='button' id='buton21'>easeInOutCirc</div>
<div class='button' id='button22'>easeInElasic</div>
<div class='button' id='button23'>easeOutElastic</div>
<div class='button' id='button24'>easeInOutElatic</div>
<div class='button' id='button25'>easeInBack</div>
<div class='button' id='button26'>easeOutBack</div>
<div class='button' id='button27'>easeInOutBack</div>
<div class='button' id='button28'>easeInBounce</div>
<div class='button' id='button29'>easeOutBounce</div>
</div>
</body>
</html>
In my opinion, your approach can be improved altogether
Firstly, animating the margin property of an element is not a good way to move it left and right. Making the element fixed and animating the left and right properties would work much better.
Secondly, you could greatly simplify the code by using an attribute on the button to determine direction instead of writing duplicated code with just a few words different for moving left vs right.
Also, your calling your variable delay but using that variable to set the animation's duration which is misleading. You should re-name that duration
Here's how I would do it:
var easingsList = [
"swing",
"easeInQuad",
"easeOutQuad",
"easeInOutQuad",
"easeInCubic",
"easeOutCubic",
"easeInOutCubic",
"easeInQuart",
"easeOutQuart",
"easeInOutQuart",
"easeInQuint",
"easeOutQuint",
"easeInOutQuint",
"easeInSine",
"easeOutSine",
"easeInOutSine",
"easeInExpo",
"easeOutExpo",
"easeInOutExpo",
"easeInCirc",
"easeOutCirc",
"easeInOutCirc",
"easeInElastic",
"easeOutElastic",
"easeInOutElastic",
"easeInBack",
"easeOutBack",
"easeInOutBack",
"easeInBounce",
"easeOutBounce"
];
$('.move').click(function(){
var $this=$(this);
var duration = parseInt($("#duration").val());
var direction = $(this).data('direction');
var n =0;
moveBox($('.box').eq(n), easingsList[n], duration, direction);
moveBox($('.box').eq(n+1), easingsList[n+1], duration, direction);
});
function moveBox($element, easing, duration, direction) {
var pageWidth = $("body").width();
var boxWidth = $element.width();
$element.css('right','auto').css('left','auto');
var options = {duration:duration,easing:easing};
var properties ={};
properties[direction]=pageWidth - boxWidth + "px";
$element.stop().animate(properties,options);
}
body {
margin: 0;
}
.box {
height: 50px;
width: 150px;
display: block;
border: solid 1px black;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
line-height: 50px;
position:fixed;
}
.box-holder{
width: 100%;
position:relative;
height: 50px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<h1> jQuery Animate Easing Examples </h1>
<input placeholder='duration; 100ms, 1s etc.' id='duration' value="3000">
<input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1) etc.' id='endColor'>
<br>
<a href='#' class='link move' data-direction="right" > Move Left </a>
<a href='#' class='link move' data-direction="left" style='float:right'> Move Right </a>
<div class="box-holder"><div class="box"> swing </div> </div>
<div class="box-holder"><div class="box">easeInQuad</div></div>
<div class="box-holder"><div class="box">easOutQuad</div></div>
<div class="box-holder"><div class="box">easeInOutQuad</div></div>
<div class="box-holder"><div class="box">easeInCubic</div></div>
<div class="box-holder"><div class="box">easeOutCubic</div></div>
<div class="box-holder"><div class="box">easeInOutCubic</div></div>
<div class="box-holder"><div class="box">easeInQuart</div></div>
<div class="box-holder"><div class="box">easeOutQuart</div></div>
<div class="box-holder"><div class="box">easeInOutQuart</div></div>
<div class="box-holder"><div class="box">easInQuint</div></div>
<div class="box-holder"><div class="box">easeOutQuint</div></div>
<div class="box-holder"><div class="box">easeInOutQuint</div></div>
<div class="box-holder"><div class="box">easeInSine</div></div>
<div class="box-holder"><div class="box">easeOutSine</div></div>
<div class="box-holder"><div class="box">easeInOutSine</div></div>
<div class="box-holder"><div class="box">easeInExpo</div></div>
<div class="box-holder"><div class="box">easeOutExpo</div></div>
<div class="box-holder"><div class="box">easeInOutExpo</div></div>
<div class="box-holder"><div class="box">easeInCirc</div></div>
<div class="box-holder"><div class="box">easeOutCirc</div></div>
<div class="box-holder"><div class="box">easeInOutCirc</div></div>
<div class="box-holder"><div class="box">easeInElasic</div></div>
<div class="box-holder"><div class="box">easeOutElastic</div></div>
<div class="box-holder"><div class="box">easeInOutElatic</div></div>
<div class="box-holder"><div class="box">easeInBack</div></div>
<div class="box-holder"><div class="box">easeOutBack</div></div>
<div class="box-holder"><div class="box">easeInOutBack</div></div>
<div class="box-holder"><div class="box">easeInBounce</div></div>
<div class="box-holder"><div class="box">easeOutBounce</div></div>
Related
Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!
<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused
i got a fullscreen-bg div which in my case got the ID #background-change.
In that fullscreen-bg i got 3 Divs called .fullscreen-column-1, .fullscreen-column-2 etc.
now i want to change the background-image of #background-change while the mouseoverevent is called on the columns.
My code looks like this, but it did not work.
<div id="background-change" data-midnight="dark" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row full-width-content vc_row-o-full-height vc_row-o-columns-middle vc_row-o-equal-height vc_row-flex vc_row-o-content-middle standard_section first-section loaded" style="padding-top: 0px; padding-bottom: 0px; margin-left: -298px; width: 1841px; visibility: visible; min-height: 96.7579vh;"><div class="row-bg-wrap instance-0"><div class="inner-wrap"> <div class="row-bg " style="" data-color_overlay="" data-color_overlay_2="" data-gradient_direction="" data-overlay_strength="0.3" data-enable_gradient="false"></div></div> </div><div class="col span_12 dark left" style="min-height: 96.7579vh;">
<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-1" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading">Work</h2>
</div>
</div>
</div>
<div class="vc_col-sm-4 wpb_column column_container vc_column_container col no-extra-padding instance-2" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" style="min-height: 425px;">
<div class="vc_column-inner">
<div class="wpb_wrapper">
</div>
</div>
</div> `<div class="vc_col-sm-4 fullscreen-column-1 wpb_column column_container vc_column_container col has-animation padding-10-percent instance-0 animated-in" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="#000000" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="fade-in-from-left" data-delay="500" style="padding-top: 184.094px; padding-bottom: 184.094px; opacity: 1; transform: translate(0px, 0px);"><a class="column-link" href="#"></a>
<div class="vc_column-inner">
<div class="wpb_wrapper">
<h2 style="font-size: 64px;color: #ffffff;text-align: center;font-family:Chivo;font-weight:400;font-style:normal" class="vc_custom_heading" id="testid">About</h2>
</div>
</div>
</div>`
Here comes the js:
<script type="text/javascript">
document.getElementsByClassName("fullscreen-column-1").onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('https://mywebsite.de/uploads/image-1.jpg')";
};
</script>
any one got the solution? I cant get it to work, i feel dumb right now...
Solution: posted by: Rajan Patil
for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
}
}
You do not need JavaScript for this. Use CSS instead.
.fullscreen-column-1 {
width: 400px;
height: 1000px;
background-image: url(https://picsum.photos/400/1000);
transition: 0.2s ease-in-out;
}
.fullscreen-column-1:hover {
background-image: url(https://picsum.photos/400/1002)
}
<div class="fullscreen-column-1"></div>
There is a typo. getElementsById should be getElementById
Also attach your event listener this way :
for (i = 0; i < document.getElementsByClassName("fullscreen-column-1").length; i++) {
document.getElementsByClassName("fullscreen-column-1")[i].onmouseover = function() {
document.getElementById("background-change").style.backgroundImage = "url('your-image-url')";
}
}
I have a progress element. That element looks like the following:
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
When a user clicks the "animate" button, I want to fill the progress bar with an orange bar to 75%. The animation should take .5 seconds (half a second).
As shown in this Bootply, I'm stuck getting the animation to work. I tried using setInterval, however, the animation was really jerky. Plus, I couldn't get the bar to be orange. It was always green.
Is there a way to animate the value of a progress element for a smooth animation?
In webkit browsers you can use a pseudo class to add a transition and color:
$('#animateButton').on('click', function() {
$('#myProgressBar').val(75);
});
progress[value]::-webkit-progress-value {
transition: width 0.5s;
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
If you need wider browser support, you can iterate the value 'till you get to the target value to animate the bar. However, you can't change the color.
function animateProgress($progressBar, val, currentVal) {
currentVal = currentVal || 0;
var step = val * 16 / 500;
function animate(currentVal) {
currentVal += step;
$progressBar.val(currentVal);
currentVal < val && requestAnimationFrame(function() {
animate(currentVal);
});
}
animate(currentVal);
}
$('#animateButton').on('click', function() {
animateProgress($('#myProgressBar'), 75);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
Here's how it can be done using smooth CSS3 animation : no need for jQuery or even JS animation at all.
var progressBar = document.getElementById("progress-bar")
document.getElementById("animateButton").onclick= function(){
progressBar.style.width = "75%"
progressBar.style["background-color"] = "orange"
}
.container {
height: 30px;
}
.container #progress-bar {
background-color: #008000;
height: 100%;
width: 10%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container">
<div id="progress-bar"></div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
Here's an example
document.getElementById("animateButton").onclick= function(){
document.getElementById("progress-bar").style.backgroundColor = "orange";
document.getElementById("progress-bar").style.width = "75%";
}
#progressHolder{
background:grey;
height:20px;
width:300px;
}
#progress-bar{
background:grey;
height:20px;
width:0px;
transition:background-color 0.5s, width 0.5s;
}
<div class="container">
<div id="progressHolder">
<div id="progress-bar">
</div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
You can use JQuery animation and set the time interval as "slow", "fast", or in milliseconds.
$("#progress-bar").click(function(){
$("#myProgressBar").animate({width: "100px"},slow);
});
I’m working on a project where i have a mosaic of images (4 images per row) and when user mouses over an image, it makes appear a sidebar with some content inside.
The thing is if the user hovers image 1 or 2, the side bar is on right, if he hovers image 3 or 4 the side bar is on left.
I’m trying with a click for now as i find it easiest to do.
But at a certain point, a bug appears and the side bar is not on right side.
Here is my code :
The html in the snippet is a copy of the source code but i use php and a foreach loop to build the sidebar and the mosaic of images.
Try the snippet below.
HTML & PHP
<!-- Side bar -->
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<img id="bt_close_sidebar_content" class="bt_close pull-right pointer" src="img/site/bt-close.png" />
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
?>
<div id="membre_<?php echo $equipe['alias']; ?>" class="contenu_sidebar">
<h2><?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?></h2>
<h3><?php echo nl2br(htmlspecialchars($equipe['fonction'], ENT_QUOTES, 'UTF-8')) ?></h3>
<p><?php echo $equipe['texte']; ?></p>
</div>
<?php
$i ++;
endforeach;
reset($allDatasEquipe);
?>
</div>
</div><!-- fin sidebar_content_right -->
<!-- Images -->
<div class="container container_agence">
<div class="row mosaique_equipe">
<?php
$i = 1;
foreach ($allDatasEquipe AS $equipe):
if ($i == 1 || $i == 2) {
$class = 'sidebar_left';
} else {
$class = 'sidebar_right';
}
?>
<div class="col-md-3 col-lg-3">
<div id="<?php echo $equipe['alias']; ?>" class="img_mosaique_equipe toggle-sidebar pointer <?php echo $class; ?>">
<img src="img/equipe/<?php echo nl2br(htmlspecialchars($equipe['image'], ENT_QUOTES, 'UTF-8')) ?>" alt="<?php echo nl2br(htmlspecialchars($equipe['nom'], ENT_QUOTES, 'UTF-8')) ?>"/>
</div>
</div>
<?php
$i ++;
if ($i > 4) {
$i = 1;
}
endforeach;
reset($allDatasEquipe);
?>
</div>
</div>
JS / jQuery
$sidebar_content = $('#sidebar_content');
$('.images').click(function() {
var id = $(this).attr('id');
console.log('id : ' + id);
var position_sidebar = $('.contenu_sidebar').hasClass('sidebar_left');
if ($sidebar_content.hasClass('visible')) {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"text-align": "left",
"right": "0"
});
$sidebar_content.animate({
"right": "-1000px"
}, "slow").removeClass('visible');
console.log('sidebar_left closed');
position_sidebar_content = 'right';
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"text-align": "right",
"right": "0"
});
$('#sidebar_content').css({
"left": "0"
});
$sidebar_content.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
position_sidebar_content = 'left';
console.log('sidebar_right closed');
}
} else {
if ($(this).hasClass('sidebar_left')) {
$('#sidebar_content').css({
"right": "-1000px"
});
position_sidebar_content = 'right';
$sidebar_content.animate({
"right": "0px"
}, "slow").addClass('visible');
console.log('sidebar_left open');
} else if ($(this).hasClass('sidebar_right')) {
$('#sidebar_content').css({
"left": "-1000px"
});
position_sidebar_content = 'left';
$sidebar_content.animate({
"left": "0px"
}, "slow").addClass('visible');
console.log('sidebar_right open');
}
}
});
/* side bar content */
#sidebar_content {
width: 50%;
position: fixed;
border-right: 1px solid #4c565c;
/* right: -50%;*/
right: -1000px;
top: 0;
height: 100%;
overflow: auto;
background: black;
z-index: 1000;
background-color: #999;
text-align: left;
}
.contenu_sidebar {
display: none;
}
.sidebar_content_wrapper {
position: relative;
height: 100%;
overflow: auto;
padding: 115px 50px 50px 50px;
}
.images {
width: 30px;
height: 30px;
background-color: red;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="1" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="2" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="3" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="4" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="5" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="6" class="images sidebar_left"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="7" class="images sidebar_right"></div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div id="8" class="images sidebar_right"></div>
</div>
</div>
<div id="sidebar_content">
<div class="sidebar_content_wrapper">
<p id="bt_close_sidebar_content" class="bt_close pull-right pointer">bt close </p>
<div id="membre_1" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_2" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_3" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_4" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_5" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_6" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_7" class="contenu_sidebar">
<p>text</p>
</div>
<div id="membre_8" class="contenu_sidebar">
<p>text</p>
</div>
</div>
</div>
I didn't try your code but I think the example below shows a way of doing what you need.
<html>
<head>
<style>
.my-image {
display: inline-block;
background-color: #0f0;
with: 96px;
height: 72px;
margin: 1px;
}
.my-popup {
position: absolute; display: inline-block; z-index: 1000; background-color: red; with: 48px; height: 48px;
}
</style>
</head>
<body>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<div class="my-image">Lorem ipsum ad his scripta blandit partiendo</div>
<script src="jquery.js"></script>
<script>
(function ($) {
var toDisplay = $('<div class="my-popup">Hey whats up</div>')
.appendTo($('body'))
.hide(0);
var images = $('.my-image');
$.each(images, function (index, el) {
var displayPos = calculatePosition(el, index >= images.length / 2);
var $el = $(el);
$el.on('mouseover', function () {
toDisplay.show(0).offset(displayPos);
});
$el.on('mouseout', function () {
toDisplay.hide(0);
});
});
function calculatePosition (image, right) {
var $image = $(image);
var pos = $image.offset(); // image position relative to document
if (right) {
pos.left -= toDisplay.width();
} else {
pos.left += $image.width();
}
return pos;
}
})(window.jQuery);
</script>
</body>
</html>
The idea is to set the displaying element position to absolute and calculate the new coordinates on each hover event and set them using jquery.
I have 2 divs that I need a shade over after a user action. The divs are just two divs next to each other:
<div class="bought">content</div>
<div class="class2">content</div>
Here is the CSS which is made visible via jQuery:
#view-hint .body > .img .bought {
display:none;
cursor:pointer;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:2;
background: rgba(0,0,0,0.75);
}
When the event fires this is what it looks like:
That bottom white area needs to be covered dynamically as well.
The approach I thought to take was to wrap both div's in another div but it breaks the look of everything. So I tried to make the top div longer based off size but it's still not perfect...
var originalHeight = $('.bought').height();
var windowWidth = $(window).width();
if (windowWidth < 710) {
$('.bought').css('height', originalHeight * 0.6);
} else if (windowWidth > 710 && windowWidth < 1000) {
$('.bought').css('height', originalHeight * 0.698);
} else if (windowWidth > 1000 && windowWidth < 1300) {
$('.bought').css('height', originalHeight * 0.699);
} else if (windowWidth > 1300 && windowWidth < 1600) {
$('.bought').css('height', originalHeight * 0.865);
} else if (windowWidth > 1600 && windowWidth < 2000) {
$('.bought').css('height', originalHeight * 1.035);
} else {
$('.bought').css('height', "662px");
}
This mostly works for all size screens, but if you change the zoom it still causes issues.
How can I make it where both of these divs are covered by the CSS dynamically?
Edit:
Here is the full HTML with an added wrapper and an image that results:
<div id="test123">
<div class="bought">
<div class="row">
<div class="col">
<div class="body">
<?php if(Request::is('user/*')) { ?>
<div id="boughtquestion">Did you buy this for <?php echo $user->firstName ?>?</div>
<div class="options">
<!-- <a id="boughtyes" class="cbutton whiteonpurple" onclick="markPurchased(event)">Yes</a> -->
<a id="boughtyes" class="cbutton whiteonpurple">Yes</a>
<a id="boughtno" class="cbutton whiteonpurple">No</a>
</div>
<?php } else { ?>
<div>Bought?</div>
<p>Click here to send hinters a message to let them know.<br />And yes, it can still be a surprise!</p>
<?php } ?>
</div>
</div>
</div>
</div>
<div class="markedaspurchased">
<div class="row">
<div class="col">
<div class="body">
<div id="markedpurchased">Marked as Purchased</div>
<p id="markedmessage">Marking as purchased prevents duplicate gift giving. Dont worry <?php echo $user->firstName ?> doesn't get notified but you can let <?php echo ($user->gender == 'female' ? 'him' : 'her') ?> know by sending a message!</p>
<p><a id="sendmessagebutton" class="cbutton whiteonpurple purchasebutton">Send message to let them know</a></p>
<p><a id="anonymousbutton" class="cbutton whiteonpurple purchasebutton">Send anonymous message</a></p>
<p><a id="secretbutton" class="cbutton whiteonpurple purchasebutton">Keep it a secret</a></p>
</div>
</div>
</div>
</div>
</div>
<p class="description"></info-coverp>
<div class="options">
<a class="buy cbutton whiteonpurple" target="_blank">Buy</a>
<a class="hint cbutton whiteonblack" target="_blank">Hint</a>
</div>
<div class="info">
<div class="bar"></div>
<div class="rehints">10 REHINTS</div>
<div class="hinter">
<div class="picture monophoto">
<div class="text">BO</div>
<div class="img" style="background-image: url();" onclick=""></div>
</div>
<div class="content">
<div class="one">Hinted by:</div>
<div class="two"></div>
</div>
</div>
<div class="partnertext">Partnered Hint</div>
<div style="clear:both;"></div>
</div>
</div>
Since you're using Jquery, why not give the divs a separate class and then use .wrapAll to create a wrapper...then position the overlay on top of that.
$(".wrapped").wrapAll('<div class="overlay" />');
.overlay {
display: inline-block;
position: relative;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapped bought">content 1</div>
<div class="wrapped class2">content 2</div>