|
JavaScript - Contenteditable Div Caret Position
I have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times.
Example Code: Code: <div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div> I require this code to work in: IE, Firefox, Opera, Safari and Chrome. Can anyone offer any help? Similar TutorialsHow do I get the pixel position of the caret in an editable IFrame? I am building a WYSIWYG editor which works for Gecko, Trident, Webkit and Presto. I am doing this by setting the designMode to 'on' for an IFrame. The problem that I am having is that I need to know the pixel position of the caret so I can determine if the caret is at the bottom of the page. The reason I want the pixel position is so that way I can auto scroll the scrollbar to that position. I should mention that we are using JavaScript. Any ideas appreciated. I am working on a function that will style text in a contenteditable div. For example, when Ctrl+b is pressed, <b></b> tags will be inserted around the currently selected text. The problem is that, unlike a textarea, a contenteditable div is not made up of a single text node. Code: function moobar(element,e){
if(e.keyCode == "17"){ //IF CTRL IS PRESSED
var selectionStart = window.getSelection().anchorOffset ;
var selectionEnd = window.getSelection().focusOffset ;
var range = document.createRange(), selection = window.getSelection();
var foobar = document.createElement('div');
if(selectionStart == selectionEnd){
//NO TEXT IS HIGHLIGHTED
//I'LL DEAL WITH THIS PART LATER
} else {
if(selectionStart > selectionEnd){
foobar.innerHTML = element.innerHTML.substring(0, selectionEnd );
element.innerHTML = element.innerHTML.substring(0, selectionEnd ) + "<b>" + element.innerHTML.substring( selectionEnd , selectionStart ) + "</b>" + element.innerHTML.substring( selectionStart );
} else {
foobar.innerHTML = element.innerHTML.substring(0, selectionStart );
element.innerHTML = element.innerHTML.substring(0, selectionStart ) + "<b>" + element.innerHTML.substring( selectionStart , selectionEnd ) + "</b>" + element.innerHTML.substring( selectionEnd );
}
range.setStart( element.childNodes[foobar.children.length+2] ,0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
}
}
Might there be a possible way to find out which child of the editable div the offsets are in? For example, if div1's innerHTML was "Some <b>bolded</b> text" and "ex" was highlighted, would there be a way to find out that anchorOffset is inside div1.childNode[2]? If not, then what I really need are just some general suggestions about where to go from here? Consider the following test page: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Contenteditable Test</title>
<style>
.test {} [contenteditable="true"] { outline:1px solid red; }
</style>
<script>
function listen(id, eventName, func) {
el = document.getElementById(id);
if (el.addEventListener)
el.addEventListener(eventName, func, false);
else
el.attachEvent('on'+eventName, func);
}
window.onload = function() {
listen('root', 'click', toggle);
listen('test', 'click', toggle);
}
function toggle(e) {
var el = getTarget(e).parentNode;
if (el.id == 'test') {
el.setAttribute('contenteditable', 'true');
} else {
el.setAttribute('contenteditable', 'false'); /* The style of the element should change accordingly. *** BUT *** it DOESN'T!!!! */
alert(el.getAttribute('contenteditable')); /* Confirm that contenteditable is 'false'. */
}
}
function getTarget(e) {
return (window.event == undefined ? e : window.event).target;
}
</script>
</head>
<body>
<div id="root">
<h1>Contenteditable Test</h1>
<div id="test" contenteditable="false">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
</div>
</body>
</html>
The desired behaviour is: When you click on the test div, the content should become editable (and the style of the div should change accordingly - the test div gets a red outline). When you click outside the test div, the content should become not-editable (and the style of the div should change accordingly - the test div loses its red outline). When you click on the test div, its contenteditable attribute is set to 'true' and it becomes editable, as expected. When you click outside the test div, its contenteditable attribute is set to 'false', as expected, BUT its style does not change accordingly. I would expect it to change because the red outline style is predicated upon contenteditable being 'true' for the element, but the red outline remains even when contenteditable is no longer 'true'. By the way, I have tried 'false', false and 0, all to no avail. Obviously, I can force the style of the element when it is 'deselected', but that is a very ugly hack and will cause a headache if/when I want to change the contenteditable style in the future (I don't want to have to do it in several places - it should be possible to do it just in the CSS). Any ideas why this is happening? I've got the following problem. In IE if a contenteditable element is nested inside a hyperlink, clicking on the element prevents the hyperlink default behavior, i.e. navigation to another document. In FF it works fine. How can I solve the problem? Just removing the contentEditable attribute is not a solution since I want this behavior (navigation to another document) only when user clicks the content-editable element with pressed Ctrl key. Thanks. I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
Hi, i am simply trying to alert the left position of a css layer. Javascript: Code: var Element = document.getElementById('box');
alert(Element.style.left);
CSS Code: #box {position:absolute;
left:150px;
top:150px;
background-color:blue;
height:100;
width:100;}
HTML Code: <div id="box"> </div> The problem is the alert is blank and i can't understand why. thanks What is "lb-position" and how is it used? It's used in a lightbox tutorial, and in looking for an explanation I've found it in a handful of places, but I don't know what it is or what it does. Thank you.
This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form["F"+first].value = temp[0];
sel.form["F"+(first+1)].value = temp[1];
sel.form["F"+(first+2)].value = temp[2];
}
</script>
<form method='post'>
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>
Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>
<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>
<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
is it possible to make the mouse be at a given position on the screen using javascript for example i am writing a element resize script and i would like to have it so when u click on the resize button the cursor moves to the bottom right corner of the element for the starting position
So, here is my question: Is there some possibility to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . I am creating calander control for the 1 year using javascript.the day in which click a table is pop up at absloute position . i want table is popup at relative position where selected date is click. Here is my code <script language="javascript" type="text/javascript"> var k=0; var month; var pagedata; var check=0; var tabledata = ''; var counter = 0; var editVal=0; var editRow=0; var selecteditemcode=""; var counter=0; function day_title(day_name) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day_name)); mycurrent_cell.appendChild(currenttext); } function makeArray(n) { this.length=n; for (var i = 1; i <= n; i++) this[i] = 0 return this } var flag=false; var index; var tempdata; var mybody ; var rowData = new Array(); var colData = new Array(); var mytable function fill_table(m_name,m_length,mm) { counter+=1; if(k==0) { alert(this_month); k=this_month; } else { alert(k); k +=1; if(k>12) { alert(k); alert(this_year); if(flag==false) { this_year+=1; flag=true; alert("IN "+k); alert("IN "+this_year); } } } mybody = document.getElementById('showtb'); mytable= document.createElement("table"); mytable.setAttribute("id",+String(m_name)+"_"+String(this_year)); mytablebody = document.createElement("tbody"); head_row = document.createElement("tr"); head_cell = document.createElement("td"); headtext = document.createTextNode(String(m_name)+"_"+String(this_year)); head_cell.appendChild(headtext); head_cell.setAttribute('colSpan','7'); head_row.appendChild(head_cell); head_cell.setAttribute('className','titlebar'); head_row.appendChild(head_cell); mytablebody.appendChild(head_row); mycurrent_row = document.createElement("tr"); counter+=1; mycurrent_row.setAttribute("id",String(counter)); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sun"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Mon"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Tue"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Wed"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Thu"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Fri"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sat"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mytablebody.appendChild(mycurrent_row); day=1 if(m_name=="February" ) { if((this_year%4)==0) { m_length +=1; } } pagedata=''; var ddl; counter +=2; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); for (var i=1;i<start_day;i++) { if(start_day<8) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(" "); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell.setAttribute('className','promptbox'); mycurrent_row.appendChild(mycurrent_cell); } } var blnFlagFirstline=false; for (var i=start_day;i<8;i++) { blnFlagFirstline=true; alert("this_day "+ this_day+ " i "+ i); if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { if(blgFlagButtons==false) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(""+String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++; } if(blnFlagFirstline==true) { mytablebody.appendChild(mycurrent_row); } counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); while (day <= m_length) { for (var i=1;i<=7 && day<=m_length;i++) { if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++ } mytablebody.appendChild(mycurrent_row); counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border", "10"); //mytable.style.background="aliceblue"; mytable.style.fontFamily="Verdana"; //mytable.style.width="1000px"; mytable.setAttribute("className","promptbox"); mytable.style.fontSize="10pt"; start_day = i } var blgFlagButtons; function fnCalender() { blgFlagButtons=false; month=new makeArray(12) month[1]="January" month[2]="February" month[3]="March" month[4]="April" month[5]="May" month[6]="June" month[7]="July" month[8]="August" month[9]="September" month[10]="October" month[11]="November" month[12]="December" month_length = new makeArray(12) month_length[1]=31 month_length[2]=28 month_length[3]=31 month_length[4]=30 month_length[5]=31 month_length[6]=30 month_length[7]=31 month_length[8]=31 month_length[9]=30 month_length[10]=31 month_length[11]=30 month_length[12]=31 today = new Date() today= new Date("July 13, 2008");//'Wed Oct 29 00:00:00 UTC+530 2008' this_day = today.getDate() this_month = today.getMonth()+1 this_year = today.getYear() this_year = (this_year< 1000) ? this_year + 1900 : this_year; begin_date = new Date("July 01, "+this_year) if((this_year%4)==0) { start_day = begin_date.getDay()+1 } else { start_day = begin_date.getDay()+1 } var MhVal; if(this_day>1) { MhVal=this_month; for(var i=1; i<=13;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } else { MhVal=this_month; for(var i=1; i<=12;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } if (start_day == 1){ start_day = 8 } if(this_day>1) { for (var m = 1;m<=13;m++){ //alert('month[m] - '+mon[m]+' month_length[m] - '+monlen[m]+' m - ' +m); fill_table(mon[m],monlen[m],m) // tabledata += "id"+counter+"="+pagedata; } } else { for (var n = 1;n<=12;n++){ fill_table(mon[n],monlen[n],n) } } } </script> <script language="javascript" type="text/javascript"> function fnDivertedFlight() { prompt3('', 'Roster','Diverted Flight Detail </B>', 'fnDivertedValues'); } function prompt3(promptpicture, prompttitle, message, sendto) { var posx = 0; var posy = 0; var e = window.event; if(e!=null) { if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } } else { posx = 100; posy = 100; } promptbox = document.createElement('div'); promptbox.setAttribute ('id' , 'prompt') document.getElementsByTagName('body')[0].appendChild(promptbox) promptbox = eval("document.getElementById('prompt').style") promptbox.position = 'absolute' promptbox.top = posy promptbox.left = posx promptbox.width = 430 promptbox.border = 'outset 1 #bbbbbb' //Here I am open popup Tabletable } function fnDivertedValues(value1,value2,value3,value4,value6,value7,value5) { alert(value1+" , "+ value2+" , "+value3+" , "+value4+" , "+value5); is there any way to fix the position of a draggable div in a table which is having fixed width and height??
Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol hi! i would just like to say first of all, that i only use forums for help unless i've exacerbated all other forms of help as i am such a javascript noob! so please bear with my while i try to explain my problem... i've isolated the javascripts to this page > http://nang-nang.net/tumblr/blog/help.html in this example the plant image is using lightbox 2 and the bird.gif is using prototip2 to create a tooltip (that displays my latest tweet) (i should mention that these scripts will be used to pimp out my tumblr blog/portfolio http://bubblejam.tumblr.com eventually) the problem: i need the tooltip to stay put! i've managed to put the bird in a <div style="position:fixed..." etc so that's fine. but the tooltip isn't fixed and moves as the page scrolls down! can anyone take a look at what javascript i've got so far and fingers crossed there's a simple solution! thanks!! Theoretically this code was supposed to be ok isn't it? But nothing is happening! help! Hello I am hoping to position some JavaScript on a Web page. Would I use something like this: CSS Code: #diagram {
margin-left: 200px;
margin-top: 100px;
}
HTML
<script>JavaScript code here</script>
<div id="diagram"
</div>
Thanks for any advice. hi all, I was wondering if someone could help me about my problem I want to change the position of my div when the user scroll the page. Example: <div style="position:absolute;bottom:10px;> Scrolling text </div> I want to change the position to fixed when the user scroll the page using javascript. hope you could help. My overall challenge is to make up for what I consider to be a design flaw in how Google Ad Manager works. What I am trying to accomplish is create a way for an advertiser to randomly rotate through whichever ad formats are available, rather than get locked into a particular ad slot location. This has required several steps, most of which I've been able to work out by myself, and now I'm down to what I expect is the last big issue. Because Google Ad Manager pairs up the highest priority advertiser with the first loaded ad slot script, the most important task was to randomize the load order of the scripts. Doing this, however, necessitates pairing up those scripts with the appropriate space set aside for them on the page, more or less after the fact. The code I'm having trouble with is the part where I try to move the node containing the active script to the its desired location and is showing just about every permutation of result except the one that I want, depending on browser. Code: var moveithere = document.getElementById(newmodid); moveithere.appendChild(divinloader[i]); moveithere.appendChild(scriptelement[i]); Not surprisingly, IE breaks as soon as it gets to this point and nothing happens with the divinloader[i] node OR the scriptelement[i] node - I have seen some references that it's not likely to like this and perhaps some recommendations about how to handle it, so I'm not too concerned about that just yet. Firefox doesn't throw any kind of an error, but neither does the scriptelement[i] node do anything at all, even though the divinloader[i] node migrates to where I want it. Chrome comes the closest to working - the script runs, but not in the location that I want. Although I don't expect it's been an exhaustive search, I have tried a number of other approaches and this one has seemed to get me the closest to the desired result with the simplest coding. As to what's currently acceptable coding and what's not, I won't pretend to have a clue. To see the full code in action, what it does, what I'm trying to do and to check for errors (likely) or offer suggestions on how I could get there more easily just use the following - I've substituted simpler code so that you don't have to pull down the actual Google Ad Manager scripts but it seems to work exactly the same and shows what I'm trying to do anyway. Hopefully there aren't any unnecessary artifacts still present. Code: <html>
<head>
<title>Testing arrayed dynamic randomized script loading</title>
</head>
<body>
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFRectangle-Main
-->
<div id="atfrectangle-outer"> Tell 'em TIO sent you (rectangle) <div id="atfrectangle-inner">
</div> </div>
<!-- END OF TAG FOR SLOT ATFRectangle-Main
-->
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFWideSkyscaper-Main
-->
<div id="atfwideskyscaper-outer"> Tell 'em TIO sent you (skyscaper)<div id="atfwideskyscaper
-inner">
</div></div>
<!-- END OF TAG FOR SLOT ATFWideSkyscaper-Main
-->
<!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT FullBanner-Main
-->
<div id="fullbanner-outer"> Tell 'em TIO sent you (banner)<div id="fullbanner-inner">
</div></div>
<!-- END OF TAG FOR SLOT FullBanner-Main
-->
<h1>Load up the array with ad formats</h1>
<script type = "text/JavaScript">
// create an array to hold information about the various ad formats
var adformat = new Array();
// load the array with the appropriate ad format data
adformat[0] = "FullBanner";
adformat[1] = "ATFRectangle";
adformat[2] = "ATFWideSkyscaper";
// make a notation about what is coming next (and show successful conclusion of previous
steps)
document.write("<h2>Order for the ad formats as loaded into the array</h2>");
// declare the variable to use for counting
var i = 0;
// begin looping through as many times as needed to go through entire array and write out
each ad format
for (i in adformat) {
document.write("<p>" + adformat[i] + "<br> </p>");
}
// end loop for writing out the list of ad formats loaded into the array
// randomize the order of the ad format list
randadload = adformat.sort (function(){
return 0.5-Math.random()
})
// make a notation about what is coming next (and show successful conclusion of previous
steps)
document.write("<h2> Order for the ad formats after randomization</h2>");
// declare the variable to use for counting
var i = 0;
// begin looping through as many times as needed to go through entire array and write out
each ad format in the new list order
for (i in randadload) {
document.write("<p>" + randadload[i] + "<br> </p>");
}
// end loop for writing out the randomized list of ad formats
// make a notation about what is coming next (and show successful conclusion of previous
steps)
document.write("<h2>Creating dynamic module names and script-calling variables</h2>");
// declare variables that might be needed
// create an array to hold module names
modname = new Array();
// create array to hold the names of the google script, partial and full
googscript = new Array();
fullgoogscript = new Array();
// create an array to hold the id to be used for the script loader element
loaderid = new Array();
scriptloaderid = new Array();
// create an array to hold the id for the module
modid = new Array();
// create an array to hold the name of the id for the script inside module
modscriptid = new Array();
// create an array to hold the name of the id for the outer DIV tag
divoutloader = new Array();
// create an array to hold the name of the id for the inner DIV tag
divinloader = new Array();
scriptnodeloader = new Array();
scriptelement = new Array();
// declare the variable to use for counting
var i = 0;
// create a variable to hold the current script number
var scriptnum = 0;
// begin looping through number of elements in the array
for (i in randadload) {
// advance the counter by one increment for each iteration in the loop
scriptnum ++;
// create a script name based on the name of the ad format
googscript[i] = randadload[i] + "-Main";
// change the ad format name to all lower case
loadlc = randadload[i].toLowerCase();
// create a module name based on the name of the ad format
modname[i] = "main" + loadlc;
// create a DIV id name for the loader element based on the name of the ad format
loaderid[i] = loadlc + "_loader";
// create a script id name for the loader element based on the name of the ad format
// scriptloaderid[i] = loadlc + "_scriptloader"'
// create a DIV id name for the inner DIV tag based on the name of the ad format
modid[i] = loadlc + "-inner";
// create a script id name based on the name of the ad format
modscriptid[i] = loadlc + "-script";
//write out all the names just created to check for successful completion and for
accuracy
document.write("<p>Module name is " + modname[i] + " and script name is " +
googscript[i] + " and loader ID is " + loaderid[i] + " and module id is " + modid[i] + "<br>
</p>");
// create a DIV tag to load the script into
divinloader[i] = document.createElement("div");
divinloader[i].setAttribute("id", loaderid[i]);
divinloader[i].style.display="block";
// use the DIV loader to write out the status of the scripts (ultimately hope to LOAD
the scripts)
divinloader[i].innerHTML = "<p>Pretend loading script " + scriptnum + " now... <br>
GA_googleFillSlot(" + googscript[i] + ");" ;
// create the content to be included in the script to be loaded
fullgoogscript[i] = 'document.write("<p> This is actually a real script loading ' +
googscript[i] + ' as a stand-in for a Google script loading " + randadload[i] + "
advertisements.</p>");';
// creating a script element
scriptnodeloader[i] = document.createTextNode(fullgoogscript[i]);
scriptelement[i] = document.createElement("script");
scriptelement[i].type = "text/javascript";
scriptelement[i].setAttribute("id", scriptloaderid[i]);
scriptelement[i].appendChild(scriptnodeloader[i]);
// if this line runs, results in [object HTML scriptelement]
// divinloader[i].innerHTML = scriptelement[i];
newmodid = modid[i];
newmodscriptid = modscriptid[i]
// want to use this to move the script up to its final location
// document.getElementById(newmodid).appendChild(divinloader[i]);
// document.getElementById(newmodscriptid).appendChild(scriptelement[i]);
var moveithere = document.getElementById(newmodid);
moveithere.appendChild(divinloader[i]);
moveithere.appendChild(scriptelement[i]);
}
// end looping through elements in the array
</script>
</body>
</html>
I appreciate any insights you can provide - feel free to call me an idjit if necessary, but please be specific if you do. Thanks, Kimm So I have created a simple calendar (http://www.akapa.org/newsite/events/calendar.htm) and I have a bunch of "More Info" buttons I made from cells. In a table cell to the right are a bunch of hidden DIV's that all appear when you rollover a "More Info" button, obviously giving more details about the calendar date/event. My problem is that I have to give an exact "top" css position to every one of these hidden div's every single time I add a new event to the calendar. I want to dynamically tell each hidden div to match the "top" css position to match the top position of each "More Info" button. How do I do that? |
|||||||