We Keep Coding

How do I modify all of a selected id's child li and div's element?

I want to access id="p5pg5QXlX-an-obj-1" to id="p5pg5QXlX-an-obj-31" id's inside a class and apply the animation play state property.
here is my code:
<div id="p5pg5QXlX-an-anim"><ol>
<li id="p5pg5QXlX-an-scene-0" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-1"><div><img height="416" width="320" src="assets/overlay1.png"></div></div>
<div id="p5pg5QXlX-an-obj-2"><div><img height="416" width="320" src="assets/stars-and-chand.png"></div></div>
<div id="p5pg5QXlX-an-obj-3"><div><img height="75" width="320" src="assets/stars-support.png"></div></div>
<div id="p5pg5QXlX-an-obj-4"><div><img height="416" width="320" src="assets/page1-bottom-design.png"></div></div>
<div id="p5pg5QXlX-an-obj-5"><div><img height="416" width="320" src="assets/page1-minars.png"></div></div>
<div id="p5pg5QXlX-an-obj-6"><div><img height="416" width="320" src="assets/ramadan.png"></div></div>
<div id="p5pg5QXlX-an-obj-7"><div><img height="416" width="320" src="assets/mubarak.png"></div></div>
<div id="p5pg5QXlX-an-obj-8"><div><img height="416" width="320" src="assets/page1hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-9"><div><img height="416" width="320" src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-10"></div>
<div id="p5pg5QXlX-an-obj-11"></div>
<div id="p5pg5QXlX-an-obj-12"><div><img height="89" width="89" src="assets/rplay.png"></div></div>
</div>
</li>
<li id="p5pg5QXlX-an-scene-7" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-13"><div><img height="416" width="320" src="assets/overlay2.png"></div></div>
<div id="p5pg5QXlX-an-obj-14"><span>Receiver Name</span></div>
<div id="p5pg5QXlX-an-obj-15"><span>Wishing you a wonderful Birthday and a prosperous year ahead!</span></div>
<div id="p5pg5QXlX-an-obj-16"><div><img height="119" width="111" src="assets/page2-logo.png"></div></div>
<div id="p5pg5QXlX-an-obj-17"><div><img height="416" width="320" src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-18"><div><img height="416" width="320" src="assets/panel.png"></div></div>
</div>
</li>
<li id="p5pg5QXlX-an-scene-4" >
<div class="p5pg5QXlX-an-stage">
<div id="p5pg5QXlX-an-obj-19"><div><img height="416" width="320" src="assets/overlay3.png"></div></div>
<div id="p5pg5QXlX-an-obj-20"><div><img height="350" width="639" src="assets/3-3.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-21"><div><img height="350" width="639" src="assets/3-1.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-22"><div><img height="350" width="639" src="assets/3-2.jpg"></div></div>
<div id="p5pg5QXlX-an-obj-23"><div><img height="416" width="320" src="assets/page2hw.png"></div></div>
<div id="p5pg5QXlX-an-obj-24"><div><img height="416" width="320" src="assets/panel.png"></div></div>
<div id="p5pg5QXlX-an-obj-25"><div><img height="40" width="320" src="assets/strip.png"></div></div>
<div id="p5pg5QXlX-an-obj-26"><div><img height="40" width="54" src="assets/map.png"></div></div>
<div id="p5pg5QXlX-an-obj-27"><div><img height="40" width="54" src="assets/phone.png"></div></div>
<div id="p5pg5QXlX-an-obj-28"><div><img height="40" width="54" src="assets/url.png"></div></div>
<div id="p5pg5QXlX-an-obj-29"><div><img height="40" width="54" src="assets/email.png"></div></div>
<div id="p5pg5QXlX-an-obj-30"><div><img height="39" width="43" src="assets/giftcard.png"></div></div>
<div id="p5pg5QXlX-an-obj-31"><div><img height="40" width="50" src="assets/social.png"></div></div>
</div>
</li>
</ol>
</div>
i want to apply animation state property to all the id's from id="p5pg5QXlX-an-obj-1" to id="p5pg5QXlX-an-obj-31" so please tell me how to access the id's inside a class?
i have done this:
var id = document.querySelectorAll("#p5pg5QXlX-an-anim > ol> li > div > div");
[].forEach.call(id, function(el, i) {
el.style.WebkitAnimationPlayState = "paused";
el.style.animationPlayState = "paused";
});
but it runs only for the first li element with not for all li element so please help me out &
because i want a generic code of this so please help me in this & try to give sol'n in javascript

You can possibly be more specific with your selector by using:
tag[attribute^="value"]
This will selector any tag beginning with the value you specify.
In your case I believe you would want to try:
li[id^="p5pg5QXlX-an-obj-"]
All of your id's start with that string. I hope this helps.

Cannot get rid of focus on element after double-click

I have a HTML5 web page and I use 4 canvas controls to render images from my web cam.
By double-clicking and image/canvas I hide the 4 canvases and display a larger canvas control instead.
As soon as I done this one of my controls is highlighted.
This is the original web page BEFORE the double-click:
And this is the web page AFTER the double click:
This is the code that handles the double-click of the smaller canvas element:
$('#canvasLiveView1').on('dblclick', function () {
$('#divSingleView').css('display', '');
$('#divMultiView').css('display', 'none');
camDoubleClickCam = 1;
});
I have tried adding this to the double-click event:
$('#btnPlaysave').blur();
where 'btnPlaySave' is ID of the highlighted control.
Incidentally, this behavior/effect does not appear in IE.
Any suggestions?
ND.
this is the HTML for the canavs 'toggle'
<div style="height:362px;">
<div id="divSingleView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;display:none;">
<div style="float:left;width:95px;"> </div>
<div style="float:left;width:330px;margin-top:75px;"><canvas id="canvasLiveView" style="width:330px;height:220px;outline: yellow 1px solid;"></canvas></div>
<div style="float:left;width:95px;"></div>
</div>
<div id="divMultiView" style="float:left;margin:0px;padding:0px;background-color:black;width:520px;">
<div style="float:left;height:170px;margin-left:2px; margin-top:10px;"><canvas id="canvasLiveView1" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-top:10px;"><canvas id="canvasLiveView2" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;"></canvas></div>
<div style="float:left;height:170px;margin-left:2px; margin-bottom:10px;"><canvas id="canvasLiveView3" style="width:255px;height:170px;outline: grey 1px ridge;margin-left:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
<div style="float:left;height:170px;margin-bottom:10px;"><canvas id="canvasLiveView4" style="width:255px;height:170px;outline: grey 1px ridge;margin-right:3px;margin-top:3px;margin-bottom:3px;"></canvas></div>
</div>
</div>
<div style="height:30px;">
<div id="divPaused" style="display:none; float:left;margin-left:5px;color:white;font-size:9pt; font-weight:800;">
Paused
</div>
<div style="width:290px;margin: 0 auto;">
<div style="float:left;width:24px;margin-left:5px;">
<img id="btnPlaySave" alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/save.png" class="imgPlaySave" title="Save Image" onclick="PlaySave();" />
</div>
<div style="float:left;width:24px;margin-left:5px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/button_minus_red.png" class="imgPlaySlower" title="Decrease Playback Speed" onclick="PlaySlower();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" cursor:pointer" src="/Content/Images/button_plus_green.png" class="imgPlayFaster" title="Decrease Playback Speed" onclick="PlayFaster();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_start.png" class="imgPlayStart" title="Go to First Frame" onclick="PlayStart();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_back.png" class="imgPlayStepBack" title="Step to Previous Frame" onclick="PlayStepBack();" />
</div>
<div id="Tempo" style="float: left; width: 40px; text-align: center; vertical-align: middle; font-weight: bold;color:white; font-size: x-small; font-family: Arial, Helvetica, sans-serif;">
100
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_pause.png" class="imgPlayPause" title="Pause" onclick="PlayPause();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_play.png" class=" imgPlayPlay" title="Play" onclick="PlayPlay();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_next.png" class="imgPlayStepNext" title="Step to Next Frame" onclick="PlayStepNext();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/media_end.png" class="imgPlayEnd" title="Go to Last Frame" onclick="PlayEnd();" />
</div>
<div style="float:left;width:24px;">
<img alt="" style="width:24px;width:24px; cursor:pointer;" src="/Content/Images/LiveFeed.png" class="imgLiveFeed" title="Back to Live Feed" onclick="LiveFeed();" />
</div>
</div>
</div>

So the canvas creates weird behaviour when double clicked. I found and answer that supposed that in order for it to work properly you can cancel out the events that are triggered by:
document.getElementById('canvas').onmousedown = function(){ return false; };
I grabbed this answer from: HTML Canvas Double Click Highlight Issue which lead to... Clicking inside canvas element selects text
hope this helps people so they don't have to jump around a few questions.

Javascript onClick fires two events

I threw together a quick website for a friend of mine and I basically just used a query slider to manage all of the content, however when a visitor clicks play on one of his songs, it also seems to fire off the navigation (triggered by onClick). The problem is that playing the music also engages the slider and I am not good enough at JavaScript/jQuery yet to figure out how to separate the two events. Any help would be greatly appreciated.
<script>
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
</head>
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li ><a class="active" href="#" onClick="goto('#about', this); return false"><img src="images/bioblack.gif" width="93" height="55"></a></li>
<li><a href="#" onClick="goto('#work', this); return false"><img src="images/soundblack.gif" width="146" height="55"></li>
<li><a href="#" onClick="goto('#contact', this); return false"><img src="images/contactblack.gif" width="183" height="54"></li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>

Your html has a lot of unclosed tags, try it with a fixed and indented html:
<body>
<div id="wrap">
<div id="header">
<img src="images/header.gif" width="320" height="59">
</div>
<div id="content">
<div id="nav">
<ul>
<li>
<a href="#" onClick="goto('#about', this); return false" class="active">
<img src="images/bioblack.gif" width="93" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#work', this); return false">
<img src="images/soundblack.gif" width="146" height="55">
</a>
</li>
<li>
<a href="#" onClick="goto('#contact', this); return false">
<img src="images/contactblack.gif" width="183" height="54">
</a>
</li>
</ul>
</div>
<div class="contentbox-wrapper">
<div id="about" class="contentbox">
<img src="images/bio.gif" width="549" height="270">
</div>
<div id="work" class="contentbox">
<img src="images/slowlane.gif" width="165" height="38">
<embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed>
<img src="images/speedlimit.gif" width="169" height="39">
<embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
<img src="images/fastlane.gif" width="169" height="37">
<embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed>
</div>
<div id="contact" class="contentbox">
<img src="images/contact.gif" width="422" height="188"></div>
</div>
</div>
</div>
</div>
</body>

event.preventDefault() could solve your problem. Just prevent the default behavior of the button and let js fire the correct event.

Image change when hovered over? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
change image on mouseover
Can anyone tell me how I could get pic1_s to pic9_s images in the following code to change to a different pic when they are hovered over? I have different versions of each picture which are darkened with an opacity layer and have writing. They already have a jquery lightbox effect on them and a carousel effect. Can find here: http://www.meanbeangames.com/ (under the main image three abreast).
<div class="image_carousel">
<div id="foo2">
<a href="img/pic1_b.jpg" rel="gallery" title="Death From Above">
<img src="img/pic1_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic2_b.jpg" rel="gallery" title="Tree Under Attack">
<img src="img/pic2_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic3_b.jpg" id="pic3" rel="gallery" title="World Map">
<img src="img/pic3_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic4_b.jpg" rel="gallery" title="Combo Attack">
<img src="img/pic4_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic5_b.jpg" rel="gallery" title="Robots Strike">
<img src="img/pic5_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic6_b.jpg" rel="gallery" title="Back Stab">
<img src="img/pic6_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic7_b.jpg" rel="gallery" title="Critical Hit">
<img src="img/pic7_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic8_b.jpg" rel="gallery" title="All Out War">
<img src="img/pic8_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
<a href="img/pic9_b.jpg" rel="gallery" title="Air Defense">
<img src="img/pic9_s.jpg" class="fancy_thumb" width="320" height="198" />
</a>
</div>
<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
<a class="next" id="foo2_next" href="#"><span>next</span></a>
</div>

set them as a background image for the <a>:
And on hover switch them.
a:link, a:visited {
display: block;
background: url(image-light.jpg) no-repeat 0 0;
width: width of image;
height: height of image;
}
a:hover, a:active, a:focus {
background-image: url(image-dark.jpg);
}

How to change audio on click or embed in fancybox

I'm trying to include audio in a fancybox such that when you click an image and it pops-out audio will play as well. However, I don't want to download an external audio player but rather use the one that is currently included on the web page. Basically I simply want to change the audio that is currently playing by loading another MP3.
Here is the code for the audio player that is on the web page:
<div id="audioPlayerContainer" title="Audio Player">
<object type="application/x-shockwave-flash" data="../flash/player_mp3_maxi.swf" width="140" height="20">
<param name="wmode" value="transparent">
<param name="movie" value="../flash/player_mp3_maxi.swf">
<param name="FlashVars" value="configxml=../flash/config.xml&mp3=../audio/intro/intro_08_background_07.mp3">
<p>Flash Audio Player</p>
</object>
</div>
How would I be able to change the audio that is played once the following link is clicked?
<li style="float:left"><img alt="Raj Sharma" src="../images/intro_characters_Raj.png" /></li>
This link has a fancybox script attached to it which is shown below:
<script type="text/javascript">
$(document).ready(function(){
$("#clientPic li a").fancybox();
});
</script>

Here is a working example based on your code snippet, kindly check if this will suit your needs.
HTML:
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
<ul style="text-align: center; margin-top: 20px;">
<li><a class="fancybox" href="#inline1" title="Now Playing: Sample 1">Launch Sample 1</a></li>
<li><a class="fancybox" href="#inline2" title="Now Playing: Sample 2">Launch Sample 2</a></li>
<li><a class="fancybox" href="#inline3" title="Now Playing: Sample 3">Launch Sample 3</a></li>
</ul>
<div id="inline1" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 1</p>
</object>
</div>
<div id="inline2" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
<p>Sample 2</p>
</div>
<div id="inline3" style="width: auto; display: none;" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width=200 height=20>
<param name="movie" value="http://96.245.187.180:80/player_mp3_maxi.swf" />
<param name="FlashVars" value="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" />
<param name="quality" value="best" />
<embed src="http://96.245.187.180:80/player_mp3_maxi.swf" flashvars="mp3=broadwavelow.mp3?src=fBroadWave Recording Example" width=200 height=20 quality=best type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
<p>Sample 3</p>
</object>
</div>
JS:
$(document).ready(function() {
$('.fancybox').fancybox();
});
So basically there are 3 hidden divs, each with the corresponding players and .mp3. The corresponding div is loaded inside fancybox (See values in href).​
Check also this link to see the code in action: http://jsfiddle.net/hNLdk/ Good luck.