I have iframe that cointains some javascript that should fire on body load,while iframe works fine when embedded on plain HTML page,when integrated in blogger HTML/javascript widget,javascript in iframe don't work..suggestions.Tried only in Firefox bc viruses and toolbars eaten IE?
Iframe Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="javascript" type="text/javascript">
function change() {
var text = "someaddress";
window.location = "http://something.com/fb2.aspx" + "?url=" + text;
}
</script>
</head>
<body bgcolor="#333333" onload="change()">
</body>
</html>
Code of HTML/javascript widget on Blogger Blog
<iframe scrolling="no" src="http://something.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
And sam iframe embedded in this plain HTML page executes javascript as it should
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Stats page</title>
</head>
<body>
<iframe src="fb.htm" runat="server" id="iframe1" width="500" height="500"></iframe>
</body>
</html>
Behind the scenes, it appears that the Blogger Widget/Gadget system is using a method of adding code to the DOM that precludes the execution of any JavaScript. Oftentimes, this can happen if content is added by appending it to the .innerHTML object. The DOM element is rendered, but any included JavaScript does not execute.
A workaround for this is outside the scope of this question, because it's a blogger issue.
The solution for you is to edit the Blogger template directly, and paste your IFRAME where you would like it to appear in the template itself. In other words, don't use a widget.
Below is a portion of my own Blogger Template with an iframe right before the closing body element:
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<!-- Iframe in template -->
<iframe scrolling="no" src="http://somedomain.com/fb.htm" width="200" height="70"
frameborder="0" name="myInlineFrame"></iframe>
<!-- Iframe in template -->
</body>
<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
Related
I use IE 11 with the scripting option enabled. Even on other browsers it does not work. Using notepad++ to code and run... I'm currently learning javascript. I have a .js and .html file - the html has 3 sets of headings/paragraphs where the paragraphs should only show if i click the headings. This does not work. I downloaded a copy of the java library as well... I assume it has something to do with the Doctype statement ?
Any thoughts:
mcode.js
$(document).ready(function() {
$("p").hide();
$("h1").click(function() {
$(this).next().slideToggle(300);
});
});
myhtml.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<h1>Heading two</h1>
<p>This is just some text for heading 2</p>
<h1>Heading three</h1>
<p>This is just some text for heading 3</p>
<!-- FIRST BELOW POINTS TO WHERE THE JAVA SCRIPT LIBRARY IS -->
<!-- SECOND IS MY JAVASCRIPT CODE THAT WILL BE USED -->
<!--<script type="text/javascript" src="jquery-1.8.0.min.js"></script>-->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
You have listed your javascript as mcode.js in the question, but referenced src="my_code.js". Change your src in the html to the correct file and it should work fine.
<script type="text/javascript" src="mcode.js"></script>
That should be what you are after :)
You have to add mcode.js in your html file. Add a script in your head linked to mcode.js.
I have an HTML frameset page (don't judge), where I have used some JavaScript (document.write) to display the tag of a frame with a variable:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
Title
</title>
<script src="script.js">
</script>
</head>
<frameset cols="70%,30%" frameborder="0">
<frame src="site1.html" />
<script>
document.write('<frame src="site2.html?var=' + variable + '" />');
</script>
</frameset>
</html>
So I can't get this to work. The problem is that, now that I've used JavaScript to document.write the tag for a frame, the frame does not show. How is there a way to successfully incorporate this JavaScript in my frameset?
I have a JSP page with four tabs and a background image. I want that when I click one of the tab, a JSP function should be invoked that will only update the clicked tab contents not the whole page and background image. A similar example can be the Multiview control in ASP.NET
ASP.NET is not comparable to plain JSP. JSP is more comparable to "Classic ASP". If you're looking for the Java counterpart of ASP.NET(-MVC), look at JSF instead. PrimeFaces for example has a <p:tabView> component which I think is exactly what you're looking for.
In plain JSP, you'd need to bring in some JavaScript code to execute Ajax requests and manipulate the HTML DOM and some Servlet to return the necessary data. jQuery and maybe jQuery UI may be helpful in this.
With out your codes we are helpless..
Try the following code which changes the content image of a div to some other images on mouse over other divs. With some modifications it may reach up to your requirements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
Link to the question
i am trying to run a little script before redirecting to twitter but it does not show the 'hi' alert? I used this as a reference:https://dev.twitter.com/docs/intents/events
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="iFrame.WebForm6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
<title></title>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<script type="text/javascript">
twttr.events.bind('tweet', function (event) {
// Do something there
alert('hi');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html"
style="width: 130px; height: 20px;"></iframe>
</div>
</form>
</body>
</html>
Your code seems to work ( http://jsfiddle.net/JbJ9T/ ) fine, but I've noticed that you're missing an opening <html> tag. I could imagine that this might cause some trouble.
Also, check the console in e.g. Firefox or Safari for Javascript errors and/or notifications that something is missing or in a wrong location if the suggestion above doesn't help.
I have images on a webpage that I want to have linked to another website, but in a new window of a certain size. In Dreamweaver, I used Window > Behaviors > onMouseClick, but for some reason, that isn't working. The image isn't recognized as a link.
Is there any other way I can have it open a link in a new window of a set size, and actually have it work this time?
Here is the code produced by Dreamweaver:
<script language="JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
The link:
<img src="images/portfolio/featured1.jpg" alt="Google" width="241" height="200" border="0" onclick="MM_openBrWindow('http://www.google.com','google','scrollbars=yes,width=650,height=500')" />
Well, this works for me in Opera. It's valid HTML, too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test popup</title>
</head>
<body>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<p>the link:
<img src="notice.png"
alt="Google"
width="241" height="200"
style="border: 0;"
onclick="MM_openBrWindow('http://www.google.com','google','scrollbars=yes,width=650,height=500')">
</body>
</html>
And this is better:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Test popup</title>
</head>
<body>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<p>the link:
<a href="http://www.google.com" onclick="MM_openBrWindow('http://www.google.com','google','scrollbars=yes,width=650,height=500'); return false;">
<img src="notice.png"
alt="Google"
width="241" height="200"
style="border: 0;"></a>
</body>
</html>
It's better because (a) there's a link, so you'll see the "hand" icon for the mouse; and (b) the link actually goes somewhere, so people with javascript turned off can still get to the content. (The "return false" on the "onclick" attribute means that people with javascript turned on only get the popup link. The "false" stops the browser following the normal link.)