Response title
This is preview!
- Screen name: jQuerydan
- About Me: I be wanderin' abit into Flash, javascript, and lately jQuery. Now tinkerin' with video-audio based web apps implying Youtube API and streaming audio (mp3).
jQuerydan's Profile
19 Posts
49 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 04-May-2013 05:28 PM
- Forum: Using jQuery
Here's the scenario: I have a string of comma-delimited Youtube video IDs handled by a function which displays results as clickable video image thumbnails. Problem is, if that string contains an ID that does not exist anymore (or is inaccessible), the function breaks instead of skipping (or importing) the missing video image thumbnail. Is there a jQuery/Javascript solution that, upon button click, a function imports thumbnails of all existing and deleted videos requested by the ID string ? I don't mind displaying the thumbnails of the deleted videos, where possible, in fact, that would be best as the thumbnail count would be the same as original request. I'm using Ajax/get/jsonp and I dunno if error handling can tackle this issue. This is the last major hurdle of my project which I must overcome before my hair gets all pulled out LOL! Help anybody?- 04-May-2013 04:54 PM
- Forum: Using jQuery
Is it a current fact that using the Youtube iframe embedded player means having to reload the player when dynamically swapping video content? Should I understand that I can only use the swf object embed in order to dynamically change the video src with the javascript API? I use the Youtube iframe API for iPad users (for HTML5 video) and everytime I dynamically load a video by it's ID the whole player has to reload before loading the video. That's alot of wasted time between video loads. Is there a way to keep the dynamically set player from reloading when dynamically swapping videos through ajax jsonp function callback? Also, I can't seem to find a sample function thats uses queued videos for dynamic loading... . ;-(- 03-Apr-2013 05:11 PM
- Forum: Using jQuery
Is there a way to combine both HTML5 native Drag & Drop and image file append (local) for FileReader / Canvas manipulation? Basically I want to either:- Drag (native drag & drop) an image thumbnail (PNG Base64) located in a source div and drop it in a destination div where upon the dropevent FileReader and Canvas do their stuff, or:
- Append the same image thumbnail located in the same source div into the same destination div where upon an append or load event FileReader and Canvas do the same stuff.
I have the following code I use for the drag and drop part which works, but I would need a button that once clicked would trigger an append method (or load?) as explained above at #2:- function drop(e) {
- $('#DestinationDiv').css("background-color","#222222");
- var dt = e.dataTransfer;
- var files = dt.files;
- if(files.length>0) {
- handleFiles(files);
- }}
- function handleFiles(f) {
- var o=[];
- for(var i=0; i<f.length;i++) {
- var reader = new FileReader();
- reader.onload = (function(theFile) {
- return function(e) {
- gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
- .....
- }; })(f[i]);
- reader.readAsDataURL(f[i]); }}
It would appear that a drag and drop event doesn't quite result like in a load or append event, like the data involved in dropping isn't the same data involved in loading (or appending) in a div. The file I drag and drop is of the type data:image/png;base64,iVBORw0... which works, but with the above code, when I append the same image in the div, an error occurs at line 21:- TypeError: f is undefined
- for(var i=0; i<f.length;i++)
Perhaps I need an eventListener for the "load" or "append" event of the destination div? Obviously the above code is missing something. Any hinters would permit me to sleep ealier tonight LOL! Thx for guiding me towards the right method-event! ;-) - dan
- 29-Mar-2013 10:35 AM
- Forum: Using jQuery
But not so easy as I thought in my scenario, I have a variable which is basically the video ID of a Youtube link that I extract from a url once clicked, which, if matching a substring (video ID) of a comma-delimited string of video IDs found in a input text box, should trigger an event., like so:- var videoID =$("#videoIDholder").val(); // <-- the stored link video ID
- var str = $("input[name=StringOfVideoIDs]").val().split(',');
- if ($.inArray(videoID, str) !== -1) {
- alert('match!');
- } else {
- alert('no match!');
- };
Problem is, with the above code, the console (Firebug) reflects what's in videoID or str but alerts don't show if there's a genuine match or not, i.e., the above code triggers the match alert when the text box contains any video ID, and when the text box is empty the "no match!" alert gets triggered. I don't have to know the location of the matching comma-delimited ID located in the text box, just if there's a comma-delimited ID that is a duplicate (or not a duplicate) of the ID extracted from the video link. I don't mind using indexOf.
The closest I got was with this which works with one hard-coded ID:- var str = $("input[name=StringOfVideoIDs]").val();
- var n=str.match(/GHFDr254gs7/g);
- alert(n);
However, the above video ID in bold must be replaced by a variable, like this:- var videoID =$("#videoIDholder").val();
- var str = $("input[name=StringOfVideoIDs]").val();
- var n=str.match(/videoID/g); // <--- Is this possible?
- alert(n);
I read that in this scenario, you would have to use .match(new RegExp( ... , but this is new for me.
Matching a variable in a dynamic environment is what I need, any hints??- 22-Jan-2013 12:05 PM
- Forum: Using jQuery UI
It would be like soooo much easier if these one-liner droppables would work with accept conditions such as masterClass divs containing a child checkbox with class .addClass :- $("#Mysortable").droppable({
- accept : $("input:checkbox.addClass").parent().hasClass('masterClass');
- revert : $("input:checkbox.revertClass").parent().hasClass('masterClass');
- ...
or:- ...
- drop: function( event, ui ) {
- if ( $("input:checkbox.revertClass").parent().hasClass('masterClass')) {
- return false; // Reverts div to draggable container
- } ...
Anyone able to figure out some code that would achieve what I want? I can't change the divs .masterClass and the only .masterClass divs that can be dropped in the receiving container are the ones containing a checkbox with class .addClass. All other .masterClass divs containing checkboxes with class .revertClass must revert to their originating container if dropped in any other droppable container. Help? - dan- 10-Jan-2013 12:16 PM
- Forum: Using jQuery
I'm learning jQuery for the tricks and trades of managing dynamic events and content, and I can't make this [hasClass / each] work with dynamic element class change. I have a master checkbox_L that toggles selection of a dynamic number of checkboxes residing in their own same class [ .low ] divs. I also have a master checkbox_H that when clicked, should select all those same checkboxes only when their [ .low ] class parent divs have their classes changed to [ .high ]. The [ .high ] change is achieved when the div is clicked (removeClass .low / addClass .high). If not all checkboxes are selected, the respective master checkboxes would be deselected.
So far this part works, when master #checkbox_L or #checkbox_H is selected, the respective checkboxes get all selected accordingly, however, the reverse doesn't work, meaning all checkboxes residing in both different parent div classes must be individually checked before master #checkbox_L gets selected or master #checkbox_H gets selected (depends on order the sub checkboxes have been manually selected):- $(".container").on('change', '#checkbox_L', function(){
- $(".container input:checkbox").each(function() {
- if ($(this).parent().hasClass('gradientL')) {
- $(this).attr('checked', true);
- } else {
- return false;
- }
- });
- });
- $(".container").on('change', '#checkbox_H', function(){
- $(".container input:checkbox").each(function() {
- if ($(this).parent().hasClass('gradientH')) {
- $(this).attr('checked', true);
- } else {
- return false;
- }
- });
- });
What is missing to make this work so that this group of checkboxes, divided by dynamically-changed class-based parents, act like two separate groups controlled independantly by their master checkbox? Thx for helpful input. - dan
- I am using $.getJSON to request a return of Youtube videos based on their IDs. I observe that Youtube does not send back videos in the same order that the video IDs are stringed in my hidden input value. Is there a way to "throttle" or send each video ID in an ordered manner once each previous video ID request has been successful? I checked the specs of .underscore (throttle and debounce) alternatives, and unless I am mistaken, their specs don't seem to work for my solution. I need to delay (with .promise method perhaps?) each video request sent to the server so that when a video is successfully retrieved from Youtube, only then the next video ID from my ID string is sent to Youtube for video retrieval, and so forth until all video IDs from my hidden input have been sent. Here is some sample logic:
- function videoDisplay(){
- var array = $("#videoIDs").text().split(","); // Hidden input where video IDs are collected and split
- $.each(array, function(i) {
- var videoID = 'https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?';
- $.getJSON(videoID, function(data) {
- var entry = data.entry
- var videoTitle = entry.title.$t;
- var thumbnail = entry.media$group.media$thumbnail[0].url;
- $(".Displayed-videos").append('<div class="video-container"><div class="videoTitle">'+rvideoTitle+'</div><div class="videoThumbnail">'+thumbnail+'</div><input type="hidden" value="'+videoID+'" readOnly /></div>');
- });
- });
- 29-Dec-2012 10:00 AM
- Forum: Using jQuery
The following solution was proposed here regarding keeping unique text input values:- var txtData = [];
- $(".list .divContainingHiddenInput").each(function() {
- txtData.push($(this).find(".hiddenInput").val());
- });
- Array.prototype.unique = function () { // Keep unique strings
- var arr = this;
- return $.grep(arr, function (v, i) {
- return $.inArray(v, arr) === i;
- });
- }
- $("#joinedStrings").val(txtData.unique().join(','));
Question: How can .divContainingHiddenInput with unique hidden input value be displayed while the rest of the divs containing duplicate hidden input values be removed? Are parts of the above script useful to achieve this? The amount of divs inserted is never fixed, and the divs all have same class (.divContainingHiddenInput).
Solution sought: A function, that once called, will iterate through .list .divContainingHiddenInput and display only divs containing unique hidden input values by removing divs containing duplicate hidden input values.
Don't know enough jQuery logic to figure that one out ;-( Any help leading to a solution will be appreciated - dan- 14-Dec-2012 01:17 PM
- Forum: Using jQuery
I use this to toggle same class-based checkboxes after I click a master checkbox:- $("#master-checkbox").on('change', function() { // Toggle all same class-based checkboxes
- $(".same-class-checkboxes:not(:hidden)").attr('checked', this.checked);
- });
... and this to detect the checked or unchecked same-class checkboxes:- $(document).live('change', '.same-class-checkboxes', function(){
- $(".same-class-checkboxes:checked").each(function() {
- ... do something
So far all works, however, the problem is when I use a button to dynamically uncheck the master checkbox or the same-class checkboxes (when the master checkbox is not checked), the above document.live code doesn't detect any unchecked same-class checkboxes:- $("#button").on('click', function(){ // Uncheck same-class checkboxes that are checked
- $('.same-class-checkboxes:checkbox').each(function () {
- $(this).removeAttr('checked');
- $("#master-checkbox").removeAttr('checked');
- });
- });
I would really need just a simple script that iterates on the fly (dynamically) through the same-class checkboxes to detect upon change (dynamically or user-click) those checkboxes that are checked and do something accordingly, and this, regardless how and in what condition those same-class checkboxes have been checked. This would avoid having to create a function for every different interaction with those checkboxes.
Any hints? - dan- 08-Dec-2012 06:40 PM
- Forum: Using jQuery
The following code works for user-click event on dynamically inserted class-based checkboxes:- $('.aenable, .benable').live('change', function() {
- var chkbxchkd = $('.aenable:checkbox:checked, .benable:checkbox:checked').length;
- $('.counter').html('( ' + chkbxchkd + ' selected )');
- });
The problem is when I click on a button that toggles on and off the checked states of the class-based dynamically inserted checkboxes, the counter doesn't reflect the actual number of checked checkboxes. Basically, I need a live counter that constantly detects (and counts) user-clicked and dynamically checked or unchecked dynamically inserted class-based checkboxes. Any hint? - dan- 25-Nov-2012 04:03 PM
- Forum: Using jQuery
I have a text input that contains comma-delimited dynamically inserted Youtube video IDs. I want to only keep unique video IDs in the text input value. So this: $("#YoutubeUniqueIDs").val(x36_GZgoAIc,MejbOFk7H6c,x36_GZgoAIc,-F8EKGyL-j4,x36_GZgoAIc) becomes this: $("#YoutubeUniqueIDs").val(x36_GZgoAIc,MejbOFk7H6c,-F8EKGyL-j4) in same order.
This is what I found as sample so far:- var names = ["Mike","Matt","Nancy","Adam","Jenny","Nancy","Carl"];
- var uniqueNames = [];
- $.each(names, function(i, el){ if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
- });
I don't know how to modify my code below to filter this. Also, we're dealing with alphanumericals separated by a comma (no comma at start and end of value and no double-quotes) that may contain certain symbols such as hyphens or underscores. So I guess we need to find and remove the surplus duplicated patterns comprised of 11 consecutive letters-numbers-symbols? I have no clue how to implement the above in the following code:- $("#MakeUniqueIDs").click(function(){ // Gather video IDs.
- var txtData = [];
- $(".ytaenable, .ytbenable").each(function() { // Checkboxes identify which video IDs
- if($(this).is(':checked')){ // to combine.
- txtData.push($(this).next("li").find(".ytavideoID, .ytbvideoID").val()); // Find text input
- } // values that reflect checked boxes.
- });
- $("#YoutubeUniqueIDs").val(txtData.join(",")); // Keep unique video IDs
- // and join with comma delimiter.
- });
Filter method can be used as this code will only be available for recent modern browsers including IE9+ .
- 21-Nov-2012 11:43 AM
- Forum: Using jQuery
I'm using Youtube API v2 for searching Youtube videos based on search terms in the following code:- var searchTerm = $('.YTquery').val();
- $.getScript('https://gdata.youtube.com/feeds/api/videos?q=' + searchTerm + '&v=2&start-index=1&max-results=25&alt=json-in-script&format=5&callback=searchLookup');
... but I want to use that getScript code for displaying a list of clickable Youtube thumbnails based on video IDs like in following modified code:- var videoID = $('.video_id').val();
- $.getScript('https://gdata.youtube.com/feeds/api/videos/' + videoID + '?v=2&alt=json-in-script&callback=videoIDLookup');
I'm using getScript and json-in-script in order to allow cross-domain compatibility with browsers. I tried getJSON but nothing happens, perhaps I'm missing some more code...? I could use the search code and search for a video ID but where video IDs start with a hyphen, the search code interprets this as a youtube search filter and deletes the item, also, searching for IDs does not always display accurate results because some video titles contain the ID of another video.
Youtube recommends using the above proper syntax to retrieve videos based on an ID, and not use the search version. My added callback directs to videoIDLookup which is a modified jQuery function previously suggested here made to display a list of search term based video retrieval. I want the following function to display a list of clickable Youtube thumbnails based on video IDs, but so far nothing works:- function videoIDLookup(data){
- var feed = data.feed;
- var entries = feed.entry || [];
- for (var i = 0; i < entries.length; i++)
- {
- var entry = entries[i];
- var pvideoTitle = entry.title.$t;
- var ptrimTitle = $.trim(pvideoTitle).substring(0, 45).split(" ").slice(0, 10).join(" ");
- var pthumbnail = entries[i].media$group.media$thumbnail[0].url;
- var ptotalSec = entries[i].media$group.yt$duration.seconds;
- hours = parseInt( ptotalSec / 3600 ) % 24;
- minutes = parseInt( ptotalSec / 60 ) % 60;
- seconds = ptotalSec % 60;
- var psortedTime = (hours < 10 ? "0" + hours : hours) + " Hours: " + (minutes < 10 ? "0" + minutes : minutes) + " Minutes: " + (seconds < 10 ? "0" + seconds : seconds) + " Seconds";
- $(".list").append('<li style="cursor:pointer;">' + '<img src="'+pthumbnail+'" style="vertical-align:top;margin-top:0px;"/><br/>' + '<span id="pvideo_content">' + '<span class="yt-title">'+pvideoTitle+'</span><br />' + '<span class="video_meta">' + '<span class="yt-time">'+psortedTime+'</span>' + '</span></span>' + '<input type="hidden" id="pvideo_title" value="'+ptrimTitle+'" /></li>');
- }
- }
Any hints? Thx for suggesting code that can help in providing a working solution. - dan
UPDATE: I tried this, and the video ID gets set, but I got "NetworkError: 400 bad request" :- $.getScript('https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',function(data) {
- $.each(data.items, function(i,item){
- ... function ...
UPDATE: I tried this, but I got "TypeError: a is undefined" (jquery.min.js 1.8.1 - line 2) :- $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',function(data) {
- $.each(data.items, function(i,item){
- ... function ...
UPDATE: Where the NetworkError appears (400), this is how the urls display (in one line). All 25 urls show the same structure with their respective IDs:https://gdata.youtube.com/feeds/api/videos/0KTWEFpDOis?v=2
&callback=?&_=1353520272172"
UPDATE: Got this in ajax and no errors except nothing happens:- var array = $("#result").val().split(",");
- $.each(array,function(i){
- var requestUrl = 'https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2alt=json-in-script'
- $.ajax({
- url: requestUrl,
- type: "GET",
- dataType: "json-in-script",
- success: function(data){
- var videoLength = $(data.feed.entry).length;
- for(x=0; x<videoLength;x++)
- { ... function ...
UPDATE: In the instances where the above sample codes did not trigger errors in the console, an alert would display: [object Object]. Now what?
UPDATE: The following alert gives me the expected results, so why doesn't the callback function use this? Perhaps the script finishes too fast before activating the callback function?- $.getJSON('https://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',
- function(data) {
- alert(array[i]); // prints all the video IDs as expected.
UPDATE: Culprit seems to be here, after console.log:- $.getJSON('http://gdata.youtube.com/feeds/api/videos/' + array[i] + '?v=2&alt=json-in-script&callback=?',
- function(data){
- console.log(data); // TypeError: data.feed is undefined
- $.each(data.feed.entry, function(){
Bump!...- 20-Nov-2012 08:45 PM
- Forum: Using jQuery
A file input element selects a base64 png from desktop and a decoded text string appears in an adjacent text input element for further jQuery processing. However, when I drag and drop the same base64 png onto the file input element, the decoded text string appears in the adjacent text input element but is not subsequently processed by jQuery. It's like everything stops after line 2 of code:- $('#file_input').on('change', function() {
- handleFiles(this.files); // Base64 decoder which inserts text string in #result
- var array = $("#result").val().split(",");
- $.each(array,function(i){
- ... function processing ...
- 11-Oct-2012 09:25 AM
- Forum: Using jQuery
My multimedia app allows appending in a div the ol listing of clickable thumbnails, titles and durations of youtube videos for future replay. I was wondering how to save the ol element (with all the contents of li child elements) for future retrieval on a click of a button? Would the following cookie function work? https://github.com/carhartl/jquery-cookie/blob/master/README.md . I've read that cookies are not the way to go for this type of data, is that accurate? Basically, in my app, a button would export the div contents to the client's computer (perhaps as a playlist?) and another button would import that playlist back into my app.
Maybe a jQuery form or plugin would be in order here, any pointers? Thx for guiding me. - dan- 07-Oct-2012 10:43 PM
- Forum: Using jQuery
My app retrieves thumbnail, title and duration from searched videos or via preset links, but how do I go about in fetching the same info after import of a video provided in the related youtube videos that appear after a youtube video has ended? Basically, when a clicked related youtube video appears in Tubeplayer (which I use as player), how to get thumbnail, title, duration and vid ID of that video? Thx for pointers or sample code. - dan
Edited: Added ID in title and question.- 05-Oct-2012 10:04 AM
- Forum: Using jQuery
Is there a way to get the li number and title (after clicking on the li) of an ordered list that is set dynamically via ajax or jason? I use this as example for displaying the li in the hard-coded ol:- $("#List ol").append('<li><p>' + '<img src="'+thumbnail+'"'/><br />' + '<span class="title">'+imageTitle+'</span></p></li>');
A function dynamically fetches (after selecting an option from a pulldown menu) the thumbnails (fixed amount of 25 thumbs) and displays them (with their titles) in the ol div. The ordered list starts with the numbered li followed by the thumbnail image and the title below it. I managed to trim, splice, and join the title part but that's based on a variable which fetches the Youtube video title, like so:- var videoTitle = data.feed.entry[x].title.$t;
- var trimTitle = $.trim(videoTitle).substring(0, 70).split(" ").slice(0, 12).join(" ");
How can I get the selected li number (without the thumbnail) and corresponding title (trim-spliced like above) so they can display in a div? - dan- 30-Sep-2012 10:47 AM
- Forum: Using jQuery
I want the choice part of var to be replaced with a select option rel (I can't use value), the replaced part could be a Youtube id or Youtube search query. Is the following feasible or well-formed?- var requestUrl = 'https://gdata.youtube.com/feeds/api/videos?q=choice&v=2&alt=json'
- requestUrl.replace('choice', $('#selectMenu_V').attr('rel'));
- $('#YT_presetList ol').html('');
- $.ajax({
- url: requestUrl,
- type: "GET",
- dataType: "json",
- success: function(data){
- var pvideoLength = $(data.feed.entry).length;
- . . .
The remaining omitted code serves to display a list of clickable Youtube search results (thumbnail, title, etc). Everything works well if I hard-code q="my search term here" but I need a select menu to provide more preset search terms. Jquery learner here - am I missing something? - dan
UPDATE
Ok now I changed a bit the code and I get a list of Youtube results with "undefined" as search query. At least something is being displayed but this "undefined" error is obviously not what I want:- $(function(){
- var requestUrl = 'https://gdata.youtube.com/feeds/api/videos?q=n&v=2&alt=json'
- $('#YT_presetList ol').html('');
- $.ajax({
- url: requestUrl.replace('n', $('#selectMenu_V').attr('rel')),
- type: "GET",
- dataType: "json",
- success: function(data){
- var pvideoLength = $(data.feed.entry).length;
- . . .
I must be missing something silly...Now what? - dan- 09-Aug-2012 02:35 PM
- Forum: Using jQuery
Stuck here with sorta dilemma, I use this code to allow display of images in div via mouseover of select menu option:- $("#selectMenu").on("mouseover change", function() {
- oScroll2.tinyscrollbar_update($(this).val());
- return false;
- });
There are currently 11 anchors for 11 images, but this will grow. Anchor 1 is option value="1" (for first image); anchor 2 is option value="612" (for second image); anchor 3 is option value="1224" (for third image), etc. Those values are the pixel traveling distances (right to left) between left margin of div container and left margin of selected image (for scrolling - images are 612px wide).
EDIT: My prob is the following: When I mouseover any option in the select menu, it is the previous item (image) in the list that appears, regardless of direction. When I click on the option, however, everything works as it should. the correct image appears. Looks like something silly I dunno of... . What gives? - dan
UPDATE - Ok, here's the scoop, I tried "hover", "mouseover", "mouseenter, "select", and all of them trigger option item once you lose focus of option item with mouse (move onto the next item). Has this always been an issue with select menus? "Thud" !! Guess I need a function that supercedes this? Note: ".change() - event is deferred until the element loses focus."- jQuery API. Yup, I do need a function!- 08-Aug-2012 01:26 PM
- Forum: Using jQuery
I am trying to trigger a link that has same rel or name value of selected option value of a pulldown menu, is the following code capable of doing thist?- var s = $("this option:selected").val();
- $("a.track[rel='s']").trigger("click");
Basically you select an item from the pulldown menu and a matching link gets clicked. Scratching my head on this one (still learning). If above code is flawed, can you suggest some code that achieves what I need?
Thanks in advance. - danUPDATE: I got this function but it's not triggering the matching link. I gather I may have to find each link before any of them can be targeted?
Maybe reversing the order of this jsFiddle would do?- $("option").change(function(event){ //when option is selected
- event.preventDefault();
- $("a.track").attr(name='$(this).val()').trigger("click");
© 2012 jQuery Foundation
Sponsored by
and others.