I have several events which successfully replace the "src" attribute of my <source> tags in my parent <audio> tag.
The problem I am having is that even though the new audio file has been changed, the old one still plays. I suspect there is more to this than simply doing $( 'source' ).attr( 'src', 'new_audio_file' )
I can post whatever code is needed if anyone is interested in helping me, but if there is just some method I can call that I am unaware of, then that might do the trick.
OK I got this script doing everything it needs to do. My PHP function in wordpress is sending the correct AJAX response.
So why, after nearly 3 hours, can I STILL not set the link's href attribute? I have tried every combination I can think of to get the response into the <a title=""> attribute, but no dice.
the <a> does not have a title initially, BTW
I've tried this. Even this forum is screwing with me. Next metod tried in reply.
There are two slideshows (#dk-ad and #lt-ad) and they need to function independently of one another. There is probably an easy way to do this but since I'm a total hack I'll probably end up duplicating a lot of code and having it still not work anyway. I got roped into this by a friend who thinks I'm a genius even though I'm not.
Do I need to have 2 sets of variables for each slideshow? Then how do I pass this into the createCanvasOverlay() function? Clueless.
$(window).load(function(){
// We are listening to the window.load event, so we can be sure // that the images in the slideshow are loaded properly.
// Testing wether the current browser supports the canvas element: var supportCanvas = 'getContext' in document.createElement('canvas');
// The canvas manipulations of the images are CPU intensive, // this is why we are using setTimeout to make them asynchronous // and improve the responsiveness of the page.
var slides = $('#dk-ad li'), current = 0, slideshow = {width:0,height:0};
setTimeout(function(){
if(supportCanvas){ $('#dk-ad li img').each(function(){
if(!slideshow.width){ // Saving the dimensions of the first image: slideshow.width = this.width; slideshow.height = this.height; }
// Rendering the modified versions of the images: createCanvasOverlay(this); }); }
$('#dk-ad .arrow').click(function(){ var li = slides.eq(current), canvas = li.find('canvas'), nextIndex = 0;
// Depending on whether this is the next or previous // arrow, calculate the index of the next slide accordingly.
// This browser supports canvas, fade it into view:
canvas.fadeIn(function(){
// Show the next slide below the current one: next.show(); current = nextIndex;
// Fade the current slide out of view: li.fadeOut(function(){ li.removeClass('slideActive'); canvas.hide(); next.addClass('slideActive'); }); }); } else {
// This browser does not support canvas. // Use the plain version of the slideshow.
},100); // This function takes an image and renders // a version of it similar to the Overlay blending // mode in Photoshop.
function createCanvasOverlay(image){
var canvas = document.createElement('canvas'), canvasContext = canvas.getContext("2d");
// Make it the same size as the image canvas.width = slideshow.width; canvas.height = slideshow.height;
// Drawing the default version of the image on the canvas: canvasContext.drawImage(image,0,0);
// Taking the image data and storing it in the imageData array: var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), data = imageData.data;
// Loop through all the pixels in the imageData array, and modify // the red, green, and blue color values.
for(var i = 0,z=data.length;i<z;i++){
// The values for red, green and blue are consecutive elements // in the imageData array. We modify the three of them at once:
I must now ask if there is a BETTER way to do this...
I have a page of subtitles, links and sections. All subtitles and sections are set to "display: none" by default except for the ones that should show by default. The defaults have a class of "selected-text" (subtitles), "selected-sect" (sections), and "selected-link" (links).
When I click a link, I want to highlight that link (add".selected-link"), then show only the subtitle/section that corresponds to that link (add "selected-text" or "selected-sect").
The content to highlight/hide/show has a consistent naming convention:
The links and sections also have this prefix/suffix scheme for their IDs
So I did the following in jQuery and it works as intended, but since I am an absolute beginner, I am wondering if this is the best way to do this...
jQuery(document).ready(function() { var $ = jQuery; $.dkqns_display = { init: function() { $( "ul#dkq-navlist a" ).click( function( e ) { _switch_display( this ); preventDefault( e ); return false; }); }, switch_display: function( obj ) { _switch_display( $( obj ) ); } }; // END dkqns_display function _switch_display( obj ) { var clickedId = $( obj ).attr( "id" );
// snip the unique part of the id var suffix = clickedId.substring( 9 );
// grab the common parts of the subtitle/section IDs, to which I will apply the correct suffix var titlePrefix = "dkq-subtitle-"; var sectPrefix = "dkq-sect-"; // un-highlight all links $( "ul#dkq-navlist a" ).removeClass( "selected-link" ); // hide all subtitles/sections $( "p#dkq-title span" ).removeClass( "selected-text" ); $( "div#dkq-content section" ).removeClass( "selected-sect" ); // highlight selected link $( "ul#dkq-navlist a#" + clickedId ).addClass( "selected-link" ); // show selected subtitles/sections $( "p#dkq-title span#" + titlePrefix + suffix ).addClass( "selected-text" ); $( "div#dkq-content section#" + sectPrefix + suffix ).addClass( "selected-sect" ); } $.dkqns_display.init(); });
In the "init" function, I'm aware that preventDefault() prevents a page refresh, which is what I want. A tutorial told me to add "return false;" after that, but did not explain why. Otherwise I know what all this code does.
I've been working with jme because I thought the whole idea was for it to be html5. The playlist example uses an <audio> tag with no src attribute or any child <source> tags, which is invalid html 5. Bummer. Any way to do a playlist that validates?
my own implementation, which only throws the one validation error mentioned above, is here
OK so the basic stylesheets comprise about 800 lines of code and look about as fragile as Trump's ego; I don't understand what most of these CSS selectors actually refer to and I'm intimidated about breaking something.
I need to make a smaller (less width, 230px wide to be exact) version of the audio player. Where do I even start with such a thing?