jquery function to access hidden divs - javascript

The code below is the general template for my music page.
The slideshow moves the song/image gallery forward or back sequentially, but alas, the 'switchFeature' function, which should allow you to jump to various tunes listed in the sidebar, doesn't seem to be working.
Can anyone point out where my error is, or what needs to be done to make it work?
Thanks!
<!-- music.php -->
<?php require 'header.php' ?>
<script type="text/javascript">
$(document).ready(function() {
$(".tuneslides").hide();
var idName = ["#tune1", "#tune2"];
var indexNum = 0;
$(idName[0]).fadeIn(1000);
$("#slidenext").click(function() {
$(idName[indexNum]).fadeOut(300, function() {
indexNum++;
if (indexNum > 1) {indexNum = 0;}
$(idName[indexNum]).fadeIn(500);
});
});
$("#slideback").click(function() {
$(idName[indexNum]).fadeOut(300, function() {
if (indexNum == 0) {indexNum = 1;}
else {indexNum--;}
$(idName[indexNum]).fadeIn(500);
});
});
// alas...
function switchFeature (newIndexNum) {
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
};
});
</script>
<div id="sidebar">
<h2>Featured Tunes<br>(click to show)</h2>
<p onclick="switchFeature(0)">Tune 1</p>
<p onclick="switchFeature(1)">Tune 2</p>
</div><!--sidebar-->
<div id="main">
<div id="slideshow">
<div id="slideback">Previous</div>
<div id="slidenext">Next</div>
<div class="tuneslides" id="tune1">
<p class="tsTitles">Tune 1 </p>
<audio controls>
<source src="music/tune1.mp3" type="audio/mpeg">
<img src="images/image1.jpg"/>
</audio>
</div>
<div class="tuneslides" id="tune2">
<p class="tsTitles">Tune 2</p>
<audio controls>
<source src="music/tune2.mp3" type="audio/mpeg">
<img src="images/image2.jpg"/>
</audio>
</div>
</div> <!-- slideshow -->
</div><!--main-->
<?php require 'footer.php' ?>

You defined switchFeature within the scope of the
$(document).ready(function(){
});
Meaning switchFeature is in a different scope as the onclick event is trying to call.
Try to define your function like the following, and see if that works:
window.switchFeature = function(newIndexNum) {
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
};

I would rewrite it a little so you don't have to do onclicks and you can keep everything together. Change the onclicks to use a class and html5 data:
<p class="tune" data-player="0">Tune 1</p>
<p class="tune" data-player="1">Tune 2</p>
Then convert that function switchFeature to a click for the tune class:
$('.tune').click(function() {
var newIndexNum = $(this).attr('data-player');
$(idName[indexNum]).fadeOut(300, function() {
$(idName[newIndexNum]).fadeIn(500);
indexNum = newIndexNum;
});
});
Codepen: http://codepen.io/maxwbailey/pen/iKxCo

Related

How to remove video effect in Javascript?

In my API class today we learned how to show the camera with the tag. We also learned how to add effects with JavaScript. But, I'm stuck on how to reverse these effects. How would I make the clear button clear the current effect?
<body>
<h1>Magic Camera</h1>
<div class="tools">
<button id="sepia">Sepia</button>
<button id="">Clear</button>
</div>
<div class="scene">
<img src="billboard.jpg">
<div class="video-container">
<video id="myCamera" autoplay></video>
</div>
</div>
<script>
var myDevices = navigator.mediaDevices;
var permissions = {
audio: false,
video: true
};
myDevices.getUserMedia(permissions).then(showCam);
function showCam(stream){
$("#myCamera")[0].srcObject = stream;
}
function addEffect(event){
var effect = event.currentTarget;
var filter = `${effect.id}(1)`;
$("#myCamera").css("filter", filter);
}
$("button").click(addEffect);
</script>
</body>```
$('#myCamera').css('filter', '');

Why does my if statement work if I manually change the checked state, but not when I click the button

New here, and a complete javascript newbie!
Question. I'm trying to make a piano, just as an exercise, my first real attempt at javascript(mixing some jQuery too).
But why does the audio not change when I click on my button? It works if I manually delete/add the checked state to the button in the html, but not 'live.'
Any ideas? I'm completely stumped, I guess it's either something to do with the audio being stored in memory or something, or I have to clear the audio, but I'm not sure. Any help/advice would be greatly appreciated.
Thanks
Here's the relevant bits of code. and a link:
https://testing.jconnorgraphics.co.uk/pianjo/
function test() {
var C = document.getElementById("myAudioC");
var C3 = document.getElementById("myAudioC3");
if (document.getElementById('checked').checked){
$('.C').click(function() {
delete ('myAudioC3');
C.play();
C.currentTime = 0;
C.delete()
}
)
}
else {
$('.C').click(function() {
C3.play();
C3.currentTime = 0;
C3.delete()
}
)
};
};
test();
<div class="switch2" >
<label class="switch">
<input id="checked" type="checkbox" checked>
<span class="slider round"></span>
</label>
<p>Audio</p>
</div>
<div class="naturalkey C">
<p>C</p>
</div>
<audio id="myAudioC">
<source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
</audio>
<audio id="myAudioC3">
<source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
</audio>
Oh yeah, I'm creating it within Wordpress, hence the php bits, I don't think they are relevant to the problem though.
This code will first set the onclick event of .C to be function a, then according to the #checked click event it will dynamically set .C onclick event.
$(document).ready(function(){
function a() {
delete ('myAudioC3');
C.play();
C.currentTime = 0;
C.delete()
}
function b() {
C3.play();
C3.currentTime = 0;
C3.delete()
}
$('#checked').click(function(){
let $this = $(this);
if($this.attr('checked')) {
$(".C").attr("onclick","a");
$this.attr('checked', false);
} else {
$(".C").attr("onclick","b");
$this.attr('checked',true)
}
});
$(".C").attr("onclick","a");
});
Managed to get this working!
javascript
var C = document.getElementById("myAudioC");
var CC = document.getElementById("myAudioCC");
function playAudioC() {
var checked = document.getElementById("checked").checked;
if ( checked == false) {
C.play();
C.currentTime = 0;
}
else
{
CC.play();
CC.currentTime = 0;
};
};
html
<audio preload="auto" id="myAudioC">
<source src="<?php echo get_template_directory_uri(); ?>/audio/piano/1 C.mp3" type="audio/mpeg">
</audio>
<audio preload="auto" id="myAudioCC">
<source src="<?php echo get_template_directory_uri(); ?>/audio/wavetable/2 C.mp3" type="audio/mpeg">
</audio>
<div onclick="playAudioC()" class="naturalkey">
<p>C</p>
</div>
<div class="switch2" >
<label class="switch">
<input id="checked" type="checkbox" >
<span class="slider round"></span>
</label>
<p>Audio</p>
</div>
Next task is to turn all that in a loop, I've 12 keys to do, minimum, might take it further if I figure out the loop! Progress at least!

Video pop up autoplay, when pop up does not come up. i can still hear sound

I added this pop up to my site, and try add autoplay, but the problem is even the pop dont come up each time you refresh your website, you can still hear the sound.how can i stop the autoplay when pop up doesn't show?
I tried to solve problem by doing this but is still not working
<script>
$( document ).ajaxComplete(function() {
$("#popup_87 flex-video iframe").attr("src","https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
});
</script>
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<iframe src="https://www.youtube.com/embed/vYAVyEdBfEU?rel=0&showinfo=0&autoplay=1" allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
</div>
/////
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>
Try
<script>
function LoadVideo() {
// If it's visible
if($("#popup_87").is(":visible"))
{
// Load the video and auto play
$("#popup_87 flex-video iframe").attr("src","http://www.youtube.com/embed/vYAVyEdBfEU?rel=0&autoplay=1;showinfo=0");
}
}
</script>
EDIT since more code was added, put the trigger when they click on the link to load the video into the pop-up, otherwise don't load the video in the iframe:
<!-- START POPUP CODE -->
<div id="popup_87" class="reveal-modal small" data-reveal aria-labelledby="popvideo" aria-hidden="true" role="dialog">
<div class="flex-video widescreen">
<!-- Removed the source -->
<iframe allowfullscreen="" frameborder="0" height="360" width="640"></iframe>
</div>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
<div class="hide">
popvideo
</div>
I'm not sure if the following code works, but I just added LoadVideo to your script.
<script>
if (jQuery.cookie('popup{$popup['popup_id']}') === undefined)
{
var cookieCount = 1;
}
else
{
var cookieCount = jQuery.cookie('popup{$popup['popup_id']}');
}
var popCount = {$popup['popup_max_display_count']};
if (cookieCount <= popCount) {
LoadVideo();
setTimeout(function() {\$(".clickMe").trigger("click");}, 3000);
cookieCount++;
jQuery.cookie('popup{$popup['popup_id']}', cookieCount, { expires: {$popup['popup_clear_count_after']} });
}
</script>

Changing html <input> image through javascript, cannot call method addEventListener

I am trying to get an input image to change through javascript when clicked but I get the following error through Google Chrome debug:
Uncaught TypeError: Cannot call method 'addEventListener' of undefined
The Following is my HTML code:
<section id="skin">
<video id="mainPlayer" width="640" height="360">
<source src="video.mp4">
</video>
<nav>
<div id="buttons">
<input type="image" src="play_button.png" id="playButton" width="22" height="22">
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
And this is my javascript code:
function doFirst() {
mainPlayer = document.getElementById('mainPlayer');
playButton = document.getElementsByName('playButton')[0];
playButton.addEventListener('click', playOrPause, false);
}
function playOrPause() {
if (!mainPlayer.paused && !mainPlayer.ended) {
mainPlayer.pause();
playButton.src="controls.png";
window.clearInterval(updateBar);
} else {
mainPlayer.play();
playButton.src="play_button.png"
updateBar = setInterval(update, 500);
}
}
window.addEventListener('load',doFirst,false);
playButton = document.getElementsByName('playButton')[0]; you will get an empty array here
you need to add name attribute to your input tag or change to
playButton = document.getElementById('playButton');

jQuery code refactoring help needed

An update to before, here's what I'm dealing with:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" onClick=setupVeg("showCarrot", "carrotBig") /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" onClick=setupVeg("showBroc", "brocBig") /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
function setupVeg(thumbVeg, hiddenVeg) {
$("#" + thumbVeg).click(function() {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
});
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
isAnyBig=false;
});
</script>
</body>
This code is not working unfortunately. I have borrowed from suggested solution below.
Would be nice if it did work!
Any suggestions, most welcome.
I don't think you need any of the flags or the if conditions really. I think your logic is:
toggle carrotBig whenever showCarrot
is clicked.
hide div.hidden whenever showCarrot is clicked.
So all you need is:
$("#showCarrot").click(function () {
$("#carrotBig").toggle("fast");
$("#div.hidden").hide();
});
.toggle will handle one of your flags (isCarrotBig) and .hide() won't do anything if div.hidden is already hidden, so that takes care of your isAnyBig flag.
Now.. let's make that work with broc as well...
function setupVegetable(showId, toggleId) {
$("#" + showId).click(function () {
$("#" + toggleId).toggle("fast");
$("#div.hidden").hide();
});
}
setupVegetable("showCarrot", "carrotBig");
setupVegetable("showBroc", "brocBig");
If you're interested, you can refactor it FURTHER so you don't need to supply the IDs for each of the vegetables. I'll need to see your HTML markup though.
Ok I'll post a new answer in response to the edit.
Points worth noting:
Removed divs surrounding the imgs - they are unnecessary and complicate the relationship between the thumnnails and the large images.
Removed onclick attribute from within HTML - you will be attaching the event handlers in the JS so this is not needed.
Since the relationship between the thumbnails and the large images is quite obvious (the large images is just the next element) you don't need IDs to identify ANY of them. All you need is a class on the thumbnails.
Since we're not using IDs, only classes, you can add as many vegetables as you want without touching the JS
Your code modified:
<body>
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<img class="imgThumb" src="img/carot.jpg" />
<img class="imgBig hidden" src="img/carot.jpg" />
<img class="imgThumb" src="img/brocoli.jpg" />
<img class="imgBig hidden" src="img/brocoli.jpg" />
</div>
<!-- end thumbs container -->
<script>
$("#thumbsContainer .imgThumb").click(function () {
var thisImgBig = $(this).next();
// Hide all imgBigs, except for this one
$("#thumbsContainer .imgBig").not(thisImgBig[0]).hide();
// Toggle this imgBig
thisImgBig.toggle();
});
$("#thumbsContainer .imgBig").click(function () {
// Hide this imgBig
$(this).hide();
});
</script>
</body>
create a function and reuse it....something like:
/**
* document here....
*/
var toggleElements = function() {
// your code here
}
and then
$("#whatever").click(toggleElements);
Personally I would suggest creating a simple jQuery plugin. Something like so:
(function($){
$.fn.big = function(options) {
var defaults = {
target: '#carrotBig',
};
var options = $.extend(defaults, options);
return this.each(function() {
$(this).click(function () {
isBrocBig=false;
if (isCarrotBig == false && isAnyBig == false) {
$(options.target).show("fast", function() {});
isCarrotBig=true;
isAnyBig=true;
}
else if (isCarrotBig == true) {
$(options.target).hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
else if (isCarrotBig == false && isAnyBig == true) {
$("div.hidden").hide("fast");
$(options.target).show("fast", function() {});
isCarrotBig=true;
}
else {
$("div.hidden").hide("fast");
isCarrotBig=false;
isAnyBig=false;
}
});
});
};
})(jQuery);
Then you just call it with something like so:
$("#showCarrot").big({target: '#carrotBig'})
Your next step should be to investigate whether you can get rid of the global variables or not.
Ok I have found a neat(ish) sollution, dependent on each hidden DIV being the .next() one. If it isn't it won't work but should be fine generally though. Hacked!
<div class="header"> <img class="imgLogo" src="img/vegtablelogo.jpg"> </div>
<div id="thumbsContainer">
<div class="thumb" id="carrotThumb"> <img id="showCarrot" class="imgThumb" src="img/carot.jpg" /> </div>
<div class="hidden" id="carrotBig"> <img class="imgBig" src="img/carot.jpg" /> </div>
<div class="thumb" id="brocThumb"> <img id="showBroc" class="imgThumb" src="img/brocoli.jpg" /> </div>
<div class="hidden" id="brocBig"> <img class="imgBig" src="img/brocoli.jpg" /> </div>
</div>
<!-- end thumbs container -->
<script>
var active = "";
$("div.thumb").click(function() {
var thumbVeg = $(this).attr("id");
var hiddenVeg = $(this).next().attr("id");
setupVeg(thumbVeg, hiddenVeg);
});
function setupVeg(thumbVeg, hiddenVeg) {
if (active != hiddenVeg) {
$("div.hidden").hide("fast");
$("#" + hiddenVeg).show("fast", function() {});
active = hiddenVeg;
}
else {
$("div.hidden").hide("fast");
active="";
}
}
$("div.hidden").click(function () {
$("div.hidden").hide("fast");
});
</script>

Categories

Resources