|
JavaScript - Iframe And Existing Id Within
I have an iframe. I load a page within it. The page I load is a php page that I build with a table with the id of 'readmail_table'.
My iframe is 'readmail_frame'. Someone clicks on a message title outside of the iframe and I load the contents of the message in the iframe from the database in my table. Sometimes this takes longer than others depending on how large the message is. What I am doing here is letting the contents load then calculating the width and height of the table and then increasing the iframe's size so there are no scrollbars. This works 98% of the time but I ran into an issue where the table does not exist yet in the iframe and the JS code errors out. So what I did then was add a local var, set it to false then had a while loop check for the table and once it finds it, set the var to false and run my code. Again, mixed results. Sometimes this works then others I get that the table id I am looking for is null but my if statement in the while loop is checking to see if != null line 159 is where it is breaking The error I am getting in firebug is Code: window.frames.readmail_frame.document is null Line 159 Code: 156 var temp = false;
157 while ( !temp )
158 {
159 if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) != null )
160 {
161 //height of the table that holds the actual message
162 var tempheight = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientHeight;
163 //height of the from, to, subject and date section
164 var tempheight2 = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_heading' ).clientHeight;
165 var tempwidth = window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ).clientWidth;
166 document.getElementById( 'readmail_frame' ).style.width = tempwidth + 'px';
167 //add up the table for the message, table for from, to, date and icon for print and some extra to ensure enough room
168 document.getElementById( 'readmail_frame' ).style.height = ( tempheight + tempheight2 + 130 ) + 'px';
169 temp = true;
170 }
171 }
I have also tried Code: if ( window.frames[ "readmail_frame" ].document.getElementById( 'readmail_table' ) ) and Code: if ( window.frames[ "readmail_frame" ].document ) Like I said, most of the time this works exactly how I need it. I just need a fool proof way to determine that this table is in fact on the page. I am not sure why it works sometimes and not others since I am looping until it is there Thank you for any help with this. Similar TutorialsHi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea'))
{
alert(lastRowTD_s[i].id);
//checked, it is the row that does not have "textarea" element.
alert(lastRowTD_s[i].getElementsByTagName('textarea'));
// gives me [Object HTML collection] !?
alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]);
//gives me "undefined", heh where has it gone since previous line ?
}
Im trying to add to each element within an array. In this program I have an existing array which is called aScores. I have copied its contents into another array called aScores using slice. Now Im trying to add the value of variable called classCurve to each element of aCurve using a for loop (see under the Curve Scores functrion section). However, it does not seem to add the two together(e.g 78 + 5). Any advice would be very helpful. Here is my code: Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>
<!--
var aScores = new Array(); //array to hold test scores
var aCurve = new Array(); //array to hold test scores with curve
var classAveRounded = 0; //average of test scores
var howLong = 0; //length of array -- contingent on how many test scores entered
//------------------- LoadScores function -----------------------------
function LoadScores() {
var classAve = 0;
var rawScores = document.getElementById("Scores").value;
aScores=rawScores.split(","); //seperate the test scores by comma
//alert(aScores[1]); //test to see if they are separated
var howLong = aScores.length; //variable to measure how long the array is
for(i=0; i<howLong; i++){
aScores[i] = parseInt(aScores[i]); //convert strings to numbers
}
//alert(aScores[0] + aScores[1]); //test to make sure array contains numbers
aScores.sort(sortNumber); //sort the scores from highest to lowest
//insert scores from the array into the score text boxes.
for (i=0; i<howLong; i++) {
document.getElementById("Score" + i).value = aScores[i];
}
//total the test scores
var total=0;
for(i=0; i<howLong; i++) {
total += aScores[i];
}
//average the total and insert it into the Average textbox(Math.ceil rounds up aveCalc).
classAve = total/howLong;
classAveRounded = Math.ceil(classAve);
document.getElementById("Average").value = classAveRounded;
}
//------------------- sortNumber function ------------------------------
function sortNumber(a,b){
return b-a;
}
//------------------- CurveScores function -----------------------------
function CurveScores() {
var classCurve = 0;
alert(classAveRounded);
if(classAveRounded<75) {
classCurve=(75-classAveRounded);
}else{
classCurve=0;
}
alert(classCurve);
aCurve=aScores.slice();
//alert(aCurve[7]); //test to see if aCurve holds test scores
for(i=0; i<howLong; i++) {
aCurve[i]=aCurve[i] + classCurve;
}
// alert(aCurve[0]);
//total the curved scores
var totalCurvedScores=0;
for(i=0; i<howLong; i++) {
totalCurvedScores += aCurve[i];
}
//average the total and insert it into the CurvedAverage textbox(Math.ceil rounds up aveCalc).
curvedAve = totalCurvedScores/howLong;
curvedAveRounded = Math.ceil(curvedAve);
document.getElementById("CurvedAverage").value = curvedAveRounded;
}
-->
</script>
</head>
<body>
<table border="1">
<tr style="background-color:#F0F0F0; font-size:10pt; font-weight:bold;
text-align:center; vertical-align:bottom">
<td>Score</td>
<td>Curved</td>
<td>Grade</td>
</tr>
<tr>
<td>
<input id="Score0" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score1" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score2" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score3" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score4" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score5" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score6" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score7" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score8" type="text" style="width:60px;text-align:right"/><br/>
<input id="Score9" type="text" style="width:60px;text-align:right"/><br/>
</td>
<td>
<input id="CurvedScore0" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore1" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore2" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore3" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore4" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore5" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore6" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore7" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore8" type="text" style="width:60px;text-align:right"/><br/>
<input id="CurvedScore9" type="text" style="width:60px;text-align:right"/><br/>
</td>
<td>
<input id="Grade0" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade1" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade2" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade3" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade4" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade5" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade6" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade7" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade8" type="text" style="width:60px;text-align:center"/><br/>
<input id="Grade9" type="text" style="width:60px;text-align:center"/><br/>
</td>
</tr>
<tr>
<td><input id="Average" type="text" style="width:60px;text-align:right"/></td>
<td><input id="CurvedAverage" type="text" style="width:60px;text-align:right"/></td>
<td> </td>
</tr>
<tr>
<td><input type="button" value="Load" style="width:60px;font-size:7pt"
onclick="LoadScores()"/></td>
<td><input type="button" value="Curve" style="width:60px;font-size:7pt"
onclick="CurveScores()"/></td>
<td><input type="button" value="Grades" style="width:60px;font-size:7pt"
onclick="AssignGrades()"/></td>
</tr>
</table>
<div style="position:relative; left:225px; top:-25px; font-size:10pt">
<b>Enter Scores: </b>
<input id="Scores" type="text" style="width:250px; font-family:courier new"
value="40,46,48,56,62,64,66,70,76,78"/>
</div>
</body>
</html>
Hi guys! As title says I need to create variable named with value of other variable! So is that possible? What exactly I need is something like this: Code: for(var i=0; i<11; i++){
var Img[i] = ""
}
Hey CF, I've been meaning to learn the answer to this question for a long time, I guess now is the time and place to hopefully have it answered. I'm wanting to know if there is a technique one can use to have Ajax request live data from a database as it happens but I want it to do this with out having to request a bunch of other information with it. Imagine you come to a webpage and there is the latest 10 comments on a video. Let's say that I want new comments to arrive as they happen (say every 5 seconds we will do an Ajax hit on the server). Let's say for sake of argument there is 2 new comments. Is there a way to make Ajax only request and display the latest 2 comments with out having to refresh the 10 latest as well? If this sounds confusing, try imagine the 10 comments as an array. I just want to pop one off the end and push a new one onto the front. Any tips in the right direction would be great to hear. I would like to know if anyone cane explain some javascript source code that i got from the chess.com website. Here is the following code Im talking about: window.Meebo||function(c){function p(){return["<",i,' onload="var d=',g,";d.getElementsByTagName('head')[0].", j,"(d.",h,"('script')).",k,"='//cim.meebo.com/cim?iv=",a.v,"&",q,"=",c[q],c[l]? "&"+l+"="+c[l]:"",c[e]?"&"+e+"="+c[e]:"","'\"></",i,">"].join("")}var f=window, a=f.Meebo=f.Meebo||function(){(a._=a._||[]).push(arguments)},d=document,i="body", m=d[i],r;if(!m){r=arguments.callee;return setTimeout(function(){r(c)},100)}a.$= {0:+new Date};a.T=function(u){a.$[u]=new Date-a.$[0]};a.v=4;var j="appendChild", h="createElement",k="src",l="lang",q="network",e="domain",n=d[h]("div"),v=n[j](d[h]("m")), b=d[h]("iframe"),g="document",o,s=function(){a.T("load");a("load")};f.addEventListener? f.addEventListener("load",s,false):f.attachEvent("onload",s);n.style.display="none"; m.insertBefore(n,m.firstChild).id="meebo";b.frameBorder="0";b.id="meebo-iframe"; b.allowTransparency="true";v[j](b);try{b.contentWindow[g].open()}catch(w){c[e]= d[e];o="javascript:var d="+g+".open();d.domain='"+d.domain+"';";b[k]=o+"void(0);"}try{var t= b.contentWindow[g];t.write(p());t.close()}catch(x){b[k]=o+'d.write("'+p().replace(/"/g, '\\"')+'");d.close();'}a.T(1)}({network:"chess"}); </script> I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, I have a script that shows/hides a div but rather than making it sort of snap I would like to make it glide/slide. I have looked at other scripts but can't make them work with mine. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color:#FF0000;
}
a:link {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:visited {
color: #999999;
text-decoration: none;
letter-spacing: 3px;
font-size:14px;
}
a:hover {
color: #FF0000;
letter-spacing: 3px;
text-decoration: none;
font-size:14px;
}
a:active {
color: #FF0000;
font-size:14px;
letter-spacing: 3px;
}
#wrapper{
position:relative;
width:730px;
height:600px;
margin:0px auto;
}
#images{
width:730px;
height:552px;
overflow:hidden;
float:right;
position: absolute;
top: 48px;
}
#textbox{
position: absolute;
width:205px;
height:40px;
background-color: #FFFFFF;
top: 68px;
left: 20px;
z-index: 2;
padding: 10px;
border-bottom: 2px solid red;
}
#logo {
position: absolute;
width: 101px;
position: absolute;
left: 634px;
top: 19px;
padding: opx;
margin: 0px;
z-index: 2;
}
.more {
display: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border-bottom: 2px solid red;
padding-left: 8px;
padding-right: 8px;
margin-left: -10px;
width: 209px;
padding-bottom:10px;
}
a.mo hover {
text-decoration: none;}
a.showLink, a.hideLink {
text-decoration: none;
font-size: xx-small;
color: #36f;
padding-left: 8px;
/*** background: transparent url(down.gif) no-repeat left;***/ }
a.hideLink {
/*** background: transparent url(up.gif) no-repeat left;***/ }
.drop1 {
font-size: 12px;
font-weight: bold;
}
.drop2 {
color: #666666;
font-size: smaller;
}
#apDiv1 {
position:absolute;
left:319px;
top:87px;
width:234px;
height:32px;
z-index:1;
}
.init_image, .inactive_class {
}
.hover_class, #active_id {
color:#F00;
}
</style>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "<img src=ShowProduct.jpg border='0'>";
}
else {
ele.style.display = "block";
text.innerHTML = "<img src=hideProduct.jpg border='0'>";
}
}
</script>
<script type="text/javascript">
// Reference URL to large images here
var Images = new Array(
"001.jpg",
"002.jpg",
"003.jpg",
"004.jpg"
);
function swap(el) {
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='inactive_class'||timgs[i_tem].className=='hover_class')
timgs[i_tem].id=''
el.id='active_id'
document['imgMain'].src = Images[el.href.substr(el.href.lastIndexOf('#')+1)];
}
function init(){
var timgs=document.getElementsByTagName('a')
for (var i_tem = 0; i_tem < timgs.length; i_tem++)
if (timgs[i_tem].className=='init_image'){
timgs[i_tem].className='inactive_class'
timgs[i_tem].onmouseover=function(){this.className='hover_class'}
timgs[i_tem].onmouseout=function(){this.className='inactive_class'}
timgs[i_tem].onclick=function(){swap(this);return false;}
}
swap(document.getElementById('first'));
}
</script>
</head>
<body onLoad="init();">
<div id="wrapper">
<div id= logo><img src="logo2.png" width="101" height="92" /></div>
<div id="textbox">
<div style="position:relative;">
<img style="padding-right:5px;" src="logo_dedon.png" alt=""/>
<a href="javascript:toggle();" id="displayText"><img src=ShowProduct.jpg border="0"></a>
<img style="padding-right:5px;" src="clear.gif" alt="" width="135" height="10" />
<a class="init_image" id="first" href="#0">1</a>
<a class="init_image" id="first" href="#1">2</a>
<a class="init_image" id="first" href="#2">3</a>
<a class="init_image" id="first" href="#3">4</a>
</div>
<div id="toggleText" style="display: none;" class="more">
<p><span class="drop1">BARCELONA</span><br />
<span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>
</div>
</div>
<div id="images">
<div><img galleryimg="no" name="imgMain" src="img/big/1big.jpg" alt=""></div>
</div>
</div>
</body>
</html>
Can anyone advise a solution for this please? Thanks alot Joe I am working on a site which is pretty old school.. i have a vertical drop down menu using javascript which uses <img src tag>.. Check the tab fountains at http://www.texaslakesandponds.com/index_html.html (it has a vertex and kasco dropdown) I want to add a similar dropdown for Aerators with the same format and color. I dont know how to do that since it uses a <ul><li> format and the image is called in the css class. Can someone please help me with the code. I'm not really much of a javascript programmer, but I occasionally use javascript that I've found here and there. But I'm unable to find anything that helps me in what I'm trying to do now. I regularly use a snippet of code that pops up a small window to display an image or a very small html file. Using the window.open() function, I'm able to disable scrolling, resizing, etc., and size it to my needs. I'll have a window.close link somewhere on the page. But in my current project, my customer's page has several links related to other companies. When you click on the link, an that company's ad pops up in a small window. At this point, the viewer can simply close the window, or they should be able to click on the ad and be taken to that company's website. I'm able to have it close the window and open that new url in the parent browser window, but my website customer doesn't want their site to go away. They want the new company's website in a new window. Or I can simply NOT close the popup window, but now the new company's website is in a relatively small browser window, unable to scroll, resize, etc. Is there a way for me to somehow modify an existing window with an onclick directive - something similar to the window.open() function, OR open a new browser window with window.open() AND close the popup window? If I haven't made myself clear, let me know and I'll try to explain myself better. Thanks in advance for any help. If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?
Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers. My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon. I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated. Here is the existing function which tells a link to be active or selected: Code: var Lst;
function CngClass(obj){
if (Lst) Lst.className='.topnav';
obj.className='selected';
Lst=obj;
}
and here is the menu code: Code: <ul class="topnav"> <li><a href="#">Home</a></li> <li><a onclick="CngClass(this);" href="#">Top Link 2</a> <ul> <li><a onclick="CngClass(this);" href="#">Cookies</a></li> <li><a onclick="CngClass(this);" href="#">Events</a></li> <li><a onclick="CngClass(this);" href="#">Forms</a></li> <li><a onclick="CngClass(this);" href="#">Games</a></li> <li><a onclick="CngClass(this);" href="#">Images</a></li> <li><a onclick="CngClass(this);" href="#">Navigations</a> <ul> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">JQuery</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tutorials</a> <ul> <li><a onclick="CngClass(this);" href="#">HTML</a></li> <li><a onclick="CngClass(this);" href="#">CSS</a></li> <li><a onclick="CngClass(this);" href="#">JavaScript</a></li> <li><a onclick="CngClass(this);" href="#">Java</a> <ul> <li><a onclick="CngClass(this);" href="#">JSP</a></li> <li><a onclick="CngClass(this);" href="#">JSF</a></li> <li><a onclick="CngClass(this);" href="#">JPA</a></li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Tabs</a></li> </ul> </li> <li><a onclick="CngClass(this);" href="#">Contact</a></li> <li><a onclick="CngClass(this);" href="#">Upload script</a></li> </ul> Thanks for any help or advice. Hi all and hope you can help. I have a form validication function that checks a variety of form inputs which appears to be working fine. Trouble is that if I deliberately throw it some non-valid entries it clears the form with the data I've already supplied. Can anyone suggest a method for preserving the input the user has already made so that this doesn't need to be re-input when the user has input invalid data? My thanks Rog Here's my validation code. which checks.. Whether a user has input their full name - entering full name is optional and if not true will negate subsequent checks, i.e. doesn't bother checking any other inputs. Whether a user has supplied both first and last names, fail message pops up if not. Whether a user has suppllied a full name but not an email or telephone number, fail message pops up if not. Whether a user has supplied a valid email address, fail message pops up if not. Whether a user has supplied a valid telephone number, fail message pops up if not. If we've passed all these tests, O.K. - submit. Code: function check_id(){
var status = false;
var emailRegEx = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
var telRegEx = /^\s*\(?(020[7,8]{1}\)?[ ]?[1-9]{1}[0-9{2}[ ]?[0-9]{4})|(0[1-8]{1}[0-9]{3}\)?[ ]?[1-9]{1}[0-9]{2}[ ]?[0-9]{3})\s*$/;
// 1st test, are the name fields blank, this is valid if the user doesn't want to enter the draw?
if (document.feedback.first.value =="" && document.feedback.second.value =="") {
status=false;
confirm("You will not be entered in our free prize draw unless you supply your full name and email address or telephone number. Is that O.K?");
return status;
}
// 2nd test, has the user supplied both a first name and surname?
else if (document.feedback.first.value =="" || document.feedback.second.value =="") {
status=false;
alert("You need to supply your full name to enter the draw.");
}
// 3rd test, has the user supplied a full name but not supplied an email address or tel number, this isn't valid.
else if (document.feedback.email.value =="" && document.feedback.tel.value ==""){
status=false;
alert("You need to supply either a valid email address or telephone number to enter the draw.");
}
// 4th test, user has supplied an email address and / or an email address and tel, check each.
else if(document.feedback.email.value !=""){
// 4th test part 1, user has supplied an email address, check it is valid.
if (document.feedback.email.value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
status=false;
}
else {
alert("Thank you. You will be entered into our free prize draw. Good luck!");
status = true;
}
return status;
}
// 4th test part 2, has the user supplied a tel number, this is a valid option, check it.
else if (document.feedback.tel.value !="" ) {
if (document.feedback.tel.value.search(telRegEx) == -1) {
alert("Please enter a valid telephone number.");
status=false;
}
else {
alert("Thank you. You will be entered into our free prize draw. Good luck!");
status = true;
}
return status;
}
}
Hi all, I'm working on adding a WYSIWYG editor (TinyMCE) to the PHPBB3 message board software. Right now I'm trying to make the installation as foolproof as possible (that is, minimize the amount of file editing a person has to do to install it). One big stumbling block I have is that an existing, stock piece of JS code needs to have "hooks" added to it. For example, original code: Code: function initInsertions()
{
var doc;
if (document.forms[form_name])
{
doc = document;
}
else
{
doc = opener.document;
}
What I need to add: Code: function initInsertions()
{
if (tinymce) { return; }
var doc;
if (document.forms[form_name])
{
doc = document;
}
else
{
doc = opener.document;
}
I need to add little pieces of code all over that one JS file. Rather than editing the file, is there a way I can "intercept" a function as it's called, insert or do MY added function, then continue on with the original code? The reason I can't simply provide an edited copy of that JS is because people may have added other mods to their code and installing my copy would "break" all of their other mods. Any ideas will be greatly appreciated! -- Roger Hey, I need help. I have my HTML/CSS/Javascript slideshow working fine, the images fades in and out nicely. Now I realized I'd like to implement next and prev buttons, but I don't know how to code this and what to refer to in the existing code. Please help? I have ten thumbnails total. Here's the Javascript: <script type="text/javascript"> slidePrefix = "slide-"; slideControlPrefix = "slide-control-"; slideHighlightClass = "highlight"; slidesContainerID = "slides"; slidesControlsID = "slides-controls"; slideDelay = 3000; slideAnimationInterval = 30; slideTransitionSteps = 10; function setUpSlideShow() { // collect the slides and the controls slidesCollection = document.getElementById(slidesContainerID).children; slidesControllersCollection = document.getElementById(slidesControlsID).children; totalSlides = slidesCollection.length; if (totalSlides < 10) return; //go through all slides for (var i=0; i < slidesCollection.length; i++) { // give IDs to slides and controls slidesCollection[i].id = slidePrefix+(i+1); slidesControllersCollection[i].id = slideControlPrefix+(i+1); // attach onclick handlers to controls, highlight the first control slidesControllersCollection[i].onclick = function(){clickSlide(this);}; //hide all slides except the first if (i > 0) slidesCollection[i].style.display = "none"; else slidesControllersCollection[i].className = slideHighlightClass; } // initialize vars slideTransStep= 0; transTimeout = 0; crtSlideIndex = 1; // show the next slide showSlide(2); } function showSlide(slideNo, immediate) { // don't do any action while a transition is in progress if (slideTransStep != 0 || slideNo == crtSlideIndex) return; clearTimeout(transTimeout); // get references to the current slide and to the one to be shown next nextSlideIndex = slideNo; crtSlide = document.getElementById(slidePrefix + crtSlideIndex); nextSlide = document.getElementById(slidePrefix + nextSlideIndex); slideTransStep = 0; // start the transition now upon request or after a delay (default) if (immediate == true) transSlide(); else transTimeout = setTimeout("transSlide()", slideDelay); } function clickSlide(control) { showSlide(Number(control.id.substr(control.id.lastIndexOf("-")+1)),true); } function transSlide() { // make sure the next slide is visible (albeit transparent) nextSlide.style.display = "block"; // calculate opacity var opacity = slideTransStep / slideTransitionSteps; // fade out the current slide crtSlide.style.opacity = "" + (1 - opacity); crtSlide.style.filter = "alpha(opacity=" + (100 - opacity*100) + ")"; // fade in the next slide nextSlide.style.opacity = "" + opacity; nextSlide.style.filter = "alpha(opacity=" + (opacity*100) + ")"; // if not completed, do this step again after a short delay if (++slideTransStep <= slideTransitionSteps) transTimeout = setTimeout("transSlide()", slideAnimationInterval); else { // complete crtSlide.style.display = "none"; transComplete(); } } function transComplete() { slideTransStep = 0; crtSlideIndex = nextSlideIndex; // for IE filters, removing filters reenables cleartype if (nextSlide.style.removeAttribute) nextSlide.style.removeAttribute("filter"); // show next slide showSlide((crtSlideIndex >= totalSlides) ? 1 : crtSlideIndex + 1); //unhighlight all controls for (var i=0; i < slidesControllersCollection.length; i++) slidesControllersCollection[i].className = ""; // highlight the control for the next slide document.getElementById("slide-control-" + crtSlideIndex).className = slideHighlightClass; } </script> And here's the HTML: <body onload="setUpSlideShow()"> <div id="slideshow"> <div id="slides"> <div class="slide"><img src="images/image1.jpg" width="1020" height="500"/>Slide content 1</div> <div class="slide"><img src="images/image2.jpg" width="1020" height="500"/>Slide content 2</div> <div class="slide"><img src="images/image3.jpg" width="1020" height="500"/>Slide content 3</div> <div class="slide"><img src="images/image4.jpg" width="1020" height="500"/>Slide content 4</div> <div class="slide"><img src="images/image5.jpg" width="1020" height="500"/>Slide content 5</div> <div class="slide"><img src="images/image6.jpg" width="1020" height="500"/>Slide content 6</div> <div class="slide"><img src="images/image7.jpg" width="1020" height="500"/>Slide content 7</div> <div class="slide"><img src="images/image8.jpg" width="1020" height="500"/>Slide content 8</div> <div class="slide"><img src="images/image9.jpg" width="1020" height="500"/>Slide content 9</div> <div class="slide"><img src="images/image10.jpg" width="1020" height="500"/>Slide content 10</div> </div> <div id="slides-controls"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> <a href="#">10</a> </div> </div> I am not a master of javascript. I am only beginning. I know how to edit most codes I come by to make them work for what I need them for, but I haven't really been able to get this concept to work. I know there is a way to count the characters of a text box. I have used them a thousand times. (Think twitter) I am making a forum, and I am not self-hosting. So I don't have access to change all of the HTML on the forum software. So, here is what I want to do, and I really just need to know if its possible. There is a reply box on this forum. A pre-existing element. It cannot be changed by going into the html, because I don't have access to it. I want a box to appear underneath it to count the number of characters that are typed into that box, and cut off if they go over. I know of codes that allow you to count characters in a box you create, because you can add the "onkeyup=" to the html... I just don't have access to that part. Do you see where I'm getting at? So to further illustrate, something like this: If it can be done, can someone show me how? I have the idea of how it might work, but I don't know enough to make my own code, only enough to figure out what existing code is talking about. I am sorry if this doesn't make sense. I can try to explain further if need be. I need help adding an additional function to some existing java script code I already have. In addition to the functions already on this js, I want make it so the banner displays one of the images randomly on each new page load. I have an external js file that this page also links too. Not sure if I need to post that also. I was hoping to just add to this code. Any help is greatly appreciated <script type="text/javascript" src="js/homepage-banners/simplegallery.js"> </script> <script type="text/javascript"> var mygallery=new simpleGallery({ wrapperid: "simplegallery1", dimensions: [250, 180], imagearray: [ ["img/headers/automotive.jpg", "http://www.visionsystem.com/applications/automotive_metal.php", "", ""], ["img/headers/electrical.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/food-packaging.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/medical-pharmaceutical.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""], ["img/headers/semiconductor.jpg", "http://www.visionsystem.com/applications/electronics.php", "", ""], ["img/headers/automation.jpg", "http://www.visionsystem.com/applications/food_pharmaceutical.php", "", ""] ], autoplay: [false, 2500, 2], persist: false, fadeduration: 500, oninit:function(){ }, onslide:function(curslide, i){ } }) </script> I have written base rel="nofollow" target="_self" tag in head tag. It works fine in IE6 but not in IE8. window.showModalDialog() opens up new ModalDialog instead of using existing Dialog. Can anybody help me?
|
|||||||