Was using embed to play Flash SWF files to play random background music with no controls. Since Flash is going away, I want to replace it using <audio> tag with controls. Have a folder named music containing multiple MP3 files with simple names (Song1.mp3,song2.mp3,etc.). I have a script that generates a random number for variable Whichsong
(WhichSong="Music/song"+(Math.floor(Math.random()*23))+".swf"
That varible is used as the path to the song to play
(document.write('<embed src="'+WhichSong+'" quality="high" width="0" height="0")
I have seen the code here that suggests that I can use a similar method to put URL information in the <Audio SRC="'+WhichSong+'" > tag. However, nothing I have tried has worked. I've tried with/without quotes, with/without +, with/without ', and various combination of all. Nothing works. No sound, no controls.
Sample code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div align="center" id="soundtrack"></div>
<script type="text/javascript">
var WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"
document.getElementById('soundtrack').innerHTML="<audio controls id='background_audio1'><source src='music/5.mp3'>Your browser does not support the audio element.</audio>";
</script>
</body>
</html>
The WhichSong variable isn't going to be interpreted within your innerHTML string if the whole thing is quoted. You'd need to either break out of the quotes:
"<source src=\"" + WhichSong + "\"></source>", or use a template string as in the example below. Other than that it seems to be fine.
function setSong () {
const WhichSong="Music/song"+(Math.floor(Math.random()*23))+".mp3"
document.getElementById('soundtrack').innerHTML=`
<audio controls
id='background_audio1'>
<source src='${WhichSong}' />
Your browser does not support the audio element.
</audio>
<div>${WhichSong}</div>
`;
}
<div id="soundtrack"></div>
<button onClick="setSong()">Set Song</button>
I'm looking to take a variable or statement from my manifest (below) and place it in an HTML file. I think it's a reasonably straightforward process but for some reason, I cannot figure out how to get the two to speak with one another. Can I get some help on how to complete this?
Manifest:
applications:
name: application
instance: 1
buildpack: staticfile_buildpack
host: application-hostTenant
memory: x amount
display: browser
**url: https://iframe-tenant.apps.eu1.mindsphere.io**
description: "A simple app using the iframe method to host an outside
application/link. The link/app is specified in the url"
Assume that the iFrame/HTML call is similar (below)
<!DOCTYPE html>
<html>
<head>
<title>Basic Title</title>
</head>
<iframe src="url from the Manifest" style="border:0px #ffffff none;" name="myIFrame" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" height="100%px" width="100%px" allowfullscreen></iframe>
</html>
There doesn't need to be anything else on the web page other than the iframe and access to it.
I was hoping that someone may know how to resolve this HTML5 validation error. When I try to validate my page: http://blog.genesispetaluma.com using http://validator.w3.org, it gives me the following error code:
Error Line 90, Column 63: An body start tag seen but an element of the same type was already open.
<body class="home blog single-author two-column right-sidebar">
I interpreted this error to mean that I have two body tags in the code. However, I have searched everywhere and can only find one <body> (the one referenced by the error) and one </body>. Can anyone please tell me how to resolve this error?
I had a similar problem but with <head>, giving the following W3C markup error:
A head start tag seen but an element of the same type was already open
I had this code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
When it was supposed to be:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
I knew that was wrong but it's hard to spot sometimes, as you're just so used to the header code being correct 99% of the time. I obviously cut n pasted some code and that ended up in the wrong place.
This isn't specific to your question, I know, as your error relates to the <body> tag, but this is the kind of thing you're looking for. Maybe you have a <link> or <meta> tag in your body somewhere, that's meant to be in the <head>. Without seeing your code, it's hard to give you a perfect answer.
Possibly it's because:
<div id="wrapFix">
<div id="drawLogo1">
<div id="drawLogo2">
<img src="http://genesispetaluma.com/img/logoNew.png" alt="Genesis Fitness G stylelogo">
</div>
</div> <!-- end of drawLogo1 -->
Is between your closing head tag and opening body tag. I.e. lines 81-87
One of the widgets (the facebook like button I believe) you're using is inserting HTML into the page and part of that HTML is a body tag. Not sure if there's anything you can do about this, but I think that's what's throwing the error. Looks like this:
<body class="plugin transparent_widget ff4 win Locale_en_US">
</html>
</iframe>
I got this error:
A head start tag seen but an element of the same type was already open
I read this post and then i noticed my tag listed before the head like this.
<title>Home</title>
<head>
</head>
it should have been
<head>
<title>Home</title>
</head>
It happens in below said scenarios as per my knowledge -
When you mistakenly choose <head> thinking <header> tag.
When your <header>, <nav>, <section> or <footer> tag(s) are outside of <body> tag.
So, after creating your page, you can validate these changes here.
I got the same error message : check out if any body-inside <element> is displayed between the <head> and <body>, like said above.
My error was caused by a <div> tag, with absolute position, to display some page information during the development - simply a line on a false position in the code.
Hi in my case hgroup tag is the reason why I'm having validation error I, remove this tag from head tag and put it inside after body tag after this the document is now valid.
Just for the record, I had exactly the same problem and it seems that including some php files within the head element was strangely giving the problem, even if the view-source of Firefox was not printing such php code nor tags
<head>
<? include("./file.php"); ?>
<title><? echo $title ?></title>
</head>
solved using:
<? include("./file.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title><? echo $title ?></title>
</head>
<body>
...
...
If Your problem With head and body both are show validate error just remove displaying text from head and keep it in body..
I have been faces the problem recently.
For Example You have text to display in header inside head just remove header from head and keep it in body ......Problem solved...Thanks
In my case it was the facebook tag
<div id="fb-root"></div>
which was inside the page's <head>.
Moved that to the <body> of the relevant page (not required globally) sorted it. So yes, the answer supplied above by Emil H was correct.
Also bear in mind, if you copy/paste your code from things like slack, etc. they will have 'special characters' for formatting (that are usually invisible) which may cause that issue.
Here is a video to demonstrate: https://drive.google.com/file/d/1OJS15zmSvzhVXVLcQGGhePZGNCxWHocN/view
This error can happen if you put into <head> tag that restricted to be there. For example:
<head>
<audio preload="auto" class="menu-beep" id="sound-01">
<source src="sound-01.mp3">
</audio>
</head>
In this case, the tag will be immediately opened in the browser memory. But later the browser will find the body tag that opens the page. This is how it turns out that there is a second body tag.
I had similar problem with <head> tag. I use https://validator.w3.org
Look at few examples how to solve this problem:
<script> should be inside <head>
css should be inside <head>
Right, I've been at this all day and I still can't fix it.
Website: example.com
I am using the iFrame like api with a link like
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexamle.com&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&locale=en_US" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:80px; height:30px"></iframe>"
or
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fexamle.com&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&locale=en_US" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:80px; height:30px"></iframe>
But they seem to have identical vote values, even if you visit the url directly, does anyone know why?
Many thanks,
Even using FB:Like this problem still occurs
<fb:like href="http://examle.com" layout="button_count" show_faces="false" width="80" action="like" font="arial" colorscheme="light" class=" fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
I have added
<meta property="og:title" content="Google Nexus S - Black unlocked"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://examle.com"/>
Yet still it doesn't work? The Lint'er says http://examle.com?
The linter now picks up the correct URL, but the Like buttons still all save the same value...
You are missing some Open Graph Meta tags: og:url and fb:admins or fb:app_id refer to Like Plugin (Open Graph Tags).
If you test both urls in the URL Linter, you'll notice that Facebook is capturing the same URL! (URL1 - URL2)
The problem was, although the meta tags were on the page, they were very far down in the header which was 100 lines+
This meant Facebook wasn't picking them up, moving the meta tags to the first 5 lines of the document fixed the problem. I guess FB only downloads the top X lines/bytes of your website.
Many thanks to ifaour, for pointing me at the URL Linter!
P.s. On top of this FB has cached all the previous likes so I had to change all the links slightly (I just added ?n) for it to recognise it as a new link!
Google Images is the best example. Once you follow an image, a frame remains at the top of the page, always reminding you to return to Google. Does this technique have a special name and what is the most efficient way to do this?
I have this so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Framed content</title>
<style type="text/css">
#bar {
width:100%;
height:10%;
}
iframe {
width:100%;
height:90%;
}
</style>
</head>
<body>
<div id="bar"><!-- PUT THE CONTENTS OF THE BAR HERE --></div>
<iframe src="{LOCATION OF THE HTML PAGE}"></iframe>
</body>
</html>
How can I adapt the above so that #bar can read 100px high rather than 10% high? How does that affect the code? This is the crux of my question.
Many thanks. Patrick
I think it's still just called 'framing' even if it's more advanced than the old frameset style popular in the late '90s and early 2000s. Other examples you could study include Facebook and Stumbleupon.
You could do what google does, and remove your doctype tag. your markup will pretty much work right away with this one modification, and you'll be able to set the bar's height to 100px, and the iFrame's height to 100% -- producing the desired results.
I've seen it called a "topbar"...
Personally, though, I find them really annoying unless they're serving a very useful purpose. I don't need to be reminded to go back to your website. You might as well just open the link in a new window at that point.
After a bit of investigation, I came across this, which doesn't use iframes at all. I know some people won't touch framesets with a bargepole, but I'd be interested to know what people think could be potential problems, other than the obvious "frames not supported".
<html>
<frameset rows="100,*" frameborder="no" framespacing="0">
<frame name="h" src="top_source" scrolling="no" noresize >
<frame name="t" src="main_source" scrolling="auto" noresize >
</frameset>
</html>
This makes use of the wildcard " * ", which div height attributes don't have.