|
JavaScript - Focus On Element Inside Iframe
Hi I have this page below which I run locally that is created dynamically:
I need a piece of javascript to focus on the captcha as shown in the image inside the green box. At this minute I have this which doesn't work all that great for some reason but it gets it to the general area... Code: if (( document.URL.indexOf("cast_skills") != -1 ) || ( document.URL.indexOf("security_prompt") != -1 ) || ( document.URL.indexOf("joinraid") != -1 )){
if ( document.forms.length > 0 ) {
document.forms[0].elements[1].focus();
}
}
As I said this does the job to some extent however it does not leave the focus in a perfect position so that the captcha is readable and the text box visible to type in, as illustrated in the red box in the above image. Help with this would be great. Many thanks, David. Similar TutorialsHi, Below is the code which is used to validate the entries on a form(some field are not be left blank). The user gets the msg when he hits the "Check"button. The problem is after the user gets the msg, I am not able to set the focus in the field which is the first element of an error array which stores the info about the fields with errors on this form. Please help. ========================================================== <html> <head> <script type="text/javascript"> function check_alert() { var errors=[]; if (text1.value==""||text1.value==null) { errors[errors.length]="Please enter the Company Name"; } if(text3.value==""||text3.value==null) { errors[errors.length]="Please enter the Address"; } if(text5.value==""||text5.value==null) { errors[errors.length]="Please enter the City"; } if(text6.value==""||text6.value==null) { errors[errors.length]="Please enter the Zip/Costal Code"; } if(text7.value==""||text7.value==null) { errors[errors.length]="Please enter the Country"; } if (errors.length>0) { reportErrors(errors); return false; } else return true; } function reportErrors(errors) { var msg="There are some errors..\n"; var numerror; for (var i=0;i<errors.length;i++) { numerror=i+1; msg+="\n"+numerror+"."+errors[i]; } alert(msg); document.form.element(errors[0]).focus(); } </script> </head> <body onload="text1.focus()"> Company:<input type="text" name="text1" /><br> Division:<input type="text" name="text2" /><br> Address1:<input type="text" name="text3" /><br> Address2:<input type="text" name="text4" /><br> City:<input type="text" name="text5" /><br> State:<select name="state"> <option value= "Alabama" selected>Alabama</option> <option value= "Alaska">Alaska</option> <option value= "Arizona">Arizona</option> <option value= "Arkansas">Arkansas</option> </select><br> Zip/Postal Code:<input type="text" name="text6"/><br> Country:<input type="text" name="text7" /><br> <input type="button" value="Check" onclick="return check_alert()"/> </body> </html> ======================================================= Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! Hi guys, I have a <div> tag that is getting updated by calling a php script. Inside of the div's innerHTML, there is a <select> tag. I need to be able to change the div whenever a user changes the select tag. How can I do this? I've been trying to get the select tag, but it doesn't seem to evaluate right. Ex: (note, the select's name is "courseselect") Code: var thediv = document.getElementById("mydiv");
var selectMenu = thediv.getElementsByTagName("select");
var selector;
for (var i = 0; i < selectMenu.length; i++)
{
var currAtt = selectMenu[i].getAttribute("name");
if (currAtt == "selectcourse")
{
selector = selectMenu[i];
}
}
selector.onChange = function()
{
alert("something has changed!");
}
Any help is appreciated. Thanks! Here's my object constuctor: Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
}
And the execution code: Code: var suggest = new suggest_object(result_id);
document.getElementById(result_id).onmouseover = function(){suggest.in_result_div = true;}
It works as is, but i'd really like to be able to set the onmouseover inside of the object. Something like Code: function suggest_object(result_id)
{
this.in_result_div = false;
this.search_element = document.getElementById(result_id);
this.input_element.onmouseover = function()
{
this.in_result_div = true;
}
}
So how can I get the 'this' inside the onmouseover function to refer to the object? Hi, i have the following html page <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <input type="text" id="input1" /><br /> <iframe id="textEditor" name="textEditor"> </iframe> <script type="text/javascript"> $(document).ready( function() { textEditor.document.designMode = "on"; textEditor.document.open(); textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px;}</style><body>Hi User<br /><br /><span style="font-style:italic;">### Write your message here ###</span><br /><br />Thanks,<br /></body></head>'); document.getElementById("textEditor").contentWindow.addEventListener('focus', OnFocus, true); $("#input1").focus(); } ); function OnFocus() { textEditor.document.body.innerHTML = textEditor.document.body.innerHTML.replace('<span style="font-style:italic;">### Write your message here ###</span>', ""); document.getElementById("textEditor").contentWindow.focus() } </script> </body> </html> Now press on the tab key when the page loads (You should see focus on the textbox field) and you can see that the iframe text editor (WYSIWYG) has no focus... On firefox it works... How can i give it focus on chrome? Try to figure out how to change the css display property of a table, from hidden, to block outside of an iframe. //This data is outside of the iframe Code:
<style>
#table {display: hidden; z-index: 100;}
</style>
<table id='table' ><td> ......data</td></table>
//This link is inside of an iframe Code: <script>
function change(){
document.getElementById("table").style.display='block';
}
</script>
<a href='javascript:void(0)' onclick='change()'>Change</a>
Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. Hello friends, I want to trigger click event on an iframe's element through the main window, Doing it both ways, with or without jquery, will be usable for me. Basically, what I want to do is, I have developed a website http://www.ipjugaad.com, and on every document download page, I have placed an fb like button, what I want to do is that the like button should be automatically clicked when a user click on download button on my website. Give me some idea about how to do it? I use the following code to create a hidden iFrame on a page, dynamically Code: var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i);};
i.src = 'http://www.mysite.com';
document.body.appendChild(i);
i.id='frame1';
Now, document.getElementById('frame1').contentDocument.getElementById('text01').value Should have given me the value in 'text01', but it doesn't. It doesn't work even inside the iFrame's onload event. ('text01' is a textbox which is on the page inside the iFrame - its name and id are both 'text01') Is there any other method to get the text in a textbox within an iFrame? Please help me to correct the code. Thanks in advance. I save an Access query as an HTML file (query.html) I then load an HTML page (TopStyle.html). This loads the query.html. I want query.html to autoscroll to the end of the page, and then either scroll to the top or just start again. [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" language="JavaScript" ></script> <title>How to Scroll the Page With JavaScript</title> <meta name="description" content="How to scroll the page automatically using JavaScript." /> <meta name="keywords" content="javascript, page, scroll" /> <script type="text/javascript"> function pageScroll() { window.scrollBy(0,50); scrolldelay = setTimeout('pageScroll()',10000); // scrolls every 1000 milliseconds } </script> </head> <iframe src="file:///D:/PrivateDocs/WorkflowPage/Query1.html" name="frame1" scrolling="auto" frameborder="no" style="float:left" height = "100%" width = "100%"></iframe> <body> <body onLoad="pageScroll()"> </body> </html> [icode] Problem 1 is I can't get the height 100% to work. I get a box about 150px high. Problem two is the main HTML page does a small scroll but how do I get the Query in the Iframe to scroll? All help appreciated. Harle Hi, folks! Having a big issue he i got a code that works fine in Chrome, FF, but seems unreadable by IE. Got a main HTML code that have a DIV tag, declared like this Code: <div id='leframe' style='visibility:hidden'></div> Then, I call, through a Flash file, an external function that says: Code: function loadNextPg(nextPg) {
var varDiv = "<iframe src='pg"+nextPg+".htm'></iframe>";
document.getElementById("leframe").innerHTML = varDiv;
}
}
It would load the HTML named (pg'+nextPg+'.htm), where nextPg is a String value ("01", "02", etc). It works WONDERFULLY in Chrome, FF, etc, but not in IE. Does anyone know if I'm doing anything wrong? Best regards and thanks in advance. I have a form inside an iFrame which I want to submit with javascript as the iFrame loads. For example: Code: <iframe src="......." name="myiframe" id="myiframe"> <form method="post" id="myform" name="myform" action="http:// www.yahoo.com" rel="nofollow" target="_self"> </form> </iframe> No matter how I try to submit the form I cannot get it. I have tried: document.getElementsByName("myform") document.myiframe.myform all other combinations I try gives the same, i cannot access the form. (The page inside the iFrame is from the same domain as the parent page, I am not trying to do any cross domain scripting) Can you please assist me getting this working ? Thanks! Alright so I've been teaching myself php/javascript/html/joomla for the past couple weeks, learning as i go along. So bear with me if i seem like a total moron =p. I'm trying to run a script from a js file to add javascript to the website inside the iframe. I also would like the script to only be activated onclick(this is all in an article). To clarify my website has an iframe and this iframe contains a webpage from http://website987.com/. I want to run thescript.js on the website inside that iframe, to add javascript to that website, however i also only want to run this js file on the click of a link/button. I hope i'm being clear if I'm not please tell me and ill try to reiterate. I've been trying to get this to work for a while now and I feel like this is really simple and I'm asking a stupid question. However this is what I've got so far, currently this just redirects the iframe to the URL with my code on it(instead of actually running it).How could i edit this/what coding could I use to make it so thescript.js actually runs instead of it being just redirected? Reply With Quote Code: <?php $filename = 'thescript.js'; $path = '/media/system/js/'; // add the path parameter if the path is different than : 'media/system/js/' JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded ?> Code: <HTML>
<HEAD>
<script language="javascript">
function loadOne()
{
parent.FRAME1.location.javascript: function('/media/system/js/thescript.js')
}
</script>
</HEAD>
<BODY>
<iframe name="FRAME1" src="http://website987.com/" width="740" height="500" frameborder="0" scrolling="yes"></iframe>
<a href="javascript:loadOne()">Click Here/a>
</BODY>
</HTML>
Am i even on the right track? I've been testing out a billion different codes and I think it would be ridiculous to post them all so I was hoping someone could help me fix this code or at least point me in the right direction. I'm usually able to figure everything out on my own but I'm failing atm and I just need help on this one thing, I would be ever so thankful for any assistance provided, ! (BTW I'm also currently using the Joomla CMS and a joomla plugin called CodeMirror that runs your code directly from the article, not sure if this is relevent or not) Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith Hi guys, I need to redirect a page to another url when it detects that the page is opened inside an iframe. I need help with this <script > if(location.href != top.location.href){ window.location = 'http://myurl.com' } </script> - check my attachment index.zip Thx. The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Everything up until the focus line works, any ideas? Code: else {
alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.");
document.delAdd.postcode.value = "";
document.delAdd.postcode.focus();}
I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number. Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks. <div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden"> <div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe> </div> (sorry for the noobiness) Is there a way to focus on the most recent input to a text area (say after 50 inputs) without having to manually scroll down?? Code: function console(msg){
document.console1.input.value = document.console1.input.value+=msg
document.console1.input.value.focus()
}
~read that focus() should do it . . . but it doesn't Thanks! Hi, I need your help guys. I've got a little problem. I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode It works perfectly, it enters the smileycode to the textarea. My problem is... When I say document.getElementById('message').focus() it goes back to where the cursors has last been so before the smileycode. Instead of this, I want the focus to go back after the insertion of the code. I hope it's understandable. And thanks in advance! |
|||||||