javascript showing up as text on my HTML page - javascript

Greetings all: Here is my simple code, Why is my javascript showing up as text on my page? any help would greatly appreciated, also any tips would be appreciated. thank you in advance
<html>
<head><title>jsn massage - home page</title>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/100_0350a.jpg"
var image2 = new Image()
image2.src = "images/circle.jpg"
var image3 = new Image()
image3.src = "images/AddisonStudioI.jpg"
</script>
</head>
<body>
<img src="images/100_0350a.jpg" name="slide" width="400" height="400>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src=eval("image"+step+".src");
if(step<3)
step++;
else
step=1;
setTimeout("slideit()", 2500);
}
slideit();
</script>
</body>
</html>

You forgot to put a closing quote on height="400"
<img src="images/100_0350a.jpg" name="slide" width="400" height="400"/>

Your height attribute is missing the closing quotation mark and the img tag should be closed properly.
<img src="images/100_0350a.jpg" name="slide" width="400" height="400"/>

<img src="images/100_0350a.jpg" name="slide" width="400" height="400>
You should properly close this.
<img src="images/100_0350a.jpg" name="slide" width="400" height="400" />

Add this code in css
script { display: none !important; }

Related

Open Links in an iframe in a new tab

I have converted an excel file to an .htm file.
In the excel file are links.
I have embedded the .htm file in my website
These links should be open in a new tab and not in the iframe.
How can I do this?
target="_blank" didn't work.
<iframe src="website.htm" style="border:none;" width="100%" height="300">
</iframe>
This also not worked:
<script src="https://code.jquery.com/jquery-latest.js"></script>
<iframe src="website.htm" style="border:none;" width="100%" height="300">
</iframe>
<script>
$('iframe a').attr('target', '_blank');
</script>
You could try
<iframe src="website.htm" style="border:none;" target="_top" width="100%" height="300">
</iframe>
Using jQuery:
$('iframe a').attr('target', '_blank');
Try it like below:
var linkList = [iframeElement].contentWindow.document.getElementsByTagName("a");
for (var i = 0; i < linkList.length; i++) {
linkList[i].target = "_blank";
}

How can I mute an iframe vimeo

I've tried every possible solution I can find, but I can't seem to mute my iframe vimeo video. I've referenced "//f.vimeocdn.com/js/froogaloop2.min.js" in the head. And I'm using the following javascript at the bottom of the page...
<script type="text/javascript">
var iframe = document.getElementById('vimeo_player');
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
You can see my attempt here: http://walkinthedog.com/video-test/
Any help is most appreciated.
Use setVolume from the api in your vimeo embed.. player.api('setVolume', 0); it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
With the latest version, there's an even easier solution:
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var player = new Vimeo.Player(document.getElementById("vimeo_player"));
player.on('play', function() {
player.setVolume(0)
});
</script>

How to change iframe src

Please bear with me if i'm asking something very basic as I don't know much about coding. I have a stock charting application which has a built-in web browser. I configured this browser to load a html page, which i coded as below, like this mypage.html?symbol=xzy, What i am trying to do here is to capture the submitted html variable, 'symbol' and use its value as part of the url string to load a portion of another third party webpage. I can't figure out what's wrong with my javascript code that is failing to set the value of the 'src' attribute. Any help is most appreciated.
<html>
<header>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
</header>
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
try move the script after html DOM
<body>
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
<script>
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
</script>
A couple of things: 1) start with performing the function onLoad - that way you know the script will run and popluate the src attribute after the browser renders it, and not before.
2) use a function to get the url value.
<html>
<header>
<script>
<!-- source: http://javascriptproductivity.blogspot.com/2013/02/get-url-variables-with-javascript.html -->
function GetUrlValue(VarSearch){
var SearchString = window.location.search.substring(1);
var VariableArray = SearchString.split('&');
for(var i = 0; i < VariableArray.length; i++){
var KeyValuePair = VariableArray[i].split('=');
if(KeyValuePair[0] == VarSearch){
return KeyValuePair[1];
}
}
}
function SetContent(){
var symbol = GetUrlValue('symbol');
document.getElementById('iframe').src = "http://www.asx.com.au/asx/markets/dividends.do?by=asxCodes&asxCodes="+symbol+"&view=all#dividends";
}
</script>
</header>
<body onLoad="SetContent();">
<div id="dividends"></div>
<iframe id="iframe" src="" style="display:hidden;margin-left: -140px; margin-top: -33px" scrolling="no" frameborder="no" width="398" height="265"></iframe>
</body>
</html>
Move the javascript to the bottom of the page AFTER the iframe. You are trying to change an element before it is created. Also do src="about:blank" initially, so it validates.

animate image with opicity in javascript doesnt work

This code is suppose to hide image and then show image in slow manner but it is directly show no image and full image
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
Window.setTimeout(trans(),1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>
Use window.setTimeout not Window ... notice the casing
Instead of invoking trans() in your setTimeout, you should pass only the function name trans.
window.setTimeout(trans,1000);
OR if you insist on invoking then wrap it with an anonymouns function.
window.setTimeout(function(){
trans();
}, 1000)
You can try this, "trans()" instead of trans(), the latter is a call.
<script type="text/javascript">
var a=1.0;
function trans()
{
document.getElementById("img1").style.opacity=a;
if(a>0)
a=a-0.1;
else
a=1.0;
window.setTimeout("trans()",1000);
}
</script>
<style>
</style>
</head>
<body onload="trans();">
<img id="img1" src="img/image1.jpg" width="225" height="225" />
</body>
</html>

Change an image with "onmouseover"

I'm trying to change an image src using JavaScript. Unfortunately this doesn't seem to work. Can anyone tell me what I am doing wrong?
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books\thumbnail\10.jpg\">
<img src='books\big\4.jpg' onmouseover='changeImage("books\bigger\4.jpg");'>
<img src='books\big\5.jpg' onmouseover='changeImage("books\bigger\5.jpg");'>
<img src='books\big\6.jpg' onmouseover='changeImage("books\bigger\6.jpg");'>
</div>
Try this:-
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg/">
<img src='books/big/4.jpg' onmouseover='changeImage("books/bigger/4.jpg");'>
<img src='books/big/5.jpg' onmouseover='changeImage("books/bigger/5.jpg");'>
<img src='books/big/6.jpg' onmouseover='changeImage("books/bigger/6.jpg");'>
</div>
Here's how I would've done it, makes it a bit more scalable
<script type="text/javascript">
function changeImage(img) {
document.getElementById("img").src = img.src.replace("/big/", "/bigger/");
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg">
<img src='books/big/4.jpg' onmouseover='changeImage(this)'>
<img src='books/big/5.jpg' onmouseover='changeImage(this)'>
<img src='books/big/6.jpg' onmouseover='changeImage(this)'>
</div>
document.getElementById("img").src=a;
Finds element with ID "img". To find current image try
changeImage(this, "books\bigger\4.jpg");
And,
function changeImage(img, string)
{
img.src = string;
}
Try doing this in JavaScript:
document.getElementById("img").onmouseover=changeImage("http://placehold.it/500");
Worked for me.

Categories

Resources