I am currently doing some plots with plotly in Javascript and HTML. I need to add next to the plotly graph 7 pictures.
So far I managed to add the fist picture on the RHS. This picture is 600x400 pixels. But now I want to display the same picture six times below the current one (obviously the picture should be 6 times scaled in order to fit in there).
Unfortunately I don't have any idea how to do it as I don't have any experience with HTML or CSS. I have tried already to create a grid which would contain the images and the graph but everything gets misaligned.
I add the code I have so far:
<!DOCTYPE html>
<html>
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
img{
position: relative;
float: right;
border : none;
height: 50vh;
align: "middle";
}
div.myDiv{
position: relative;
border : none;
height: 50vh;
align: "middle";
}
#hoverinfo{
position: relative;
border : none;
background-color: white;
}
</style>
</head>
<body bgcolor="white">
<div>
<img id="image_part" src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<div id="myDiv"></div>
<div id="hoverinfo"></div>
</div>
<script>
var point_x = [1,2,3,4,5,6];
var point_y = [1,2,3,4,5,6];
var colors = [1,1,1,0,0,0];
var i;
var traces = [];
var max_x = Math.max(...point_x.map(Math.abs));
var max_y = Math.max(...point_y.map(Math.abs));
var max_range = Math.max(max_x,max_y);
max_range = max_range + 0.05*max_range;
for (i = 0; i < point_x.length; i++) {
var trace = {
x: [point_x[i]],
y: [point_y[i]],
mode: 'markers',
marker: {color:[colors[i]]},
type: 'scatter'
}
traces.push(trace);
}
var myPlot = document.getElementById('myDiv'),
hoverInfo = document.getElementById('hoverinfo')
data = traces;
layout = {
hovermode:'closest',
showlegend:true,
title:'Hover on Points',
xaxis: {
range: [-max_range,max_range]
},
yaxis: {
range: [-max_range,max_range],
scaleanchor: 'x'
},
aspectratio: {
x: 1,
y: 1
},
height: 1000,
width: 1000
};
Plotly.plot('myDiv', data, layout);
</script>
</body>
</html>
I am also adding a picture explaining what I expect to get.
Thanks in advance!
Description of what I expect to get
EDIT 26/08/2019:
I managed to create the grid as Azzam Asghar suggested, but I am still unable to place the grid in the lower right corner as showed in the sketch I uploaded. I would really appreciate some help, this is my code now:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
div.gallery-row {
width: 50%;
display: flex;
}
div.gallery img {
width: 50%;
height: auto;
}
div.desc {
padding: 15px;
text-align: right;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 3px;
width: 24.99999%;
}
#media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
div.myDiv{
position: relative;
border : none;
height: 50vh;
float: left;
}
img{
position: relative;
float: right;
border : none;
height: 50vh;
}
</style>
</head>
<body bgcolor="white">
<img id="image_part" src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<div class="gallery-row">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Forest" width="150" height="100">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Northern Lights" width="150" height="100">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Mountains" width="150" height="100">
</a>
</div>
</div>
</div>
<div class="gallery-row">
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Forest" width="150" height="100">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Northern Lights" width="150" height="100">
</a>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg">
<img src="https://freedesignfile.com/upload/2017/05/Sunrise-tropical-island-beach-view-HD-picture-04.jpg" alt="Mountains" width="150" height="100">
</a>
</div>
</div>
</div>
<div id="myDiv"></div>
<script>
var point_x = [1,2,3,4,5,6];
var point_y = [1,2,3,4,5,6];
var colors = [1,1,1,0,0,0];
var i;
var traces = [];
var max_x = Math.max(...point_x.map(Math.abs));
var max_y = Math.max(...point_y.map(Math.abs));
var max_range = Math.max(max_x,max_y);
max_range = max_range + 0.05*max_range;
for (i = 0; i < point_x.length; i++) {
var trace = {
x: [point_x[i]],
y: [point_y[i]],
mode: 'markers',
marker: {color:[colors[i]]},
type: 'scatter'
}
traces.push(trace);
}
var myPlot = document.getElementById('myDiv'),
hoverInfo = document.getElementById('hoverinfo');
var data = traces;
var layout = {
hovermode:'closest',
showlegend:true,
title:'Hover on Points',
xaxis: {
range: [-max_range,max_range]
},
yaxis: {
range: [-max_range,max_range],
scaleanchor: 'x'
},
aspectratio: {
x: 1,
y: 1
},
height: 1000,
width: 1000
};
Plotly.plot('myDiv', data, layout);
</script>
</body>
</html>
How about modifying w3 example of responsive example according to your needs.
Here is a blitz.
So what you need to do is fix height and width of the image(although there are ways you won't have to do this). Than simply do control the width for smaller screens using css media queries.
Related
Investigating and, putting together my code little by little, I have achieved a carousel with the mouseup function that allows me to move the products by pressing the left button of the mouse without releasing it, so far it goes very well, well sometimes it remains as stalled, that is, without having pressed if I move the pointer moves the products.
What I want to achieve in my code is to be able to integrate two buttons, one right and one left, to also be able to move the products of the carousel in that way. How can I achieve it, can you explain to me?
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div> <div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
The goal here is to shift the order of elements to the left or right. With jQuery this is exceptionally easy.
The logic is as so:
To shift the order to the right, select the last item, delete it, then insert before the first item
To shift the order to the left, select the first item, delete it, then insert after the last item
To achieve this, we attach a click event listener to each respective button. We select all the slider items with the selector $('.item.product'), use last() and first() to get the first and last items, and the remove() function to delete the element. Then, to reorder, we use jQuery's insertBefore() and insertAfter().
This is the result:
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
And the rest is just a matter of styling (note: uses Material Icons for the arrow icons). Define two button elements;
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
The "chevron_right" and "chevron_left" are icon names | List of Icons
Set their position to fixed so that their position isn't lost when the user scrolls. Set the top attribute to calc(50vh - 50px), where 50vh is half the height of the viewport and 50px is the height of the button (to make it exactly in the "center").
A full example (best viewed in full page mode):
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function() {
$('#right').click(function() {
$('.item.product').last().remove().insertBefore($('.item.product').first());
})
$('#left').click(function() {
$('.item.product').first().remove().insertAfter($('.item.product').last());
})
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140);
$product_carousel.css('width', product_width);
var rotating = true;
$(document).on({
mouseenter: function() {
rotating = false;
},
mouseleave: function() {
rotating = true;
}
}, '#carousel');
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + (e.pageX - scroll) + "px, 0)")
}
});
});
/* button integration styling (start) */
#left {
left: 10px;
}
#right {
right: 10px;
}
.nav-btn {
position: fixed;
top: calc(50vh - 50px);
z-index: 100;
z-index: 100;
height: 50px;
width: 50px;
border-radius: 50%;
cursor: pointer;
background-color: white;
box-shadow: 0 0 1px black;
transition: 0.2s;
}
.nav-btn:hover {
background-color: #d1d1d1;
}
/* button integration styling (end) */
.carousel {
margin: 0 auto;
padding: 1em;
width: 100%;
max-width: 1170px;
margin-left: auto;
overflow: hidden;
}
.slider {
width: 100% !important;
display: flex;
}
.item {
display: inline-table;
width: 280px;
height: 325px;
margin: 0.5em;
border: 1px solid #ccc;
}
a {
color: #8563CF;
text-decoration: none;
font-weight: 100;
}
.thumbnail {
height: 150px;
position: relative;
}
.thumbnail img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: 50% 15%;
}
img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
}
.p1em {
padding: 1em;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="carousel">
<button id="left" class="nav-btn"><i class="material-icons">chevron_left</i></button>
<button id="right" class="nav-btn"><i class="material-icons">chevron_right</i></button>
<div id="carousel">
<div class="slider" style="width: 280px; transform: translate(0px, 0px);">
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Prueba 1</h3>
</div>
<div class="author">
<span></span>
</div>
<div class="price right">
<p>
<label></label>
<em class="item-price">$40.130,00</em>
</p>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://i.ytimg.com/vi/ZxrUVuOqsy0/maxresdefault.jpg">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Curso de PHP 8 básico, intermedio y, avanzado. </h3>
</div>
<div class="author">
<span>Acaded</span>
</div>
<div class="purchased items-center">
<button>Ir al curso</button>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="#">
<div class="thumbnail image">
<img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=96&d=identicon&r=PG&f=1">
</div>
<div class="box p1em">
<div class="heading ellipsis">
<h3>Spectric</h3>
</div>
<div class="author">
<span>Spectric</span>
</div>
<div class="purchased items-center">
<button>Check out</button>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
I am trying to position my image of a butterfly on to the image of flowers
I am able to do it if there is no container elements with margins or padding in %, however if the images is in a responsive website position: absolute; does not produce the right results.
below is the code I'm working with
i have changed the images to online hosted ones and added the css from the external file in the html
please click on step 4 and see that the butterfly is not linked to image of the daisies.
how can I make it so that no matter what the size of the window is, the image of the butterfly stays related to the daisies.
thank you
i have also made a https://jsfiddle.net/aLq8j6r1/ for it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Week 3 Classwork</title>
<link rel="stylesheet" href="week3style.css">
<style>
body{
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul{
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a{
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li{
float: left;
background-color: black;
}
#topNavBar li:hover{
background-color: red;
}
.block{
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone{
display: none;
}
</style>
</head>
<body>
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick=function myfunction(){
move =setInterval(movElem, 10);
}
function movElem(){
if(left>400){
clearInterval(move);
}
elem.style.left= left++ +"px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick=function myOnclickFunctionStep2(){
// (left increase to 400
var iStep2=0;
//the following line will start to move the element to right and down
var vstep2Move1=setInterval(Step2Move1,10);
function Step2Move1(){
elemStep2.style.left= iStep2++ +"px";
elemStep2.style.top= iStep2/2 +"px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if(iStep2>400){
clearInterval(vstep2Move1); vstep2Move2=setInterval(fStep2Move2,10);
}
};
var gStep2=400;
var vstep2Move2;
function fStep2Move2(){
elemStep2.style.left= gStep2-- +"px";
if(gStep2<20){
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3= document.getElementById("elemStep3");
var iStep3=0;
var gStep3 =400;
var hStep3 =20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick=function onclickFunctionStep3(){
vStep3Move1= setInterval(fStep3Move1,10);
function fStep3Move1(){
//move it
elemStep3.style.left= iStep3++ +"px";
elemStep3.style.top= iStep3/2 +"px";
//if statement for stopping vStep3Move1
if(iStep3>400){
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2,10);
}
}
function fStep3Move2(){
elemStep3.style.left= gStep3-- +"px";
if(gStep3<20){
clearInterval(vStep3Move2);
vStep3Move3= setInterval(fStep3Move3,10);
}
}
function fStep3Move3(){
elemStep3.style.left= hStep3++ +"px";
elemStep3.style.top= (hStep3/2)+200 +"px";
if(hStep3> 400){
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;" >
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
<style>
.displayNone{
display: none;
}
</style>
<script>
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1(){
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2(){
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3(){
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4(){
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5(){
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6(){
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
</script>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div><!-- block ends -->
</div><!-- main sedction ends -->
</body>
</html>
Well, an absolute positioned element stays relative to its first positioned (not static) ancestor element
MDN w3schools
So you should add position:relative to it's parent. In your case #step4Div . Then position it how you want. Using top and left and other styles.
My suggestion is you don't use inline styles but write them in the css.
I won't get into the javascript code which definitely needs some refactoring. Too many lines of code that are overkill.
var step1Div = document.getElementById("step1Div");
var step2Div = document.getElementById("step2Div");
var step3Div = document.getElementById("step3Div");
var step4Div = document.getElementById("step4Div");
var step5Div = document.getElementById("step5Div");
var step6Div = document.getElementById("step6Div");
function showStep1() {
step1Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep2() {
step2Div.classList.remove("displayNone");
step1Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep3() {
step3Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep4() {
step4Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep5() {
step5Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
step6Div.classList.add("displayNone");
}
function showStep6() {
step6Div.classList.remove("displayNone");
step2Div.classList.add("displayNone");
step3Div.classList.add("displayNone");
step4Div.classList.add("displayNone");
step5Div.classList.add("displayNone");
step1Div.classList.add("displayNone");
}
body {
margin: 0;
padding: 0;
background-color: beige;
}
#topNavBar ul {
list-style-type: none;
padding: 0 15%;
margin: 0;
background-color: black;
overflow: hidden;
}
#topNavBar a {
text-decoration: none;
color: white;
padding: 16px;
display: block;
}
#topNavBar li {
float: left;
background-color: black;
}
#topNavBar li:hover {
background-color: red;
}
.block {
margin: 3% 15%;
padding: 10px;
background-color: white;
}
.displayNone {
display: none;
}
#step4Div {
position: relative;
}
<div id="topNavBar">
<ul>
<li>Classwork Week 3</li>
<li>Homework Week 3</li>
<li>Homepage</li>
</ul>
</div>
<div id="mainSection">
<!-- in block there is everything -->
<div class="block">
<h1 style="text-align: center;">ClassWork week 3</h1>
<div id="firstExercise">
<h2>Animation With HTML 5</h2>
<div id="buttons">
<button onclick="showStep1()">step1</button>
<button onclick="showStep2()">step2</button>
<button onclick="showStep3()">step3</button>
<button onclick="showStep4()">step4</button>
<button onclick="showStep5()">step5</button>
<button onclick="showStep6()">step6</button>
</div>
<div id="step1Div" style="width: 580px;height: 50px; border: solid 4px black;">
<div id="elem" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//onclick the elem it move right
var elem = document.getElementById("elem");
var left = 0;
var move;
elem.onclick = function myfunction() {
move = setInterval(movElem, 10);
}
function movElem() {
if (left > 400) {
clearInterval(move);
}
elem.style.left = left++ + "px";
}
</script>
</div>
<!-- box -->
<div id="step2Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue move element -->
<div id="elemStep2" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
//on click - move right and down till 400px right then move left
//how to move ? -setInterval
//use long names
//pseudo code:
//var nameofelement = get elemebt by id elemstep2;
var elemStep2 = document.getElementById("elemStep2");
//nameofelement.onclick: do following slowly:
elemStep2.onclick = function myOnclickFunctionStep2() {
// (left increase to 400
var iStep2 = 0;
//the following line will start to move the element to right and down
var vstep2Move1 = setInterval(Step2Move1, 10);
function Step2Move1() {
elemStep2.style.left = iStep2++ + "px";
elemStep2.style.top = iStep2 / 2 + "px";
//following will check if 400 is reached and if reached will stop movement and start movement 2
//stop and start move left till left is 20px
if (iStep2 > 400) {
clearInterval(vstep2Move1);
vstep2Move2 = setInterval(fStep2Move2, 10);
}
};
var gStep2 = 400;
var vstep2Move2;
function fStep2Move2() {
elemStep2.style.left = gStep2-- + "px";
if (gStep2 < 20) {
clearInterval(vstep2Move2);
}
}
//
};
</script>
</div>
<!-- box -->
<div id="step3Div" class="displayNone" style="width: 580px;height: 580px; border: solid 4px black;">
<!-- blue element -->
<div id="elemStep3" style="position: relative; width: 20px; height: 50px;background-color: aquamarine;"></div>
<script>
var elemStep3 = document.getElementById("elemStep3");
var iStep3 = 0;
var gStep3 = 400;
var hStep3 = 20;
var vStep3Move1;
var vStep3Move2;
var vStep3Move3;
elemStep3.onclick = function onclickFunctionStep3() {
vStep3Move1 = setInterval(fStep3Move1, 10);
function fStep3Move1() {
//move it
elemStep3.style.left = iStep3++ + "px";
elemStep3.style.top = iStep3 / 2 + "px";
//if statement for stopping vStep3Move1
if (iStep3 > 400) {
clearInterval(vStep3Move1);
vStep3Move2 = setInterval(fStep3Move2, 10);
}
}
function fStep3Move2() {
elemStep3.style.left = gStep3-- + "px";
if (gStep3 < 20) {
clearInterval(vStep3Move2);
vStep3Move3 = setInterval(fStep3Move3, 10);
}
}
function fStep3Move3() {
elemStep3.style.left = hStep3++ + "px";
elemStep3.style.top = (hStep3 / 2) + 200 + "px";
if (hStep3 > 400) {
clearInterval(vStep3Move3);
}
}
};
</script>
</div>
<div class="displayNone" id="step4Div">
<img src="https://i.imgur.com/XoZr6dM.jpg" alt="" style="position: relative;width: 580px;">
<img src="https://i.imgur.com/2s1zwDb.gif
1. List item
" alt="" style="position:absolute; top: 0; left: 0;">
</div>
<div class="displayNone" id="step5Div">step5</div>
<div class="displayNone" id="step6Div">step6</div>
</div>
<div id="secondExercise">
<h2>OOP Exercise/Demo</h2>
</div>
<div id="thirdExercise">
<h2>Javascript slideshow</h2>
</div>
<div id="fourthExercise">
<h2>Menu</h2>
</div>
</div>
<!-- block ends -->
</div>
<!-- main sedction ends -->
To explain a bit:
absolute explicitly makes the styled element positioned absolutely compared to the closest parent that is also explicitly positioned.
The butterfly you have correctly positioned absolute because it needs to be positioned on top of the flowers. However it was absolute compared to the closest parent ie the body (it looks like).
Adding relative makes the styled element stay where it would have been without styling relative, however the relative element now forms the closest explicitly positioned parent.
<div class="displayNone" id="step4Div" style="position:relative">
I have a razor view web page that has a div that i fill data into it in some way (lazy load, or loop, doesn't matter).
If i dont use a Layout, IE:
#{
Layout = "_Layout";
}
Then the div will use my configured height, and also shows a scrollbar if needed (using overflow: auto)
However, when i add a layout, even an empty one, i cannot seem to modify the div's height, which causes it to take all the screen from the layout to the bottom, and shows no scrolling.
What disabled my ability to change the height?
(the div im loading data into is div id container)
index.cshtml:
#{
Layout = "_Layout";
}
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
_Layout.cshtml:
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
#RenderBody()
</div>
</body>
</html>
Empty _Layout.cshtml: (having issues with this layout as well)
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
Generated page (The empty layout was used):
<!DOCTYPE html>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<html>
<head>
</head>
<body>
<div>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
<head>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>
<body style="overflow: hidden;">
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</body>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</div>
</body>
</html>
Visual to see current output and desired outcome:
(Note that thetext inside the gray box is just elements with some text. thats what the ajax call does)
Generated code after adding #section and #style and removing body everyone besides _Layout
<!DOCTYPE html>
<html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
</head>
<body>
<header class="main-header" role="banner">
<div>
<a href="/" title="Home" rel="home">
<img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
</a>
</div>
</header>
<div>
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: visible;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
</div>
<script src="/JQuery/jquery-3.3.1.min.js"></script>
<script>
var pageSize = 50;
var pageIndex = 0;
var totalItemsDisplayed = 0;
$(document).ready(function() {
lazyLoadCards(0);
$('#container').scroll(function() {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(this).prop('scrollHeight');
var clientHeight = $(this).prop('clientHeight');
if (scrollTop + clientHeight === scrollHeight) {
pageIndex++;
lazyLoadCards(pageIndex);
}
});
function lazyLoadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function loadCards(index) {
$.ajax({
type: 'GET',
url: '/AllCards/OnScrollEnd',
data: { "startIndex": index, "size": pageSize },
dataType: 'json',
success: function(data) {
if (data != null) {
totalItemsDisplayed += data.length;
for (var i = 0; i < data.length; i++) {
$("#container").append("<h2>" +
data[i].cardNumber +
"</h2>");
}
updateProgression();
if (data.length > 0) {
loadCards(index + 1);
}
}
},
beforeSend: function() {
$("#progress").show();
},
complete: function() {
$("#progress").hide();
},
error: function() {
alert("Error while retrieving data!");
}
});
}
function updateProgression() {
$('#Progression').text("Displaying " + totalItemsDisplayed + " Cards out of " + 6930);
}
});
</script>
</body>
</html>
You should be using sections. Sections allow you to add styles, scripts, etc. on the layout. You can't have the head and body tags anywhere except the layout page.
Empty _Layout.cshtml:
<!DOCTYPE html>
<head>
<style>
.main-header {
background: url(/images/bg-header.png) transparent repeat-x 0 0;
}
</style>
#RenderSection("Styles", required: false)
</head>
<body>
<div>
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
Index.cshtml:
#{
Layout = "_Layout";
}
#section Styles {
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
width: 15%;
}
.Good {
background-color: green
}
.Bad {
background-color: red
}
#container {
background: #eee;
}
</style>
}
<div>
<div>
<h3 id="Progression"></h3>
</div>
<div id="container" style="width: 100%; height: 80%; overflow: auto;">
</div>
<div id="progress" style="display: none; height: 20%">
<h4>Loading...</h4>
</div>
</div>
#section Scripts {
<script src="/JQuery/jquery-3.3.1.min.js"></script>
}
UPDATE
You need to make the following change:
<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">
You can't use a percentage for height unless you add position:absolute;. If you only want the vertical scroll bar, you'll need to use overflow-y:scroll; instead.
This question already has answers here:
Can I use javascript to dynamically change a video's source?
(10 answers)
Closed 3 years ago.
I have a html5 video loaded on my page which looks like this:
'
<div class="row">
<video controls class="vid-center" poster="<?php echo get_template_directory_uri(); ?>/img/video-bg.png" id="video-id">
<div class="video-overlay">logo and play bitton here logo and play bitton here </div>
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag. </video>
</div>
<div class="video-cont"></div>
</section>
<div class="row">
<div class="large-3 small-4 columns">
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid1.png" alt=""/>
<h4>Video name 1</h4>
<p>Lorum ipsum neg reyo sum tomenyen</p>
</div>
<div class="large-3 small-4 columns">
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid2.png" alt=""/>
<h4>Video name 1</h4>
<p>Lorum ipsum neg reyo sum tomenyen</p>
</div>
<div class="large-3 small-4 columns">
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid3.png" alt=""/>
<h4>Video name 1</h4>
<p>Lorum ipsum neg reyo sum tomenyen</p>
</div>
<div class="large-3 hide-for-small-only columns">
<img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid4.png" alt=""/>
<h4>Video name 1</h4>
<p>Lorum ipsum neg reyo sum tomenyen</p>
</div>
</div>
'
I am trying to create a basic gallery so when a user selects / clicks / presses one of the thumbnail images it will load a new video into the video player i.e change the video source depending on which img / div is clicked. If thumbnail clicked then load the string src into the player and autoplay.
Is this possible to do in JavaScript to change the current video src?
Any help would be greatly appreciated.
This demo is twofold:
The top half features four divs, which upon loading will dynamically have a video each.
The bottom half has one video and a playlist. The video element will play whatever is clicked on the playlist.
What they have in common is that they are sharing the same video and image files. Basically, this demonstration shows 2 ways to go about having multiple videos on a page.
The top example starts of as 4 normal divs.
loadPlayers() is called on pageload. It will:
Collect the 4 divs into a NodeList.
Convert the NodeList into an array.
Array.prototype.map.call() will also call an anonymous function that will gather each of the divs ids and the pass them into the next function...
struct(ID) is responsible for building the video elements.
The ids from loadPlayers() is now processed into strings that will define values for src for each video.
The video and source elements are made with createElement()
The attributes are added by setAttribute()
Finally, each video is added into it's corresponding div with appendChild().
The bottom example dynamically creates a playlist from an array of strings provided by the developer (this can be modified so the user can interact with creating a playlist.)
generateList(arr, str) requires an array of strings and an element to add playlist items into. The first argument, arr is an array, each string representing the file name of a video/image (sans extension). The second argument is a string that must be syntactically like a selector. ex:
<div id="vid3"></div> = "#vid3"
<nav></nav> = "nav"
<main class="box"></main> = ".box"
<input type="number"/> = "input[type='number']"
Although this argument can be any element, it's suggested that a ul, ol, dl, or nav are better suited to host the playlist items.
Using array.map() to apply the function eachItem() to each array element, it is then returned as a complete playlist; each item is an anchor with a clipped background image.
When each item is clicked, the eventListener will trigger the function playSelect()
PLUNKER
README.md
Snippet
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video Gallery</title>
<style>
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.45 'Verdana';
}
body {
position: relative;
background: #111;
color: #EEE;
}
.gallery {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100vw;
height: 50vh;
}
#sec2 {
justify-content: center;
}
.vid {
width: 240px;
flex 0 2 auto;
}
.solo {
width: 480px;
flex: 0 2 auto;
}
video {
width: 100%;
height: auto;
}
.list {
border: 3px inset #fc3;
margin: 0 10px;
}
.list a {
text-decoration: none;
cursor: pointer;
display: block;
width: 75px;
height: 75px;
background-repeat: no-repeat;
background-size: cover;
color: #00f;
font-size: 1rem;
border-bottom: 1px solid #fc0;
}
.list a:hover {
color: #0ff;
}
#media screen and (max-width: 768px) {
#sec1 {
justify-content: flex-start;
}
#sec2 {
justify-content: flex-end;
}
.vid {
flex: 0 2 auto;
width: 160px;
}
.solo {
flex: 0 2 auto;
width: 320px;
}
}
</style>
</head>
<body>
<section id="sec1" class="gallery">
<div id="vid1" class="vid"></div>
<div id="vid2" class="vid"></div>
<div id="vid3" class="vid"></div>
<div id="vid4" class="vid"></div>
</section>
<section id="sec2" class="gallery">
<div id="vid5" class="solo">
<video id="vid5v" poster="https://glpjt.s3.amazonaws.com/so/av/vid5.png" controls=true>
<source src="https://glpjt.s3.amazonaws.com/so/av/vid5.mp4" type="video/mp4">
</video>
</div>
<nav id="vNav5" class="list"></nav>
</section>
<script>
var vNav5 = document.getElementById('vNav5');
var playlist = ['vid1', 'vid2', 'vid3', 'vid4'];
function loadPlayers() {
var divs = document.querySelectorAll('.vid');
var ids = Array.prototype.map.call(divs, function(obj) {
var ID = obj.id;
return vStruct(ID);
});
}
function vStruct(id) {
var vTag = document.createElement('video');
var vSrc = document.createElement('source');
var vDiv = document.getElementById(id);
var vIDv = id.toString();
vTag.id = vIDv + 'v';
var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
var vPng = vUrl + id + '.png';
var vMp4 = vUrl + id + '.mp4';
vTag.setAttribute('poster', vPng);
vTag.setAttribute('controls', true);
vSrc.setAttribute('src', vMp4);
vSrc.setAttribute('type', 'video/mp4');
vDiv.appendChild(vTag);
vTag.appendChild(vSrc);
}
function generateList(vArr, vStr) {
var vTgt = document.querySelector(vStr);
var lArr = vArr.map(eachLink);
lArr.forEach(function(obj) {
vTgt.appendChild(obj);
});
}
function eachLink(id) {
var ID = id.toString();
var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
var vLink = document.createElement('a');
vLink.setAttribute('href', vUrl + ID + '.mp4');
vLink.textContent = ID;
vLink.style.backgroundImage = "url('" + vUrl + ID + ".png')";
return vLink;
}
vNav5.addEventListener('click', playSelect, false);
function playSelect(e) {
e.preventDefault();
if (e.currentTarget !== e.target) {
var choice = e.target.href;
var parent = e.target.parentElement;
var uncle = parent.previousElementSibling;
var vid = uncle.querySelector('video');
if (vid.playing) {
vid.pause();
}
vid.src = "";
vid.src = choice;
vid.load();
vid.play();
e.stopPropagation();
}
}
loadPlayers();
generateList(playlist, '#vNav5');
</script>
</body>
</html>
Having a weird css image issue with Safari, and haven't been able to find anything regarding this online anywhere.
Each jewellery piece has a small gallery of thumbnails underneath it. If there's more thumbnails than can fit in that space, I've set up JS to have them slide back and forth by adjusting the left margin of the outer div (a lot like smoothdivscroll, but not as complicated).
In Safari for some reason, the first image in the little thumbnail gallery is remaining static while the others scroll over it. looks really crap. And I can't figure why. Is it maybe a bug in Safari?
I do feel like it's a CSS problem, because before adding this sliding feature, we just had a limit to only 5 images and they would load overlapped and distorted in Safari as well...
http://jeandousset.com/jewellery/engagement-rings/
Sample HTML:
<div class="span12 offset6 product-images-container" style="margin-left: 140px;">
<div class="product-zoom-container">
<img id="eva-main-image" class="main-image" src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</div>
<div id="eva-gallery" class="product-gallery text-center">
<div class="scroll-products-right"></div>
<div class="scroll-products-left"></div>
<div class="scrollable-area">
<div class="product-gallery-inner" style="width: 420px; margin-left: -30px;">
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle-.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle-" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-under.jpg" title="eva-engagement-ring-cushion-cut-diamond-under" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-angle.jpg" title="eva-engagement-ring-cushion-cut-diamond-angle" alt=""></a>
<a href="#" class="product-thumbnail active" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-round-cut-diamond-front.jpg" title="eva-engagement-ring-round-cut-diamond-front" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-cushion-cut-diamond-turned-profile.jpg" title="eva-engagement-ring-cushion-cut-diamond-turned-profile" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
<a href="#" class="product-thumbnail" data-image="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" data-post-id="530">
<img src="http://doussetwp.loc/wp-content/uploads/2013/07/eva-engagement-ring-asscher-cut-diamond-angle.jpg" title="eva-engagement-ring-asscher-cut-diamond-angle" alt="">
</a>
</div>
</div>
</div>
CSS:
.product-gallery {
*zoom: 1;
max-height: 70px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.product-gallery:before,
.product-gallery:after {
display: table;
content: "";
line-height: 0;
}
.product-gallery:after {
clear: both
}
.product-gallery .scrollable-area {
overflow: hidden;
position: relative;
margin-left: auto;
margin-right: auto;
width: 85%;
}
.product-gallery .scroll-products-right,
.product-gallery .scroll-products-left {
position: absolute;
width: 30px;
height: 100%;
background: url(./../img/arrow-small-left.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
top: 0;
left: 0;
z-index: 20;
opacity: .6;
filter: alpha(opacity=60);
}
.product-gallery .scroll-products-right:hover,
.product-gallery .scroll-products-left:hover {
cursor: pointer !important;
background-color: rgba(255,255,255,0.8);
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .scroll-products-right {
right: 0;
left: auto;
background: url(./../img/arrow-small-right.png) center center no-repeat #fff;
background-color: rgba(255,255,255,0.6);
}
.product-gallery .product-thumbnail {
float: left;
max-width: 70px;
opacity: .5;
filter: alpha(opacity=50);
}
.product-gallery .product-thumbnail.active {
opacity: 1;
filter: alpha(opacity=100);
}
.product-gallery .product-thumbnail:before,
.product-gallery .product-thumbnail:after {
content: ""
}
JS:
Dousset.product = {
currentWindowWidthMin: null,
currentInterval: null,
init: function () {
$('#wrapper').on('click', '.product-thumbnail', Dousset.product.thumbClicked);
// $('.product-thumbnail').css({
// 'float': 'none',
// 'display': 'inline-block'
// });
$('#wrapper').on('mousedown', '.scroll-products-right', Dousset.product.scrollThumbsLeft);
$('#wrapper').on('mousedown', '.scroll-products-left', Dousset.product.scrollThumbsRight);
$('#wrapper').on('mouseup', '.scroll-products-left, .scroll-products-right', function(e){
clearTimeout(Dousset.product.currentInterval);
Dousset.product.currentInterval = null;
});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('#wrapper').on('click', '.scroll-products-right', Dousset.product.scrollThumbsLeftBatch);
$('#wrapper').on('click', '.scroll-products-left', Dousset.product.scrollThumbsRightBatch);
}
Dousset.product.setCurrentWindowWidthMin();
$(window).resize(Dousset.product.windowResized);
},
thumbClicked: function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
var postId = $(this).data('post-id');
var newImg = $(this).data('image');
$('.main-image[data-post-id="'+postId+'"]').attr('src', newImg);
$('.product-thumbnail[data-post-id="'+postId+'"]').removeClass('active');
$(this).addClass('active');
}
},
scrollThumbsLeft: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.css({
'margin-left' : '-=1'
});
}
},10);
},
scrollThumbsRight: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
Dousset.product.currentInterval = setInterval(function(){
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.css({
'margin-left' : '+=1'
});
}
},10);
},
scrollThumbsLeftBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
var maxMargin = $inner.width() - $(this).siblings('.scrollable-area').width();
if (parseInt($inner.css('margin-left'),10) >= -maxMargin) {
$inner.animate({
'margin-left' : '-=70'
});
}
},
scrollThumbsRightBatch: function (e) {
var $inner = $(this).siblings('.scrollable-area').find('.product-gallery-inner');
if (parseInt($inner.css('margin-left'),10) <= 0 ) {
$inner.animate({
'margin-left' : '+=70'
});
}
},
setCurrentWindowWidthMin: function () {
Dousset.product.currentWindowWidthMin = $( window ).width() > 979 ? 980 : $( window ).width() > 767 ? 768 : 480;
},
windowResized: function () {
var oldWinMin = Dousset.product.currentWindowWidthMin;
Dousset.product.setCurrentWindowWidthMin();
}
}
$(document).ready(function(){
Dousset.product.init();
});
I can't say why this worked, or if it was only this, but I added a width and height to the tags, and moved the animation to css3 instead of jQuery.
That seemed to do the trick. You can visit the link above to see.
Thanks to anyone for trying.
And thanks to #JoshC for making those code edits.