|
JavaScript - Intercept Existing Js Functions (hook Them) - Possible?
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 Similar TutorialsFirst off... I am new to javascript, and am learning while trying to add some cool extra features to an existing project. An existing JSP is generating the HTML page and table. I have retro-fitted it so that it adds to each input field a 'trigger' to the onkeyup event. The purpose of this trigger is check for the the cursor keys being pressed (UP, DOWN, LEFT, RIGHT) and then if it is a logically valid move, shift to the next cell in that direction. Code: <td class="inputField" rowspan="1" colspan="1" nowrap="nowrap"> <input name="ColorNumber0" id="" maxlength="" size="20" onchange="saveFieldObj(this)" onkeyup="return doOnKeyUp(event, 18, 14, 'ColorNumber0')" type="text"> </td> Now, the function it calls, doOnKeyUp, for the most part is working fine... when the input field in the table cells are a textbox or textarea, my method can re-focus the fields appropriately. HOWEVER, I am having a huge headache when the input field is a combo box. Basically, the value of the combo box is changed with the cursor keys (which is default combo box behaviour (I think)), instead of moving to the next editable cell in that chosen direction. Problem #1: My question: Is there a way to intercept/override the various onKey events or similar for the combo boxes. For the combo boxes, I want to continue to move between table cells UNLESS a do something specific, like press the spacebar to entire an update/modification mode for the current cell. Everything I have done so far does not prevent the combo box events from triggering. Any ideas? Problem #2: Also, I tried a nasty hack to try and get it to work, by trying to switch the combo box's value back 1 spot (if it appeared to be needed) by changing the <combo box>.selected value. However, that change never appears to be taking hold, so it is staying at whatever the original selected value was. For this one, I am just curious as to the correct way to have javascript change the selected value in a combo box and make it "stick" and make it applied to the view/UI? Code example: Code: var selectedIdx = (curObj.selectedIndex - 0);
if ( selectedIdx < curObj.length ) {
var newIdx = (selectedIdx-0) - 1;
curObj[selectedIdx].selected = "0";
curObj[newIdx].selected = "1";
curObj[newIdx].focus();
//curObj.selectedIndex = newIdx;
}
You can probably tell by the code that I had been trying various things to change the combo box's selection via javascript, but none has worked for me. Any help on either topic would be greatly appreciated! Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper()
{
function frequencyWrapperOne()
{
var numberArrayOne = new Array(0,0,0);
for (var i = 0; i < 1000; i = i + 1)
{
var chosenNumber = Math.floor(Math.random() * 3);
if (chosenNumber == 0)
{
numberArrayOne[0] = numberArrayOne[0] + 1;
}
if (chosenNumber == 1)
{
numberArrayOne[1] = numberArrayOne[1] + 1;
}
if (chosenNumber == 2)
{
numberArrayOne[2] = numberArrayOne[2] + 1;
}
}
return window.alert(numberArrayOne.join(','));
}
}
testWrapper();
Thanks. Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help? if (condition) {activate functionname();} Any help I can get would be appreciated. Thanks a lot to anyone who can help. Ok here is what I have so far, my ending part of my Call Function I think is ok. for my main function. I think I misplaced the { and } I will show you all the codes I have for my main function this is what I have I think I did misplace something but I can not pin point where that one small things should be Code: unction showResults(race,name,party,votes)
{ // script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
}
for (var i=0; i < name.length; i++)
{
document.write("<tr>");
document.write("<td>" name[i] + "(" + party[i] + ")</td>");
document.write("td class='num'>" + votes[i] + "</td>");
var percent=calcPercent(votes[i], totalV)
document.write("<td class='num'>(" + percent +"%)</td>");
createBar(party[i],percent)
document.write("</tr>");
}
document.write("</table>");
}
</script>
Just wondering if i misplaced any ; or { or } anywhere suggestions? Here is my call function Code: <script type="text/javascript"> showResults(race[0],name1,party1,votes1); showResults(race[1],name2,party2,votes2); showResults(race[2],name3,party3,votes3); showResults(race[3],name4,party4,votes4); showResults(race[4],name5,party5,votes5); </script> I been going over this, I can not seem to figure out what { i might be missing? Thanks 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. 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. 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>
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 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] = ""
}
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 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. 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 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, 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 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. 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 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?
|
|||||||