With the use of the jQuery "Any List Scroller" I've added it to my site, however there seems to always be a large gap between some of the images, first 4 on this example link shows up fine but scroll (press the grey btn/image at the bottom right of the thumbnails) and you'll see the gap start to appear.
Can't see any immediate reason why it's got that. Any ideas? The containers arn't any bigger than they should be adding to any type of margin I can see.
Live URL: http://bit.ly/1bJMREc
<div class="als-container product-thumb-carousel" id="demo2">
<span class="als-prev"><img src="http://placehold.it/20x20" alt="prev" title="previous" style="z-index: 99999; position: absolute; left: 70px; top: 40px;" /></span>
<div class="als-viewport">
<ul class="als-wrapper">
<?php $i=0;
$rsThumb->data_seek(0);
if ($row_rsThumb){ while ($row_rsThumb = $rsThumb->get_row_assoc()){
$ww = $dimensions[$i][0];
$hh = $dimensions[$i][1];
if ($ww > $hh){
$dimm = 'width='.(70);
} else {
$dimm = 'height='.(70);
}
$i++;
?>
<div class="product-select">
<a class="thumb_button" id="thumb_<?php echo $i; ?>" href="<?php echo HTTP_HOST.'upload/full/'.$row_rsThumb['fileId'].'_'.$row_rsThumb['fileName']; ?>"><li class="als-item"><img id="img_<?php echo $i; ?>" <?php echo $dimm;?> src="<?php echo HTTP_HOST.'upload/340w/'.$row_rsThumb['fileId'].'_'.$row_rsThumb['fileName']; ?>" alt="<?php echo htmlentities(truncate($page->row['pageTitle'])); ?>" /></li></a>
</div>
<?php }
} ?>
</ul>
</div>
</div>
JavaScript
<script type="text/javascript">
$("#demo2").als({
visible_items: 4,
scrolling_items: 2,
orientation: "horizontal",
circular: "yes",
autoscroll: "no"
});
</script>
CSS
/*************************************
* generic styling for ALS elements
************************************/
.als-container {
position: relative;
width: 100%;
margin: 0px auto;
z-index: 0;
}
.als-viewport {
position: relative;
overflow: hidden;
margin: 0px auto;
}
.als-wrapper {
position: relative;
list-style: none;
}
.als-item {
position: relative;
display: block;
text-align: center;
cursor: pointer;
float: left;
}
.als-prev, .als-next {
position: absolute;
cursor: pointer;
clear: both;
}
/*************************************
* specific styling for #demo2
************************************/
#demo2 {
/* margin: 40px auto; */
}
#demo2 .als-item {
margin: 0px 5px;
padding: 4px 0px;
min-height: 120px;
min-width: 100px;
text-align: center;
}
#demo2 .als-item img {
display: block;
margin: 0 auto;
vertical-align: middle;
}
#demo2 .als-prev, #demo2 .als-next {
top: 40px;
}
#demo2 .als-prev {
left: 200px;
}
#demo2 .als-next {
right: 200px;
}
Looking at the generated source code, you will want to make the UL direct child elements valid list item elements, instead of what you have currently which is:
ul > div > a > li
when it should in fact be:
ul > li > a > span
I have swapped out the div for a span, as you shouldn't really be inserting block level elements (li) within an inline element (a). The order of nesting has been changed to ensure everything within your anchor is clickable, too.
When you have made these changes, lets see what it comes back with. =)
Because your top container div has an id of "demo2",
<div class="als-container product-thumb-carousel" id="demo2">
all of the elements inside the div are being styled with the "#demo2" section of your css file instead of the generic styling section.
For instance, als-item now gets width of 100px (which is too wide) from the '#demo2 als-item{' entry.
There are 4 thumbnails and the width is only 300px for four. The thumbnails are set at 72px but the 'li' element is 100px.
Math is off somewhere.
Try making these changes to your stylesheet.
div#content #details-2 #product .product-select {
height: 72px;
width: 72px;
}
#demo2 .als-item {
margin: 0;
min-height: 72px;
min-width: 72px;
padding: 0;
}
Related
Hoping for a little guidance. I'm making a "slide up" menu for a site i'm using and I have it working, except it's not responsive. Ideally, i'd like to have it so whatever I put in the content under "Book Now" would be hidden no matter the size, while keeping "Book Now" shown.
The way I have it set up now, I have to be very verbose about heights, and it doesn't seem to really want to work on mobile.
Hoping you kind folks could point me in the right direction of what CSS I actually need to make this work!
Here is the JSFiddle:
https://jsfiddle.net/yg13exft/
<style>
/* footer fixed Menu stuff */
.bottomNav{
overflow: hidden;
position: fixed;
bottom: -210px;
width: 100%;
transition: all .7s ease-in-out;
z-index: 9999;
}
.tipBar{
text-align: center;
transition: all .7s ease-in-out;
}
.tipBar a{
color: #6c0505;
background: orange;
display: inline-block;
padding: 5px 15px 5px 15px;
}
.menuBar{
background-color: #6c0505;
display: grid;
grid-template-columns: auto auto;
justify-content: center;
padding-top: 10px;
height: 100%;
}
.bottomNav p{
color: black;
}
.displayNone{
display: none;
}
.tipToggleAnim{
bottom: 46px;
}
.bottomMenuAnim{
bottom: 0;
}
.rightCol img{
max-height: 200px;
}
</style>
<div class="bottomNav" id="bottomNav">
<div class="tipBar" id="tipBar">
<a id="bookNowButton" class="animate__animated animate__backInUp">
Book Now!
</a>
</div>
<div id="dialog" class="menuBar" >
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>
<script>
let toggledVar = false;
function popupMenu(){
let menuToggle = document.getElementById("bottomNav");
let divButton = document.getElementById("tipBar");
if (toggledVar == true){
toggledVar = !toggledVar;
menuToggle.classList.remove('bottomMenuAnim');
}
else {
toggledVar = !toggledVar;
menuToggle.classList.add('bottomMenuAnim');
}
}
let buttonTest = document.getElementById("bookNowButton");
buttonTest.addEventListener("click", popupMenu, false);
</script>
Thank you.
I would use clientHeight to get the height of the dialog section and then set that as the bottom attribute so it will always be hidden. That way no matter what the height of the content, it will always know how many pixels to set bottom to and hide the div, but keep the Book Now showing.
There is a window load event because we need the DOM to fully load before we retrieve dialog div height.
Then, we use animate to smooth the change of the bottom attribute. Animate takes two parameters, the keyframes and the options. In the options, fill makes the animation run and stay in its end state. You can adjust the duration to fit your liking.
// We wait for the page to fully load, then we can grab the height of the div
window.addEventListener('load', function() {
// Toggle boolean
let toggledVar = false;
// Set toggle to Book now button
let menuToggle = document.getElementById("bookNowButton");
// Get bottomNav section
let bottomNav = document.getElementById("bottomNav");
// Get the height of the div
let hiddenSection = document.getElementById("dialog").clientHeight;
// Set bottom css attribute
bottomNav.style.bottom = `-${hiddenSection}px`;
function popupMenu(){
if (toggledVar == false) {
// Set bottom css attribute to 0px to reveal it
bottomNav.animate([
// keyframes
{ bottom: `-${hiddenSection}px` },
{ bottom: '0px' }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = true;
} else {
// Set bottom css attribute to hide it
bottomNav.animate([
// keyframes
{ bottom: '0px' },
{ bottom: `-${hiddenSection}px` }
], {
duration: 1000,
fill: 'forwards'
});
toggledVar = false;
}
}
menuToggle.addEventListener('click', popupMenu);
});
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
}
#bottomNav {
max-width: 100%;
position: fixed;
overflow: hidden;
left: 0px;
}
#bookNowButton {
display: block;
margin: 0 auto;
text-align: center;
padding: 1rem;
max-width: 200px;
background-color: yellow;
cursor: pointer;
}
#dialog {
background-color: #6c0505;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
padding: 1rem;
}
.rightCol img {
max-width: 100%;
}
<div id="bottomNav">
<span id="bookNowButton">Book Now!</span>
<div id="dialog">
<div class="leftCol">
<p>
TEST TEXT HERE! :)
</p>
</div>
<div class="rightCol">
<img src="https://images.unsplash.com/photo-1589883661923-6476cb0ae9f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="cat">
</div>
</div>
</div>
I need to target two div elements and toggle their classes simultanouesly.
I understand that I can get multiple divs "by ID" by using .querySelectorAll
but when I get to .classlist.toggle ("NewClassName"); how can I target two classes??
So here's some code:
#small-div{
background-color:#aaaaaa;
border: 3px solid #aaaaaa;
padding: 0px 0px 0px 0px;
margin: auto 10px auto auto;
border-radius: 10px;
overflow: auto;
}
.tobetoggled{
width: 45%;
float: left;
}
#small-div2{
background-color:#aaaaaa;
border: 3px solid #aaaaaa;
padding: 0px 0px 0px 0px;
margin: auto 10px auto auto;
border-radius: 10px;
overflow: auto;
}
.tobetoggled2{
width: 45%;
float: right;
}
.toggletothis{
width: 100%;
float: left;
position: fixed;
display: block;
z-index: 100;
}
.toggletothis2{
width: 100%;
float: left;
position: fixed;
display: block;
z-index: 100;
}
.whensmalldivistoggled{
display: none;
}/* when small-div is clicked, small-div toggles to class "tobetoggled" while small-div 2 simultaneously toggles to class "whensmalldivistoggled" (the display none class) */
<div id="container">
<div class="tobetoggled" onclick="function()" id="small-div">
</div>
<div class="tobetoggled2" onclick="separatefunction()" id="small-div2">
</div>
</div> <!-- end container -->
<script>
function picClicktwo() {
document.querySelectorAll("small-div, small-div2").classList.toggle("toggletothis, whensmalldivistoggled");
}
</script>
So as you can see one div is on the right, the other is on the left, each set to 45% width. So if I toggle one div to 100% width the browser still respects the other divs space instead of taking the whole 100%.
So I'm thinking if I can get the div on the right ,for example, to not display when the div on the left is toggled, it will be out of the way so the left div can take all 100%
Maybe im going about this the wrong way. Any help is welcome. Thanks.
You can create a single javascript function that sets appropriate classes on each element. Since you have only two elements it is not too complex.
HTML
<div id="container">
<div id="lefty" onclick="toggle('lefty', 'righty')">Lefty</div>
<div id="righty" onclick="toggle('righty', 'lefty')">Righty</div>
</div>
JS
function toggle(target, other)
{
var t = document.getElementById(target);
var o = document.getElementById(other);
if (!t.className || t.className == "inative")
{
t.className = "active";
o.className = "inactive";
}
else
{
t.className = "";
o.className = "";
}
}
CSS
#container {
background-color: lightgreen;
padding: 15px 0;
}
#container div {
color: white;
width: 45%;
display: inline-block;
}
#lefty {
background-color: blue;
}
#righty {
background-color: purple;
}
#container div.active {
width: 90%;
}
#container div.inactive {
display:none;
}
https://jsfiddle.net/dLbu9odf/1/
This could be made more elegant or capable of handling more elements with something like toggle(this) and then some DOM traversal and iteration in javascript, but that's a bit beyond scope. If that were the case I would recommend jQuery.
Im trying to do a slider menu, i have a div with a tape background, all is working fine when it's animating to the left by the background-repeat, but when it is animating to the right and it get to the left border of the background it get disappears because background-repeat doesn't repeat to the left, just to the right.. There's way to make the background repeat to the left?
And the list inside the "slider" div doesn't move at the same velocity of "slider" div
Here is the HTML code
<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<link type = "text/css" rel = "stylesheet" href = "PruebaIndex.css">
<script type = "text/javascript" src = "jquery-2.1.4.js"></script>
<script>
$(document).ready(function(){
var mode = 0; // 0 Left - 1 Right
autoSlider();
function autoSlider(){
mode = 0;
$("#slider").animate({left: "-=60px", width: "+=60px"}, 'slow', 'linear', autoSlider);
}
function slideLeft(){
mode = 1;
$("#slider").animate({left: "+=60px", width: "-=60px"}, 'slow', 'linear', slideLeft);
}
$("#slider").mouseover(function(){
$("#slider").stop();
});
$("#slider").mouseout(function(){
if(mode === 0)
autoSlider();
else
slideLeft();
});
$("#Left").mouseover(function(){
$("#slider").stop();
autoSlider();
});
$("#Right").mouseover(function(){
$("#slider").stop();
slideLeft();
});
});
</script>
</head>
<body>
<div id = "wrapper">
<div id = "slider">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id = "Left">
Left
</div>
<div id = "Right">
Right
</div>
</div>
</body>
</html>
And the CSS code
*{
padding: 0;
margin: 0;
}
#slider {
padding: 0;
left: 0px;
background-color: black;
background-image: url("http://s11.postimg.org/msh93rl8z/Tira_Fotografica.png");
background-repeat: repeat-x;
width: 800px;
height: 304px;
position: relative;
overflow: hidden;
}
#wrapper {
width: 800px;
height: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
}
#Left {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: -100px;
}
#Right {
width: 100px;
height: 100px;
position: absolute;
color: white;
background-color: black;
margin-top: -200px;
margin-left: 800px;
}
#slider ul {
list-style: none;
}
#slider ul li {
display: inline-block;
width: 200px;
height: 200px;
position: relative;
background-color: white;
margin: 50px 10px 0px 0px;
}
I tried to put the code on JSFiddle but it doesn't run..
Sorry for my bad english
it works. see here: https://jsfiddle.net/cLv4hLfy/
take a look at the #slider element.
this values are annoying ;-)
<div style="left: -5863.5px; width: 6663.8px; overflow: hidden;" id="slider">
left is decreasing and width is getting bigger and bigger.
when the slider goes to the opposite direction left gets bigger and width convergates to 0px.
[EDIT]: so the background is not animated. the div is animated. what about fix the div and animate something in the div. you could do something also with background position when its repeated.
I've been playing with "marginLeft: "100%"" but that only moves the div off the screen entirely. I want the div, onClick, to float:right against the edge of the right side of the screen.
JSFiddle:
https://jsfiddle.net/487r8qza/
HTML
<div id="footer">
<one id="one">
</one>
<two id="two">
</two>
<three id="three">
</three>
</div>
JavaScript
$("#footer").click(function(){
$("#one").animate({
marginLeft: "+=900px",
}, 2000 );
$("#two").animate({
marginLeft: "+=900px",
}, 800 );
$("#three").animate({
marginLeft: "+=900px",
}, 333 );
});
$("#three").click(function() {
$("#three").animate({
marginLeft: "100%"} , 1000
);
});
CSS
#footer {
margin: 0;
padding: 0;
float: left;
width: 100%;
max-width: 100%;
height: 115px;
background-color: #4a4a4a;
}
one {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #070707;
height: 115px;
margin-left: -900px;
}
one,two,three {
text-align: center;
color: white;
font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
font-weight: bold;
font-size: 16px;
line-height: 115px;
}
one:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
three:hover {
background: black;
margin: 0;
padding: 0;
width: 300px;
height: 115px;
float: left;
transition: all 0.3s ease-out;
cursor: pointer;
}
two {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #1a1a1a;
height: 115px;
margin-left: -900px;
}
three {
margin: 0;
padding: 0;
float: left;
width: 300px;
background-color: #2c2c2c;
height: 115px;
margin-left: -900px;
}
Sorry if it took this long, something came up. Right, so I got it working. Hope this helps
JSFIDDLE
As for CSS, I kept it as simple as possible. The trick here is to make your DIVs display inline-block, so that at the very start, they are neatly stacked next to each other. You will also want to have them all be float right.
CSS:
.box-container{
width: 100%;
height: 115px;
position: relative;
overflow: hidden;
}
.box-item{
width: 300px;
height: 115px;
position: relative;
display: inline-block;
float: right;
cursor: pointer;
}
.b0{
background: #7888D9;
}
.b1{
background: #76D54E;
}
.b2{
background: #DF7B41;
}
Next, in your HTML, you need to give each DIVs the same classname, which will simplify the Jquery click event. Finally, we will also give our first DIV a classname of "current". This will control which DIV must move and which DIV must wait and stay idle as long as the one beside him hasn't moved. You'll understand soon enough.
HTML:
<div class="box-container">
<div class="box-item b0 current">
Box 1
</div>
<div class="box-item b1">
Box 2
</div>
<div class="box-item b2">
Box 3
</div>
</div>
Finally, as for the Jquery, this is where it gets a bit complicated, I'll try to explain the best I can. Bare in mind that math is not quite my forte. Since our DIVS all float right in the CSS, well, they will all be stacked to the right (of course). To counter that and position them to the left, we need to give each DIV a right position. This position will be some kind of offset. To get this number, we need to multiply the width of a DIV by the total number of DIVs. After that, we must subtract this number to the total width of our DIVs' container (basically the browser width).
As for the click event, we must first check if the DIV we clicked has our "current" classname. If it does, we move it, if not, we don't. The easy part is moving them. By resetting a DIV's right value to 0, each one will slide accordingly to the right with our animate event. Once this is done, we switch the "current" classname to the next DIV. We then increment a counter. This will help to see if all DIVs has been moved.
Once all DIVs have been moved to the right, there is an IF statement that will check our counter and see if it is greater than our total number of DIVs. If it is, the sliding motion is inverted and all DIV's will return to the left. In the same manner, if the clicked element is not the current DIV, it will not move. if it is, it will move back to the left. When all DIV's have been move back in default position, ou counter is reset and our "current" classname is reassigned to the very first DIV.
The resize function is not optimal, but it deals with any responsive issue you could face. It will reset all DIVs to the left and recalculate the offset, so that each DIV never slide offscreen. Needs a little work, but it's better than nothing for now.
JQUERY:
var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;
$(function () {
$boxWidth = $('.box-item').width();
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').css('right',$offsetRight);
$('.box-item').click(function(event) {
if($(this).hasClass('current')){
if($count < $('.box-item').length){
$(this).animate({
right: "0px",
}, 2000, function(){
$count++;
$(this).removeClass('current');
if($count < $('.box-item').length){
$(this).next().addClass('current');
}
else{
$(this).addClass('current');
}
});
}
else{
$(this).animate({
right: $offsetRight,
}, 2000, function(){
$count++;
$(this).removeClass('current');
console.log($count);
if($count < ($('.box-item').length*2)){
$(this).prev().addClass('current');
}
else{
$(this).addClass('current');
$count = 0;
}
});
}
}
});
window.onresize = myResize;
myResize();
});
function myResize(){
$screenWidth = $('.box-container').width();
$offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
$('.box-item').each(function(){
$(this).css('right',$offsetRight);
});
$('.box-item').eq(0).addClass('current');
$count = 0;
}
I'm trying to do what many have asked before, but even after trying everything I still can't get the results I want.
I have an image 600px by 1600px, 4 images of 600px by 400px in a vertical line. I want to show 600px by 400px of the image at any one time. Ideally I would be able to hover over an element somewhere on my page and move the image upwards to reveal the other portions of the 600px by 400px image. In effect, I'd have 4 images viewable by hovering over 4 the elements.
I've tried various css3 and jquery solution but none have worked. I would appreciate any help with this.
HTML
<div class="mainimage">
<div class="buttonsection">
<div class="button1">Button 1</div>
<div class="button2">Button 2</div>
<div class="button3">Button 3</div>
<div class="button4">Button 4</div>
</div><!--end of buttonsection-->
<div class="rollingimage">
<img src="IMG/four-pics.png">
</div><!--end of rollingimage-->
</div><!--end of mainimage-->
</div><!--end of main content-->
CSS
.mainimage {
position: relative;
top: 0px;
left: 0px;
width: 900px;
height: 400px;
border: 2px solid #E78F25;
margin: 0 10px 20px 0;
}
.buttonsection {
width: 290px;
height: 400px;
position: relative;
float: left;
}
.button1,
.button2,
.button3,
.button4 {
display: inline;
height: 98px;
width: 290px;
border: 1px solid #E78F24;
text-align: center;
float: left;
}
.rollingimage {
width: 598px;
height: 400px;
position: relative;
overflow: hidden;
top: 0px;
left: 0px;
float: right;
}
jquery
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage').stop().animate({'top': '-200px'}, 1500);
});
});
Here is the jsfidle: http://jsfiddle.net/dirtyd77/jCvYm/1/
Thanks yet again
Gary
Just for fun, no JS:
http://jsfiddle.net/coma/MTWdb/5/
HTML
<div id="foo">
Button 1
Button 2
Button 3
Button 4
<div></div>
</div>
CSS
#foo {
width: 400px;
border: 2px solid #E78F25;
position: relative;
}
#foo > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 200px;
background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
transition: background-position .5s;
}
#foo > a {
display: block;
width: 200px;
line-height: 100px;
text-align: center;
text-decoration: none;
}
#foo > a + a {
border-top: 1px solid #E78F25;
}
#foo > a:nth-child(1):hover ~ div {
background-position: 0 0;
}
#foo > a:nth-child(2):hover ~ div {
background-position: 0 -400px;
}
#foo > a:nth-child(3):hover ~ div {
background-position: 0 -800px;
}
#foo > a:nth-child(4):hover ~ div {
background-position: 0 -1200px;
}
You need to change the positioning of the image inside the div, not the div itself. To animate my example, you could add CSS transitions for better performance than JS animations.
http://jsfiddle.net/jCvYm/8/
$('.rollingimage').find('img')
As Dom mentioned, the jsFiddle you provided didn't reference the jQuery library. It also didn't included any actual images, and only contained code for one of the three buttons. I doubt those were the original problems you were having, though. (The missing reference to jQuery might have been.)
Once I had those straightened out, I noticed that hovering the button caused the picture to slide out of the screen, instead of scrolling. The simplest way to fix that is to move the img element, instead of moving the div. (The more natural way would be to change the scroll position of the div, but I don't recall how to do that off the top of my head.)
Added CSS:
.rollingimage img {
position: relative;
}
New JS:
$(document).ready(function(){
$(".button1").hover(function(){
$('.rollingimage img').stop().animate({'top': '0px'}, 1500);
});
$(".button2").hover(function(){
$('.rollingimage img').stop().animate({'top': '-400px'}, 1500);
});
$(".button3").hover(function(){
$('.rollingimage img').stop().animate({'top': '-800px'}, 1500);
});
$(".button4").hover(function(){
$('.rollingimage img').stop().animate({'top': '-1200px'}, 1500);
});
});
jsFiddle: http://jsfiddle.net/jCvYm/6/