Cannot get mouseover to work, don't understand JavaScript well enough - javascript

I have looked on Google, and everywhere in the forums. Just learning JavaScript, so any help is appreciated. When I put .wav in the parameters it says error, don't know if that makes a difference anyway.
In the head:
<script type="text/javascript">
function playSound(cellowav) {
document.getElementById("dummy").innerHTML=
"<embeded src=\""+cellowav.wav+"\" hidden=\"true\" loop=\"false\" />
}
</script>
In the body:
<span id="dummy"></span>
<p onmouseover="playsound('cellowav.wav');">
<img src="smiley.png" border="0" alt="smiley" />
</p>
Okay, I found that yes the cellowav doesn't belong in the parameter, or the string and the sound will play automatically with the embed tag in html. I was missing the closing -"- in the string fixed that. Changed the functions parameters from (cellowav) to (soundfile) and in the string + cellowav + to
soundfile +.
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\"
loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<p onmouseover="playSound('cellowav.wav');"><img src="smiley.png"
alt="smiley"></p>

You're missing a " at the end of innerHTML=... in your function.
Furthermore you can't include cellowav.wav that way. You need to put in the url to the file there.
Should be looking something like this:
<script type="text/javascript">
function playSound(cellowav) {
document.getElementById("dummy").innerHTML=
"<embed src=\"" + cellowav + "\" hidden=\"true\" loop=\"false\" />";
}
</script>

It's unclear what you're actually trying to do, but cellowav.wav doesn't need to be brought out of the string; it's a constant:
"<embeded src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />
Also, you're not closing your <embed> tag's string. Notice the last double quote here:
"<embeded src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />" // <-- Quote
You have also misspelled embed. You've written embeded instead.
"<embed src=\"cellowav.wav\" hidden=\"true\" loop=\"false\" />"

Related

Why do I get function undefined error from html doc?

I have written a small chat app.
At first, all the code was contained in the one HTML document, and worked ok.
After seperating the CSS, HTML, and JS into seperate files.
The function, register_popup, invoked from within the HTML doc, now gererates;
"ReferenceError: register_popup is not defined"
I can see that the script is loading and from the developer tools I see no issues, all 200's and 302's.
THE HTML
<div class="sidebar-name">
<a href="#" onclick="register_popup('user4',
'USER4');">
<img width="30" height="30" src="" />
<span>user4</span>
</a>
script can be seen loading...
Am using,
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
Have alos tried changing the HTML:
<div class="sidebar-name">
<a href="javascript:register_popup('user3', 'USER3');">
<img width="30" height="30" src="" />
<span>user3</span>
</a>
</div>
but that does not work either. As mentioned, I get a 200 on loading the script, and when contained in the same page everything worked. Only after separating the code into respective files does the error happen,
The following can also be seen loading ok.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 /jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Any help welcome ...
The Function
function register_popup(id, name)
{
for(var iii = 0; iii < popups.length; iii++)
{
//already registered. Bring it to front.
if(id == popups[iii])
{
Array.remove(popups, iii);
popups.unshift(id);
calculate_popups();
return;
}
}
var element = '<div class="popup-box chat-popup" id="'+ id +'">';
element = element + '<div class="popup-head">';
element = element + '<div class="popup-head-left">'+ name +'</div>';
element = element + '<div class="popup-head-right">✕</div>';
element = element + '<div style="clear: both"></div></\
div><div class="popup-messages">\
<form action="chatpop/post" id="chat-form" method="post">\
<textarea style="resize:none;"cols="41" rows="14" >\
</textarea><input type="submit" id="chat-form" value="Send">\
</input></form></div></div>';
document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
popups.unshift(id);
calculate_popups();
}
Here
<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>
You're attempting to import the script in an asynchronous way and invoke some functions defined in the script immediately in your html (before the script is actually loaded).
You should either refer your script in the header in a blocking manner like:
<script src="static/js/chatpop.js" />
or changing your anchor tag once the script is fetched:
...
<a id="myAnchor">
...
$.getScript(url).done(function(){
$("#myAnchor").attr("href", register_popup('user3', 'USER3'))
});
}

I am trying to implement the new paypal return shipping on us asset code

I am trying to use the new Paypal asset code (https://www.paypal.com/uk/webapps/mpp/refunded-returns/business), but it doesn't seem to work. It seems straight forward. I have just pasted the following into a page
<script type="text/javascript">
var mpt = new Date();
var mpts = mpt.getTimezoneOffset() + mpt.getTime();
document.write("<script type=\"text\/javascript\" src=\"https:\/\/altfarm.mediaplex.com\/ad\/js\/\?sz=120x600&lc=en_GB&enc_id=&mpt=" + mpts + "&mpvc=\"><\/script>");
</script>
<noscript> <img src="https://adfarm.mediaplex.com/ad/nb/?sz=120x600&lc=en_GB&enc_id=" alt="Click Here" border="0"> </noscript>
But, it produces no result. Any thoughts?
I see there is a parameter missing, try using the following ensuring that the size variable reflects the banner size you want:
<script type="text/javascript">
var mpt = new Date();
var mpts = mpt.getTimezoneOffset() + mpt.getTime();
document.write("<script type=\"text\/javascript\" src=\"http:\/\/altfarm.mediaplex.com\/ad\/js\/27739-224464-12439-0\?enc_id=&sz=120x600&mpt=" + mpts + "&mpvc=\"><\/script>");
</script>
<noscript>
<a target="_blank" href="http://adfarm.mediaplex.com/ad/nc/27739-224464-12439-0?enc_id=BXFC2QNHPNKAG&sz=120x600">
<img src="http://adfarm.mediaplex.com/ad/nb/27739-224464-12439-0?enc_id=&sz=120x600" alt="Click Here" border="0">
</a>
</noscript>

Use of singlequotes when writing HTML using javascript

I have this code inside a php file:
<script>
var myString = '{$data10}';
if (myString.charAt(0)) {
document.write('<a target="_blank"
href="https://www.somedomain.com/join?id={$data10}">
<img src="images/join-bim.png" width="300" height="74"
onMouseOut="this.src="images/join-bim.png""
onMouseOver="this.src="images/join-bimB.png"" /></a>');
} else {
document.write('<a target="_blank"
href="https://www.somedomain.com/join?id=111111">
<img src="images/join-bim.png" width="300" height="74"
onMouseOut="this.src="images/join-bim.png""
onMouseOver="this.src="images/join-bimB.png"" /></a>');
}
</script>
I have tried:
onMouseOut="this.src="images/join-bim.png""
but encountered problems due to the quotes not nesting.
Because of that, I then tried:
onMouseOut="this.src='images/join-bim.png'"
However, the single quotes are not being accepted.
you must escape inner quotes
onMouseOver="this.src=\"images/join-bimB.png\""
You can use escaped single quotes, as you can see below
<script>
var myString = '{$data10}';
if(myString.charAt(0)){
document.write('<a target="_blank" href="https://www.somedomain.com/join?id={$data10}"><img src="images/join-bim.png" width="300" height="74" onMouseOut="this.src=\'images/join-bim.png\'" onMouseOver="this.src=\'images/join-bimB.png\'" /></a>');
}
else {
document.write('<a target="_blank" href="https://www.somedomain.com/join?id=111111"><img src="images/join-bim.png" width="300" height="74" onMouseOut="this.src=\'images/join-bim.png\'" onMouseOver="this.src=\'images/join-bimB.png\'" /></a>');
}
</script>
The quotes are not escaped, meaning your quotes inside is closing the first quote, making PHP confused.
To escape it, use for your inner-single quotes:
onMouseOver=\'this.src="images/join-bimB.png"\'

How to change src of application/pdf using javascript?

I have an embeded code like this
<embed id="1000" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and i have this code
<a onfocus="OnLink(this)" href="javascript:switch('1000','/new_folder/bye.pdf');" onmousedown="return VerifyHref this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
and I have this function
<script type="text/javascript">
function switch(id,dirToPDF) {
$('1000').attr('data','dirToPDF');
}
</script>
So when I click on the link, it should call switch, and change the pdf thats displayed (which is hi.pdf) to bye.pdf, but it's not working.
Can anyone help me with this?
EDIT:
Ok so I changed it to
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$(id).attr('data', dirToPDF);
}
</script>
<a onfocus="OnLink(this)" href="javascript:switchFunc('pdf_d','/new_folder/bye.pdf');" onmousedown="return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x0020_Type.mapcon}','{$thisNode/#serverurl.progid}')" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
<embed id="pdf_d" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
and it's still not working...
Let me review:
As #user1113426 said, you call a custom-defined 'switch' function to switch attributes-- however, switch is a reserved function, and I don't think you can overwrite it.
As I said (then deleted) and #michaeldcooney said, you need to put a '#' sign before 1000; Turning $('1000') to $('#1000').
As #NickBeranek said, you can't have an id field be completely numeric-- so 1000 won't work anyways. (Try the name of the doc-- NewDocPdf)
Finally, the element attribute you are changing (data) is not the correct element to change. You want to change src, as that is the one that chooses what document is loaded.
Related: You have both an 'onmousedown' event AND an action when the link is clicked. They might cause interference, so it may be easier to do this..
The Doc Window:
<embed id="PDFDisplay" style="display: ;" width="850" height="1100" src="/new_folder/hi.pdf" type="application/pdf">
</embed>
Links to Change:
<a class="altDoc" href="javascript:return void;" whichDoc="/new_folder/bye.pdf" >
<xsl:value-of select="$thisNode/#FileLeafRef.Name" />
</a>
Next:
<script type="text/javascript">
switchFunc = function (jQueryObject) {
console.log(jQueryObject);
$('#PDFDisplay').attr('src',jQueryObject.attr('whichDoc') );
}
$('.altDoc').hover( function () { OnLink(this); } );
$('.altDoc').click( function (event) {
console.log("this");
switchFunc(this);
return VerifyHref(this,event,'{$XmlDefinition/List/#DefaultItemOpen}','{$thisNode/#HTML_x0020_File_x0020_Type.File_x00 20_Type.mapcon}','{$thisNode/#serverurl.progid}');
} );
</script>
Let me know how the above works and I can provide any other alterations.
EDIT:
Looks like I forgot a few )s, ;s, etc. Also, I kept a bad " and forgot an opening parenthesis after VerifyHref.
EDIT THE SECOND:
You ever consider writing a bunch of tags which have 'target="iFrameNameAttribute"' ?
You can have links specifically target an iframe, and you can have the iFrame content set to the embedded PDF. Whenever you click on a link that targets the iFrame, it can change the content.
Please modify your script as follows and pass in the id parameter:
<script type="text/javascript">
function switchFunc(id, dirToPDF) {
$('#' + id).attr('data', dirToPDF);
}
</script>
switch is a reserved name in JS. Also, 1000 is not a valid id. ID's cannot start with a number.

Trying to load a video dynamincally from a gallery

this code is suppose to do, is when the user clicks the image in the #thummbnails_div, the Text in #show_div is replaced with the youtube video with that ID . Since i am new here i can't post images. So the code to insert an image is incorrect i know. Thanks in advance.
<script type="text/javascript"> $(document).ready(function(){$("#thumbnails_div img").click(function(){ var youtubeID=$(this).attr("id"); $("#show_div").empty(); $("#show_div").append("<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/+youtubeID+rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.come/v/"+youtubeID+"$rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>"); }); }); </script> <divid="show_div">Click pic below to see video</ div> <div id="thumbnails_div"><image id="OrgSdZH_rkU" src="http://img.youtube.com/vi/OrgSdZH_rkU/default.jpg" /></div>
Your quotes are so wrong in the jQuery append method, it looks like this when you try to beautify the code
$(document).ready(function () {
$("#thumbnails_div img").click(function () {
var youtubeID = $(this).attr("id");
$("#show_div").empty();
$("#show_div").append("<object width="
425 " height="
355 "><param name="
movie " value="
http: //www.youtube.com/v/+youtubeID+rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.come/v/"+youtubeID+"$rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>"); }); });
You need to escape your double quotes with \ or you should use a single quote to surround the string. JavaScript 101.

Categories