jQuery Forum

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.

The site in question is at http://dev.dogknob.com/

Thanks.

If it weren't for the fact that I can't afford to hire someone to do this for me, I swear I would.

Eventually I want to do this:

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.

This code I found works great for one slideshow, but I need to have two side-by-side and I'm a novice, so I can't see a good way to do this:

The page I am working on is here: http://www.nuancepress.com/nuance-press-announces-2-volume-collection-of-the-best-of-fantasy-and-horror-artist-d-x-stone/

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.

if($(this).hasClass('next')){
nextIndex = current >= slides.length-1 ? 0 : current+1;
}
else {
nextIndex = current <= 0 ? slides.length-1 : current-1;
}

var next = slides.eq(nextIndex);

if(supportCanvas){

// 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.

current=nextIndex;
next.addClass('slideActive').show();
li.removeClass('slideActive').hide();
}
});

},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:

data[i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
(255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
(255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
data[++i] = ((data[i] < 128) ? (2*data[i]*data[i] / 255) :
(255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

// After the RGB channels comes the alpha value, which we leave the same.
++i;
}

// Putting the modified imageData back on the canvas.
canvasContext.putImageData(imageData,0,0,0,0,imageData.width,imageData.height);

// Inserting the canvas in the DOM, before the image:
image.parentNode.insertBefore(canvas,image);
}

});

Logic: "select all of the links where the href begins with the domain name, but does not contain a, b or c."

I'm using jQuery 1.7.1 with WP 3.3.1 and I get this error:

 --  Syntax error, unrecognized expression: [href*=/wp-admin/] --

...besides show "Hello World" type alerts 

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:

<p id="dkq-title">Title

      <span id="dkq-subtitle-quotes" class="selected-text">quack</span>

      <span id="dkq-subtitle-data">quack quack</span>

      ...

</p>

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.