Is it possible to create an HTML div container with some CSS tricks that can display a horizontal scrollbar similar to the one seen on iTunes preview screenshots, specifically for Safari on iPhone?
For example:
I am looking to use this feature to showcase thumbnails in a UIWebView on an iPhone. I tried experimenting with the overflow CSS property but couldn't get it to work correctly.
Thank you in advance for your responses.
At the moment, I don't have the opportunity to test this out personally. Nevertheless, I believe that the following approach could be effective:
ul#container
{
overflow: hidden;
overflow-x: scroll;
width: 500px; /* adjust as needed */
height: 200px; /* customize accordingly */
white-space: nowrap;
}
ul#container li
{
display: inline-block;
width: 100px; /* adjust as needed */
height: 200px; /* customize accordingly */
}
<ul id="container">
<li>Item One</li>
<li>Item Two</li>
<li>Item three</li>
<li>...<!-- you understand --></li>
</ul>
You may need to make use of float: left; on the li elements, although it really depends on the browser being used by you or your audience.
I will definitely explore this further once I'm back home, but for now, feel free to check out a demo at: http://jsbin.com/atuvo-u
If you're looking for something new to try, check out this handy component that integrates seamlessly with jQuery. It's user-friendly and straightforward.
Take a look at the resources available at
You can even test out a demo specifically designed for iPhone and iPad users if you're interested in giving it a go.
Best regards, Lorenzo
iScroll offers a fantastic feature of horizontal momentum scrolling, check it out here:
For more information, visit this site
<script src="http://appradar.ru/wp-content/themes/appradar/js/jquery.horizontal.scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var width = 0, height = 0;
$('#slider div').each(function(i, index){
width += $(this).outerWidth();
height = $(this).outerHeight() > height ? $(this).outerHeight() : height;
});
$('#slider').width(width).height(height);
$('#slider-outer').height(height + 8).horizontalScroll();
});
</script>
My goal is to have the footer of my page occupy just one line in height. On occasion, when I open my page in a new browser tab, the footer ends up being two lines tall. However, if I simply reload the page within the same tab, everything appears as intende ...
I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...
Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...
I need to create a list of clickable links for my navigation bar with the URLs provided using the url-tag. To achieve this, I have a list of dictionaries containing all the necessary information for each link, and I am creating a template string with them ...
Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...
I am trying to extract a value from a hidden element ID and set it as the inner HTML for another element ID. Below is my code: <script> function replaceText(){ var x=document.getElementById("mainTitle1").textContent; document.getElementById("mainTi ...
Today marks my first time posting. I am currently utilizing BeautifulSoup 4 and Python 2.7 (PyCharm) to work on a webpage that contains various elements. Specifically, I am aiming to extract certain elements where the tags are either 'Salary:' or ...
I've noticed that the background color #1ABC9B appears differently on various monitors when viewing my website. On MAC systems and smart phones, it appears as a lighter shade of green compared to other laptops where it appears darker. What could be ca ...
Allow me to illustrate the issue with a visual aid. In the provided image, you can observe that the checkmark is perfectly centered vertically in the one-line p element. However, as the text extends to two or three lines within the p element, the checkmar ...
I am facing a dilemma with displaying my site logo. I have both an image version and a text version, and I want to choose which one to display based on the vertical position on the page and the screen width. <a class="navbar-brand" id="top-logo" href=" ...
I am struggling to display a group of 8 checkboxes in 2 columns with labels on the right side of the checkboxes, and I want them to be left-aligned instead of center-aligned. Despite trying different approaches with the CSS, I can't seem to achieve th ...
I'm currently facing an issue with positioning an image within a container below a header. The problem lies in the fact that the image extends beyond the header's position, filling up the entire container. Below is the code snippet I'm work ...
Hey there, I've run into a bit of a dilemma with my HTML web page. I have a DHTMLWindow that opens, and I want to send a parameter from the 'parent' HTML web page to that window. The goal is for the DHTMLWindow to then pass on the parameter ...
I am looking to have an image appear when a mouse hovers over ONLY the "name" of the food item, and not the "price" which is part of div.child. <div class="menu-block"> <div class ="menu-titles"><span><p class="title">Brunch< ...
I have a customized navbar(bootstrap) on my webpage. <nav class='navbar fixed-top navCustom '> <div class='navComp'> <input class='dateStyle' id='dateChart' type='date' value=& ...
My task involves manipulating an HTML string by removing all attributes from anchor tags, except for href and target (if target has a valid value). $content = '<p style="abc" rel="blah blah"> Hello I am p </p> <a href="https://example. ...
Is there a way to keep the corners of a block hidden when it has both overflow set to hidden and border radius applied while being translated? HTML <div class="scroller"> <div class="scroller-content"></div> </div> CSS .s ...
I need help adjusting the distance between the text labels and input elements in my HTML form, which is designed using Bootstrap classes. Specifically, I want to reduce the space between the <label> and the <input> elements when they are displa ...
Hey there! I'm currently working on implementing a swipe feature for the side menu bar. I have already added a click method in my code, but now I also need to incorporate a swipe technique. When the side bar is opened, I want to remove the inside im ...
Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...