Basic image slider featuring adjustable heights

I'm currently working on a basic content slider, but I've encountered an issue where the container doesn't expand as new content slides in. It seems to be related to the absolute positioning of the content items. If I don't use absolute positioning, the content items don't align properly.

So my question is: How can I make the container (#triv_cont) expand as new content items slide in? And if I shouldn't use absolute positioning for the content items, how do I ensure they line up correctly? I've tried using vertical-align: top without success.

You can view the test code here -> http://codepen.io/lukeocom/pen/mHyBv

The CSS selector for the content items is:

#promos .trivia #triv_cont div

and for the container:

#promos .trivia #triv_cont

I've looked into similar questions on this topic but haven't been able to find a solution...

jqueryjquery-uicss

Answer №1

My solution to this issue involved adjusting the container's height to match the height of the following content item when the next button is clicked.

thisHeight = $('#' + selx).height() + 20;

After that,

$('#triv_cont').animate({height: (thisHeight + 'px')}, 1000, 'swing');

It was a straightforward fix...

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

Preventing overlapping of a "position-fixed" element with variable size: Effective strategies

I am trying to keep a fixed element visible at the top of the page while also having content with varying heights. Here is the CSS code for the fixed element: div.topfloat { position: fixed; top: 0; width: 100%; } The issue I'm facing is ...

htmlcss

Transitioning from pop-up modals to AngularJS JSON

I have a table with fields such as: product, lot, input1, input2. It is possible to clone a line or add a new line. The selection of the Product is based on a value from JSON data. The Lot selection initially stays empty and gets filled with sub-arrays rel ...

javascriptjqueryangularjsjson

Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a ...

ioscssiphoneiframe

Jquery enhance the speed of appending elements

I have written a short script and I am looking to achieve a slow fade-in effect for the "appearance" instead of it just popping in. How can I do that? I want to maintain the append functionality as well. <script> $( "#text" ).hover( functio ...

jquery

Update the class information using jQuery after performing an action and serialize the button's ID for AJAX requests

I'm facing an issue with two buttons on my page: <td> <button id="1" class="green-button">Publish</button> <button id="1" class="yellow-button">Delete</button> </td> The green-button and red-button have different ...

javascriptphpjqueryajax

Fetch the content of a div from one webpage and display it on another page

For the past couple of hours, I've been attempting to load content from one div on a page and display it on another. Here's an example: Let's say there's this Wikipedia page. My goal is to retrieve the content within the div with id="m ...

jqueryload

Prevent all click and keyup events from being activated until the ajax call finishes

Is there a way to prevent all links from being activated until an ajax call is complete? I am looking for a solution that works for both click events and keyup triggers. In essence, what I am after is: - The Ajax link is activated (either through a clic ...

javascriptjqueryajaxclickkeyup

A tutorial on preventing backbone.js from automatically adding /# when a dialog is closed

Whenever I navigate back on my backbone page, it automatically adds /# to the URL. This results in loading an empty index page from the Rails home view when pressing back again. Disabling turbolinks fixed this issue for me. However, another problem arises ...

javascriptjqueryruby-on-railsbackbone.jszurb-foundation

Refresh jQuery DataTable with updated search results

I have a function that loads the DataTable once the document is loaded. $(document).ready(function() { var $dataTable = $('#example1').DataTable({ "ajax": 'api/qnams_all.php', "dataType": "json", "bDestroy": true, "s ...

javascriptphpjquerydatatables

Exploring the depths of deep linking with jQuery Address

Trying to implement the jQuery address plugin for deep linking on my ajax website has been challenging. I'm struggling to grasp how to configure it properly. The provided examples aren't making it any clearer either. Can someone please share a ...

jqueryajaxdeep-linking

Calculate the total value of selected checkboxes in every row of the table

I am looking to calculate the total sum of checkboxes for each row in a table Javascript : For Sum $('input[type="checkbox"]').change(function() { var total = 0; $('#mytable tr').each(functi ...

javascriptphpjqueryfunctioncheckbox

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: I'm attempting to achieve this look using CSS: I've experimented with skewing but the red area persists, regardless of the degree value used. Here is my basic structure: <div class= ...

htmlcsstransform

Leveraging jQuery to enable or disable RequiredFieldValidators

Can someone help me with disabling RequiredFieldValidators in JavaScript? var emailEmpty = $("#registerContent").find("[id$=email_blank]"); company.click(function () { ValidatorEnable(emailEmpty, false); }); I've tried using ValidatorEnable ...

jquery

Center the text vertically within a card using Vuetify styling

I am seeking a way to vertically align text within a card using Vuetify or traditional CSS in a Vue project. Here is my code: <template> <div> <v-container class="my-5"> <v-row justify="space-between"> <v- ...

javascriptcssvue.jsfrontendvuetify.js

What is the method for showcasing an h1 heading and an unordered list link side by

Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler) Below is the code snippet: HTML: <div id="header"> <h1>Logo</h1> ...

htmlcsshtml-listsinline

Limiting the size of textboxes in Twitter Bootstrap

I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...

htmlcsstwitter-bootstraptextbox

Alignment problem with email signatures on MAC devices

Recently, I designed a straightforward email signature and successfully copied and pasted it into the appropriate section. However, while it works perfectly in Outlook, there is an issue with MAC Mail (Version 7.3) where the image extends beyond the table. ...

htmlcssmacosemailsignature

Is it possible to generate a dynamic submenu and trigger events using the append method?

As I attempted to add a submenu within another submenu on a navigation bar, my goal was to have the submenu "reports management" appear when the Report option is clicked. Below is the code snippet I used. HTML <li class="drop-down"&g ...

jquery

Transfer a characteristic from one element to another

I need help with multiple columns of checkboxes and labels. <ul class="column1"> <li> <input value="jan" type="checkbox" /> <label>Jan</label> </li> <li> <input value="feb" t ...

jqueryhtmlcheckboxlabel

Possible for jQuery autocomplete to reposition the list?

Is it feasible for me to adjust the position of the dropdown list by moving it down 4 pixels? I've experimented with various styles within .ui-autocomplete {}. These include: margin-top: 4px; top: 4px However, these modifications don't appe ...

jquerycssautocompleteposition