I've been searching high and low for something like this, but for some reason I'm having trouble making it work. I'm not sure what I'm missing or doing wrong.
References found here:
http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html
Selecting text in an element (akin to highlighting with your mouse)
If someone could possibly spare some time would be much appreciated thanks.
I'm setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to a demo which was found here.
(function() {
function selectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
preTags = document.getElementsByTagName('pre');
for(var i=0;i<preTags.length;i++) {
preTags[i].onclick = function() {selectText(this)};
}
})();
Here is a demo code I've set up.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="js/select2.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-top: 20px;"></div>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active">Demo 1</li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
Maybe, you could use window.getSelection() to get the global Selection objects, and then modify it? Example from developer.mozilla.org:
var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();
if(s.rangeCount > 0) s.removeAllRanges();
for(var i = 0; i < strongs.length; i++) {
var range = document.createRange();
range.selectNode(strongs[i]);
s.addRange(range);
}
Thanks guys, I really appreciate your help. I did some research on your responses, and had gotten a reply from the author of the script. I was pulling my hair out and kind of wanted to throw the puter out the window :P
Anyways, the author Satya stated that the select.js script needs to be at the END of the document rather in the header. It works great too!
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active">Demo 1</li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="js/select2.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
Related
I use bootstrap and have a simple layout including a button. I tried the code solution from here but it is not working. This is my code, it is not even showing 'test' after clicking the search button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('#output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using document.getElementByid(), you dont need the # before the id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
// I removed the event search code because I do not have the files and it was breaking the example.
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
First of all, don't use the "#" sign when using document.getElementById. Secondly, you need to add the "require" reference.
Check the console message:
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
I am currently working o a quote APP, Jquery getJson to inflate the elementes. I'm having trouble integrating twitter's share button into my code. For some reason I cannot get it to pick up the text values from the API source when I use the attr function to change the tweet URL data-text value.When I click the tweet button all I got is a new tweet window with the hardcoded text. My intention is to set the quote + author in the text field. Any ideas to make it work? I did a lot of research and experimentation with the tweet event binds but no success
My HTML code:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->
</head>
<body>
<div id="btn-container" class="container">
<p><a id="btn1" class="btn btn-primary btn-lg" href="#" role="button">Quote Me</a></p>
</div>
<div id="quote-container" class="container">
<blockquote id="quote">Never do anything yourself that you can hire someone else to do, especially if they can do it better.
</blockquote>
<footer id="author">Bill Bernback</footer>
</div>
<div id="share-container" class="container">
Tweet it
</div>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
My JS code:
<pre><code>var quote;
var author
$(document).ready(function(){
$(".btn").click(function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(getQuote) {
quote = getQuote[0].content;
author = getQuote[0].title;
$("#quote").html(quote);
$("#author").text(author);
$('.twitter-share-button').attr('data-text',author); // not working
});});});
I need some help.
Navigate to this website: http://www.webeffectual.com/
You can see the three white lines on the top left corner of the website. When you hover those lines, there are three boxes that are sliding out from the left. And when you hover those boxes a text appears. That is what I don't know how to accomplish.
Here is my code so far:
<!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" />
<link type="text/css" rel="stylesheet" href="Index.css" />
<script type="text/javascript" src="Index.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="Menu">
</div>
</body>
</html>
The code is just a empty html. :(
And my css is also empty
If you know how to do this, please write a comment or send a link to a website that explains how to to this. It would be highly appreciated.
Srry if im explaining it so bad. I am from sweden and i dont know so much english:3
You can actually achieve this with very little javascript. The menu itself has a fixed position and is off canvas. When the 'hamburger menu' (the three lines) is hovered over, a displayed class is added to menu, sliding it to the left onto the canvas using transform: translateX.
Here's a CodePen example: http://codepen.io/bwalker8038/pen/MYWXdx
Try this:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css" >
<!-- Custom styles -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/ie9-and-down.css" />
<![endif]-->
<!-- Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700'
rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-
awesome.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com
/css?family=Roboto:400,100,300,500|Montserrat:400,700">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-
icon-144-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-
icon-114-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-
icon-72-precomposed.jpg">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-
precomposed.jpg">
<link rel="shortcut icon" href="ico/favicon.png">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->
</head>
<body class="home portfolio">
<div id="wrapper">
<header>
<div class="side-nav">
<ul class="gn-menu-main" id="gn-menu">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu" id="main-nav">
<li class="current"><a href="#intro"><span><img src="img/home-
icon.png"></span>Home</a></li>
<li class="about"><a href="#whatwedo"><span><img src="img/about-
icon.png"></span>About</a></li>
<li class="work"><a href="#features"><span><img src="img/work-
icon.png"></span>Projects</a></li>
<li class="contact"><a href="#contact"><span><img src="img/contact-
icon.png"></span>Contact</a></li>
</ul>
</div><!-- /gn-scroller -->
</nav>
</li>
<!-- logo -->
<li class="logo-wrapper"><a href="#" class="logo home"><img src="img/logo.png">
</a></li>
</ul>
</div>
</header>
<!-- Intro Section -->
<section class="section current" id="intro">
<div class="intro-wrapper">
<div class="right slideRight"><img src="img/flowers.png"><img class="fade-in one
b-flowers" src="img/brought-flowers.png"></div>
<div class="left">
<h1>Digital success isn't a one night stand.<span>Relationships matter.
</span></h1>
<div id="ticker"><h3>Soooo, how about a date?</h3></div>
<div class="fade-in two"><a href="#features" class="btn cta scrollAnchor">Our
Work<span aria-hidden="true" class="icon-angle-down"></span></a></div></div>
</div> <!-- end Wrapper -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
< ![endif]-->
<!--[if (gte IE 9) | (!IE)]><!-->
<script src="js/jquery-1.10.1.min.js"></script>
<!--<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.scrollTo-min.js"></script>
<script src="js/jquery.nav.js"></script>
<script src="js/jquery.collagePlus.min.js"></script>
<script src="js/jquery.removeWhitespace.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.caroufredsel.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/classie.js"></script>
<script src="js/jquery.gnmenu.js"></script>
<script src="js/custom.js"></script>
<script src="js/counter.js"></script>
<script type="text/javascript" src="js/jquery.jticker.js"></script>
<script>
jQuery(document).delay(2000).queue(function(){
jQuery("#ticker").addClass( "visible" ).ticker({
cursorList: "|",
rate: 130
}).trigger("play").trigger("stop");
});
</script>
<!-- LESS SCRIPT (RECOMMENDED IF YOU KNOW LESS CSS) -->
<script src="js/less-1.3.3.min.js"></script>
<!-- PRELOADER -->
<script type="text/javascript">
// <![CDATA[
$(window).load(function() { $(".preloader").fadeOut("fast"); })
// ] ]>
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20100120-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async =
true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www')
+ '.google-analytics.com/ga.js';
,,,, var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
Code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My God Man Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="/Content/bootstrap/bootstrap.css" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/fontawesome/font-awesome.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="/Content/IE9FixScripts"></script>
;
<![endif]-->
</head>
<body>
<div id="wrap">
<div class="container">
<!-- Main content any sections which need to be filld in and then body -->
<div class="container">
<div class="jumbotron">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h3>Home Page.</h3>
<h4> Welcome GodMan, if you click on the above link where it says [Needs Role] and if it works then you are good else you see a custom 401 message.</h4>
</hgroup>
</div>
</section>
<!-- footer section here needs customisation.-->
<div id="footer">
<footer>
<div class="row">
<div class="col-lg-12">
<ul class="list-unstyled">
<li class="pull-right">Back to top</li>
<li><a id="testingID" href="#"data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" data-original-title="Tooltip on left">Tool Tip Left</a></li>
<li>Tool Tip Right</li>
<li>Tool Tip Bottom</li>
<li>Tool Tip Top</li>
<li>PopOver</li>
<li>PopOver2</li>
</ul>
</div>
</div>
</footer>
</div>
<!-- footer ends-->
</div>
</div>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script type="text/javascript">
$.ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
</script>
</body>
</html>
Looked at the other link which [https://stackoverflow.com/questions/18410922/bootstrap-3-0-popovers-and-tooltips]
did what it says but ain't working.
what is the mistake what i am making.
am i forgetting to add a reference to something?
or my JQuery verion is not good should i go back?
Tried the fiddler example with JQ 2.X edge on the example above mentioned in post. and it works there.
but not for me. Strange. it may be some thing really small. but cant seem to get it.
Any help is appreciated.
I made a JS fiddle based on your code which can be found here - http://jsfiddle.net/w2gTy/
For the jQuery dependency I used 2.0.2, hopefully that isn't the difference. That said, you were missing 'document' in your $.ready declaration. Without it the tooltips never appeared.
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover({trigger: "hover"});
$('#testingID').tooltip('show');
//$().tooltip({
// selector: "[data-toggle=tooltip]",
// container: "body"
//})
});
That said, you could also even omit the $(document).ready() section and leave just the .tooltip initializers and that would work as well.
function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)
This is the offending line from IE9 script debugging
I am using jquery-1.7.1.min
Testing with IE9 (32-bit) on Windows 7 (64-bit)
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hitachi Password Manager</title>
<!--- CSS --->
<link rel="stylesheet" href="style.css" type="text/css" />
<!--- jQuery --->
<script type="text/javascript" src="jquery-1.7.1.min"></script>
<!--- Javascript libraries (jQuery and Selectivizr) used for the custom checkbox --->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<script type="text/javascript" src="IE7.js"></script>
<noscript><link rel="stylesheet" href="fallback.css" /></noscript>
<![endif]-->
<script type="text/javascript">
var isIFrameLoad, myPassword;
$(document).ready(function () {
$('#hitachiIFrame').load(function () {
//alert('loaded!');
isIFrameLoad = true;
});
$("#container").load("login.html");
});
</script>
</head>
<body>
<div id="overlay" style="display:none;">
<div style=" filter: Alpha(Opacity=80); opacity:0.7; width:100%; height:100%; background-color:white; top:0; position:absolute;" >
<center><img src="images/loader.gif" /></center>
</div>
</div>
<div id="container">
</div>
<!-- <iframe id="hitachiIFrame" src="test/test.html" /> -->
<iframe id="hitachiIFrame" src="#" height="0px" width="0px"/>
<div id="footer">
copyright(c) 2012 Company Name
</div>
</body>
</html>
I also did replace one line (the script line) with this
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
I still got errors saying access denied but it was a different line number
window.frames[1].document.getElementBy…
This should help you.