|
JavaScript - Please Explain Dom Range To Me.
Hi all,
First of all, I am not a student and this is not homework. Secondly, I've been programming in C, Motorola assembler, Intel assembler and even GWBasic for years. I recently (this year) got into Web / Javascript / PHP / HTML programming and I'm clawing up the learning curve. I know a fair amount, but have a long way to go. OK here's my problem: I've been trying to integrate a WYSIWYG editor (TinyMCE) into a bulletin board software package (PHPBB3). All is working well except for one big stumbling block that I've been battling for the past MONTH!...: I want to support the original BBCode system of PHPBB3 (mostly because of the ability for the admin to add custom BBCodes). So, what I need to do is this: (1) Select a range of text. (2) Either REPLACE it with "[tag]selection[/tag]" or else INSERT "[tag]" before and "[/tag]" after. (3) Lastly, the original selection must remain selected so that additional BBCodes can be wrapped without the need to re-select. The purpose of (3) is, say, the user clicks "bold" and "italic" and "underline".... all they should have to do is click those 3, not re-select each time. I've tried doing this: (1) get the selection range (2) get the selection text (3) delete the range contents (4) create two "contextual fragments" (one for the opening tag, the other for the closing tag). (5) create a <span> element containing the selection text (6) Insert it all into the range with range.insertNode() (7) finally select the new span element This seems to work fine, but Internet Explorer fails (it complains when I try to get the selection range). I just don't know what I'm doing wrong... and worse I'm not even sure if I'm attacking the problem the proper way. Any ideas would be greatly appreciated! Thanks! -- Roger Similar Tutorials<script type="text/javascript"> function display(action, id) { if (action == 'show') { document.getElementById("explanation"+id).style.display = "block"; document.getElementById("link"+id) = "javascript:display('hide', "+id+")"; } if (action == 'hide') { document.getElementById("explanation"+id).style.display = "none"; document.getElementById("link"+id) = "javascript:display('show', "+id+")"; } } </script> Hi all, Could someone explain the W3C DOM Range to me? Please note that I want to know how to do it with a standard W3C range, NOT an MSIE text range. Please don't simply point me to a web link ... I've seen all of those and I still don't get it. What I am trying to do is get a user's selection range (which I can already do), then modify it by adding information to the beginning and ending of the range. Specifically, I am trying to "wrap" a range with some extra text... like this: (1) This is a sentence written by the user. <- original (2) This is a sentence written by the user. <- user's selection (3) This is a [bbcode] sentence written [/bbcode] by the user. <- added text. note that the user's selection REMAINS SELECTED after the bbcode is added. What I need to know is how to add the information to the range. Do I change the range start and end points? Do I have to convert the text into an element (i.e. document.createElement('span')) before I insert it? Please explain to me how to use the DOM range... and do it in a "DOM range for dummies" manner, because I simply am not understanding what I see in web searches. Thanks! -- Roger I tried a a few tutorials but still can't get it, can any simply closures please?
hi, i would like to know what kind of mechanism does the bolded part trigger Code: G = function(a) {
if (i !== a) {
var b = i;
i = a;
for (a = 0; a < A.length; ++a)
A[a](b)
}
}
i dont want to know what the function does, just a wild guess, would it be the A array is replaced with functions names? R. i got this code from this thread http://www.codingforums.com/showthread.php?t=241809(THanks to jmrker) and i was wondering if you could explain how it works(The creating textboxes and the randomization). Edit: SOrry i forgot to include the code Code: <!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=241809
var maxSeats = 341;
var rndSeats = 10;
function randOrd() { return (Math.round(Math.random())-0.5); }
function createDisplay() {
var seating = [];;
var str = '';
for (var i=0; i<maxSeats; ++i) { seating.push(0); }
for (var i=0; i<maxSeats; i++) {
str += '<input type="text" size="1" id="s'+i+'" value="'+seating[i]+'">';
if ((i % 33) == 32) { str += '<br>'; }
}
document.getElementById('auditorium').innerHTML = str;
}
var sarr = [];
function randomize() {
for (var i=0; i<maxSeats; i++) { sarr[i] = i; }
sarr.sort(randOrd);
}
var tptr;
var ptr = 0;
function pauseDisplay() {
document.getElementById('s'+sarr[ptr]).value = 'x';
document.getElementById('s'+sarr[ptr]).style.backgroundColor = 'red';
if (ptr < (maxSeats-rndSeats)) { ptr++; tptr = setTimeout("pauseDisplay()",250); }
}
window.onload = function() {
createDisplay();
randomize();
tptr = setTimeout("pauseDisplay()",250);
}
</script>
</head>
<body>
<div id="auditorium"></div>
</body>
</html>
<script type="text/javascript"> var myString = "zero one two three four"; var mySplitResult = myString.split(" "); for(i = 0; i < mySplitResult.length; i++){ document.write("<br /> Element " + i + " = " + mySplitResult[i]); } </script> "split" function splits the string whenever it encounters "space". But please explain me how the strings are stored in "mySplitResult". And can we use Arrays for this program? If so, can you code it. Thanks in advance! So today I learned about the ()'s for functions so I was like always studying and I cannot understand how this snippit works, here it is. Quote: var say = function(what) { what('say function'); } var hello = function (who) { alert('Hello '+who); // outputs "Hello say function" } say(hello); So the say(hello); is activating the function. The (hello) should be passed for (what) so the function(who) is now inside the other or something? Can someone please list steps like 1-10 of how this code ends up saying "Hello say function" at the end? thank you so much I've been playing with this workarouns for literally years, but I'm getting fed up with it. Can anyone here suggest a better way of dealing with the following conundrum - or at least clarify why it occurs? When I have an external stylesheet I can't access the properties assigned therein. I'll give an example - HTML/CSS/JS are all inseperate files - but everything is called into the HTML as you can see. HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()"></div> <body> CSS (style.css) Code: #box {
width: 200px;
}
Javascript (js.js) Code: function showWidth(){
var box = document.getElementById('box');
alert(box.style.width);
}
Now the alert fired by showWidth() is empty - meaning that javascript can't see the width of the div element 'box' Now, if I assign width as part of the style attribute of the div javascript thus: HTML: Code: <head> <script type="text/javascript" src="js.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="box" onclick="showWidth()" style="width: 200px;"></div> <body> javascript can see this and the alert fired by showWidth() shows '200px'. So, I have two questions: 1. Why? 2. Is there a way of accessing these external style elements without having to define styles inline all the time? Cheers! Mike umm Hi i wrote a script with little help from internet but i dont truly understand it, can anyone please explain to me what every line in this script is doing ? im asking polite. var przed="zostalo do urodzin" var obecnie="dzisiaj urodziny" var Tablica=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") function odliczanie(r,m,d){ theyear=r;themonth=m;theday=d var dzisiaj=new Date() var rok=dzisiaj.getYear() if (rok < 1000) rok+=1900 var miesiac=dzisiaj.getMonth() var dzien=dzisiaj.getDate() var godzina=dzisiaj.getHours() var minuta=dzisiaj.getMinutes() var sekunda=dzisiaj.getSeconds() var dzisiajstring=Tablica[miesiac]+" "+dzien+", "+rok+" "+godzina+":"+minuta+":"+sekunda dataa=Tablica[m-1]+" "+d+", "+r dd=Date.parse(dataa)-Date.parse(dzisiajstring) dday=Math.floor(dd/(60*60*1000*24)*1) dgodz=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1) dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1) dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1) if(dday==0&&dgodz==0&&dmin==0&&dsec==1){ document.forms.count.count2.value=obecnie return } else document.forms.count.count2.value=dday+ " dni, "+dgodz+" godzin, "+dmin+" minut, i "+dsec+" sekund "+przed setTimeout("odliczanie(theyear,themonth,theday)",1000) } odliczanie(2015,1,20) I AM TRYING TO VALIDATE THE AGE RANGE SO THAT IT CAN ACCEPT AN AGE BETWEEN 16 - 99 BUT SOME HOW IM NOT GETTING THROUGH CAN ANYONE HELP ME WITH THAT PLEASE THANKS IN ADVANCE Code: <html>
<head>
<title>Registration</title>
<script type="text/javascript">
function validation(form) {
var invalid =" ";
var minlength = 6;
var emailchar =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var numchar =/(^\d+$)|(^\d+\.\d+$)/;
var userName = registration.u_name.value;
var firstName = registration.f_name.value;
var lastName = registration.l_name.value;
var yourage = registration.age.value;
var pw1 = registration.pwd.value;
var pw2 = registration.pwd1.value;
var em_adss = registration.e_address.value;
if (userName.length ==""){
alert("Please enter your USERNAME.");
return false;
}
if ((userName.length < 5) || (userName.length > 15)) {
alert("User name must be between 5 and 15 characters");
return false;
}
if (firstName.length ==""){
alert("Please enter your FIRSTNAME.");
return false;
}
if (lastName.length ==""){
alert("Please enter your LASTNAME.");
return false;
}
if (yourage.length ==""){
alert("Please enter your AGE.");
return false;
}
if (! registration.age.value.match(numchar)){
alert ("Please enter a valid age.");
return false;
}
if ((age < 16) && (age >99)){
alert ("Please enter and valid age range");
return false;
}
if (pw1 == '' || pw2==''){
alert ("Please enter password twice");
return false;
}
if (registration.pwd.value.length < minlength){
alert ("Your password must be at least" + minlength + "characters in length.");
return false;
}
if (registration.pwd.value.indexOf (invalid) > -1) {
alert("Spaces are not allowed in the password");
return false;
}
if (pw1 != pw2) {
alert ("Your passwords didn't match. Please re-enter");
return false;
}
if (em_adss.length ==""){
alert("Please enter your EMAIL.");
return false;
}
if (! registration.e_address.value.match(emailchar)){
alert("Stop playing games.\n Please enter a valid email address");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="registration" action="response.html" method="get" onSubmit="return validation(this);">
USERNAME:<br>
Between 5-15 characters.
<input name="u_name" type="text" size="35" maxlength="50">
<br><br>
FIRSTNAME:
<br>
Enter your first name.
<input name="f_name" type="text" size="35" maxlength="50">
<br><br>
LASTNAME:
<br>
Enter your last name.
<input name="l_name" type="text" size="35" maxlength="50">
<br><br>
AGE:
<br>
Enter your age. (16-99)
<input name="age" type="text" size="35" maxlength="50">
<br><br>
PASSWORD:
<br>
Enter your password.
<input name="pwd" type="password" size="35" maxlength="50">
<br><br>
VERIFY PASSWORD:
<br>
Verify your password.
<input name="pwd1" type="password" size="35" maxlength="50">
<br><br>
EMAIL:
<br>
Enter your email address.
<input name="e_address" type="text" size="35" maxlength="50">
<br><br>
<input type="submit" value="Submit Information" name="submit">
<input name="reset" type="reset" value="Reset Information">
</form>
</body>
</html>
Hi, Is it possible in Javascript to verify a range of IP's for open port 80 and show as a hiperlink? The ideia is similar to ip scanners but it's for a web spider... Thanks Reply With Quote 01-11-2015, 01:04 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Not possible IMO. Javascript cannot access or interact with the operating system. All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit. overImg=[];outImg=[]; outImg[0]=new Image();outImg[0].src="images/enter1.gif"; overImg[0]=new Image();overImg[0].src="images/enter2.gif"; outImg[1]=new Image();outImg[1].src="images/keio.gif"; overImg[1]=new Image();overImg[1].src="images/inria.gif"; function chgImg(img,type){ switch(type){ case "over":document.images[img].src=overImg[img].src;break; case "out":document.images[img].src=outImg[img].src;break; }} why are arrays used here ? Hi, I am hoping a JS expert might be able to explain this function. It is part of a larger programme. The program basically checks which profile the user selects and sets the html to display in certain colours. I am still trying to understand programming. The part I don't understand is the SetCookie("profile", i); What is this function telling the SetCookie function to do? Why does this work? Really grateful for any info.Thanks in advance. ************************************************* function updateProfile() { for (var i=0;i<document.form1.profile.length;i++) { if (document.form1.profile[i].checked) { SetCookie("profile", i); } } document.location="cookie3.html"; } Please, if you would explain this regex fragment [^>]* to me. Thank you for reading this post. (I know how to use the ThankYou button ) So I had the orginial code just switch images, I was under the impression I could use "var clientData" to make an array. However this is not working out the way I had hoped. Any help or explanation, greatly appreciated. It's very sloppy now! Don't judge. Here is my Javascript: Code: <script type="text/javascript">
var imgList = [
"../Assets/Images_Revised/40_kitchen.jpg",
"../Assets/Images_Revised/40_stair.jpg",
"../Assets/Images_Revised/C_front2.jpg",
"../Assets/Images_Revised/C_rear_side_combo.jpg",
"../Assets/Images_Revised/C_side.jpg",
"../Assets/Images_Revised/Y_combo.jpg",
"../Assets/Images_Revised/Y_window.jpg"
];
var clientData = [
"This is Data for Client 1";
"This is Data for Client 2";
"This is Data for Client 3";
"This is Data for Client 4";
"This is Data for Client 5";
"This is Data for Client 6";
"This is Data for Client 7"
];
var currentMain = 0;
var currentMainT = 0;
function Prev()
{
return ShowMain(currentMain-1);
return ShowMainT(currentMainT-1);
}
function Next()
{
return ShowMain(currentMain+1);
return ShowMainT(currentMainT+1);
}
function ShowMain(which)
{
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').src = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length;
if (PD2 != null ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length;
return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
</script>
Here is my area I am showing it. Code: <a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a ><a href="#" onclick="return ShowMain(1); return ShowMainT(1);">2</a ><a href="#" onclick="return ShowMain(2); return ShowMainT(2)">3</a ><a href="#" onclick="return ShowMain(3); return ShowMainT(3)">4</a ><a href="#" onclick="return ShowMain(4); return ShowMainT(4)">5</a ><a href="#" onclick="return ShowMain(5); return ShowMainT(5)">6</a ><a href="#" onclick="return ShowMain(6); return ShowMainT(6)">7</a ><a href="#" onclick="return Prev();" class="gallery"><</a ><a href="#" class="gallery" onclick="return Next();">></a> <span id="mainText">Click on a Client for Information.</span> PHP Code: <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementByClass("subMenuWrapper"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> Im trying to get the sub navigation to work in ie 6 but can get it working.. can anybody tell me what the above funtion does and how i might be able to apply it to my code... the navigation i have so far is on http://www.corkdesigns.ie/ep3/testing.html Hope someone can help or is the a simple hack i can use for ie 6 for this navigation http://www.corkdesigns.ie/ep3/navigation1.html Thanks OK, I work for a company that accepts donations. Currently, the donation page looks nothing like the rest of the site. So I recreated the page to look like the rest of the site. But when I do so, Chrome shows it as a "security risk". Someone looked at it and told me that it's because the .js files aren't compressed and the browser considers this a security risk. So how do I compress the files? Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> |
|||||||