What is the best way to update the text within a Span element as the user moves through the Jquery slider?

Can I utilize jQquery to dynamically alter the text content of my "video_box_label" span element based on the active slide in my "flexslider" slideshow? For instance, when the slideshow transitions to the second slide, I want the text to change from "Meet the Team" to "Adil Saleem". I am aware that the active slide receives the "flex-active-slide" class, which might be helpful. Please note that the provided code is not easily previewable due to the internal jQuery file references. Also, the slider was obtained from this source: 


        <link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeFlexslider.css" type="text/css" media="screen" /> <link href='https://fonts.googleapis.com/css?family=Asap' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>
        <script src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.min.js.js"></script> <script defer src="https://epwork.ep.corp/wg/ProdPayroll/jquery/jquery.flexslider.js"></script> <link rel="stylesheet" href="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/ProductionPayrollHomeSlideShow.css"> <script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/plyr.js"></script> <script src="https://epwork.ep.corp/wg/PayrollSolutions/SolutionsSetup/SiteAssets/jquery1.9.0.min.js"></script>
javascriptjqueryhtmlcss

Answer №1

To customize the content displayed in a flexslider span, you can utilize the after or before function and specify the data you want to insert. In this example, I have used the after function to update the title span with the data-text attribute of the current image.

If you need more information, refer to the code snippet below:

$('.flexslider').flexslider({
  animation: "slide",
  after: function(){
    //console.log("do Something");
    var target = $(".flex-active-slide img").attr("data-text");
    $("#titleHere").html(target);
    }
});
.flexslider {
    width: 200px;
    height: 200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>
<!-- Place somewhere in the <body> of your page -->
<span id="titleHere">TITLE HERE</span>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="https://dummyimage.com/200" data-text="NEW TITLE 1"/>
    </li>
    <li>
      <img src="https://dummyimage.com/210" data-text="NEW TITLE 2"/>
    </li>
    <li>
      <img src="https://dummyimage.com/220" data-text="NEW TITLE 3"/>
    </li>
    <li>
      <img src="https://dummyimage.com/230" data-text="NEW TITLE 4"/>
    </li>
  </ul>
</div>

Answer №2

If you use this jQuery code snippet, it will update the text in your "video_box_label" span to read "Adil Saleem". For more information, you can refer to https://www.w3schools.com/jquery/html_text.asp

$('#video_box_label').text('Adil Saleem');

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

Tips for isolating html and js code?

After following a tutorial to write the program, I attempted to separate the HTML code from JS but encountered issues. Some lines of JS code are connected to the database as parameters, and when I split the HTML and JS codes, it no longer functions. Does ...

javascriptphphtml

Retrieving URL Parameters in Meteor-React's createContainer

In my React/Meteor application that utilizes react-router, I am attempting to pass the URL parameters (for example, /user/P8HDQMAuapRESoWo6) into createContainer. This function fetches the result of the initial MongoDB query: let user = Meteor.users.findO ...

javascriptmongodbreactjsmeteormeteor-react

Manually assigning a value to a model in Angular for data-binding

Currently utilizing angular.js 1.4 and I have a data-binding input setup as follows: <input ng-model="name"> Is there a way to manually change the value without physically entering text into the input field? Perhaps by accessing the angular object, ...

javascriptangularjs

Distribute the text evenly on either side of the center

I have a unique layout with two datalist elements centered, text positioned above, and two buttons integrated. body { background-color: DarkGray; } h1 { color: black; font-size: 30px; font-family: 'lucida console' } span { color: #4434 ...

htmlcsscss-floatcentering

Optimizing web development: Employing HTML templates to dynamically enhance website performance

My task involves the redesigning of an existing website (foo.com) using .NET and C#. The website caters to multiple companies such as abc.com, def.com, ghi.com, etc. Currently, the website utilizes html templates specific to each company's website in ...

c#asp.nethtmlrefactoring

Exploring jQuery functionalities for dynamic selector input

I have encountered a scenario where I must use dynamic ID's in the format of functionalDescription_IDNUMBER across my page. It is necessary to target specific areas based on the unique IDNUMBER associated with the clicked object. However, I am looking ...

javascriptjquerydynamicjquery-selectors

How can I integrate both the ui-bootstrap datepicker and timepicker in an AngularJS application?

I am currently developing a web application that utilizes UI-Bootstrap's datepicker and timepicker directives. The datepicker is set up as a simple popup dialog, while the timepicker appears on the page next to the datepicker. However, I am facing ch ...

javascriptangularjstwitter-bootstrapweb-applicationsangular-ui-bootstrap

Passing a Variable Amount of Arguments to a Python Script from Node.js through the Command Line

I have a node server that is responsible for running an external python script using child_process execFile() When I know the exact number of arguments, passing them like this works perfectly fine: const { execFile } = require('node:child_process& ...

javascriptnode.jscommand-lineargumentschild-process

When a row is clicked, retrieve the data specific to that row

I have implemented a data-grid using react-table where I pass necessary props to a separate component for rendering the grid. My issue is that when I click on a particular row, I am unable to retrieve the information related to that row using getTrProps. ...

javascriptreactjssetstatereact-table

Adjusting box width based on device type: desktop and mobile

I'm currently working on a form that includes several mat-form-fields. I have set the width of these items to 750px, but this does not work well for mobile devices. I am trying to figure out how to make the form or mat-form-field automatically adjust ...

cssangularflexboxangular-material

Are we looking at a declaration of an arrow function? Is this concept even real?

I have been exploring the concept of function expressions versus function declarations with arrow functions. From my understanding, this is an example of an arrow function expression: const fred = greeting = () => { console.log("Hello from arrow ...

javascriptarrow-functionsfunction-expression

Navigating through JSON data that has been returned

When I use AJAX (jQuery) to query my database, the data I receive back is causing some difficulties. While searching for a solution, I came across similar issues posted by others who pointed out that the PHP code (specifically how data is stored in the arr ...

javascriptphpjqueryjson

Verification of custom data type validation

I am puzzled by the behavior of this custom type state: interface DataType { [key: string]: string;} const [data, setData] = React.useState<DataType>({}); When I attempt to execute console.log(data === {}) It surprisingly returns false. Why ...

javascriptreactjstypescript

Transforming Yii1 code into Yii2 code (altering the language component)

I am facing an issue. I have a code in Yii1 that allows me to change the language on my site. echo CHtml::ajaxLink('EN', array('/'), array( 'type' => 'POST', 'success' => 'j ...

javascriptajaxyiiyii2

Transitioning from JSTL's forEach loop to angular.js's ng-repeat functionality during the spring season is like switching your

I am just getting started with angular.js. I currently have a spring MVC application and I want to transition from jstl to angular.js. This is how I began the process: <table> <c:forEach var="list" items="${list}"> <tr c ...

javascriptjqueryangularjsspringspring-mvc

Using CSS grid to wrap three divs simultaneously

Can CSS grid be utilized to style three divs so that they wrap simultaneously when the screen size decreases? This transition: +---------+--+---------+--+---------+ | div | | div | | div | +---------+--+---------+--+---------+ to this: +- ...

htmlcssgrid-layoutcss-grid

The dynamic styles set by CSS/JavaScript are not being successfully implemented once the Ajax data is retrieved

I am currently coding in Zend Framework and facing an issue with the code provided below. Any suggestions for a solution would be appreciated. The following is my controller function that is being triggered via AJAX: public function fnshowinfoAction() { ...

javascriptjquerycssajaxzend-framework

What is the reason for Thickbox changing the href of links?

I'm running a WordPress setup with various plugins and a customized theme. The issue I'm facing is related to Thickbox, which is used on one of my pages to display picture pop-ups. The problem arises when only the first image clicked seems to wo ...

jquerythickbox

Using HTML and JavaScript to automatically update one input date based on changes made to another

Currently, I am developing an Angular application and encountered a challenge with two date input fields: <div class="col-lg-3"> <div> {{ dataInizioLabel }} </div> <input required type="datetime-local" ...

javascripthtmlangular

What is the process for cancelling an interval when it is disabled in my configuration file?

To automate a bot, I want it to stop running an interval if the configuration file specifies "off" and continue running if it says "on". I attempted this: Using discord.js: config.Interval = setInterval(() => { WallCheck.send(WallCheckemb ...

javascriptnode.jsdiscord.js