I have a video array, and then a list of thumbs that correspond to the array. When you click on one of the buttons, it needs to be deactivated for the duration of the video. I have it so that after the first click, it deactivates the whole list
$('li', '.thumbs').on('touchend click', function() {
$("#myVid").on("loadeddata", function() {
$("#bigPic").addClass("move");
$("#MyT").fadeOut(750);
});
playVideo2( $(this).index() );
$('li', '.thumbs').unbind();
});
if each item in the list is set up like this:
<li rel='1' id="first">
<div style="top:0px;">
<img src="graphics/filler.png" alt="" width="280" height="128" />
</div>
</li>
with the id being different for each, can I just put the id instead of the .thumbs, and just have it unbind or turn off itself? I know this must be inefficient, but I'm not sure how else to do it. Do I use this() somehow? If so, how?
You could make use of a global variable to check which video is playing.
//init
var currentlyPlaying = undefined;
Within your event handling part you set this variable to the ID of the clicked button.
currentlyPlaying = $(this).attr('id');
With that setup you can check the variable before doing anything in your script.
if ( !(currentlyPlaying == $(this).attr('id')) ) {
// your script
}
Alternatively, you can use the ID to unbind as you suggested, of course.
$('li', '.thumbs #' + $(this).attr('id')).unbind();
Related
I am attempting to make a few divs behave the way I want them to. Here is my relevant HTML:
<ul class="services">
<li class="business-formation" id="services-li-1">Business Formation</li>
<li class="domestic-relations" id="services-li-2">Domestic Relations</li>
<li class="estate-probate" id="services-li-3">Estate & Probate</li>
</ul>
<div class="business-formation-list" id="business-formation-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="domestic-relations-list" id="domestic-relations-list">
<ul>
<li>Items go here</li>
</ul>
</div>
<div class="estate-probate-list" id="estate-probate-list">
<ul>
<li>Items go here</i>
</ul>
</div>
I want the divs to appear and disappear when the corresponding li is clicked (they are links). Here is my Javascript:
document.getElementById('services-li-1').style.cursor = "pointer";
document.getElementById('services-li-2').style.cursor = "pointer";
document.getElementById('services-li-3').style.cursor = "pointer";
const div1 = document.querySelector('business-formation-list');
const div2 = document.querySelector('domestic-relations-list');
const div3 = document.querySelector('estate-probate-list');
const click2 = document.getElementById('services-li-2');
document.addEventListener('click', (event) => {
if (event.click2.className = 'domestic-relations') {
div1.style.display = 'none';
div2.style.display = 'block';
div3.style.display = 'none';
}
});
This doesn't make anything happen, but what I wanted it to do is to make the second div appear when the li with the class name "domestic-relations" is clicked. What am I doing wrong? Thanks!
If you're using querySelector, you need to tell it that it's a class. You do that by adding . before the class in question.
So document.querySelector('business-formation-list') should be document.querySelector('.business-formation-list').
However, if you're only using it once, it should be an ID, not a class.
Im also fairly new to this and had a similar problem to yours. I came up with a solution, so it might help you as well. The solution is quite long so I hope you can bear with me.
first thing is to change your your div class "domestic/estate/business" to just "list". When you're doing the css for it, you'll want to apply the same style to them. If you need more styling, you can always target the IDs or add another css class.
Once you've done that, apply to that list "display: none;". This will hide all your ul's at once.
The javascript looks something like this. i've added some description as to why I chose to do what I did.
var serviceType = document.querySelectorAll(".serviceType");
var serviceTypeArray = Array.prototype.slice.call(serviceType); // this will
//change your serviceType from a nodelist to an Array.
var serviceDescription = document.querySelectorAll(".list"); // to grab the
//list of descriptions and make it into an "array"
for ( i = 0 ; i < serviceTypeArray.length ; i++) {
var services = serviceTypeArray[i]; // I created this variable to store the
// variable "i"
services.addEventListener( "click" , displayServices); }
// created this "for loop" to loop through every element inside the array
//and give it the "click" function
function displayServices() {
var servicePosition = serviceTypeArray.indexOf(this); // when we click the
// event, "this" will grab the position of the clicked item in the array
if (serviceTypeArray[servicePosition].hasAttribute("id") == false) { //
// the hasAttribute returns values of true/false, since initially the
// serviceTypeArray didn't have the "id" , it returns as false
serviceTypeArray[servicePosition].setAttribute( "id" , "hide"); // I've
// added the "setAttribute" function as a unique indicator to allow
// javascript to easily hide and show based on what we are clicking
serviceDescription[servicePosition].style.display = "block"; // When you
//click one of the serviceType, it returns an the index number (aka the
// position it is inside the arrayList)
//this gets stored inside servicePosition(aka the actual number gets
// stored).
// Since i've made an array to store the the description of each service,
// their position in the array correspond with the service's position
//inside the serviceType array made earlier; therefore, when I press one
// particular serviceType (ie i clicked on "business formation"), the
// appropriate text will pop up because the position of both the name and
// its description are in the same position in both arrays made
} else if (serviceTypeArray[servicePosition].hasAttribute("id") == true ) {
//since the serviceType now has an attribute, when we check it, it'll come
// back as true
serviceTypeArray[servicePosition].removeAttribute("id"); //we want to
// remove the id so next time we click the name again, the first "if"
// condition is checked
serviceDescription[servicePosition].style.display = "none"; //this is
// so that the display goes back to "none"
}
}
This will allow to click any of the names and display/hide them at will. you can even show 2/3 or all three of them, it's up to you. I hope this helps and I hope the explanation is clear enough!
Let me know if you have any questions for this!
Context: I'm helping my friend create a political joke sort of website.
I need it to add 1 to a variable every time the onmouseover event is triggered.
<img src="tm.png" onmouseover='this.src="jc.png"'>
I have this so far but I need to find a way to link it with a function that will add 1 to itself when that event happens. I have multiple onmouseover events around the page so I need it to work for them all. I know how to make the variable but I am unsure on how to add 1 each time the onmouseover event happens, I am also unsure on how to add the function to the onmouseover event. Thanks
hoverCounter = 0;
<img src="http://www.darbsterkitty.com/uploads/5/5/5/6/55568079/b8sk1f_orig.jpg" height="200px" onmouseover="hoverCounter++; console.log('hoverCounter: ' + hoverCounter)"></img>
Use event delegation and check whether the hovered element is an image.
var count = 0;
addEventListener("mouseover", function(e){
if(e.target.tagName == "IMG"){
count++;
}
console.log(count);
})
<img src="http://lorempixel.com/50/50?0"/>
<img src="http://lorempixel.com/50/50?1"/>
<img id="someImage1" src="http://via.placeholder.com/350x150" >
<img id="someImage2" src="http://via.placeholder.com/350x150" >
<br/>
Hover Count:
<input id="countDisplay" type="text"/>
JS:
// Initial count
var hoverCount = 0;
// Function to increment
function onHovered(event){
hoverCount++;
document.getElementById('countDisplay').value = hoverCount;
}
// Bind events
document.getElementById('someImage1').onmouseover = onHovered;
document.getElementById('someImage2').onmouseover = onHovered;
Im fairly new to javascript and I just can't figure this out despite my attempt in researching. How do I track the change of a input within a div and trigger an append to an outside div? My code goes as follow:
Append h3 with "Pending" once ".image-value" input has a change in value
<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
<div class="select-form">
<img src="images/vote.jpg" data-value="image_value">
<img src="images/vote.jpg" data-value="image_value2">
<img src="images/vote.jpg" data-value="image_value3">
<img src="images/vote.jpg" data-value="image_value4">
<img src="images/vote.jpg" data-value="image_value5">
<!-- Track the change of this input -->
<input type="hidden" class="image-value" name="selected_image" value="">
</div>
</div>
I tried this:
function changeStatus(statusValue) {
$("input",".select-form").val(statusValue).trigger("change");
}
$("input",".select-form").change(function(){
if (!$(this).val()){
$("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
}
});
But that didn't seem to work. Any ideas?
place an empty div where you want your new div and give it an id i.e(<div id='myDiv'><div>) and then append what you want like this.
$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );
You can also check Append Explained
for more explanations.
Thanks.
I've done a couple things here... First, I'm not sure why you had it all in a named function. When you're using event listeners that often isn't necessary.
Then, I don't know what the val check was for, so I reversed it.
Finally, I'm using one(), which only runs once. This case seemed to call for that.
$('.select-form').one('change', 'input', function () {
if ( $(this).val() ) { alert('asdgf');
$("<div class='pending'>Pending</div>")
.appendTo($(this).parent().prev('h3'));
}
});
Fiddle
try this:
$("input",".select-form").on("change", function(){
var $this = $(this);
if (!$this.val()){
var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');
$this.parent().parent().before(elem);
}
});
you can also place a check, that if the pending div is already added, not to add it again.
Of course this solution assumes that there are no other nested divs between the target div(before which you want to append) and the input control
In a gallery I want to block certain thumbnails from expanding their original picture via lightbox.
The images don't have an ID, just a class. All of the links are read from a table in a database.
$(document).ready(function(){
if($('.product-image').attr('target', 'blockedpath')) {
$('.product-image').click(function(e) {
e.preventDefault();
return false;
});
}
});
<li class="product">
<div class="productInfo">
<h3>#i.ToString()</h3>
<a href="#Href("~/Images/2013/" + i.ToString() + ".jpg")" rel="lightbox" class="link">
<img class="product-image" src="#Href("~/Images/2013/Thumbnails/" + i.ToString() + ".jpg")" alt="foto" />
</a>
</div>
</li>
If I use this, all thumbnails get blocked. How can I prevent just the blocked pictures and avoid blocking the thumbnails.
Would it be possible, to save all images which should be blocked in an array and loop through that array to block those thumbnails?
You are first checking whether any images exist with target = blockedpath, then blocking all images.
You could use something like this:
$(document).ready(function(){
// Select elements with the product-images class, that also
// have a target attribute with a value equal to 'blockedpath'
// Bind a click event to the matched elements
$('.product-image[target="blockedpath"]').click(function(event) {
event.preventDefault();
return false;
});
});
$('[target=blockedpath]').click(function( e ){
e.preventDeault();
});
or the opposite:
$('.product-image').not('[target=blockedpath]').click(function(){
alert('hi!');
});
http://api.jquery.com/event.preventDefault/
I have a set of images that correspond to video thumbnails. The user clicks a thumb which loads the browser. This would be simple enough, but I need to track which of the thumbs was clicked, so that I can automatically cue up the next video in sequence.
My first thought was to do something like this (highly simplified example):
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" />
<img id="vt_1" src="thumbxxx01.jpg" />
<img id="vt_2" src="thumbxxx02.jpg" />
<img id="vt_3" src="thumbxxx03.jpg" />
<img id="vt_4" src="thumbxxx04.jpg" />
<img id="vt_5" src="thumbxxx05.jpg" />
<img id="vt_6" src="thumbxxx06.jpg" />
</div>
<script type="text/javascript">
var videos = [ "xxx00", "xxx01", "xxx02", "xxx03", "xxx04", "xxx05", "xxx06" ];
var video_index = null;
function playVideo(id) {
// play video then call "onVideoFinish()" when video ends.
}
function onVideoFinish() {
video_index = (video_index = 6) ? video_index : video_index+1;
playVideo(videos[video_index]);
}
$j("div.thumbnail img").live("click", function (e) {
e.preventDefault();
var selected_id = $(this).attr("id").split("_")[1];
video_index = selected_id;
playvideo( videos[video_index] );
});
</script>
At first glance this seems to be okay, but I'm not sure if this is the best/most elegant solution, especially as I'd be implementing all these methods from within an object context.
This is how I would do it. The only global that you need in this case is currentPlayOrder, which could be stored someone as part of a preferences or configuration model.
First the HTML. I moved the video sources into the rel attribute of the associated thumbnail. I assume that your application is generating the thumbnails, in which case, this would be an appropriate method since whatever generates the thumbnail HTML could be made aware of the associated video sources.
<div class="thumbs">
<img id="vt_0" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoA"/>
<img id="vt_1" src="http://serverfault.com/content/img/sf/logo.png" rel="videoB"/>
<img id="vt_2" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoC"/>
<img id="vt_3" src="http://serverfault.com/content/img/sf/logo.png" rel="videoD"/>
<img id="vt_4" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoE"/>
<img id="vt_5" src="http://serverfault.com/content/img/sf/logo.png" rel="videoF"/>
<img id="vt_6" src="http://stackoverflow.com/content/img/so/logo.png" rel="videoG"/>
</div>
Now the JS. Notice the use of previousSibling and nextSibling to determine play order:
<script type="text/javascript">
var PLAY_ORDER_BACKWARD = "previousSibling";
var PLAY_ORDER_FORWARD = "nextSibling";
var currentPlayOrder = PLAY_ORDER_FORWARD;
$(document).ready(function() {
$(".thumbs img").each(function(i, node) {
$(node).click(function() {
playVideo(this.getAttribute("rel"), this);
});
});
});
var playVideo = function(source, thumbNode) {
console.log("Play video %s", source);
onVideoFinish(thumbNode);
// If your video play accepts a callback, you may need to pass it as
// function() { onVideoFinish(thumbNode); }
}
var onVideoFinish = function(thumbNode) {
// Get the next img node (if any) in the appropriate direction
while ( thumbNode = thumbNode[currentPlayOrder] ) {
if ( thumbNode.tagName == "IMG" ) { break; }
}
// If an img node exists and it has the rel (video source) attribute
if ( thumbNode && thumbNode.getAttribute("rel") ) {
playVideo(thumbNode.getAttribute("rel"), thumbNode);
}
// Otherwise, assume that there are no more thumbs/videos in this direction
else {
console.log("No more videos to play");
}
}
</script>
Hope that helps.
Here's how I would do it.
Instead of storing the video names inside an array, why not store the video name along with the thumbnail?
You can use the class attribute to store the name of the video.
Once you take this approach, things become simple.
<div class="thumbs">
<img id="vt_0" src="thumbxxx00.jpg" class="xxx00"/>
<img id="vt_1" src="thumbxxx01.jpg" class="xxx01"/>
<img id="vt_2" src="thumbxxx02.jpg" class="xxx02"/>
<img id="vt_3" src="thumbxxx03.jpg" class="xxx03"/>
<img id="vt_4" src="thumbxxx04.jpg" class="xxx04"/>
<img id="vt_5" src="thumbxxx05.jpg" class="xxx05"/>
<img id="vt_6" src="thumbxxx06.jpg" class="xxx06"/>
</div>
<script type="text/javascript">
function setupVideoPlayer(order)
{
//lastThumb won't be accessible from outside of setupVideoPlayer
//function.
var lastThumb = null;
var imageSelector = 'div.thumbs img';
function playVideo(video)
{
//Play the video.
onVideoFinish();
}
function onVideoFinish()
{
//If order is 'ascending', we will go to the 'next'
//image, otherwise we will go to 'previous' image.
var method = order == 'asc' ? 'next' : 'prev';
//When user is at the end, we need to reset it either at the
//first image (for ascending) or the last (for descending).
var resetIndex = order == 'asc' ? 0 : $(imageSelector).length - 1;
//When video has finished playing, we will try to
//find the next/prev (depending upon order) sibling of 'lastThumb',
//If we can not find any sibling, it means we are at the
//last/first thumbnail and we will go back and fetch the first/last
//image.
//Also, instead of calling the playVideo method, we will
//fire the click event of thumbnail. This way, if you decide to
//do something in future (say playing an ad before the video)
//you only need to do it in your click handler.
if($(lastThumb)[method]().length == 0)
$(imageSelector).get(resetIndex).click();
else
$(lastThumb)[method]().click();
}
$j(imageSelector)
.click(
function()
{
//on click, we store the reference to the thumbnail which was
//clicked.
lastThumb = this;
//We get the name of the video from the class attribute
//and play the video.
playVideo($(this).attr('class'));
}
);
}
$(document).ready(
function() { setupVideoPlayer('asc'); }
);
</script>
Above code has the advantage that you can modify your HTML and it will automatically play those videos.
You can wrap the images with an anchor tag and use the onClick method as follows:
<img src="thumbxxx00.jpg" />
<img src="thumbxxx01.jpg" />
...