Creating an Interactive Text Slider with jQuery

Looking for a way to have multiple div classes called quote that contains a text and a blockquote fade into the next one every 5 seconds?

Check out the example markup below:

<div id="quoteWrapper">
<div class="quote">

    <blockquote>First Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Third Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>
</div>
jqueryhtmlcss

Answer №1

If you are looking for a way to display quotes at specific intervals using jQuery, you can achieve that by creating an interval and manipulating the visibility of different div elements containing your quotes.

<div class="quote visible">

    <blockquote>Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

<div class="quote">

    <blockquote>Second Quote goes here</blockquote>

    <p class="quoteBy">Author</p>

</div>

Next, you can set up a setInterval function to call a showQuote function every 5 seconds:

setInterval(showQuote, 5000);

...

function showQuote() {
    $('.quote.visible').fadeOut(function() {
        // switch the visibility classes between the quotes
        // fade in the next quote after fading out the current one
    });
}

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

Is the whitespace-pre-line feature of TailwindCSS experiencing issues?

whitespace-pre-line doesn't seem to be working for me. I attempted to replicate the same code from my text editor on https://play.tailwindcss.com/, and it worked perfectly. Below is a screenshot that I have attached. This is the sample code in my tex ...

htmlcsstailwind-css

Discovering all invisible divs within another div can be achieved by following these steps

Here's the HTML code I'm working with: <div id="main"> <div class="item">String</div> <div class="item">String</div> <div class="item">String</div> </div> Whenever a user clicks on any ...

jquery

Is it better to append content in JQuery rather than replacing it with .innerHTML?

Here is a function designed to retrieve older wallposts from a user, 16 at a time, and add each chunk of 16 to the end of the current list in the div called "sw1". The function works well, except when there is a wallpost containing a video or embedded obj ...

javascriptjquery

Basic jQuery and Ajax mishap

I've come across this code snippet: var custID = 1; $.ajax({ url: 'php/viewCustomer.php', type: 'GET', data: '{custID: ' + custID + '}', dataType: 'json', cache: false, before ...

ajaxjqueryerror-handling

Small hiccup in jQuery leading to duplicate entries in the field

I am attempting to use jQuery to add the value of a select box to both a hidden input field and a div that is displayed in public view. Below is the code I have: <script type='text/javascript'> $("#departments_submit").click(function(){ ...

jqueryhtml

Styling with CSS: Creating a scrollable gallery of images with a hover effect

I'm struggling to align multiple images horizontally on the page with a hover effect for each image. I can achieve one or the other separately, but not both together. As a beginner in HTML/CSS, I know it's a simple process. Below is my code with ...

javascriptjqueryhtmlcss

Stopping the Game Loop in Windows Phone 8.1 with WinJS

Despite everything working smoothly, I am facing an issue with stopping the game loop when the Start button is pressed and the app is moved to the background. The event handler for suspend, app.oncheckpoint = function(args) {}, does not seem to fire for t ...

javascripthtmlwinjs

Localhost causing variations in CSS behavior

I've been working on a website and wanted to share it with someone, so I set up a webserver. However, I've encountered some peculiar behavior when trying to access the site via LAN rather than through my localhost. Firstly, when viewing the site ...

csslocalhostfont-face

Is it possible to use jQuery datepicker to accept partial dates, such as "05/"?

I have a Date of Birth field displayed as a textbox connected to a date picker. The following is the HTML code: <input class="text-box single-line hasDatepicker valid" data-val="true" data-val-date="The field Birth Date must be a date." data-val-requir ...

jqueryjquery-validate

Validating Laravel emails with JavaScript blur and utilizing AJAX and jQuery

Looking for a way to validate a form in Laravel without hitting the submit button? I've tried some code, but only the email format validation seems to be working. Any tips on what I should do next? I'm new to Ajax. PS: When I enter a valid email ...

javascriptphpjqueryajaxlaravel

Show the loader animation until the browser's loading icon stops spinning

My website receives a high volume of traffic and pulls data from several servers to display on the page. It typically takes 3-4 minutes for the entire page to finish loading. Here is a preview of some of the partial page data: https://i.sstatic.net/br4sr. ...

javascriptphpjqueryhtml

Accessing a JSON array in PHP to retrieve a specific value

I am working with a JSON array that I received from an API. Specifically, I am trying to extract the "value" and "value_high" fields from the JSON related to the Mann Co Supply Crate Key. While I was able to create a script that retrieves the values store ...

phphtmljson

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

Which specific combination of CSS and HTML attributes can cause an image to not display correctly in the Safari browser?

The image labeled "GIANT MANGO" is supposed to be displayed in the center below this text. While it appears correctly in Firefox, Chrome, and IE, it unfortunately does not show up on Safari browser. To view the image, visit Any suggestions on how to fix ...

htmlcssimage

ASP.net and jQuery failing to submit form through email to resolve the issue

I'm currently grappling with a challenge and could use some assistance. Essentially, I have an HTML form styled as a wizard, utilizing the jQuery form wizard plugin along with plugins like jQuery.Form, jQuery.Validation, and jQuery.History. My intent ...

asp.netjqueryemail

Storing the locations of draggable items with personalized user-created material

If I needed to store dynamically created content in a specific position within a container, what would be the best approach? For instance, if a user enters a YouTube URL into an input box and it generates an embedded video in a box container upon hitting ...

javascriptjqueryhtmlgoogle-chrome-extensionlocal-storage

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

Steps for removing the label associated with an input field in an HTML form

I attempted to use JQuery and JavaScript in order to modify the CSS of a label to make it greyed out, but unfortunately I have not been able to achieve this. The label is positioned next to a checkbox, and although I am able to disable the checkbox, I hav ...

javascriptjqueryhtmlcss

Data loss occurring in Gridview populated by jQuery after postback

I am facing a challenge with a gridview that I am populating clientside using javascript (jQuery). I need to find a way to retain the client-side data when the page posts back to the server. Is there a recommended method to achieve this? Below is the jQue ...

jqueryasp.netvb.net

Use ASP MVC to populate a dropdown list when adding a table row with jQuery

I am facing a situation where I have a page containing multiple drop down lists with identical contents. Initially, the page only displays three ddls, but additional ones need to be added based on user input. Additionally, there is other relevant informati ...

jqueryasp.net-mvcajaxdrop-down-menu