I require the slideshow div to smoothly move elements down as it transitions between slides

I'm facing an issue with a jquery slideshow that contains quotes of varying lengths. The problem is, the longer quotes overlap with the content below them. I'm trying to figure out how to make the longer quotes push the rest of the page down, avoiding any overlap. HTML:

        <div id="page" class="hfeed">
           <div id="main">
                <div id="primary">
                 <div id="content" role="main">
                  <article id="post-2466" class="post-2466 page type-page status- 
       publish hentry">
                   <div class="entry-content">
                   <div class="brad aside aside-1" >
                     <img class="alignnone size-full wp-image-12" title="image" 
        src="/wp-content/uploads/2012/06/image.jpg" alt="" width="204" height="233" /></p>
                  <blockquote><p>Photo courtesy of Ron Pownall ©2003</p> 
       </blockquote>
                 </div>
                 <div class="defaultText main"></div
                  <div id="quote" class="quotes aside aside-2">
                   <div id="quote1" class="quote"></div>
                   <div id="quote2" class="quote"></div>
                   <div id="quote3" class="quote"></div>
                   <div id="quote4" class="quote"></div>
                  </div><!--quote-->
<footer id="colophon" role="contentinfo">
        <div id="site-generator" class="col-sm-12 footer">
            <ul id="menu-bdf" class="menu bottom-menu col-sm-12 col-md-12">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>

CSS:

body    {
    background-color:#144374!important; 
    color:#FFFFFF!important; font-size:11pt!important; margin:0px; margin:0 auto; padding:0px 0px 0px 0px;
    font-family: inherit;
    position: relative;
  height: auto;
  min-height: 100% !important;
}
#primary .entry-content {
    display: flex;  
  flex-flow: row wrap;
  justify-content: space-around;
}
#primary .entry-content> * {
    flex: 1 100%;
}
/* Large screens */
  @media all and (min-width: 800px) {
    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars 
     */
    .main { flex: 2 0px; }
    .brad { 
        order: 1;
    max-width: 204px;
    }
    .main    { 
        order: 2; 
        max-width: 33%
    }
    .aside-2 { 
        order: 3;
        max-width: 33%
    }
    .footer  { order: 4; }
  }
.quote  {
    padding:0px 10px 10px 10px; 
    font-family:times new roman; 
    line-height:2.6em; 
    font-style: italic; 
    font-size:10pt; 
    color:#a7d2ff;
}
/*********** FOOTER ****************/
.footer {
    clear: both;
    overflow: hidden;
}
.created {
    margin: 0 auto;
    width: 70%;
}

Whenever a longer quote is displayed, it overlaps with the footer section. I need a solution that pushes the footer down, eliminating any excess space created by setting a min-height on the primary div. Any assistance on this matter would be highly appreciated.

javascripthtmlcss

Answer №1

The following code is fully functional: the button cycles through different quotes, and the footer adjusts automatically to accommodate the quotes. Using jQuery, the code iterates through the quotes and toggles the class .active to display the quotes.

If this is not what you were looking for, please let me know.

$("#quote1").addClass("active");

$("button.next").click( function() { 

  i = $(".quote.active").attr("quote-order");
  if ( i =="4" ) {
   i = "0"
   }
  $(".quote.active").removeClass("active");
  $(".quote[quote-order='" + String(parseInt(i) + 1 ) + "']").addClass("active");


});
body    {
    background-color:#144374!important; 
    color:#FFFFFF!important; font-size:11pt!important; margin:0px; margin:0 auto; padding:0px 0px 0px 0px;
    font-family: inherit;
    position: relative;
  height: auto;
  min-height: 100% !important;
}
#primary .entry-content {
    display: flex;  
  flex-flow: row wrap;
  justify-content: space-around;
}
#primary .entry-content> * {
    flex: 1 100%;
}
/* Large screens */
  @media all and (min-width: 800px) {
    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars 
     */
    .main { flex: 2 0px; }
    .brad { 
        order: 1;
    max-width: 204px;
    }
    .main    { 
        order: 2; 
        max-width: 33%
    }
    .aside-2 { 
        order: 3;
        max-width: 33%
    }
    .footer  { order: 4; }
  }
.quote  {
    padding:0px 10px 10px 10px; 
    font-family:times new roman; 
    line-height:2.6em; 
    font-style: italic; 
    font-size:10pt; 
    color:#a7d2ff;
    display: none;
}
.quote.active {
  display: inherit;
}
/*********** FOOTER ****************/
.footer {
    clear: both;
    overflow: hidden;
}
.created {
    margin: 0 auto;
    width: 70%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page" class="hfeed">
<button class="next">Next Quote</button>
           <div id="main">
                <div id="primary">
                 <div id="content" role="main">
                  <article id="post-2466" class="post-2466 page type-page status- 
       publish hentry">
                   <div class="entry-content">
                   <div class="brad aside aside-1" >
                     <img class="alignnone size-full wp-image-12" title="image" 
        src="/wp-content/uploads/2012/06/image.jpg" alt="" width="204" height="233" /></p>
                  <blockquote><p>Photo courtesy of Ron Pownall ©2003</p> 
       </blockquote>
                 </div>
                 <div class="defaultText main"></div
                  <div id="quote" class="quotes aside aside-2">
                   <div id="quote1" class="quote" quote-order="1">Hello</div>
                   <div id="quote2" class="quote" quote-order="2">Longer<br>Longer</div>
                   <div id="quote3" class="quote" quote-order="3">Longer<br>Longer<br>Even longer</div>
                   <div id="quote4" class="quote" quote-order="4">Longer<br>Longer<br>Even longer<br>Longest!</div>
                  </div><!--quote-->
<footer id="colophon" role="contentinfo">
        <div id="site-generator" class="col-sm-12 footer">
            <ul id="menu-bdf" class="menu bottom-menu col-sm-12 col-md-12">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</footer>

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

employing variable in front of json notation

For my github-gist project, I am using JavaScript and AJAX to customize the file name. Here is the JSON data I am working with: var data = { "description": gist_description, "public": true, "files": { "file.txt" : { "content": gist_conten ...

javascriptjsongithubgithub-apigist

Creating an Eye-catching Presentation: Tips for Adding Text to Your CSS3 Slideshow

I am currently in the process of creating a CSS3 slideshow with text for each image. I found inspiration from this example: . However, I made some modifications to make it responsive. Here is the HTML code I have used: <div id="slideshow"> < ...

htmlcss

Retrieve a remote text file using vanilla JavaScript instead of relying on jQuery

Currently, I am aiming to retrieve the content of a text file using JavaScript for parsing purposes. Although I previously relied on jQuery and JSONP for this task, I now prefer to achieve it without any framework. Despite numerous attempts, none have bee ...

javascriptajaxxmlhttprequest

While making a promise, an error occurred: TypeError - Unable to access the property '0' of null

I encountered an issue when trying to assign data from a function. The error appears in the console ((in promise) TypeError: Cannot read property '0'), but the data still shows on my application. Here is the code: <template> ...

javascriptvue.jsasynchronousasync-awaitpromise

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

Only when the user has successfully completed the reCAPTCHA and checked the checkbox, Vue will be able to

For my new project developed with VueJs, I am implementing a Single Page Application (SPA). The objective is to incorporate a simple if statement functionality. When the user checks a checkbox and successfully solves the reCaptcha, Vue should send an email ...

javascriptvue.jsrecaptcha

What are the steps for importing KnockOut 4 in TypeScript?

It appears straightforward since the same code functions well in a simple JS file and provides autocompletion for the ko variable's members. Here is the TypeScript code snippet: // both of the following import lines result in: `ko` undefined // impo ...

javascripttypescriptimportknockout.jstsc

Pulling Specific HTML Element from External Website with PHP

<?php $info = file_get_contents('http://examplewebsite.com/data'); echo $info; ?> I am trying to extract specific information from a remote website using PHP, focusing only on certain tags. While I have found a script that allows me t ...

phphtmlhtml-parsing

The HTML code is displayed on the page as source code and is not run by the browser

Here is the code snippet I am using: $link = "<a class=\"openevent\" href=\"$finalUrl\" target=\"_blank\">Open Event</a>"; foreach ($spans as $span) { if ($span->getAttribute('class') == 'categor ...

phphtmldomdocument

Issue with dropdown not toggling open when using focus and focusout events

I am facing an issue with two dropdowns having the same class, referred to as "dropdown" in this scenario. I created a fiddle using jQuery to manipulate these dropdowns: $('.dropdown').focus(function () { //Code to manipulate this dropdown }) ...

javascripthtmljqueryjquery-events

JavaScript Regular Expression for standardizing phone number input

I'm working with an input for a phone number in French format which can accept two different formats: 0699999999 +33699999999 There is currently no check for the length of the number. In the database table, the field is varchar 12, but shorter inp ...

javascriptangularjsregexdirective

Launching an embedded webpage in a separate tab within the main browser window

In my current setup, I have implemented an iframe within the main window. The iframe includes a form where users can input data and submit it. Currently, I achieve the submission with the following code: var openURL = '/results/finalpage'; windo ...

javascriptjqueryiframejquery-events

Adjust the angle of an object precisely using a transform upon hovering over a designated button

I am looking to design a menu that always keeps the arrow pointing at the button I hover over with my cursor. If I don't hover on any button, then it should stay in the position of the last button I hovered over. HTML: <html lang="en"> <hea ...

jquerycssanimationrotationtransform

Blending Buffers or another approach

How can I resize an image screenshot from the webshot module in memory without saving it to disk? Here is my current code: var webshot = require('webshot'); var fs = require('fs'); var sharp = require('sharp'); alldata ...

javascriptnode.jsexpress

Exploring date comparison in AngularJS

I've encountered an issue while using ng-show in a page that I'm currently designing: <td ng-show="week.EndDate > controller.currentDate"> The week object has a property called EndDate, and the value of currentDate is being set in my c ...

javascriptangularjs

Tips on uploading information from a PDF document onto a website

My goal is to develop a program or script that can extract data from PDF form fields and automatically input it into the corresponding textfields on my website, all done through the front end. The problem I'm facing is not knowing where to begin with ...

htmlpdfpdf-form

Choose the row based on the values in the columns

I am facing a situation where I have to choose a specific row in a datatable that displays rows in groups of 10, based on the value of its column. Previously, I successfully used the following code to select the first row. myGroupTable.row(':eq(0)&ap ...

javascriptdatatables

"Overlooked by z-index, absolutely positioned overlay causes confusion

I have been working on a template where I am trying to create a glow effect in the center of three divs with different color backgrounds. I added an absolutely positioned container with 10% opacity, but it ended up overlaying everything and ignoring z-inde ...

htmlpositionoverlayz-index

Having trouble accurately referencing the domain across various servers

I have set up two servers for production - one for php files and the other for static (css, js) files. Within my config.php file: $path ="https://mystaticdomain.com/"; To simplify access to paths, I created a variable to store the path for css and js fi ...

phpcss

Tips for incorporating HTML into a Drupal 7 module

I have created a module that accepts user input, validates it, and then displays an image based on the input provided by the user. Below is the code snippet for this functionality: <?php function fisheye_menu() { $items = ...

htmlimagedrupalmoduledrupal-7