How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?
Question
How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?
Also the scrolling should be enabled for mobiles (touch enabled). I've created a jsfiddle of the markup I'm working on. Thanks a lot.
<div class="ui grid container r-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment r-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="r-content">
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
</div>
</div>
<div class="rprod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
1 answers
solution1
2 ACCPTED 2015-09-09 16:12:02
Since not all browsers allow you to style the scroll bar, I have used overflow-y:hidden; on the parent to hide the scroll bar. You can style the buttons however you want. I just put them at the bottom.
Demo: http://jsfiddle.net/hopkins_matt/muL9mrL1/1/
CSS:
/* featured column */
.ui.segment.i-feat-col {
overflow-y:hidden;
}
.i-feat-prod-row {
margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
color: #6CAF2B;
}
.i-feat-col {
height: 250px !important;
}
.i-prod-card {
width: 170px;
height: 170px;
position: relative;
display: inline-block;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 0.5rem 1em;
margin-top: auto;
padding: 1em 1em;
border-radius: 4px;
border: 1px solid rgba(34, 36, 38, 0.15);
top: 6px;
}
div.scroll {
height: calc(100% + 10px);
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.i-content {
white-space: nowrap;
}
.i-feat-header {
text-transform: capitalize;
font-size: 12px;
white-space: initial !important;
text-align: left;
line-height: 17px;
letter-spacing: normal;
padding-right: 11px;
padding-left: 11px;
clear: right;
}
.i-feat-header-price {
color: #F44336;
font-weight: 500;
font-size: 15px;
}
.i-feat-img {
display: block;
max-width: 140px;
width: auto;
height: auto;
}
.dimmable {
position: absolute;
}
JS:
$(function () {
$('.i-prod-card .image').dimmer({
on: 'hover'
});
});
function scrollHoz(dir) {
if (dir == 'L') {
$('.scroll').animate({
scrollLeft: "-=" + 250 + "px"
});
} else if (dir == 'R') {
$('.scroll').animate({
scrollLeft: "+=" + 250 + "px"
});
}
}
HTML:
<div class="ui grid container i-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment i-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="i-content">
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
<iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>
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
How can I make this jQuery carousel scroll right instead of left?
Hide Horizontal Scroll Bar but make data scroll horizontally
how to make vertical scroll bar at left side and horizontal scroll bar should start from left side at bottom
How can I make floating header columns to scroll horizontally and prevent them to align left?
How the get scroll the div horizontal using left and right buttons
How to make the horizontal scroll bar permanently visible?
How can I make a counter variable in jQuery that changes the images when the user clicks on the right and and left arrow buttons?
How can I make left/right button disappear when the scroll gets to the end of the container?
Horizontal scroll bar with right and left arrow keys
How to make a table to scroll from right to left
Related Tags