Develop Reference

How do you add classes to children of multiple parents?

Using JS, I would like to be able to add a class to children of multiple parents.
<div id="artwork">
<div class="wrapper">
<div class="flex_container">
<div class="box artwork_flex">
<h2>ARTWORK</h2>
<h3>Example 1</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_1.jpg">
</div>
</div>
<div class="flex_container">
<div class="box artwork_flex">
<h3>Example 2</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_2.jpg">
</div>
</div>
<div class="flex_container">
<div class="box artwork_flex">
<h3>Example 3</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_3.jpg">
</div>
</div>
</div>
</div>
I need to be able to remove the class artwork_flex and replace it with artwork_flex_op in all of the odd flex containers (this needs to be dynamic and work with more/less flex_containers than the three that are currently there).
Does anyone know how to do this in JavaScript? Thank you in advance.

Use DOMTokenList.replace() and Array.prototype.forEach(). The expression index % 2 != 0 tells use whether the element currently being looped through is even or odd.
In the demo below, the div with a red background color has the artwork_flex_op class.
var flexContainers = document.querySelectorAll('.flex_container');
flexContainers.forEach((e, i) => {
if (i % 2 != 0) {
e.querySelector('.artwork_flex').classList.replace('artwork_flex', 'artwork_flex_op');
}
})
.artwork_flex_op {
background-color: red;
}
<div id="artwork">
<div class="wrapper">
<div class="flex_container">
<div class="box artwork_flex">
<h2>ARTWORK</h2>
<h3>Example 1</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_1.jpg">
</div>
</div>
<div class="flex_container">
<div class="box artwork_flex">
<h3>Example 2</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_2.jpg">
</div>
</div>
<div class="flex_container">
<div class="box artwork_flex">
<h3>Example 3</h3>
<p>Nullam id posuere magna. Praesent eu bibendum augue, ac tempor leo.</p>
</div>
<div class="box image_flex">
<img src="images/example_3.jpg">
</div>
</div>
</div>
</div>

Multiple tabs in same page using jQuery

I'm working on tabs I want multiple tabs on the same page and I don't want to change id's for the next tab because I have to pass dynamically. I tried using id same id's which are the conflict with each other. Can anyone suggest me. So, far I tried.
function atscTabs() {
$('.at-tabs-nav__item').click(function() {
var tab = $(this).data('tab');
$('.at-tab-__title_text').removeClass('current');
$('.at-tabs-nav__item').removeClass('current');
$(this).addClass('current');
$("#" + tab).addClass('current');
})
}
atscTabs();
.current {
color: white;
padding: 5px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="at-tabs-c2a3d74" class="at-tabs">
<div class="at-tabs-nav">
<div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text current" data-tab="tab-1">Tab #1</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-2">Tab #2</span>
</div>
</a>
</div>
<div class="at-tabs-nav__item">
<a class="at-tabs-title" href="#">
<div class="at-title-text-wrapper">
<span class="at-tab-__title_text" data-tab="tab-3">Tab #3</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-tabs-content">
<div class="at-tabs-content__item" id="tab-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-2">
ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
<div class="at-tabs-content__item" id="tab-3">
I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
</div>
</div>
</div>

Hi i have created small script to solve your problem. I hope this will help.
function atscTabs() {
$('.at-tabs').each(function(index, item){
var $mainContainer = $(this);
var $menuContainer = $(this).find('.at-tabs-nav__item');
var $label = $(this).find('.at-tab-__title_text');
var $content =$(this).find('.at-tabs-content__item');
$content.hide();
$label.each(function(idx, ele){ $(this).attr('data-target', idx)});
$($menuContainer[0], $label[0]).addClass('current');
$($content[0]).show();
$menuContainer.click(function(ele){
$($mainContainer).find('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-tab-__title_text').addClass('current');
$($mainContainer)
.find('.at-tabs-content .at-tabs-content__item')
.hide()
.eq(parseInt($(this).find('[data-target]')
.attr('data-target'))).show();
});
});
}
atscTabs();
Let me know if still need help. Avoid using one id multiple places.
FYI: https://stackoverflow.com/a/14446052/5011051

How to make a search that search through an html file in a static website, regardless any page search bar is located

I am using below function to search in articles.html - My search bar is in the home page (index.html).
<div id="tfheader">
<form id="tfnewsearch" method="get" action="articles.html">
<input type="text" class="tftextinput" id="tftextinput" name="q" size="21" maxlength="120">
<input type="submit" value="search" class="tfbutton">
</form>
<div class="tfclear"></div>
</div>
<script>
var a = document.getElementById('tfnewsearch');
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html'+b;
});
</script>
My requirement is when i type some character in search bar and hit enter. It will redirect me to article.html and search through whole content of article.html
Thanks for the help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gomac Knowledgebase</title>
<!-- LOADING STYLESHEETS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid featured-area-white-border">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="login-box border-right-1">
<i class="fa fa-key"></i> Login
</div>
<div class="login-box border-left-1 border-right-1">
<i class="fa fa-pencil"></i> Sign Up
</div>
</div>
</div>
</div>
</div>
<!-- LOGO -->
<div class="container">
<div class="row">
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
</div>
</div>
</div>
<!-- END LOGO-->
<!-- TOP NAVIGATION -->
<div class="container-fluid">
<div class="navigation">
<div class="row">
<ul class="topnav">
<li></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Knowledge Base</li>
<li><i class="fa fa-file-text-o"></i> Articles</li>
<li><i class="fa fa-lightbulb-o"></i> FAQ</li>
<li class="icon">
☰
</li>
</ul>
</div>
</div>
</div>
<!-- END TOP NAVIGATION -->
<!-- SEARCH FIELD AREA -->
<div class="searchfield bg-hed-six">
<div class="container" style="padding-top: 20px; padding-bottom: 20px;">
<div class="row text-center margin-bottom-20">
<h1 class="white"> Knowledge Base</h1>
<span class="nested"> Learn to use gomac </span>
</div>
<br>
<div class="row search-row">
<input type="text" class="search" placeholder="What do you need help with?">
<button class="buttonsearch btn btn-info btn-lg">Search</button>
</div>
</div>
</div>
<!-- END SEARCH FIELD AREA -->
<!-- MAIN SECTION -->
<div class="container featured-area-default padding-30">
<div class="row">
<!-- ARTICLE OVERVIEW SECTION -->
<div class="col-md-8 padding-20">
<div class="row">
<!-- BREADCRUMBS -->
<div class="breadcrumb-container">
<ol class="breadcrumb">
<li><i class="fa fa-home"></i></li>
<li class="active">All Articles</li>
</ol>
</div>
<!-- END BREADCRUMBS -->
<!-- ARTICLES -->
<div class="fb-heading">
All Articles
</div>
<hr class="style-three">
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change account password?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Account Settings </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 4 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to change currency in gomac?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Admin Panel </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 10 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to edit order details?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Orders </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 0 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to print stock barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 12 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<div class="panel panel-default">
<div class="article-heading-abb">
<i class="fa fa-pencil-square-o"></i> How to generate barcode?
</div>
<div class="article-info">
<div class="art-date"><i class="fa fa-calendar-o"></i> 20 May, 2016 </div>
<div class="art-category"><i class="fa fa-folder"></i> Stocks </div>
<div class="art-comments"><i class="fa fa-comments-o"></i> 7 Comments </div>
</div>
<div class="article-content">
<p class="block-with-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet finibus dui. Fusce ac nulla nec ex ornare vehicula non nec mi. Cras eget nisi sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec viverra
faucibus magna sed interdum. Phasellus ultrices sagittis molestie. Sed sit amet nisl id risus egestas semper. In porta, arcu eu dignissim vestibulum, sapien justo imperdiet enim, sed facilisis quam justo in neque. Aliquam
fermentum arcu eget hendrerit efficitur.
</p>
</div>
<div class="article-read-more">
Read more...
</div>
</div>
<!-- END ARTICLES -->
<!-- PAGINATION -->
<nav class="text-center">
<ul class="pagination">
<li class="disabled">
<span aria-hidden="true"><i class="fa fa-arrow-circle-left"></i> Previous</span>
</li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li class="enabled">2 <span class="sr-only">(current)</span></li>
<li class="enabled">3 <span class="sr-only">(current)</span></li>
<li class="enabled">
<span aria-hidden="true">Next <i class="fa fa-arrow-circle-right"></i></span>
</li>
</ul>
</nav>
<!-- END PAGINATION -->
</div>
</div>
<!-- END ARTICLES OVERVIEW SECTION-->
<!-- SIDEBAR STUFF -->
<div class="col-md-4 padding-20">
<div class="row margin-bottom-30">
<div class="col-md-12 ">
<div class="support-container">
<h2 class="support-heading">Need more Support?</h2> If you cannot find an answer in the knowledgebase, you can contact us for further help.
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change account password? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> Add new user </li>
<li> <i class="fa fa-file-text-o"></i> Change customer details </li>
<li> <i class="fa fa-file-text-o"></i> Lookup existing customer in order form </li>
</ul>
</div>
</div>
</div>
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Latest Articles
</div>
<hr class="style-three">
<div class="fat-content-small padding-left-10">
<ul>
<li> <i class="fa fa-file-text-o"></i> How to change username? </li>
<li> <i class="fa fa-file-text-o"></i> How to change currency in gomac? </li>
<li> <i class="fa fa-file-text-o"></i> How to edit order details? </li>
<li> <i class="fa fa-file-text-o"></i> How to print stock barcode? </li>
<li> <i class="fa fa-file-text-o"></i> How to generate barcode? </li>
</ul>
</div>
</div>
</div>
<!-- POPULAR TAGS (SHOW MAX 20 TAGS) -->
<div class="row margin-top-20">
<div class="col-md-12">
<div class="fb-heading-small">
Popular Tags
</div>
<hr class="style-three">
<div class="fat-content-tags padding-left-10">
password
settings
sign up
currency
payment
user
database
storage
export
email
import
campaign
edit
orders
help
billing
user
configure
customer
</div>
</div>
</div>
<!-- END POPULAR TAGS (SHOW MAX 20 TAGS) -->
</div>
<!-- END SIDEBAR STUFF -->
</div>
</div>
<!-- END MAIN SECTION -->
<!-- FOOTER -->
<div class="container-fluid footer marg30">
<div class="container">
<!-- FOOTER COLUMN ONE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">How it works</div>
<div class="footer-body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
<!-- END FOOTER COLUMN ONE -->
<!-- FOOTER COLUMN TWO -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Categories</div>
<div class="footer-body">
<ul>
<li> General </li>
<li> Getting Started </li>
<li> Account Support </li>
<li> Guides </li>
<li> Payment & Billing </li>
<li> Misc </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN TWO -->
<!-- FOOTER COLUMN THREE -->
<div class="col-xs-12 col-sm-4 col-md-4 margin-top-20">
<div class="panel-transparent">
<div class="footer-heading">Popular Articles</div>
<div class="footer-body">
<ul>
<li> How to change account password </li>
<li> How to edit order details </li>
<li> Add new user </li>
<li> Change customer details </li>
<li> Lookup existing customer in order form </li>
<li> How do I reset my password </li>
</ul>
</div>
</div>
</div>
<!-- END FOOTER COLUMN THREE -->
</div>
</div>
<!-- END FOOTER -->
<!-- COPYRIGHT INFO -->
<div class="container-fluid footer-copyright marg30">
<div class="container">
<div class="pull-left">
Copyright © 2016 Sunny Gohil</a>
</div>
<div class="pull-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
</div>
</div>
<!-- END COPYRIGHT INFO -->
<!-- LOADING MAIN JAVASCRIPT -->
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='https://cdn.rawgit.com/VPenkov/okayNav/master/app/js/jquery.okayNav.js'></script>
</body>
</html>
Above is the html for articles.html

First - Parse the string from url an then search it in the document.
var a = document.getElementById('tfnewsearch');
if(a){
a.addEventListener('submit',function(e) {
e.preventDefault();
var b = document.getElementById('tftextinput').value;
window.location.href = 'articles.html?'+b;
});
}
// var queryString = url.substring( url.indexOf('?') + 1 );
var queryString = window.location.search;
queryString = queryString.substring(1);
function myFunction() {
// Declare variables
var para, filter, ul, li, anchor;
para = document.getElementById('block-with-text');
filter = queryString.toUpperCase();
anchor = document.getElementById("anchor");
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
p = li[i].getElementsByTagName("p")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else if (p.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
myFunction();

Add class other element based on bootstrap .carousel-indicators li has class active

Hi i use bootstrap slider to slide element now i want when slider are slide than add a class in another section element. so try to do when .carousel-indicators li:nth-child(1) has class active than add class active also on .single-recent.first and than when .carousel-indicators li:nth-child(2) has class active than add class active on .single-recent.second and remove class active from .single-recent.first and any other all .single-recent element i have. and repeat it dynamically again and again.... but i didn't success to do that.
Here is the HTML code what i use:
<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
</div>
<a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
</div>
<section id="recent-featured" class="recent-featured-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="recent-featured-wrap">
<h3>Featured Work</h3>
<div class="single-recent first">
<div class="single-inner-img">
<img src="img/work/featured/featured-01.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent second">
<div class="single-inner-img">
<img src="img/work/featured/featured-02.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent third">
<div class="single-inner-img">
<img src="img/work/featured/featured-03.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent fourth">
<div class="single-inner-img">
<img src="img/work/featured/featured-04.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And the jQuery :
jQuery(document).ready(function(){
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
$(".single-recent.first").addClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
$(".single-recent.second").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
$(".single-recent.third").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
$(".single-recent.fourth").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
} });
Please help me to find out a way...

UPDATE: dynamically replace the src attribute of embed tag in JavaScript

When I try to change the src attribute of embedded movie (quicktime), it strangely works locally in Firefox, but doesn't work on server in firefox, doesn't work in Safari either locally or on server, and it doesn't work in IE.
I try what was suggested below:
$(".image_thumb ul li ul li").click(function(){
var imgTitle = $(this).find('a').attr("href");
var imgDesc = $(this).find('.block').html();
var imgDescHeight = $(".main_image").find('.block').height();
if ($(this).is(".active")) {
return false;
} else {
alert(imgTitle);
var videoClone = $(".main_image object").clone()
.find("embed").attr({src: imgTitle}).end()
.find("param:first").attr({value: imgTitle});
$(".main_image object").remove();
$(".main_image").append(videoClone);
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 );
});
}
//more code
This doesn't make the movie appear at all. Everything gets loaded but movie. Anyone know why? Surely, I can't be the only one using something other than flash to load movies.
html (if helpful):
<div id="vid_wrapper">
<div class="main_image">
<object width="160" height="144"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="../images/Intro-1.mov">
<param name="autoplay" value="true">
<param name="controller" value="false">
<EMBED SRC="../images/Intro-1.mov" WIDTH=500 HEIGHT=380 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE="http://www.apple.com/quicktime/"> <!-- <img src="" alt="video_1"> -->
</object>
<div style="display: block;" class="desc">
Close Me!
<div style="opacity: 0.85; margin-bottom: 0px; display: block;" class="block">
<h2>Video 1</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</div>
</div>
<div class="demo lists image_thumb">
<ul>
<li class="expand">Admin System
<ul class="collapse">
<li class="active">
<a href="../images/Intro-1.mov">
<img src="../images/banner1_thumb.jpg" alt="video_1">
</a>
<div class="block">
<h2>Video 1</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
<li>
<a href="../images/Intro-2.mov">
<img src="../images/banner1_thumb.jpg" alt="video_2">
</a>
<div class="block">
<h2>Video 2</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
</ul>
</li>
<li class="expand">Enrollment System
<ul class="collapse">
<li>
<a href="../images/Intro-1.mov">
<img src="../images/banner1_thumb.jpg" alt="video_3">
</a>
<div class="block">
<h2>Video 3</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
<li>
<a href="video4.jpg">
<img src="../images/banner1_thumb.jpg" alt="video_4">
</a>
<div class="block">
<h2>Video 4</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
</ul>
</li>
<li class="expand">Inventory System
<ul class="collapse">
<li>
<a href="video5.jpg">
<img src="../images/banner1_thumb.jpg" alt="video_5">
</a>
<div class="block">
<h2>Video 5</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
<li>
<a href="video6.jpg">
<img src="../images/banner1_thumb.jpg" alt="video_6">
</a>
<div class="block">
<h2>Video 6</h2>
<p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
Thanks for any response.

I haven't worked with embedded objects, but I'm guessing that the browser doesn't respond to changes to the src attribute after it has been loaded.
No idea if this will work but try cloning the object, removing the existing one, changing the attributes on the cloned object, and then adding it back into the document.
Something like this:
var videoClone = $(".main_image object").clone()
.find("embed").attr({src: imgTitle}).end()
.find("param:first").attr({value: imgTitle});
$(".main_image object").remove();
$(".main_image").append(videoClone);

try setting the Parameter wmode="transparent" and then do the z-index thing..