Tips for creating a horizontally scrolling div

Here is the CSS for the div that needs to be able to scroll horizontally:

.form-holder{
        padding-left: 20px;
        width: auto;
        background: ;
        overflow-x: auto;
        max-height: 300px;
        padding-bottom: 30px;

    }

Every time I upload an image, a preview is available and I want these images to be viewed horizontally instead of vertically. Therefore, I need the div to be scrollable from left to right.

Here is the fiddle link: http://jsfiddle.net/roowako/AZvuL/

jquerycss

Answer №1

I believe this is the content you are looking to generate :

FIDDLE

Here is the HTML code snippet for creating it:

<div class="form-holder">
    <div class="img_wrap">
        <img src="http://lorempixel.com/output/nature-q-c-280-280-4.jpg" />
        <img src="http://lorempixel.com/output/sports-q-c-280-280-2.jpg" />
        <img src="http://lorempixel.com/output/city-q-c-280-280-9.jpg" />
        <img src="http://lorempixel.com/output/fashion-q-c-280-280-1.jpg" />
    </div>
</div>

And here is the CSS code snippet involved:

.form-holder {
    padding-left: 20px;
    width: 300px;
    background: grey;
    overflow: auto;
    max-height: 300px;
    padding-bottom: 30px;
}
.img_wrap {
    width: 1120px;  /*width of all images */
}
.form-holder img {
    float:left;
}

Answer №2

Utilize jQuery along with the Mouse Wheel Plugin to attach a mousewheel event to the specific div in order to enable horizontal scrolling.

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(document).ready(function() {
$('#divId').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 30);
    e.preventDefault();
});
});
</script>

You have the option to adjust the value that is multiplied by delta (in this case, 30) to determine the number of pixels moved with each scroll.

Answer №3

To enable horizontal scrolling, restrict the width of your div element.

.scroll-container{
        padding-left: 15px;
        width: 250px;
        background-color: #ffffff;
        overflow-x: scroll;
        max-height: 350px;
        padding-bottom: 20px;
    }

Answer №4

Snippet: http://jsfiddle.net/f2EhJ/

To control the dimensions, make sure to restrict the size and apply the overflow-x property with a value of auto

.container{
        margin-left: 10px;
        height: 250px; /* adjust as needed */
        width: 400px;
        background: #FFFFFF;
        overflow-y: hidden;
        overflow-x: auto;
        max-height: 300px;
        padding-top: 20px;

    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to grasp the correct method for understanding For loops

Lately, I've been diving into teaching myself Node.JS and it has been quite an enjoyable experience. However, I've hit a frustrating roadblock that is really causing me some grief. For some reason, I just can't seem to grasp the concept of F ...

javascriptjquerynode.js

Using the @ symbol in jQuery within an MVC framework can be achieved by first ensuring that

I'm attempting to incorporate the @ symbol into a JavaScript if condition, but I keep receiving an error. if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) { alert('yes'); ...

javascriptjqueryasp.net-mvc

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): Examining my existing frontend code: const SignIn = () => { ...

javascripthtmlcssreactjsflexbox

Why won't the display: block CSS style apply to my div element?

Take a look at my code: https://jsfiddle.net/r62p4209/ I created a search bar with company brand name and some buttons on the right, positioned in the center. My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next lin ...

htmlcssdisplay

NextJS compilation sometimes results in undefined errors when using Sass styles

My peace lies in the sass code: .link display: inline-table text-align: center align-self: center margin: 5px 15px font-size: 20px color: black text-decoration: none transition: 0.1s ease-in-out .link:hover text-decoration: underline .l ...

csstypescriptsassnext.jstsx

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

javahtmlcssspringweb

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters

Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement). I'v ...

javascripthtmljquerycssowl-carousel-2

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

csswordpress

jQuery is working perfectly on every single page, with the exception of just one

Check out my code snippet here: http://jsfiddle.net/9cnGC/11/ <div id="callus"> <div class="def">111-1111</div> <div class="num1">222-2222</div> <div class="num2">333-3333</div> <div class="num3">444-4444< ...

javascriptjqueryhtmlcss

Finding your way to a <div data-role="page"> sans the use of an anchor tag

I need assistance with a specific HTML setup. The first div tag in the code below contains a form with a table that has two columns labeled A and B, along with a button. The second div tag holds a text box, dropdown menu, and submit button. When the button ...

jqueryhtmlwindow.location

CSS from the parent page is not being applied to AJAX-injected content

I recently added AJAX functionality to a new website to dynamically load and insert Wordpress page content using AJAX. However, I encountered an issue where some CSS styles that were supposed to be loaded in the page head were not being applied. This resu ...

jquerycssajax

What is the best way to use a handlebar ternary operation to dynamically add an HTML element in AngularJS?

Please Note: When I refer to "handlebars," I am not talking about Handlebars.js, but rather the double curly braces. I have a table where I need to display data in one of the columns along with an additional HTML element based on the result of a ternary o ...

javascriptjqueryhtmlangularjs

Is it not feasible to place a well within a column using Bootstrap?

Would like to place a .well div (or a button, whichever works best) within the designated green area shown in this image: here Here is the code I currently have: <div class="container-fluid"> <div class="row row1" style=&q ...

csstwitter-bootstrap

What is the method for retrieving the IDs of checkboxes that have been selected?

I attempted running the following code snippet: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://static.jstree.com/v.1. ...

javascriptjqueryhtmlajaxjstree

Placing the error message for validation in its appropriate position

My login form has a layout that looks like this: https://i.stack.imgur.com/i7rCj.png If I enter incorrect information, it displays like this: https://i.stack.imgur.com/ItNJn.png The issue is that when the error message appears, it causes the login form ...

phphtmlcssformsauthentication

Can adjusting the viewport by using touch controls alter the size of the viewing screen?

When I tried to zoom in on a webpage using touch instead of the keyboard shortcut Ctrl +, I noticed that the elements stayed the same size but the screen itself was enlarged. It seems like this method does not affect the size of the viewport. However, whe ...

htmlcss

Using AJAX to send a POST request with the PHP $_FILES superglobal while preventing the default form submission with the onclick

Seeking to implement a photo upload form using an AJAX script that is currently in place. Currently, I have the html form with a file input field. Upon submission, there is an onclick event triggering "PostForm(); return false;" This action directs to a ...

phpjavascriptjqueryajax

Tips for determining what elements are being updated in terms of style

I need assistance with modifying the functionality of a webpage's dropdown menu. Currently, it displays when the mouse hovers over it, but I want to change it to appear on click using my own JavaScript. Despite setting the onmouseout and onmouseover e ...

javascripthtmlcssicefaces

What is the best way to show only one div at a time when selecting from navbar buttons?

To only display the appropriate div when clicking a button on the left navbar and hide all others, you can use this code: For example: If "Profile" is clicked in the left navbar, the My Profile Form div will be displayed (and all others will remain hidde ...

javascripthtmljquerycss

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint