|
JavaScript - Add A Character Count To A Pre-existing Html Element.
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. Similar TutorialsI 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>
I am trying to set up a script that looks in the code on one page, counts the number of instances of an element by ID, and then delivers that information back to another page in order to set the height for an area on that page. Context: I have a PHP page with an include statement and the included content is overflowing. Scrolls won't emerge (IMO) unless the container PHP page is told what is the height of the included content. I know almost nothing about javascript, so this is becoming a significant challenge. I cobbled together two scripts, just to get started: one that searches for occurrences of a word in a document, and another that converts that information into the height for the "div" tag in my PHP page. Obvious issues: 1) The first script will not search outside of the form for the word occurrence. I don't even want the count to be delivered in a form; I want it passed to the second script without any user involvement at all. 2) I am not sure how to set write the code so that it searches another document entirely. I bookmarked this site thinking that there might be some solutions in there. Code: <script language="Javascript">
function countInstances(string, word) {
var substrings = string.split("navpic3");
return substrings.length - 1;
}
</script>
<script type="text/javascript">
var thumbinstance=countInstances
var thumbheight=[(50*thumbinstance)+300]
function menuspace(images){
document.write("<div style="+'"'+"height: "+thumbheight+"px;"+'"'+">")
}
</script>
<script type="text/javascript">menuspace(255)</script>content</div>
<form>
<input type="label" name="string" value="navpic3 navpic3">
<input type="button" value="count instances" onClick="document.write(countInstances(string.value))">
</form>
Thanks in advance for any help. Elizabeth Hello HTML CODE TUTORIAL support, I am aryan. A student of engg. I want simple help in following code : It is simple 4 You and difficult 4 Me :unsu ================================================ <html> <head></head> <title>Mad </title> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>MAD</title> <script language="javascript" type="text/javascript"> function session() { var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz"; var str = ''; for (var i=0; i<10; i++) { var b = Math.floor(Math.random() * chars.length); str += chars.substring(b,b+1); } document.frm.un.value = str; document.frm.s.value = str; document.frm.capt.src =" Free games - MAD.com init?w=120&h=40&f=png&s="+ str; document.getElementById("c").focus(); } </script> </head> <body> <form action='http://mad.com/ register' method='post' id='cI' enctype='text/plain'><p><input name='s' id='s' value='GENERATED 10 CHARACTERS HERE'' type='hidden'><p><input name='did' id='did' value='NEHA' type='hidden'><p><input name='pid' id='pid' value='twinkle' type='hidden'><p><input name='cid' id='cid' value='twinkle' type='hidden'><p><input name='l' id='l' value='en' type='hidden'> <p> <b>USERNAME</b><br> <input name='un' id='un' value='aliya_loves7' ><p><b>PASSWORD</b><br> <input name='pw' id='pw' value='Iaminhell8*'></p><p> <img src='http://mad.com/init? w=120&h=40&f=png&s=GENERATED 10 CHARACTERS HERE'></p><p> captcha <br><input name='c' id='c'><br><br><input name='send' value=' CREATE ' type='submit'></ form></font> </head> ================================================== In this code i wrote code in italic font. Which is modified by me And i want to know it is wrong or right ? I want to know exact what is wrong here. I tried many times but getting error. And i also want to know When i click on CREATE button, <img src='http://mad.com/init? w=120&h=40&f=png&s="GENERATED 10 CHARACTERS HERE> This value want to change automatically for next session But dont open next page i want to change this in that page likes Refresh Captcha when i press CREATE button One more thing I Have Four input Value ABHI,AKKI,SIMRAN,PRINCE I want to replace this value into NEHA input value. [You can see in code] I also want to change this value when Img src refreshed Please Help me Dear forum, I'm making a site for my g/f – She's writing angel messages for each day of the year, 1 message on 1 page and these (eventually 366 pages) are accessed from this one page: http://www.helderziendelezingen.be/w...per-datum.html This menu page uses JS to slide to particular months. The place I'm stuck is how could it be possible to go from a particular days message, back to the month of that message in the per-datum page (having the page slid to that month)... for clarities sake... “Terug” means “back”, so for example to click on october 22nd message, read the message, and terug back to Octobers seeds rather than back to the per datum pages month selection calender. My best effort so far is to put this in the a tag: onclick="document.getElementById('waarzegstermove').style.cssText='left: -1000px;';" -1000px would be Januarys terugs, -2000px Februarys terugs etc to have it already slid to that month, this code works when on the same page, but when its on the message page before loading up the per datum page it seems to lose this setting. I would really appreciate help on this – to be honest I've never used cookies, I dont know what they're for, am I on the right track, is there something else involved like location: hash? or is this what cookies are for? many thanks, Will Trying to add the text "• " to a text area, but it will just print the symbol. Is there a way you can print the string itself? Code: function add(myValue) {
//IE support
if (document.selection) {
desc.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
Code: ...onclick="add('• ')"
Hello I am pretty new to AJAX & I am making a simple program to input new text refresh inside the HTML element that has the id='result'. My Problem: - The AJAX script fails when I try to change the text inside 'result' using my code, sometimes a whole new page opens with the text I wanted to put inside the result HTML element. Sometimes I just get a notification that an error occured. - I believe it is because of my function state_changed & using the parameter element_id with the function getElementById(element_id).innerHTML = ...; - It should be easy to see where my problem occurs when you look at my code Any advice on why the script fails & how to fix it would be extremely helpful. Code:
var xmlHttp;
function ajax_compatible()
{
// Post: Returns an object if browser is AJAX compatible else false.
if (window.XMLHttpRequest)
{
// users web browser can support AJAX
return ( new XMLHttpRequest() );
}
else if (window.ActiveXObject)
{
// users web browser is IE6 and IE5
return ( new ActiveXObject("Microsoft.XMLHTTP") );
}
else {
alert("Unfortunately your browser does not support AJAX.");
return null;
}
}
function get_cookie(cookie_name)
{
if (document.cookie.length > 0)
{
c_start = document.cookie.indexOf(cookie_name + "=");
if (c_start != -1)
{
c_start = c_start + cookie_name.length+1;
c_end = document.cookie.indexOf(";",c_start)
if (c_end == -1)
{
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function add_comment()
{
// Post: Add user comment & rating to database and update new table row.
// DO WE NEED TO SEND COOKIE ASWELL OR IS IT ALREADY DONE???
xmlHttp = ajax_compatible();
if (xmlHttp == null) {
return;
}
var url = 'http://localhost:8000/cgi-bin/main.py';
alert("add_comment() running");
// Extract CGI variables to pass onto python script
var id = document.getElementById('videoID').value;
var video_id = 'videoID=' + id;
var rating = 'rating=' + document.getElementsByName('rating').value;
var comment = 'comment=' + document.getElementById('comment').value;
var add_rating = 'addRating=' + document.getElementById('addRating').value;
//var cookie = document.cookie;
cgi_var = video_id + '&' + rating + '&' + comment + '&' + add_rating; // + '&' + cookie;
// open python script
xmlHttp.open('POST',url,true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// Error is in below line
xmlHttp.onreadystatechange = state_changed(id);
// if I use the following line then it works
// xmlHttp.onreadystatechange = test;
xmlHttp.send(cgi_var);
}
function state_changed(element_id)
{
// Post: Use one function that will be used for each page update.
// This function sends the text returned by the python server script
// onto the browser(HTML element with the id 'element_id') to be displayed.
if (xmlHttp.readyState == 4)
{
document.getElementById(element_id).innerHTML = xmlHttp.responseText;
}
}
function test()
{
// Post: used to test where the problem occurs
// This function works
if (xmlHttp.readyState == 4)
{
document.getElementById('result').innerHTML = xmlHttp.responseText;
}
}
The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! 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. 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> 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 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?
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. 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 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 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. |
|||||||