oggyb

Quoted from the JPlayer google group: This helped me fix the issue.

Grrr, that made no difference, I thought it would.

Ah yes, that's helpful thank you.

Does nobody have any idea why this might be failing in Safari? I've tried changing the wma to an mp3 file to no avail.

Hi all. I'm usually ok writine JQuery script, but this has flummoxed me. I have the following code running multi-instanced media players on a page: $(document).ready(function(){ $("#jquery_jplayer_leech").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { mp3: "http://www.jessisweddingmusic.co.uk/audio/Leech_Credo_Extract.mp3", oga: "http://www.jessisweddingmusic.co.uk/audio/Leech_Credo_Extract.ogg" }) //.jPlayer("play") ; }, swfPath: "scripts", supplied: "mp3, oga", cssSelectorAncestor: "#jp_interface_leech" }) .bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together. $(this).jPlayer("pauseOthers"); }); $("#jquery_jplayer_faull").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { wma: "http://www.jessisweddingmusic.co.uk/audio/Faull_Softly.wma", oga: "http://www.jessisweddingmusic.co.uk/audio/Faull_Softly.ogg" }) //.jPlayer("play") ; }, swfPath: "scripts", supplied: "wma, oga", cssSelectorAncestor: "#jp_interface_faull" }) .bind($.jPlayer.event.play, function() { // Using a jPlayer event to avoid both jPlayers playing together. $(this).jPlayer("pauseOthers"); }); }); It is only slightly modified from the JPlayer demo, yet with the following HTML implementation it seems to fail in weird ways outside of Firefox: <section class="expand"> <h3>Organists</h3> <div class="person"> <h4>Name</h4> <img class="right" src="" alt="" /> <p>Name graduated from blah blah blah.<p> <div id="jquery_jplayer_leech" class="jp-jplayer"></div> <div class="jp-audio"> <div class="jp-type-single"> <div id="jp_interface_leech" class="jp-interface"> <ul class="jp-controls"> <li><a href="#" class="jp-play" tabindex="1">play </a></li> <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> <li><a href="#" class="jp-stop" tabindex="1">stop</a></li> </ul> <ul class="jp-time"> <li class="jp-current-time"></li> <li>/</li> <li class="jp-duration"></li> </ul> </div> <ul id="jp_playlist_1" class="jp-playlist"> <li>Credo (extract)</li> </ul> </div> </div> </div> </section> ... In FF4 beta and 3.6 both the current players function as desired, but in Safari (latest, PC and Mac) the second does not function, and in IE9 none of the players on the whole site function. Opera is fine. I'm hoping this is a simple Javascript issue, but if not I guess I'll have to take it to the JPlayer google group. Any help you can give will be amazing thanks. http://www.jessisweddingmusic.co.uk/musicians

html5shiv eh, not heard of that before. I applied it and IEs 6 and 7 are better, and IE8 is practically perfect, thanks mteam! Will still need to change some bits for 6 and 7 though, which is a bummer. Much success.

Awesome. Just to confirm it, I re-did the change to display: block and it works, but this time I deleted position: relative from the <section>'s style, which I didn't do last time. Thanks all.

Tried both options: setting all html5 elements to display: block, and changing <section>s to <div>s. Still no dice in Opera. I've been using Browserlab to check older browsers including Firefox 3.0 and 3.6. Seems to work in both with <divs> and is surprisingly unbroken in IE6-8 all things considered. I think that's the way forward, but the Opera issue is still a concern and I'd rather not write a new CSS file for it as well as the requisite IE ones.

www.jessisweddingmusic.co.uk The site is live for now, so you can see. The CSS doesn't validate due to level 3 attributes. The HTML5 validates.

Thanks for the reply. Making the <section>s position: relative doesn't make any difference at all, sadly

Hi guys, I did a brief search on this, but it seems to be a more specific issue than any I could find. I have centred <section> elements in an html5 document, and the images inside are floated either left or right. IE9 RC, FF4b11, Safari 5.0 and Chrome 9.0 apply the float within the <section> element's boundaries as expected, but Opera 11.01 sends the image and its container element to one side of the browser. Any thoughts? I have not yet started to tackle earlier versions of these browsers as I'm fairly early on in development. CSS is: section { margin: 0 auto 2em; padding: 0; width: 38em; } img.left { float: left; position: relative; left: -40px; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } Sample html: <section> <img class="left" src="images/PICTURE.png" /> <p>Paragraph text.</p> </section> Many thanks.

Thanks for the link

Edit: title should read "family" of course. Hi guys. I'm working on a design for a friend at the moment and require a clean sans serif for copy and a serif for headings. Since I want to use some kind of progressive enhancement it makes sense for me to use fonts included in the latest OSes, falling back on more standard fonts. So I need some help. For Windows systems I've chosen Cambria for headings, falling back to Century, Georgia and serif. Segoe UI for copy, falling back to Trebuchet MS, Arial and sans-serif. This will ensure everyone gets good readability but those running Vista+ will get the extra display hinting provided in these two main fonts. What are reasonable Mac substitutes for Cambria and Segoe? Is Myriad /Pro available on Mac as standard? Thanks for your help.

Thanks for the reply. Since I'm intending to progressively enhance my site, I think the job will need to be done by asynchronous request. That means javascript. So I'll hijack the link, do the javascript and the new page appears to replace the current one. People without javascript will just get the link to a new page.

Hi My website is in a constant state of work-in-progress. It works, it's pretty and easily accessible. However, I want to add some javascript enhancement to the site so that it runs as seamlessly as possible for users with the correct software. All my pages are just that: separate pages. I know I can selectively show and hide elements using javascript, and that I can import an html fragment file into the page. I don't want to do either of those: I want to open an html file, get one element, import it and display it so that it appears that only the new content is provided (not the entire new page). Eg: <html> <div class="dontneed"> <!-- Don't need this content --> </div> <div class="need"> <!-- Need to extract this for my page --> </div> </html> Can that be done?