Horizontal menu overlapping image slider
Question
I'm having trouble aligning the horizontal menu below the image slider. If I only have an image instead of the slider the menu adjusts properly (vertical) however when I add code for the slider the menu goes all the way to the top and does not stay below the image slider. I tried changing the margin top and it does move the menu down but it does not stay below the image if I increase the size of the screen vertically. Below is my code and an image of what happens and what I would like it to look like (Green Arrow).
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
/*image settings*/
img {
width: 100% !important;
height: 30%;
background-size:cover;
filter:grayscale(100%);
-webkit-filter: grayscale(100%);
}
#slideshow {
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
width: 100% !important;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div id="slideshow">
<div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
<div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
</div>
<div class="categories" >
<ul>
<li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
<li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>
</ul>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h1>Footer Text</h1>
</div>
</div>
</body>
<script>
//Slideshow Settings
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 5000);
//Horizontal Scrolling Start
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
//Horizontal Scrolling End
</script>
1 answers
solution1
1 ACCPTED 2016-03-07 20:16:20
Forget what I said before...
I saw it in the javascript/jQuery code how he does it. What happens is that when it runs the slider, he changes some javascript values, so I needed to add some details in the code.
I changed some values so I will quick explain first and then show the result.
I changed the value of the Height var to 210 because if you don't do so, the div will be hidden. Changing the height value now changes the image size and the position of the buttons.
I added a new line which one sets the height of the img to the size defined by the var, as it follows: $("img").css("height",height-60)
And I added a new line of code, which change the top position, moving the div to the correct/expected position: $(".categories ul").css("top", height - 60)
Here goes your (new) code:
<html>
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).bind('mobileinit',function(){
$.mobile.changePage.defaults.changeHash = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
</script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
/*image settings*/
img {
width: 100% !important;
/*height: 30%;*/
background-size:cover;
filter:grayscale(100%);
-webkit-filter: grayscale(100%);
}
#slideshow {
position: relative;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
width: 100% !important;
}
</style>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div id="slideshow">
<div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
<div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
</div>
<div class="categories" >
<ul>
<li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
<li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
<li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>
</ul>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" >
<h1>Footer Text</h1>
</div>
</div>
</body>
<script>
//Slideshow Settings
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(2000)
.next()
.fadeIn(2000)
.end()
.appendTo('#slideshow');
}, 5000);
//Horizontal Scrolling Start
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 210; //changed
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories ul").css("top",height-60); //added
$("img").css("height",height-60); //added
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
//Horizontal Scrolling End
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript horizontal image slider
Horizontal AND Vertical Slider (Image Gallery)
jquery horizontal image slider with lazyload
hamburger menu with image slider
Animating horizontal menu (overlapping menu items without positioning them absolutely)
Changing the menu color based on the hue of the slider image
Carousel (Image Slider) conflicts with Responsive Menu
Just can't get the image slider go horizontal
Customized horizontal scrolling content slider having Image Title & Description
Horizontal image slider not working in chrome and IE11
Related Tags