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.
Related
I am using Responsive Mobile-first Image Viewer - jQuery SmartPhoto plugin on my website. I notice that If I use jquery-2.2.4.min.js then it's working and if I use the latest jQuery jquery 3.5.1 then it's not working.
Sometimes I am getting an error on my console.
Uncaught TypeError: this.groupItems() is undefined
Old Jquery 3.5.1 not working
$(function() {
$(".js-img-viwer").smartPhoto();
});
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">
<div class="brick">
<a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
<img src="https://unsplash.it/360/829?image=510" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
<img src="https://unsplash.it/360/239?image=494" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
<img src="https://unsplash.it/360/541?image=482" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
<img src="https://unsplash.it/360/239?image=454" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
<img src="https://unsplash.it/360/239?image=449" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
<img src="https://unsplash.it/360/239?image=445" width="360" />
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>
Old Jquery 2.2.4 working
$(function() {
$(".js-img-viwer").smartPhoto();
});
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/css/smartphoto.min.css">
<div class="masonry">
<div class="brick">
<a href="https://unsplash.it/867/1997?image=510" class="js-img-viwer" data-caption="Jeff Sheldon" data-id="raion">
<img src="https://unsplash.it/360/829?image=510" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=494" class="js-img-viwer" data-caption="Matthew Wiebe" data-id="rakuda">
<img src="https://unsplash.it/360/239?image=494" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1282/1929?image=482" class="js-img-viwer" data-caption="Danny Froese" data-id="kaba">
<img src="https://unsplash.it/360/541?image=482" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=454" class="js-img-viwer" data-caption="Mia Domenico" data-id="koara">
<img src="https://unsplash.it/360/239?image=454" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1141?image=449" class="js-img-viwer" data-caption="Maciej Serafinowicz" data-id="kuma">
<img src="https://unsplash.it/360/239?image=449" width="360" />
</a>
</div>
<div class="brick">
<a href="https://unsplash.it/1716/1140?image=445" class="js-img-viwer" data-caption="Aleksi Tappura" data-id="sai">
<img src="https://unsplash.it/360/239?image=445" width="360" />
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-Mobile-first-Image-Viewer-jQuery-SmartPhoto/js/jquery-smartphoto.min.js?v=1"></script>
Not sure why this would change with newer jQuery-Version but since you want something done with your images:
Have you tried using jquery's window.onload instead of only $()-prefix?
$() is short for $(document).ready() which runs once DOM is ready, whereas $( window ).on( "load", function() { ... }) runs once things like images are also ready:
https://learn.jquery.com/using-jquery-core/document-ready/
I am trying to load videos after the page finishes loading. The script I'm using works in firefox and chrome, but throws errors in Edge/IE.
the error is SCRIPT5007: Unable to get property 'append' of undefined or null reference I get it on the full build and the line it indicates is iframe.id = v[n].getAttribute('youtube'); The issue is that it doesn't add the iframe to the page so no videos. The error on codepen is Unable to get property 'src' of undefined or null reference since the iframe is not getting appended to the page. Here is the html/js I'm currently using. I've tried a few variations like v[n].attr(). I tried changing it to data-youtube and using v[n].dataset.youtube. Nothing seems to work in Edge.
codepen working on ff/chrome
<section data-grid="container stack-2" class="m-multi-feature f-align-center" id="m-multi-tiles">
<section data-grid="container">
<ul role="tablist">
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 13" aria-controls="newIconItemImage13 newIconItemContent13">
<span>Skyworld</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 11" aria-controls="newIconItemImage11 newIconItemContent11">
<span>SteamVR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo " itemprop="url" aria-label="Item 12" aria-controls="newIconItemImage12 newIconItemContent12">
<span>SUPERHOT VR</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 14" aria-controls="newIconItemImage14 newIconItemContent14">
<span>Free the Night</span>
</a>
</li>
<li class="c-glyph" role="presentation">
<a href="#" role="tab" class="c-logo" itemprop="url" aria-label="Item 15" aria-controls="newIconItemImage15 newIconItemContent15">
<span>Minecraft</span>
</a>
</li>
</ul>
<ul id="m-multi-description">
<li id="newIconItemContent13" role="tabpanel" class="f-active">
<h4 class="c-heading-10">VERTIGO GAMES</h4>
<h3 class="c-heading">Skyworld</h3>
<p class="c-paragraph">Manage your economy, build and lead royal armies, rule dragons to restore your kingdom to glory. Battle the forces of evil as you conquer and reunite all Skyworlds in this turn-based strategy game that brings the beloved gameplay of strategy classics to VR.</p>
</li>
<li id="newIconItemContent11" role="tabpanel" >
<!-- <h4 class="c-heading-10">Microsoft</h4> -->
<h3 class="c-heading">Steam®VR</h3>
<p class="c-paragraph">Dive into many of the most popular VR games available today. Experience more than 2,000 titles from the Steam®VR library on Windows Mixed Reality.<sup>11</sup></p>
</li>
<li id="newIconItemContent12" role="tabpanel">
<h4 class="c-heading-10">SUPERHOT TEAM</h4>
<h3 class="c-heading">SUPERHOT VR</h3>
<p>
The iconic VR FPS is here; time moves only when you do.
</p>
</li>
<li id="newIconItemContent14" role="tabpanel">
<h4 class="c-heading-10">JAUNT</h4>
<h3 class="c-heading">Free the Night</h3>
<p class="c-paragraph">A magical interactive VR journey that invites you to blow out city lights and return the stars back into the night sky.</p>
</li>
<li id="newIconItemContent15" role="tabpanel">
<h4 class="c-heading-10">MICROSOFT</h4>
<h3 class="c-heading">Minecraft</h3>
<p class="c-paragraph">Get right inside the world of Minecraft with mixed reality. Build, explore and battle mobs - do all the things you know and love - but from a fresh perspective.</p>
</li>
</ul>
<div class="c-carousel f-multi-slide" role="region" aria-label="Images">
<div class="background-skew"></div>
<div itemscope itemtype="http://schema.org/ItemList">
<ul>
<li id="newIconItemImage13" data-f-theme="dark" role="tabpanel" class="f-active">
<picture class="c-image">
<source srcset="assets/video/skyworld.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1400px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:1084px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:768px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:540px)">
<source srcset="assets/video/skyworld.jpg" media="(min-width:0)">
<img srcset="assets/video/skyworld.jpg" src="assets/video/skyworld.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video3','youtube3')"></a>
</li>
<div id="video3" class="lightbox" onclick="hideVideo('video3','youtube3')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="SN20mKCMEe8" youtube="youtube3">
<!-- <iframe id="youtube3" width="960" height="540" src="https://www.youtube.com/embed/SN20mKCMEe8?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video3','youtube3')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage11" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/steam-vr-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/steam-vr-1600.jpg" src="assets/video/steam-vr-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video','youtube')"></a>
</li>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube">
<!-- <iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video','youtube')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage12" data-f-theme="light" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1400px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:1084px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:768px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:540px)">
<source srcset="assets/video/superhot-1600.jpg" media="(min-width:0)">
<img srcset="assets/video/superhot-1600.jpg" src="assets/video/superhot-1600.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video2','youtube2')"></a>
</li>
<div id="video2" class="lightbox" onclick="hideVideo('video2','youtube2')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="A1jothqmqHw" youtube="youtube2">
<!-- <iframe id="youtube2" width="960" height="540" src="https://www.youtube.com/embed/A1jothqmqHw?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video2','youtube2')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage14" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/free-the-night.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1400px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:1084px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:768px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:540px)">
<source srcset="assets/video/free-the-night.jpg" media="(min-width:0)">
<img srcset="assets/video/free-the-night.jpg" src="assets/video/free-the-night.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video4','youtube4')"></a>
</li>
<div id="video4" class="lightbox" onclick="hideVideo('video4','youtube4')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="tlKQJcH0mgY" youtube="youtube4">
<!-- <iframe id="youtube4" width="960" height="540" src="https://www.youtube.com/embed/tlKQJcH0mgY?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video4','youtube4')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
<li id="newIconItemImage15" dat1a-f-theme="dark" role="tabpanel">
<picture class="c-image">
<source srcset="assets/video/minecraft-thumb.jpg" media="(min-width: 1779px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1400px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:1084px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:768px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:540px)">
<source srcset="assets/video/minecraft-thumb-1259.jpg" media="(min-width:0)">
<img srcset="assets/video/minecraft-thumb-1259.jpg" src="assets/video/minecraft-thumb-1259.jpg" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<a class="c-glyph glyph-play playme" onclick="revealVideo('video5','youtube5')"></a>
</li>
<div id="video5" class="lightbox" onclick="hideVideo('video5','youtube5')">
<div class="lightbox-container">
<div class="lightbox-content">
<div class="video-container youtube-player" data-id="dXOVk5SNBRU" youtube="youtube5">
<!-- <iframe id="youtube5" width="960" height="540" src="https://www.youtube.com/embed/dXOVk5SNBRU?showinfo=0" frameborder="0" allowfullscreen></iframe> -->
</div>
</div>
</div>
<button onclick="hideVideo('video5','youtube5')" class="lightbox-close c-glyph glyph-cancel">
</button>
</div>
</ul>
</div>
</div>
</section>
//lazy load youtube vids
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.id = v[n].attributes['youtube'].value;
v[n].append(iframe);
console.log(v[n].getAttribute('youtube') + 'youtube');
}
});
// Function to reveal lightbox and add YouTube autoplay
function revealVideo(div, video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video + '&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div, video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1', ''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
I ended up getting it to work by using iframe.setAttribute('id', v[n].getAttribute('youtube')); not sure why this works and not v[n].attributes['youtube'].value;
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?showinfo=0";
iframe.setAttribute("src", embed.replace("ID", v[n].dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
iframe.setAttribute('id', v[n].getAttribute('youtube'));
v[n].appendChild(iframe);
}
});
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.
I have a project with thumbnails that when moused over show the full-sized version in a display area div. This is done using jQuery to pull the HTML for the full-sized images from a hidden div and display it in the visible display div.
I currently have Fancybox (ver 2.1.5) configured to work on document load. Each of the hidden full-sized images includes a link that has the fancybox class and a rel group with the same name.
When the display area is clicked on, Fancybox opens the image as desired. However, when the next button is clicked it always goes to the first image (including when it is the first image), and the previous button always goes to the last image (including when it is the last image). Of course my desise would be for it to maintain the order of the images (as the links are ordered in the HTML).
Does anyone have any suggestions how this might work as I am hoping (either with jQuery or Fancybox)?
My thanks in advance to all you brilliant folks out there who generously volunteer your time and expertise!
HTML:
<div class="report_container">
<div class="report_thumbnails_container">
<div class="report_thumbnails">
<img src="images/contents/page1_thumbnail.jpg"/>
<img src="images/contents/page2_thumbnail.jpg"/>
<img src="images/contents/page3_thumbnail.jpg"/>
<img src="images/contents/page4_thumbnail.jpg"/>
<img src="images/contents/page5_thumbnail.jpg"/>
<!--a href"#" page="page6"><img src="images/contents/page6_thumbnail.jpg"/></a-->
<img src="images/contents/page7_thumbnail.jpg"/>
<img src="images/contents/page8_thumbnail.jpg"/>
<img src="images/contents/page9_thumbnail.jpg"/>
<img src="images/contents/page10_thumbnail.jpg"/>
<img src="images/contents/page11_thumbnail.jpg"/>
<img src="images/contents/page12_thumbnail.jpg"/>
<!--a href="#" page="page13"><img src="images/contents/page13_thumbnail.jpg"/></a-->
<img src="images/contents/page14_thumbnail.jpg"/>
<img src="images/contents/page15_thumbnail.jpg"/>
<img src="images/contents/page16_thumbnail.jpg"/>
<img src="images/contents/page17_thumbnail.jpg"/>
</div>
</div>
<div class="report_page_container">
<div class="page_contents"></div>
</div>
<div class="clear_both"></div>
</div>
<div class="page_container_contents">
<div class="page_contents" id="page1">
<a class="fancybox" rel="group" href="images/contents/page1_preview.jpg"><img src="images/contents/page1_display.jpg" width="900" height="1150" /></a>
</div>
<div class="page_contents" id="page2">
<a class="fancybox" rel="group" href="images/contents/page2_preview.jpg"><img src="images/contents/page2_display.jpg" width="900" height="1098" /></a>
</div>
<div class="page_contents" id="page3">
<a class="fancybox" rel="group" href="images/contents/page3_preview.jpg"><img src="images/contents/page3_display.jpg" width="900" height="1207" /></a>
</div>
<div class="page_contents" id="page4">
<a class="fancybox" rel="group" href="images/contents/page4_preview.jpg"><img src="images/contents/page4_display.jpg" width="900" height="1091"/></a>
</div>
<div class="page_contents" id="page5">
<a class="fancybox" rel="group" href="images/contents/page5_preview.jpg"><img src="images/contents/page5_display.jpg" width="900" height="1102"/></a>
</div>
<!--div class="page_contents" id="page6">
<a class="fancybox" rel="group" href="images/contents/page6_preview.jpg"><img src="images/contents/page6_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page7">
<a class="fancybox" rel="group" href="images/contents/page7_preview.jpg"><img src="images/contents/page7_display.jpg" width="900" height="1154"/></a>
</div>
<div class="page_contents" id="page8">
<a class="fancybox" rel="group" href="images/contents/page8_preview.jpg"><img src="images/contents/page8_display.jpg" width="900" height="1145"/></a>
</div>
<div class="page_contents" id="page9">
<a class="fancybox" rel="group" href="images/contents/page9_preview.jpg"><img src="images/contents/page9_display.jpg" width="900" height="1159"/></a>
</div>
<div class="page_contents" id="page10">
<a class="fancybox" rel="group" href="images/contents/page10_preview.jpg"><img src="images/contents/page10_display.jpg" width="900" height="1141"/></a>
</div>
<div class="page_contents" id="page11">
<a class="fancybox" rel="group" href="images/contents/page11_preview.jpg"><img src="images/contents/page11_display.jpg" width="900" height="1138"/></a>
</div>
<div class="page_contents" id="page12">
<a class="fancybox" rel="group" href="images/contents/page12_preview.jpg"><img src="images/contents/page12_display.jpg" width="900" height="1162"/></a>
</div>
<!--div class="page_contents" id="page13">
<a class="fancybox" rel="group" href="images/contents/page13_preview.jpg"><img src="images/contents/page13_display.jpg" width="900" height=""/></a>
</div-->
<div class="page_contents" id="page14">
<a class="fancybox" rel="group" href="images/contents/page14_preview.jpg"><img src="images/contents/page14_display.jpg" width="900" height="1110"/></a>
</div>
<div class="page_contents" id="page15">
<a class="fancybox" rel="group" href="images/contents/page15_preview.jpg"><img src="images/contents/page15_display.jpg" width="900" height="1101"/></a>
</div>
<div class="page_contents" id="page16">
<a class="fancybox" rel="group" href="images/contents/page16_preview.jpg"><img src="images/contents/page16_display.jpg" width="900" height="1152"/></a>
</div>
<div class="page_contents" id="page17">
<a class="fancybox" rel="group" href="images/contents/page17_preview.jpg"><img src="images/contents/page17_display.jpg" width="900" height="1154"/></a>
</div>
<!--div class="page_contents" id="page18">
<a class="fancybox" rel="group" href="images/contents/page18_preview.jpg"><img src="images/contents/page18_display.jpg" width="900" height=""/></a>
</div-->
</div>
Code:
$(document).ready(function() {
$(".fancybox").fancybox();
var page = '.page_contents#page1';
var htmlCode = $(page).html();
$('.report_page_container .page_contents').html(htmlCode);
var notClicked = true;
$('.report_thumbnails a').mouseover(function(){
if (notClicked) {
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
}
});
$('.report_thumbnails a').click(function(e){
// Disables standard link behavior
e.preventDefault();
if (!$(this).hasClass('selected')) {
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
$(this).addClass('selected');
$(this).children().css('opacity', '.5');
notClicked = false;
} else {
$(this).removeClass('selected');
$('.report_thumbnails a').removeClass('selected');
$('.report_thumbnails a').children().css('opacity', '1');
notClicked = true;
}
var page = '.page_contents#' + $(this).attr('page');
var htmlCode = $(page).html();
$('.report_page_container').fadeOut(0, function(){
$('.report_page_container .page_contents').html(htmlCode);
$('.report_page_container').fadeIn(0);
});
});
});
I have a page which dynamically opens each page based upon the tags. I am attempting to execute a script, which is to run when the dynamic page is run from the div id="CreateVids" tag.
I'm totally new to this so i'm not too sure what is the problem. I have been looking to see if there is a property of the that I can set but I cannot seem to find it.
Any help would be much appreciated!
Thanks a lot!
Sorry Treffynnmon, yes I do have some code
<body>
<div id="about" class="selectable">
<p>Developed by Jacob Bowe</p>
<p><br /><br />Close</p>
</div>
<div id="Demo">
<div class="toolbar">
<h1>Demonstration Video</h1>
<a class="back" href="#home">Home</a>
</div>
<ul class="rounded">
<center><video id="video1" src="bunny.mp4" width="270" height="180" controls></video></center>
</ul>
</div>
<div id="CreateVids">
<div class="toolbar">
<h1>Create your own film!</h1>
<a class="back" href="#">Home</a>
</div>
<h2>Put the film clips in any order! Click on proceed to view</h2>
<ul class="rounded">
<li><video id="vid1" src="bunny.mp4" width="90" height="60" onClick="test()" class="draggable"></video>
<video id="vid2" src="bunny.mp4" width="90" height="60" class="draggable"></video>
<video id="vid3" src="bunny.mp4" width="90" height="60" class="draggable"></video></li>
<li><video id="vid4" src="bunny.mp4" width="90" height="60" class="draggable"></video>
<video id="vid5" src="bunny.mp4" width="90" height="60" class="draggable"></video>
<video id="vid6" src="bunny.mp4" width="90" height="60" class="draggable"></video></li>
</ul>
<ul class="rounded">
<div id="dropbox1" class="drop"></div>
<div id="dropbox2" class="drop"></div>
<div id="dropbox3" class="drop"></div>
<div id="dropbox4" class="drop"></div>
<div id="dropbox5" class="drop"></div>
<div id="dropbox6" class="drop"></div>
</ul>
</div>
The pages are loaded dynamically, so the first loads "about" and the second loads "CreateVids"
The page is being run from a JQuery function
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
I want to load the script when the "CreateVids" is loaded into the browser. The idea is that I can select the "draggable" class on the video tags and drag them using JQuery.
Any ideas will really be appreciated,
Thanks again
You can wrap the required script in a function, and call it inside pageAnimationEnd using an if (or a switch) to check for the correct page (or if the page changer switch is of your own, you can call it right there).