How to show specific nodes from xml? - javascript

I created a code to display data from XML. I need to filter some data from XML and show in the page. Actually I need to show only three nodes in the page. When click the view all button, need to display other nodes. Please help me to implement the code.
Here is the code.
function showCD(xml){
xml = $(xml).children();
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
$("#xmldata").append(html);
});
}
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton" class="reveal" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hidden'>
<div class="block">
<div class="row" id="xmldata"></div>
</div>
</div>
</div>
</section>
test.xml
<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD category="new">
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD category="hide">
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CATALOG>
It is just like below image.
http://next.plnkr.co/edit/KgmzSWEaIOBRf54M?open=lib%2Fscript.js&preview

I have updated your code as per your requirement Demo
instead of 2 separate xmldata & xmldataall divs you can use only one div & hide all the children > 2 index.
$(document).ready(function(){
$.ajax({
type:"GET",
url:"test.xml",
dataType:"xml",
success:showCD
});
});
function showCD(xml){
xml = $(xml).children();
let i = 0;
$(xml).children().each(function () {
let TITLE = $(this).find("TITLE").text();
let ARTIST =$(this).find("ARTIST").text();
let COUNTRY = $(this).find("COUNTRY").text();
let COMPANY =$(this).find("COMPANY").text();
let html = `<div class="col-md-4">
<p>${TITLE}</p>
<p>${ARTIST}</p>
<p>${COUNTRY}</p>
<p>${COMPANY}</p>
</div>`;
i++;
if(i <= 3) {
$("#xmldata").append(html);
$("#xmldataall").append(html);
}
else{
$("#xmldataall").append(html);
}
});
}
$('#myButton1').click(function () {
var self = this;
change(self);
});
function change(el) {
if (el.value === "View All")
el.value = "Hide All";
else
el.value = "View All";
}
function toggler(divId) {
$("#" + divId).toggleClass("hide");
$("#xmldata").toggle();
}
function directLinkModal(hash) {
$(hash).modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="row" id="xmldata"></div>
<section>
<div class="container">
<input type="button" value="View All" id="myButton1" class="reveal" style="float: right;" onclick="toggler('toggle_container');">
<div id="toggle_container" class='hide'>
<div class="block">
<div class="row" id="xmldataall"></div>
</div>
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Related

How do I randomize images and audio while making sure to keep divs attatched in Javascript?

This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}
I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.
When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");

<marquee> receiving data from external js file

So i have an html document with a running some sample pic.
However I want this data to come from a javascript file? Is this possible?
This is what i have so far:
HTML
<link rel="stylesheet" type="text/css" href="FrontEnd.css"/>
<title> Test script for ticker </title>
</head>
<div class="container">
<body>
<div id="allTop">
<h1>
</h1>
<div class="clearfix">
<div class="forecast">
<div id="pic"></div>
<div id="forecast"></div>
<div id="temp"></div>
</div>
</div>
<div id="ticker">
<marquee>
<img
src="http://www.quackit.com/pix/milford_sound/milford_sound_t.jpg"
Width=80 Height=80 alt="Milford Sound in New Zealand" />NewZealand
</marquee>
</div>
</div>
<div class="captured">
<div class="graph"></div>
</div>
</body>
</div>
</html>
js function
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i] + 'there should be an img coming in from an array here';
listitems.innerHTML = newListItem;
}
}
So I am confused on how can i append data into marquee tags from this function?
Simple append Data not over write
function buildList(){
var data= [1,2,3,4,5,6,7,8];
var listitems = document.getElementsByTagName('marquee');
for(var i = 0; i <= data.length-1;i++){
var newListItem = data[i]; //'<img something /. etc etc
listitems[0].innerHTML += newListItem;
}
}

phonegap window.location not working with .html#page

At first sorry if i have some typing errors english is not my main language but i try to do my best to explain it at my best.
I am working on a test app with a note database.
It works fine with adding and deleting but there is a small problem...
At the moment that i add a note (on edit.html) and want to go back to the index.html page it is not going back.
i am working with multiple data-page-role pages so each page has his own id.
The code that i use for the note database:
index.html Header:
$("#homePage").live('pageinit', function() {
init();
});
index.html data-page-role
<div data-role="page" id="homePage" data-add-back-btn="true" class="noteclass">
<!-- HEader -->
<div data-role="header" >
<h1>Notitie Database</h1>
</div>
<!-- Main content div -->
<div data-role="content" id="mainContent">
<ul data-role="listview" id="noteTitleList"></ul><br />
</div>
<div data-role="content">
Voeg notitie toe
</div>
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
Edit.html (here u can add/change/remove the notes)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div data-role="page" id="editPage">
<!-- HEader -->
<div data-role="header">
<h1>Write Note</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#Delete').click(function() {
DeleteNote($('#noteId').val());
});
$('#addNote').click(function() {
var data = {title:$("#noteTitle").val(),
body:$("#noteBody").val(),
id:$("#noteId").val()
};
saveNote(data);
});
});
</script>
<div data-role="content">
<form id="editNoteForm" method="post">
<input type="hidden" name="noteId" id="noteId" value="">
<div data-role="fieldcontain">
<label for="noteTitle">Title</label>
<input type="text" name="noteTitle" id="noteTitle">
</div>
<div data-role="fieldcontain">
<label for="noteBody">Note</label>
<textarea name="noteBody" id="noteBody"></textarea>
</div>
<div data-role="fieldcontain">
<button id="addNote">Opslaan</button>
</div>
</form>
<button id="Delete">Verwijder</button>
</div>
Ga terug
<!-- Footer -->
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
</body>
</html>
And here is the backend code that i use for the note database
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
phoneready();
}
function setupTable(tx){
tx.executeSql("CREATE TABLE IF NOT EXISTS notes(id INTEGER PRIMARY KEY,title,body,updated)");
}
function getEntries() {
dbShell.transaction(function(tx)
{
tx.executeSql("select id,title,body, updated from notes order by id asc", dbErrorHandler, renderEntries)
}, function(){ alert ("Error getentries");
});
}
function renderEntries(tx,results){
if (results.rows.length == 0) {
$("#mainContent").html("<p>Je hebt nog geen notities.</p>");
} else {
var s = "";
for(var i=0; i<results.rows.length; i++) {
s += "<li><a href='edit.html?id="+results.rows.item(i).id + "'>" + results.rows.item(i).title + "</a></li>";
}
$("#noteTitleList").html(s);
$("#noteTitleList").listview("refresh");
}
}
function saveNote(note) {
//Sometimes you may want to jot down something quickly....
if(note.title == "") note.title = "[Geen Titel]";
dbShell.transaction(function(tx) {
if(note.id == "")
{
tx.executeSql("insert into notes(title,body,updated) values(?,?,?)",[note.title,note.body, new Date()]);
}
else
{
tx.executeSql("update notes set title=?, body=?, updated=? where id=?",[note.title,note.body, new Date(), note.id]);
}
}, function(){ alert ("Error savenote");},
function()
{
window.navigator.location("index.html#homePage");
});
}
function DeleteNote(id){
dbShell.transaction(
function(tx)
{
tx.executeSql('Delete FROM notes where id=' + id);
},
function(){ alert ("Error deletenote");},
function(err)
{
window.navigator.location("index.html#homePage");
});
}
function phoneready(){
dbShell = window.openDatabase("SimpleNotes", 2, "SimpleNotes", 1000000);
setupTable();
}
function init(){
getEntries();
//edit page logic needs to know to get old record (possible)
$("#editPage").live("pagebeforeshow", function() {
//get the location - it is a hash - got to be a better way
var loc = window.location.hash;
if(loc.indexOf("?") >= 0) {
var qs = loc.substr(loc.indexOf("?")+1,loc.length);
var noteId = qs.split("=")[1];
//load the values
dbShell.transaction(
function(tx) {
tx.executeSql("select id,title,body from notes where id=?",[noteId],function(tx,results) {
$("#noteId").val(results.rows.item(0).id);
$("#noteTitle").val(results.rows.item(0).title);
$("#noteBody").val(results.rows.item(0).body);
});
}, dbErrorHandler);
}
});
}
As u can see at saveNote and on deleteNote i call the function window.navigator.location("index.html#homePage");
I did this as far as i tried with $.mobile.changePage("index.html#homePage"); it will go back but then it won't run the init(); function at the header script.
I hope i explained it all correct and if there are any questions please let me know.
I will try then to do my best at explaining it.
edit:
More information:
At first thank you for your answer, i got multiple data-role-pages.
A extra example:
<div data-role="page" id="page5" data-add-back-btn="true">
<!-- Header -->
<div data-role="header" >
<h1>Locatie</h1>
</div>
<!-- Main content div -->
<div data-role="content">
<p id="geolocation" onClick="onDeviceReady()">Op zoek naar uw locatie ...</p>
<img src="" id="map" width="100%" height="" />
<h4>Omgeving</h4>
<img src="" id="map2" width="100%" height="" />
</div>
<div data-role="footer" id="footer"> <img src="a12.png" />
<p>© 2012 - Swen Kooij / Paksha Thullner / Johnny Jansen</p>
</div>
</div>
You are trying to change page with deep link "index.html#homePage" .
JqueryMobile does not support that. When you pass a file, he will load ONLY the first page of that file.
This means that when you pass "index.html#homePage", he'll only consider the "index.html" and load the first page on that file.
I don't know it for sure, but if in your index.html file only have the "homePage", change function window.navigator.location to:
$.mobile.changePage("index.html")
And of course do the same for the anchor tag .
I use:
window.location = "#home";

Show and hide images with next previous button using Javascript

I have four divs, each div contain images and contents. one next and previous button. at a time only div will show. on click of next the second div have to be shown and first will hide. same upto fourth div. Need to use pure Javascript. No jquery or javascript plugins is allowed.... :(. Can anyone help me to do this?.
Thanks!
My html Code:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="theProduct">
<div id="slides"> <img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"> <img src="img/next.jpg" width="29" height="29" alt="Arrow Next">
<!-- Show/hide Div strating here -->
<div class="slides_container">
<div class="div1">
<div class="img1">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div2">
<div class="img2">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div3">
<div class="img3">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
<div class="div4">
<div class="img4">
<div class="price">
<ul>
<li class="strike">Rs. 1300</li>
<li class="offer">Rs. 1050</li>
</ul>
<div class="buy">Buy Now</div>
</div>
</div>
</div>
</div>
<!-- Show/Hide Div ending here -->
</div>
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>
Practical with this below
<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>
Javascipt
<script type="text/javascript">
var $c =0;
function next(){
var boxes = document.getElementsByClassName("box");
$c +=1;
if($c >= boxes.length) $c = 0;
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
function prev(){
var boxes = document.getElementsByClassName("box");
$c -=1;
if($c < 0) $c = (boxes.length-1);
for (var $i=0;$i<boxes.length;$i++){
boxes[$i].style.display = "none";
}
boxes[$c].style.display = "block";
return false;
}
</script>
HTML
<div id="container">
<div id="box-red" class="box">DIV1</div>
<div id="box-yellow" class="box">DIV2</div>
<div id="box-green" class="box">DIV3</div>
<div id="box-maroon" class="box">DIV4</div>
</div>
previous next
I think this is what you are loking for:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript
But you could put that in one function:
<script language="JavaScript">
function ShowHide(divId){
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);
var images = imageContainer.childNodes;
var showIndex = '';
for(var i=0; i<images.length;i++){
if(images[i].style.display == 'block'){
images[i].style.display == 'none';
if(forwrad){
showIndex = 1+1;
}
else{
showIndex = 1-1;
}
}
}
images[showIndex].style.display = true;
}
technically it's possible with pure CSS as well. with the :target pseudo class. but that would pollute your url with # tags. But you may actually want that.
Also Selectivizr is a good polyfill for old browsers

closed captions for a mp4 video

I can't get closed captioning to work on my video, I am pretty sure that I have a lot of the code that is required for getting it to work, and I am just not sure what I might be missing. I am also getting a message in the body, where it shows that the data-begin, and data-end are underlined green, and it says that Attribute data-begin is not a valid attribute of element span, I am not sure if thats the problem, and I may need to use another tag, and that can still get it to work. I am pretty new to html. Here is all my code
Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "videos/sequence01mp4video.mp4",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "/javascripts",
supplied: "m4v"
});
});
(function (_global) {
var captions = [];
var video;
var output;
var caplen;
window.addEventListener('load', function () {
output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
output.id = 'caption'; // it has an id of caption
video = document.querySelector('video'); // and it's after the first video element
video.parentNode.insertBefore(output, video.nextSibling);
getCaptions();
video.addEventListener('timeupdate', timeupdate, false);
}, false);
// function to populate the 'captions' array
function getCaptions() {
captions = []; // empty the captions array
var nodes = document.querySelectorAll('#transcript span');
var node = "";
var caption = "";
for (var i = 0, node; node = nodes[i]; i++) {
caption = {
'start': parseFloat(node.getAttribute('data-begin')), // get start time
'end': parseFloat(node.getAttribute('data-end')), // get end time
'text': node.textContent
};
captions.push(caption); // and all the captions into an array
}
caplen = captions.length;
}
function timeupdate() {
var now = video.currentTime; // how soon is now?
var text = "", cap = "";
for (var i = 0; i < caplen; i++) {
cap = captions[i];
if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
text = cap.text; // yes? then load it into a variable called text
break;
}
}
output.innerHTML = text; // and put contents of text into caption div
}
// hide transcript div when scripting is enabled
document.write('<style>#transcript{display:none}</style>');
})(this);
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div id="transcript">
<span data-begin="0:00:00.380" data-end="0:00:03.670">hello, my name is rob carson environmental engineer with the</span>
<span data-begin="0:00:03.670" data-end="0:00:06.880">hello, my name is rob carson environmental engineer with the.</span>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li>full screen</li>
<li>restore screen</li>
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>

Categories