Here my search is working but I am a newbie and doesn't know how to use the npm...I am using HTML with VueJS to implement this and successsfully created the search filter but couldn't implement the highlight filter..Some leads are markjs.io that is used and some other custom vuejs filters but couldn't implement them.
class Post {
constructor(title, link, author, img, course, coursel, cours, coursl, cour, courl, cou, coul, co, col) {
this.title = title;
this.link = link;
this.author = author;
this.img = img;
this.course = course;
this.coursel = coursel;
this.cours = cours;
this.coursl = coursl;
this.cour = cour;
this.courl = courl;
this.cou = cou;
this.coul = coul;
this.co = co;
this.col = col;
}
}
const app = new Vue({
el: "#app",
data: {
search: "",
postList: [
new Post("abc", null, "xyz", "wqw", "qwe", "", " ", null, " ", null, " ", null, " ", null, );
]
},
computed: {
filteredList() {
return this.postList.filter(post => {
return post.title.toLowerCase().includes(this.search.toLowerCase()) ||
post.author.toLowerCase().includes(this.search.toLowerCase()) ||
post.course.toLowerCase().includes(this.search.toLowerCase()) ||
post.cours.toLowerCase().includes(this.search.toLowerCase()) ||
post.cour.toLowerCase().includes(this.search.toLowerCase()) ||
post.cou.toLowerCase().includes(this.search.toLowerCase()) ||
post.co.toLowerCase().includes(this.search.toLowerCase());
});
}
}
});
Here is the HTML code I am using
<div id="app">
<div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search"
onfocus="if(this.value==this.defaultValue)this.value=''"
onblur="if(this.value=='')this.value=this.defaultValue" />
</div>
<div class="wrapper">
<div class="col-lg-12 col-md-4 card" v-for="post in filteredList">
<a v-bind:href="post.link" target="_blank">
<img v-bind:src="post.img"/>
<div style="line-height:20%;">
<br>
</div>
<font size="2">{{ post.author }}</font>
<div class="brmedium"></div>
<font size="5"><b><i><em>{{ post.title }}</em></i></b></font>
<a v-bind:href="post.coursel" title="View Credential" target="_blank"><font size="3">{{ post.course }}</font></a>
<a v-bind:href="post.coursl" title="View Credential" target="_blank"><font size="3">{{ post.cours }}</font></a>
<a v-bind:href="post.courl" title="View Credential" target="_blank"><font size="3">{{ post.cour }}</font></a>
<a v-bind:href="post.coul" title="View Credential" target="_blank"><font size="3">{{ post.cou }}</font></a>
<a v-bind:href="post.col" title="View Credential" target="_blank"><font size="3">{{ post.co }}</font></a>
</a>
</div>
</div>
</div>
<template>
<div>
<input v-model="text" #input="input" />
<p id="x">
Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et
</p>
</div>
</template>
<script>
/*eslint-disable */
export default {
data() {
return {
t: String(""),
text: String(""),
};
},
mounted() {
this.t = document.querySelector("#x").innerText;
},
methods: {
input() {
document.querySelector("#x").innerHTML = this.t.replaceAll(
this.text,
`<span class='h'>${this.text}</span>`
);
},
},
};
</script>
<style>
.h {
background: red;
}
</style>
Simple highligh searching this might help you
Related
I discovered today the template tag and I really like it.
<div class="items">
<template id="item-template">
<div class="item">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor.
</p>
</div>
<div class="source">
Lorem ipsum, pag 12
</div>
<div class="tags">
Tag 1
Tag 2
Tag 3
</div>
</div>
</template>
</div>
I used the template like this and it is working:
var quotes = [
{
text: "asdasd asdasd asdasdasd asdasd1",
source: "source 111",
tags: ["123", "18767"]
},
{
text: "asdasd asdasd asdasdasd asdasd2222",
source: "source 222",
tags: ["22223"]
},
{
text: "asdasd asdasd asdasdasd asdasd333",
source: "source 333",
tags: ["33323", "3338767"]
},
];
function render_quote(text, source, tags) {
var item_template = document.getElementById("item-template").content;
var clone = document.importNode(item_template, true);
clone.querySelector("div.text").textContent = text;
clone.querySelector("div.source").textContent = source;
clone.querySelector("div.tags").textContent = tags;
return clone;
}
if ('content' in document.createElement('template')) {
var items_container = document.querySelector("div.items");
quotes.forEach(quote => {
items_container.appendChild(render_quote(quote.text, quote.source, quote.tags));
})
} else {
console.log("template feature missing.");
}
The problem is I don't know how to render the list of tags. I want to keep them as links. And the tags number is not the same all the time. Can you give me a hint?
just do it in this way!
function render_quote(text, source, tags) {
var item_template = document.getElementById("item-template").content;
var clone = document.importNode(item_template, true);
clone.querySelector("div.text").textContent = text;
clone.querySelector("div.source").textContent = source;
const tagsContainer = clone.querySelector("div.tags")
tags.forEach(tag => {
const tagElement = document.createElement('a');
tagtagElementiv.textContent = tag;
tagElement.href = "#"
tagsContainer.appendChild(tagElement);
})
return clone;
}```;
You could replace clone.querySelector("div.tags").textContent = tags; by
clone.querySelector("div.tags").innerHTML = tags.reduce((html, tag) => html += `${tag} `, '');
Note that I use innerHTML where you use textContent
var quotes = [
{
text: "asdasd asdasd asdasdasd asdasd1",
source: "source 111",
tags: ["123", "18767"]
},
{
text: "asdasd asdasd asdasdasd asdasd2222",
source: "source 222",
tags: ["22223"]
},
{
text: "asdasd asdasd asdasdasd asdasd333",
source: "source 333",
tags: ["33323", "3338767"]
},
];
function render_quote(text, source, tags) {
var item_template = document.getElementById("item-template").content;
var clone = document.importNode(item_template, true);
clone.querySelector("div.text").textContent = text;
clone.querySelector("div.source").textContent = source;
clone.querySelector("div.tags").innerHTML = tags.reduce((html, tag) => html += `${tag} `, '');
return clone;
}
if ('content' in document.createElement('template')) {
var items_container = document.querySelector("div.items");
quotes.forEach(quote => {
items_container.appendChild(render_quote(quote.text, quote.source, quote.tags));
})
} else {
console.log("template feature missing.");
}
<div class="items">
<template id="item-template">
<div class="item">
<div class="text">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor.
</p>
</div>
<div class="source">
Lorem ipsum, pag 12
</div>
<div class="tags">
Tag 1
Tag 2
Tag 3
</div>
</div>
</template>
</div>
I have a question, if someone can help will be greatly appreciated as I've been trying and trying with no success.
http://samiconcepts.com/rise-sports2
In this link, scroll a little down and you'll see 4 video content sliders (these sliders are controlled via the dots. You click dot, slide changes).
Now, I duplicated the HTML for the 4 sliders, but ONLY the first slider works when I click the dots, not the second, third or fourth. I am thinking that the Javascript is only allowing for 1 slider to work on the page at a time.
How can I have it so that all the sliders work? (might need JS/HTML tweaking)?
I am posting code below. Thank you for your consideration to help.
Javascript
// vars
'use strict'
var testim = document.getElementById("testim"),
testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
testimLeftArrow = document.getElementById("left-arrow"),
testimRightArrow = document.getElementById("right-arrow"),
currentSlide = 0,
currentActive = 0,
testimTimer,
touchStartPos,
touchEndPos,
touchPosDiff,
ignoreTouch = 30;
;
window.onload = function() {
// Testim Script
function playSlide(slide) {
for (var k = 0; k < testimDots.length; k++) {
testimContent[k].classList.remove("active");
testimContent[k].classList.remove("inactive");
testimDots[k].classList.remove("active");
}
if (slide < 0) {
slide = currentSlide = testimContent.length-1;
}
if (slide > testimContent.length - 1) {
slide = currentSlide = 0;
}
if (currentActive != currentSlide) {
testimContent[currentActive].classList.add("inactive");
}
testimContent[slide].classList.add("active");
testimDots[slide].classList.add("active");
currentActive = currentSlide;
clearTimeout(testimTimer);
testimTimer = setTimeout(function() {
playSlide(currentSlide += 1);
}, testimSpeed)
}
testimLeftArrow.addEventListener("click", function() {
playSlide(currentSlide -= 1);
})
testimRightArrow.addEventListener("click", function() {
playSlide(currentSlide += 1);
})
for (var l = 0; l < testimDots.length; l++) {
testimDots[l].addEventListener("click", function() {
playSlide(currentSlide = testimDots.indexOf(this));
})
}
playSlide(currentSlide);
// keyboard shortcuts
document.addEventListener("keyup", function(e) {
switch (e.keyCode) {
case 37:
testimLeftArrow.click();
break;
case 39:
testimRightArrow.click();
break;
case 39:
testimRightArrow.click();
break;
default:
break;
}
})
testim.addEventListener("touchstart", function(e) {
touchStartPos = e.changedTouches[0].clientX;
})
testim.addEventListener("touchend", function(e) {
touchEndPos = e.changedTouches[0].clientX;
touchPosDiff = touchStartPos - touchEndPos;
console.log(touchPosDiff);
console.log(touchStartPos);
console.log(touchEndPos);
if (touchPosDiff > 0 + ignoreTouch) {
testimLeftArrow.click();
} else if (touchPosDiff < 0 - ignoreTouch) {
testimRightArrow.click();
} else {
return;
}
})
}
HTML
<section id="testim" class="testim">
<div class="wrap">
<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
<span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
<ul id="testim-dots" class="dots">
<li class="dot active"></li>
<li class="dot"></li>
<li class="dot"></li>
<li class="dot"></li>
</ul>
<div id="testim-content" class="cont">
<div class="active">
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=Rb0UmrCXxVA"><img class="video1 play" src="/images-rise/vi.jpg"></a><br>
<div class="bla"> <div class="title1-1S">VIDEO 1: </div>
<div class="title1-2S">SPEED TRAINING</div></div>
<p class="reviewsText1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div>
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=Rb0UmrCXxVA"><img class="video1 play" src="/images-rise/vi.jpg"></a><br>
<div class="bla"> <div class="title1-1S">VIDEO 2: </div>
<div class="title1-2S">TRAINING</div></div>
<p class="reviewsText1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div>
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=Rb0UmrCXxVA"><img class="video1 play" src="/images-rise/vi.jpg"></a><br>
<div class="bla"> <div class="title1-1S">VIDEO 3: </div>
<div class="title1-2S">TRAINING</div></div>
<p class="reviewsText1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<div>
<a class="js-rytl--link" href="https://www.youtube.com/watch?v=Rb0UmrCXxVA"><img class="video1 play" src="/images-rise/vi.jpg"></a><br>
<div class="bla"> <div class="title1-1S">VIDEO 4: </div>
<div class="title1-2S">TRAINING</div></div>
<p class="reviewsText1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</DIV>
</DIV>
</section>
I would like to have a single button that says, "Viewer One" and is tied to a section with the ID, "viewer_one". When the user clicks the button, I would like it to change to show, "Viewer Two" and also show the section with the ID "viewer_two" in place of where the other nav had been. Each time the button is clicked it will switch to the other.
I have two sets of script that perform each function individually, but I cannot figure out how to make them work at same time. At moment, I can either have a button that changes its value on click but does not impact the rest of the code or I can have the button impact the rest of the code but its own text does not change.
I have included my code below - I have included both sets of javascript so that you can see what I have but they only work when I include one or the other - I need help figuring out how to get them to work together.
Below is a condensed version of the code to the pertinent parts - the main code has several more list items for each viewer.
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
if (document.getElementById('viewer_one')) {
if (document.getElementById('viewer_one').style.display == 'none') {
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
}
else {
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
}
}
}
<!--This gets the button text to change-->
function myFunction() {
var x = document.getElementById("Button1");
if (x.innerHTML === "Viewer Two") {
x.innerHTML = "Viewer One";
} else {
x.innerHTML = "Viewer Two";
}
}
<section id="second_nav">
<input id="Button1" type="button" value="Viewer One" onclick="switchVisible();"/>
<button id="Button1" onclick="myFunction()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts2"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
No error messages, but I can only get one or the other to work, not in combination.
Thanks in advance for any help.
var currentViewer = 1
updatePage(currentViewer)
function switchViewer() {
if (currentViewer === 1) {
currentViewer = 2
} else if (currentViewer === 2) {
currentViewer = 1
}
updatePage(currentViewer)
}
function updatePage(viewer) {
switch(viewer) {
case 1:
document.getElementById('viewer_one').style.display = 'block';
document.getElementById('viewer_two').style.display = 'none';
document.getElementById('view_area_one').style.display = 'block';
document.getElementById('view_area_two').style.display = 'none';
document.getElementById('switchViewerButton').innerHTML = "Viewer 2"
break;
case 2:
document.getElementById('viewer_one').style.display = 'none';
document.getElementById('viewer_two').style.display = 'block';
document.getElementById('view_area_one').style.display = 'none';
document.getElementById('view_area_two').style.display = 'block';
document.getElementById('switchViewerButton').innerHTML = "Viewer 1"
break;
}
}
<section id="second_nav">
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
<nav class="viewer_nav" id="viewer_one">
<ul>
<li style="color: blue;"><b>VIEWER ONE:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
<nav class="viewer_nav" id="viewer_two">
<ul>
<li style="color: blue;"><b>VIEWER TWO:</b></li>
<li>Client Info</li>
<li>Scripts</li>
</ul>
</nav>
</section>
<div id="content_area">
<section class="viewer_class" id="view_area_one">
<h3 class="viewer_title" style="text-align: center;">VIEWER ONE</h3>
<span id="client1"></span>
<h4>Client Info (view_area_one)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<span id="scripts1"></span>
<h4>Scripts</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
<section class="viewer_class" id="view_area_two">
<h3 class="viewer_title" style="text-align: center;">VIEWER TWO</h3>
<span id="client2"></span>
<h4>Client Info (view_area_two)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Some other text...</p>
<span id="scripts2"></span>
<h4>Scripts From V2</h4>
<p>Et odio pellentesque diam volutpat. Vulputate eu scelerisque felis imperdiet proin. Turpis in eu mi bibendum neque.</p>
</section>
Here's my version - I separated out the logic for controlling which viewer is currently visible from the code that changes the DOM, so you can more directly see how the current viewer changes the content of the page. I also didn't fully understand what you wanted to change on the button press, I've made it a content toggle as that seemed to be what you were going for? Your example only toggles the navbar. Let me know how this suits you.
So, If you want both to work together, write your javascript code as:
<!-- this gets the button click to change which list is visible-->
function switchVisible() {
<!-- Your Code -->
}
<!--This gets the button text to change-->
function myFunction() {
<!-- Your Code -->
}
<!-- My Code -->
window.onload = function(){
const button = document.querySelector("#switchViewerButton");
if (button) {
button.onclick = function(event){
event.preventDefault();
switchVisible();
myFunction();
}
}
}
And Replace the HTML line
<button id="switchViewerButton" onclick="switchViewer()">Viewer One</button>
with the line
<button id="switchViewerButton">Viewer One</button>
I hope it should work. Please comment if you face any problem in implementing the solution.
It is such that I'm trying right now with Jquery to find the determining search words, for example searching for. Let also say that you will find "Lorem" then the highlight text with red shift.
I have look on:
Add()
Find()
Html site:
<div id="SearchBox">
<div class="col-md-6">
<h2>Hello world</h2>
<p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.</p>
</div>
<div class="col-md-6">
<h2>Hello world</h2>
<p>Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.</p>
</div>
Jquery:
$('#SearchBox').find("Lorem").css('background-color', 'red');
the problem is that it highlights the area of the words that I will search. Like when you click ctrl + F, it comes back and tells you these area we have this search words.
There is no jQuery method to wrap matches. You'll have to use a plugin, like mark.js. It will search for matches inside the specified context and wraps them with a custom element. You can then assign the element a color, in your case red.
Example:
var markInstance = new Mark(document.querySelector("#SearchBox"));
function highlight(){
var searchTerm = document.querySelector("input").value;
markInstance.unmark().mark(searchTerm);
}
mark{
background: red;
color: white;
}
<script src="https://cdn.rawgit.com/julmot/mark.js/6.1.0/dist/mark.min.js"></script>
<input type="text" placeholder="Lorem ipsum..." oninput="highlight()">
<div id="SearchBox">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
firstly $('#SearchBox').find("Lorem") is a wrong selector because .find needs a jquery selector id , tag name Or class name find out more here .
to implement this feature you need to actually search in the inner text of the div , try contains or javascript indexOf , then to highlight the text you may replace the whole inner html with new html and desired word highlighted with different background.
ex :
var searchWord = "Lorem";
$('#SearchBox p:contains('+searchWord +')').each(function(){
var currentText = $(this).html();
var replaceAll = new RegExp(searchWord,"gi");
$(this).html(currentText.replace(replaceAll,'<div style="display:inline;background-color:red">'+searchWord+'</div>'));
});
https://jsfiddle.net/n2u3s8c9/1/
I'm creating a standard jQuery image slideshow, but I need to add a certain class to a container div, based on which slide is currently showing.
I'm using Flexslider which helpfully gives the current slide a class of 'flex-active-slide'. What I'd like to do is to use that class combined with a unique class to select the active slide (i.e. '.heating-slide.flex-active-slide).
I'd then like to have jQuery apply an additional class to the containing div (.image-slider.full-width), based on which slide is currently showing.
For example:
If the heating slide is showing, I'd like to apply a class of .heating-container to the .image-slider.full-width div.
If the cooling slide is showing, I'd like to apply a class of .cooling-container
And so on
Here's my code:
<div class="image-slider full-width">
<div class="image-slider-container">
<div class="flexslider wide">
<ul class="slides">
<li class="cooling-slide">
<img src="/assets/images/image-slider/slides/cooling-slide.jpg" />
<div class="flex-caption">
<h2 class="">Cooling</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="heating-slide">
<img src="/assets/images/image-slider/slides/heating-slide.jpg" />
<div class="flex-caption">
<h2 class="">Heating</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
<li class="ventilation-slide">
<img src="/assets/images/image-slider/slides/ventilation-slide.jpg" />
<div class="flex-caption">
<h2 class="">Ventilation</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<a class="button" href="#">Find out more</a>
</div>
</li>
</ul>
</div>
</div>
</div>
And here's my poor attempt at writing the required code:
<script type="text/javascript" >
$(document).ready(function () {
$(".heating-slide.flex-active-slide") SOMETHING HERE (".image-slider.full-width").addClass("heating-container");
});
</script>
Any help you can offer will be appreciated!
Update
I wasn't taking into account the other class that was on the element, also made it remove the previously added class so you don't end up with all of them on there:
$(function() {
function setContainer() {
var activeSlide = $(".flex-active-slide");
var activeSlideClass = activeSlide.attr('class')
.replace('flex-active-slide', '')
.replace("-slide", "-container")
var slider = activeSlide.closest(".image-slider.full-width");
var latestClass = slider.data("latest-class");
if (latestClass) {
slider.removeClass(latestClass);
}
slider.addClass(activeSlideClass)
.data("latest-class", activeSlideClass);
}
$('.flexslider').flexslider({
animation: "fade",
controlsContainer: ".flex-container",
animationSpeed: 800, //Integer: Set the speed of animations, in milliseconds
slideshowSpeed: 10000, //Integer: Set the speed of the slideshow cycling, in milliseconds
after: function() { setContainer(); }
});
setContainer();
});
You should be able to paste that into your code as is instead of the existing flexslider binding.
Working Fiddle - http://jsfiddle.net/xt4Ym/3/