When I set the width of my script to 100% in CSS, it causes the width to become distorted

I encountered an issue with my Div Slider that swaps out Divs on click. When I modified the CSS to include the following: 

.hslide-item {width: 100%};

The script started ignoring the entire div width. I am looking for a solution where the .hslide-item can fill its parent div 100% without compromising the functionality of the JavaScript. 

// Adding markup

$('.hslide').wrapInner('<div class="hslide-stage" />');


// Calculating Conditions & Setting Variables

    // var playTimer = 9,
     slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();

    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }

$(window).resize(function() {
    var slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();
    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }
});

$('.hslide-next').live('click', function(event) {
     event.preventDefault();
    $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
});

$('.hslide-prev').live('click', function(event) {
     event.preventDefault();
    $('.hslide-item:last').prependTo('.hslide-stage');
    $('.hslide-stage').css({left: -(slideWidth)});
    $('.hslide-stage').animate({left: '0px'}, 500, function() {
    });
});
function moveForward() {
$('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
}
var timer = setInterval(moveForward,playTimer);

$('.hslide, .hslide-prev, .hslide-next').hover(function(ev){
   // clearInterval(timer);
}, function(ev){
    // timer = setInterval( moveForward, playTimer);
});
body {
    font-family:sans-serif;
}

.hslide {
    height:100px;
    width:100%;
    background:#eee;
    font-size:0;
    position:relative;
    overflow:hidden;
}

.hslide-stage {
    position:absolute;
    white-space:nowrap;
}

.hslide-item {
    display:inline-block;
    background:#ccc;
    box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
    width:500px;
    height:100px;
    font-size:12px;
    text-align:center;
}

.hslide-prev, .hslide-next {
    display:inline-block;
    background:#eee;
    color:#000;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
.hslide-prev:hover, .hslide-next:hover {
    background:#ccc;
}
.hslide-prev-disabled, .hslide-next-disabled {
    display:inline-block;
    background:#eee;
    color:#ccc;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="hslide">
    <div class="hslide-item">One</div>
    <div class="hslide-item">Two</div>
    <div class="hslide-item">Three</div>
</div>
<a href="#" class="hslide-prev">Previous</a>
<a href="#" class="hslide-next">Next</a>

javascriptjquerycss

Answer №1

// Updating markup

$('.hslide').wrapInner('<div class="hslide-stage" />');


// Calculate Conditions & Variables

     var playTimer = 9,
     slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();

    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }

$(window).resize(function() {
    var slideQty = $('.hslide-item').length,
     slideWidth = $('.hslide-item').width(),
     stageWidth = $('.hslide-stage').width(),
     contWidth = $('.hslide').width();
    if ((slideQty*slideWidth) < contWidth) {
    $('.hslide-prev').addClass('hslide-prev-disabled').removeClass('hslide-prev');
    $('.hslide-next').addClass('hslide-next-disabled').removeClass('hslide-next');
    }
    else {
    $('.hslide-prev-disabled').addClass('hslide-prev').removeClass('hslide-prev-disabled');
    $('.hslide-next-disabled').addClass('hslide-next').removeClass('hslide-next-disabled');
    }
});

$('.hslide-next').live('click', function(event) {
     event.preventDefault();
    $('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
});

$('.hslide-prev').live('click', function(event) {
     event.preventDefault();
    $('.hslide-item:last').prependTo('.hslide-stage');
    $('.hslide-stage').css({left: -(slideWidth)});
    $('.hslide-stage').animate({left: '0px'}, 500, function() {
    });
});
function moveForward() {
$('.hslide-stage').animate({left: -(slideWidth)}, 500, function() {
        $('.hslide-item:first').appendTo('.hslide-stage');
        $('.hslide-stage').css({left: '0px'});
  });
}
var timer = setInterval(moveForward,playTimer);

$('.hslide, .hslide-prev, .hslide-next').hover(function(ev){
   // clearInterval(timer);
}, function(ev){
    // timer = setInterval( moveForward, playTimer);
});
body {
    font-family:sans-serif;
}

.hslide {
    height:100px;
    width:100%;
    background:#eee;
    font-size:0;
    position:relative;
    overflow:hidden;
}

.hslide-stage {
    position:absolute;
    white-space:nowrap;
    width: 100%;
}

.hslide-item {
    display:inline-block;
    background:#ccc;
    box-shadow: inset -1px 0px 0px 0px rgb(255, 255, 255);
    width:100%;
    height:100px;
    font-size:12px;
    text-align:center;
}

.hslide-prev, .hslide-next {
    display:inline-block;
    background:#eee;
    color:#000;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
.hslide-prev:hover, .hslide-next:hover {
    background:#ccc;
}
.hslide-prev-disabled, .hslide-next-disabled {
    display:inline-block;
    background:#eee;
    color:#ccc;
    text-decoration:none;
    padding:10px;
    margin:5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="hslide">
    <div class="hslide-item">One</div>
    <div class="hslide-item">Two</div>
    <div class="hslide-item">Three</div>
</div>
<a href="#" class="hslide-prev">Previous</a>
<a href="#" class="hslide-next">Next</a>

.hslide-stage should also have width: 100%

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

Acquiring JSON data from Node.js within Angular

After searching everywhere, I finally managed to retrieve all the data from my database using node and saved it into a file. The data is simple JSON chat logs that can be accessed through my browser with ease. Here's a snippet of how it looks: [{ " ...

javascriptangularjsjsonnode.js

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Is there a way to display a preview of a selected image before uploading it to the server? Here is an example in HTML: <div id="drop_zone" (drop)="dropHandler($event)" (dragover)="onDragover($event)"> <p>drag one or more files to ...

javascriptangulartypescript

The process of rendering a form eliminates the classes that were previously added by J

I am in the process of redesigning a web application and need to incorporate responsive design into the existing UI. My plan is to include col-* classes on specific html elements, such as tables: function addColstoTableCells() { $('table tr.form ...

jqueryhtmljsfresponsive-design

Executing ng-click to access outer controller from within nested ng-controllers

I'm exploring the potential of using angularjs to develop a dynamic page with the following capabilities: It starts off blank, except for a dropdownlist that automatically populates with various apps. Upon selecting an app from the list, relevant da ...

javascriptangularjsangularjs-ng-clickng-init

How can we best organize a VueJS application to accommodate this specific logic?

I am currently working on an app that needs to display data fetched from multiple sources based on a condition. The issue I am facing is that the process of fetching, organizing, and returning the data varies depending on the source, sometimes even requiri ...

javascriptvue.jsvue-component

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Currently, I am working on setting up state to be passed through context in React using hooks. However, when I attempt to use the dispatched state updater function, an error is thrown: Cannot invoke an expression whose type lacks a call signature. Type &a ...

javascriptreactjstypescript

How can I change an icon and switch themes using onClick in react js?

I have successfully implemented an icon click feature to change the colorscheme of my website (in line 21 and changeTheme). However, I also want the icon to toggle between FaRegMoon and FaRegSun when clicked (switching from FaRegMoon to FaRegSun and vice v ...

javascriptreactjstypescript

Using Jquery to encase an element in a div while scrolling down and removing it while scrolling up

After some experimentation, I've managed to wrap an element inside a div using jQuery. My next challenge is to wrap it as you scroll down and unwrap it as you scroll up. Do you think this is achievable? Although I have succeeded in wrapping it while ...

javascriptjqueryhtmlcss

Component fails to update when attribute is modified

My issue is that the crud-table component does not refresh when I change currentTable. It works when I assign currentTable = 'doctor' in the created() hook, but not here. Why is that? <template> <div id="adminpanel"> <div id ...

javascriptvue.jsfrontend

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

“What is the process of setting a referenced object to null?”

Here is an example of the code I'm working with: ngOnInit{ let p1 : Person = {}; console.log(p1); //Object { } this.setNull<Person>(p1); console.log(p1); //Object { } } private setNull<T>(obj : T){ obj = null; } My objective is to ...

javascriptangulartypescript

After changing the page, the Facebook JS SDK fails to function properly when using JQueryMobile

I'm facing an issue with my webapp that utilizes jQuery Mobile for full ajax navigation. I have initialized the Facebook SDK at the pageinit event in jQueryMobile (called on each page). jQuery(document).on('pageinit', function (event) { ...

javascriptjqueryajaxfacebookweb-applications

What is the best way to expand the navigation bar: should I add a side div or incorporate a background image?

I am encountering two issues that I need help solving. My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div. The seco ...

htmlcss

Tips for leveraging Bootstrap Collapse alongside KnockoutJS foreach template

I'm working on a template for an inventory page where users can add items to a store. The challenge I'm facing is how to display basic information like name and price initially, and then expand to show more details when clicked. I'm using kn ...

jquerytwitter-bootstrapknockout.js

Using CSS to Create a Background with RGBA Color and Image

Having an issue with my CSS. I'm trying to create a scrolling background for the left section of my website. The RGBA is currently overlapping the entire page, but I only want it to overlap the background image. The same goes for the gridtile (the ov ...

htmlcss

What is the best way to send a JavaScript key-value pair to a server?

I am facing an issue with sending a key value pair to the server. For example: var obj = {'item1': true, 'item2': false, ........}; When making an ajax call to send this information to the server, I am unable to retrieve individual va ...

jqueryajaxkey-value

PHP and AJAX collaboration encounters issue with returning JSON data

I'm encountering an issue with the PHP & AJAX login functionality. Upon clicking the Login button, instead of receiving the expected alert, I am redirected to login.php and presented with a JSON response like: {"return":"error"} or {"return":"success" ...

phpjqueryajaxjsonauthentication

When state updates in React, the component will rerender without affecting its style

There seems to be a minor oversight on my part. The issue arises in the parent component where I maintain a state of selected items, which are added from the child component. The background color of the child component changes when an item is selected. Ad ...

javascriptcssreactjsreact-hooks

What is the best way to incorporate multiple versions of jQuery on one webpage?

Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...

javascriptjqueryhtml

What is the most effective method to guarantee the creation of an object prior to navigating through the code that relies on it?

I recently encountered an issue with my code that utilizes fetch() to retrieve and convert .tiff images into an html5 canvas for display in a browser using tiff.js (https://github.com/seikichi/tiff.js/tree/master). While the functionality mostly works as i ...

javascriptajaxasynchronousfetch