PDA

View Full Version : JaveScript is stoping background music, workaround possible?

arabianacres
05-01-2005, 01:46 PM
Hello,

I am hoping someone can please help me or advise me.

Today I added this script to a page on my website it is for the thumbnails right at the bottom of the page. However when I click on the thumbnail it causes the background music (midi file) to stop playing. I have tried using bgsound and embed I have tried 4 different scripts, some I recognise to be flash yet nothing is working can anyone tell me if there is a script out there that will either allow the background sound to continue playing or is there another 'gallery view' script I could use that would not interfere with the background sound?

Any help would be very much appreciated, I do hope I have posted this into the correct forum.

Thank you,
Liz

Edit: Well since originally posting here I have searched the forums and found nothing helpful. I have tried adding a frames page with the sound embedded into the footer frame yet it is still turned off when the thumbnail is clicked on. I have tried putting the sound onto a totally seperate page and using 'include page' but I get the same result :( I hope someone is able to suggest something for me, I am at the end of my ideas here.



Here is the page in question (thumbnails at the end of the page).....

http://home.iprimus.com.au/cheetah7/halter/sabirtest.htm

and here is the script....



<!-- Original: Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site: http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>
arabianacres
05-01-2005, 11:09 PM
:bump

Is there no solution? or have I posted incorrectly so no one wants to help me or is it because I am new? :confused:
Philip M
05-02-2005, 08:30 AM
Welcome to the forum! Don't know why you have not had a reply yet (possibly because it is a weekend and all the professionals are out of their offices) but here goes.

I believe that when a link (of any kind) is clicked IE considers that it is being redirected to a new page, so animated gifs and music stop working.
Someone more expert in these things may give you a better answer, but
there may be no solution to your problem.
_Aerospace_Eng_
05-02-2005, 11:49 AM
hmm, give this a try, i put absolute urls so you can see it in action when you test it locally.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function doPic(imgName) {
document.getElementById('sabir').src=imgName;
}
//-->
</script>
</head>

<body>
<a href="http://home.iprimus.com.au/cheetah7/halter/sabir.jpg"
onclick="doPic(this.href);return false">
<img src="http://home.iprimus.com.au/cheetah7/halter/sabir_small.jpg" style="border:0px;"></a><br>
<img id="sabir" src="http://home.iprimus.com.au/cheetah7/halter/sabirhead.jpg">
<embed src="http://yoursong.mp3" autostart="true" hidden="true"></embed>
</body>
</html>

it doesn't seem to stop the music, so it seems that by using document.getElementById() it works correctly, just give your larger image an id, i gave it an id of "sabir" I don't think you would need to check for the type browser, most modern browsers support document.getElementById()
arabianacres
05-02-2005, 01:13 PM
Welcome to the forum! Don't know why you have not had a reply yet (possibly because it is a weekend and all the professionals are out of their offices) but here goes.

I believe that when a link (of any kind) is clicked IE considers that it is being redirected to a new page, so animated gifs and music stop working.
Someone more expert in these things may give you a better answer, but
there may be no solution to your problem.

Hello Philip,

Your post actually helped me a lot more than you think! I was looking at the issue between the script conflicting with html, specifically the loading of background sound. But you post made me look at the issue being how the links were being considered by IE so I reloaded the page into a frames page and used bgsound in the frame page and changed the links in the main page to load into _self (same frame). So that solves that problem! :D :thumbsup:

Now I just need to work out how to have just the one frame page and still have some sort of control panel to turn the music off if desired! Any suggestions?
arabianacres
05-02-2005, 01:16 PM
hmm, give this a try, i put absolute urls so you can see it in action when you test it locally.

it doesn't seem to stop the music, so it seems that by using document.getElementById() it works correctly, just give your larger image an id, i gave it an id of "sabir" I don't think you would need to check for the type browser, most modern browsers support document.getElementById()

Hello thank you for your help! :)

If the above will allow me to have just the one page (not a frame page) then this is excellent! I am only self taught so hopefully I can work out what to do with the above code, I shall give it a try!.....dont go away pleeease :D

Thanks again :thumbsup:
_Aerospace_Eng_
05-02-2005, 01:16 PM
here is the same code with the music player with controls, and no you wont need a single frame.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
<!--
function doPic(imgName) {
document.getElementById('sabir').src=imgName;
}
//-->
</script>
</head>

<body>
<a href="http://home.iprimus.com.au/cheetah7/halter/sabir.jpg"
onclick="doPic(this.href);return false">
<img src="http://home.iprimus.com.au/cheetah7/halter/sabir_small.jpg" style="border:0px;"></a><br>
<img id="sabir" src="http://home.iprimus.com.au/cheetah7/halter/sabirhead.jpg">
<embed src="http://yoursong.mp3" autostart="true" hidden="true" controls="true" width="100" height="25"></embed>
</body>
</html>
arabianacres
05-02-2005, 01:25 PM
oops here is the frame page where you can now click on the thumbnails without it stopping the music...

http://home.iprimus.com.au/cheetah7/halter/sabirframetest.htm
arabianacres
05-02-2005, 01:27 PM
here is the same code with the music player with controls, and no you wont need a single frame.


Oh thank you so much!! I will post again once I have got it working ......thank you!
arabianacres
05-02-2005, 02:04 PM
Do I need to redo the script in the head and body for each image? :confused:
_Aerospace_Eng_
05-02-2005, 02:06 PM
the script i wrote is almost exactly like your other script, its set to where you can declare the image, only the actual actions of the function is different. You will need to give the large img tag an id like I already said to do. Refer to the example to see how its done. Notice that when i used this.href it was calling the href which was the link to the larger image, i did it this way because if the user had javascript disabled, they would still be able to see the image.
arabianacres
05-02-2005, 02:13 PM
oh I have got it working thank you!! *does happy dance*

for multiple images in the body I have this......

<a href="http://home.iprimus.com.au/cheetah7/halter/sabir.jpg"
onclick="doPic(this.href);return false">
<img src="http://home.iprimus.com.au/cheetah7/halter/sabir_small.jpg" style="border:0px;"></a><br>

<a href="http://home.iprimus.com.au/cheetah7/halter/sabirhead.jpg"
onclick="doPic(this.href);return false">
<img src="http://home.iprimus.com.au/cheetah7/halter/sabirhead_small.jpg" style="border:0px;"></a><br>

<a href="http://home.iprimus.com.au/cheetah7/halter/sabirhead1.jpg"
onclick="doPic(this.href);return false">
<img src="http://home.iprimus.com.au/cheetah7/halter/sabirhead1_small.jpg" style="border:0px;"></a><br>
_Aerospace_Eng_
05-02-2005, 02:14 PM
glad you got it working, wasn't that hard was it? :p
arabianacres
05-02-2005, 02:18 PM
the script i wrote is almost exactly like your other script, its set to where you can declare the image, only the actual actions of the function is different. You will need to give the large img tag an id like I already said to do. Refer to the example to see how its done. Notice that when i used this.href it was calling the href which was the link to the larger image, i did it this way because if the user had javascript disabled, they would still be able to see the image.

Did you write that just for me? I really cannot thank you enough for your help your a legend! :thumbsup:

I dont really understand the 'lingo' but could you tell this will be quite compatible across most browsers/platforms?
arabianacres
05-02-2005, 02:20 PM
Here is the test page the layout is rough still but its working woohoo!

http://home.iprimus.com.au/cheetah7/halter/sabirnew.htm

No you made it very easy thank you again!
_Aerospace_Eng_
05-02-2005, 09:37 PM
As I said, it should work for most of the modern browsers, I don't have a mac to test it but I do believe it should work for the latest browsers on the Mac as well.