|
JavaScript - Create Var Named With Value Of Other Existing Var!?
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] = ""
}
Similar TutorialsLet's say I'm defining an object and I want the constructor to take one input and ten save it. I'd like to do something like this: function apple(color) { this.color = arguments.color; } But of course that doesn't work because arguments isn't a scope. My question is, is there a scope I can use. What I've been doing instead is this: function apple(new_color) {this.color = new_color;} But that just seems less than perfectly pretty. I have a question about proper syntax in iterative functions. I want to compare one master array to a large set (180+) of other arrays. The large set of arrays to be compared are systematically named (scorespec1, scorespec2, scorespec3...). Each comparison will be made not one-to-one but through an algorithm and then have the results stored in another set of arrays that are also systematically named for later query. I not worried about getting the algorithm right just yet. I'm just not sure of the proper syntax to iterate through my arrays. For instance, this is but one of the syntax structures I have tried but failed to get working: Code: for (i=01;i=186;i++){
if (scorespec+(i)[04]=unknownspec[16]){
resultarray+(i)[01]=true;}
else{
resultarray+(i)[01]=false;}}
My main problem here is I don't know how to structure the syntax to include the counter variable in my for-loop in the variable name. I've tried a variety of different syntaxes in addition to what I show above and it just doesn't seem to work right. What syntax should I be using? Hi I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize. The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear. Any suggestions or help will be greatly appreciated. THANK YOU Code:
<!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" />
<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}
.overlayContent {
padding:0px;
}
.overlayContentb {
padding:0px;
}
.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }
</style></head>
<body>
<div class="bgCover"> </div>
<a href="#" class="launchLink">Launch Window</a>
<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>
<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>
<br /><br />
<a href="#" class="launchLinkb">Launch Window 2</a>
<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>
<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>
<script language="javascript">
function showOverlayBox() {
//if box is not set to open then don't do anything
if( window.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
function showOverlayBoxb() {
windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>
</body>
</html>
Write a program named Median.java that asks the user for three integers and outputs the median. I have to do this using if else statements. It seems really easy, but I can't figure it out. Help! Here's my code: Code: import java.util.*;
public class Median {
public static void main(String[] args) {
Scanner console = new Scanner(System.in);
System.out.println("Please enter number 1");
int max = console.nextInt();
int min = max;
int median = min;
for (int i=2; i <= 3; i++) {
System.out.println("Please enter number "+i);
int enteredNumber = console.nextInt();
if (enteredNumber > max) {
max = enteredNumber;
}
else {
enteredNumber = median;
}
if (enteredNumber < min) {
min = enteredNumber;
}
else {
enteredNumber = median;
}
}
System.out.println("The median is: "+median);
}
}
When I run this it just gives me back the first number I entered. 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 ?
}
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. 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>
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> 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;
}
}
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. 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. 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. 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 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 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 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 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 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?
|
|||||||