JavaScript - How Do I Add Styles To A Tr Inside Of My Script
Hey guys, so i have a table, and it displays 6 rows, and the content inside of those rows. But i need to make it so that the middle row, has a border so it appears it is highlighted. Here is what i have
Code: function timer() { time=parseInt(player.getCurrentTime()) if (time%5==0&&oldtime!=time){ rows[1].innerHTML=rows[(time/5)+ -1].innerHTML rows[2].innerHTML=rows[(time/5)+ 0].innerHTML rows[3].innerHTML=rows[(time/5)+ 1].innerHTML rows[4].innerHTML=rows[(time/5)+ 2].innerHTML rows[5].innerHTML=rows[(time/5)+ 3].innerHTML oldtime=time } } Similar Tutorialsvar myDoc = app.documents[0] var mySel = app.selection[0] var myStory = mySel.parentStory; // Now we are pointing to the entire story var myHolidayStyle1 = "Holiday-Day_of_the_week" // Header 'day of the week' var myHolidayStyle2 = "Holiday-Month_and_date" // Header 'month and day' var myHolidayStyle3 = "Lead Paragraph" // Lead Paragraph 'default paragraph style' myStory.paragraphs[0].appliedParagraphStyle = myHolidayStyle1; //Header 'day of the week' and Month and day. myStory.paragraphs[1].appliedParagraphStyle = myHolidayStyle2; // Header 'month of the day' myStory.paragraphs[2].appliedParagraphStyle = myHolidayStyle3; // Lead Paragraph 'default paragraph style' //.appliedParagraphStyle = myDoc.paragraphStyles.item (myHolidayStyle1); //mySel.paragraphs[-1].insertionPoints[-1].paragraphs[0]; //Loops to change all the paragraphs to Paragraph body to ever paragraph (only problem is its limited to the entire page.) for (loop=0; loop<myStory.paragraphs.length; loop++) myStory.paragraphs[loop].appliedParagraphStyle = myHolidayStyle3; // Something simple to check if text 'drops out' of a certain text frame. currTextFrame = app.selection[0].parentTextFrames[0]; currPar = currTextFrame.paragraphs[0]; while (currPar && currPar.parentTextFrames[0] == currTextFrame) { currPar.appliedParagraphStyle = someStyle; currPar = currTextFrame.paragraphs.nextItem(currPar); } // Script for starting Spell Check var WshShell = app.menus.item(0); var WshShell2 = WshShell.submenus.item(1); var WshShell3 = WshShell2.submenus.item(1); var WshShell4 = WshShell3.menuItems.item(0); WshShell4.associatedMenuAction.invoke(); Would this work, do I got a pretty generalized idea of how it should be written. I want this script to apply data that comes in from a export that is imported into Indesign. Basically Holidaystyle1 and 2 are already preset in data from a program called Linear. But the day, month, and date, will change. So I hoping there is a way from the script above to make 1 and 2 be at the top of the page, and style 3 be the paragraph style that leads in the text until the next articles are reach that start with like say 'Friday' and 'November 12', and the routine repeats itself again, until there is no-more data. (**edit** Is there a way to tell the script to put a line break or empty line between Style 0 and style 1?) I hope this make sense. I would love for the script to do all the data at once, and at the end, I put a spell check function that checks to make sure the spelling and grammar are correct, before the script finally ends. Hi, I'm a javascript idiot, and I need a script to change two styles in two different elements based on the status of 2 radio buttons. Basically, I have 2 forms...#formTest and #formTest2. When radio button "search" value "1" is selected I need the display style for #formTest to be "block" and the display style for #formTest2 to be "none". When radio buton "search" value "2" is selected, I need the opposite to occur. (#formTest display style ="none" and #formTest2 display style="block") I have very buggy code which produces similar changes, but does other bad things, so won't work. Basically, the first selection change displays both forms, which after the first selection change works fine, unless you click anywhere else, in which case both forms are not displayed. I know I should use a function in the head and call it with an onselect or onclick event. I just don't know how. I appreciate any help anyone can offer me! My ugly (nonfunctional code is below) Search by Make: <input name="search" type="radio" value="1" onclick="document.getElementById('testForm').style.display='block';" onchange="document.getElementById('testForm').style.display='none';" checked="checked" /> <br /> Search by Category: <input name="search" type="radio" value="2" onclick="document.getElementById('testForm2').style.display='block';" onchange="document.getElementById('testForm2').style.display='none';" /> Thanks Again I have a form where I want certain fields to be visible only if the user clicks a checkbox on the form. Specifically, when Presented_to_Goverment_EntityCheckbox0 is checked, these fields should appear. Code: DropDownList ID="GovEntity" Officials_Last_NameTextBox0 Officials_First_NameTextBox0 Officials_TitleTextBox0 I created two different styles, show below; one makes the fields visible and one hides them Code: <style type="text/css"> .hideit { visibility: hidden; overflow: hidden; position: absolute; } .showit { visibility: visible; overflow: visible; position: static; } </style> Then I surrounded the fields with a div ID'ed as wdiv Code: <div class="hideit" id="wdiv"> Type Government Entity: <asp:TextBox ID="Type_Government_EntityTextBox" runat="server" Text='<%# Bind("Type_Government_Entity") %>' /> <br /> Officials Last Name: <asp:TextBox ID="Officials_Last_NameTextBox" runat="server" style="display:none" Text='<%# Bind("Officials_Last_Name") %>' /> <br /> Officials_First_Name: <asp:TextBox ID="Officials_First_NameTextBox" runat="server" Text='<%# Bind("Officials_First_Name") %>' /> <br /> Officials_Title: <asp:TextBox ID="Officials_TitleTextBox" runat="server" Text='<%# Bind("Officials_Title") %>' /> <br /> </div> I am using the following javascript to change the styles in response to an onclick event. Code: <script language="javascript" type="text/javascript"> function changeDiv(wdiv) { thediv = document.getElementById(wdiv); if(thediv.className == 'hideit'){ thediv.className = 'showit'; } else if (thediv.className == 'showit'){ thediv.className = 'showit'; }} </script> I call the Javascript in this line Code: <asp:CheckBox ID="Presented_to_Goverment_EntityCheckBox" onClick="ChangeDiv(wdiv)" runat="server" /> <br /> However nothing happens when I click the checkbox and if I look in Firefox's error console it says ChangeDiv is not defined. Thanks. <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout()"> <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout();"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout()"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout();"> None of these works. Why not? How can i link this hotspot area with a javascript function? ok, so i am working on this site www.davidmolnarphotography.com/blog i am trying to display the image description at the top of the page. i have accomplished this by using this code: Code: <div id="info_wrapper"> <div id="info_content"> <h6 class="cufon"><div id="info"><?php echo $all_photo_arr[0]->post_content; ?></div></h6> </div> </div> it works great! but it dosent switch when i switch the images ;( so i added this to the javascript that switches the pictures. Code: //switch image function SwitchImage(img){ $jpreloader.fadeIn("fast"); //show preloader var theNewImg = new Image(); theNewImg.onload = CreateDelegate(theNewImg, theNewImg_onload); theNewImg.src = img; document.getElementById("info").innerHTML= "<?php echo $all_photo_arr[0]->post_content; ?>" ; } it didnt work. if i replace "<?php echo $all_photo_arr[0]->post_content; ?>" with "img" it will pull the image url and switch but i cant figure out how to get the description ps... did i mention this is in wordpress Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith I have my code set up so whenever I hover over a picture it changes the background image and I want it so that when I leave the picture the background changes back to a black background but the background just stays as the image. I cant find out why its not changing back when I leave, it looks like everything should work. Code: var bgImage = new Array() bgImage[0] = "url(../Pictures/RM/Iker.jpg)"; bgImage[1] = "url(../Pictures/RM/Arbeloa.jpg)"; parseInt(event.clientX) - parseInt(movingDiv.style.left) function into(whoseCalling) { num =(document.getElementById(whoseCalling).id).substr(3); document.getElementById(whoseCalling).style.borderStyle = "double"; document.getElementById(whoseCalling).style.borderTopColor = "blue"; document.getElementById(whoseCalling).style.borderBottomColor = "red"; document.getElementById(whoseCalling).style.borderLeftColor = "yellow"; document.getElementById(whoseCalling).style.borderRightColor = "green"; document.getElementById(whoseCalling).style.borderWidth = "8px"; for (i=0; i<30; i++) { document.getElementById("img" + i).style.opacity = ".1"; } document.getElementById(whoseCalling).style.opacity = "1"; document.body.style.backgroundImage = bgImage[num] } function out(whoseCalling) { document.getElementById(whoseCalling).style.borderStyle = "solid"; document.getElementById(whoseCalling).style.borderColor = "red"; document.getElementById(whoseCalling).style.borderWidth = "3px"; document.body.style.backgroundColor = "black"; for (i=0; i<30; i++) { document.getElementById("img" + i).style.opacity = "1"; } } Is there any way that I can have multiple textboxes where the user can enter text (such as "black or green") and it would edit a css file, like this: Code: <style> body{ background-color:INPUT; } </style> <input type="text" name="bg"/> ? Would this work? or do I got the wrong function commands? How would I alter this to make it work, been staring at the screen for 8 hours..... var myInDesign = app var myDocument = app.activeDocument var myDocName = myDocument.name app.findParagraphStyle.caseSensitive = false; app.findParagraphStyle.wholeWord = false; app.findCharacterStyle.wholeWord = false; app.findCharacterStyle.caseSensitive = false; app.findParagraphStyle.findWhat = "SN.outabout.DAY-Gray"; app.changeParagraphStyle.changeTo = "SN.Holiday-Day_of_the_week"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.outabout.DATE"; app.changeParagraphStyle.changeTo = "SN.Holiday-Month_and_Day"; app.documents.item(0).changeParagraphStyle(); app.findParagraphStyle.findWhat = "SN.listingsLT"; app.changeParagraphStyle.changeTo = "SN.Holiday-Paragraph"; app.documents.item(0).changeParagraphStyle(); app.findCharacterStyle.findWhat = "SN.listingsBOLD"; app.changeCharacterStyle.changeTo = "SN.Holiday-Title_Paragraph"; app.documents.item(0).changeCharacterStyle(); //myInCopy = CreateObject("InCopy.Application.CS3") //Not sure if this would work, just crafting idea's. //var myDocument = myInCopy.ActiveDocument //var mySelection = myInCopy.Selection.Item(1) //var myStory = MySelection.ParentStory //var myText = myStory.Paragraphs.Item(1) //myStory.CheckOut //myText.ApplyParagraphStyle myDocument.ParagraphStyles.Item("zAPPROVED"), True //myStory.CheckIn Can I just do this with like a Nested If, then Statement? I would like to have a text link do 2 things: 1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you Having so much trouble with this entire slideshow... but this is the most recent development. For some reason the opacity change and border styles are not being added to the current thumbnail div that is selected, controlled by this code: Code: var current = 0; function swapimg( show ){ var piece = new Array(); piece[0] = '../assets/images/windycity/windycity01.gif'; title[0] = '[ Winners Paint the Town Red. Loosers Supply the Blood. ]'; piece[1] = '../assets/images/windycity/windycity02.gif'; title[1] = '[ One way or another they’re leaving on wheels. ]'; document.getElementById( 'featured' ).src = piece[show]; document.getElementById( 'featured' ).alt = title[show]; for( i = 0; i < meta.length; i++ ){ document.getElementById( 'item' + i ).style.opacity = '.5'; document.getElementById( 'item' + i ).style.border = 'solid 2px #2b2b2d'; } document.getElementById( 'item' + ( show ) ).style.opacity = '.99'; document.getElementById( 'item' + ( show ) ).style.border = 'solid 2px #0597af'; current = ( show ); And this is the html that it should be controlling: Code: <div class="thumbs"> <div class="listimg"><span onclick="swapimg(0);" ><img id="item0" src="../assets/images/windycity/windycity01_thumb.jpg" alt="" style="opacity: .99; border:solid 2px #0597af"/></span></div> <div class="listimg"><span onclick="swapimg(1);" > <img id="item1" src="../assets/images/windycity/windycity02_thumb.jpg" alt="" /></span></div> <div class="listimg"><a href="javascript:swapimg(2);" ><img id="item2" src="../assets/images/windycity/windycity03_thumb.jpg" alt="" /></a></div> </div> Any help would be great- I've been staring at this so long all the code has jumbled together in my head, and as soon as I tackle one problem I find another! Thanks! I'm fairly new to JS so sorry in advance if this is a stupid question! I have a textarea which uses ckeditor to make it a wysiwyg. I also have a bit of JS which watches the ckeditor and when a user types into it, whatever they type appears in a div elsewhere on the page. My ckeditor allows the text to be bold, italic, underlined and resized. When I apply styles to the text in the ckeditor textarea, I want them to reflected in the div which updates. At the moment only underline and resizing the text works. Choosing bold or italic does nothing the text updates ok, but no bold or italic. I've been told: "Ckeditor is using strong for bold, em for italics. My guess is that the browser or framework you are using doesn't apply bold and italics styles to those tags. You'll have to do that yourself." I've tested on several browsers, I checked in FF Opera Safari Chrome IE8 & IE9 and its the same in all them. Underline works, resize works but neither bold or italic do. (Interestingly in IE7 bold and italic do work as well as the size and underline! What's going on with that?!?) So I assume it is the framework? Can anyone tell me if this is right and if so, how do I go about doing that myself? heres the JS I'm using to update the div: Code: <label for="editor1">Background Story</label> <textarea id="editor1" name="editor1">This is sample text</textarea> <div id="story"></div> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); timer = setInterval('updateDiv()',100); function updateDiv(){ var editorText = CKEDITOR.instances.editor1.getData(); $('#story').html(editorText); }</script> hopefully this is what I need to fix a problem with my code too. I have a JS that resizes a few div widths on my page but when i also have the styles in a seperate file the JS does not work. this is my original code that works when i use the following line in my html. Code: function Div(id,hw,ud) { var div=document.getElementById(id); if (hw == "h"){ var h=parseInt(div.style.height)+ud; if (h>=150){ div.style.height = h + "px"; //alert(hw + h); } } else if (hw == "w"){ var w=parseInt(div.style.width)+ud; if (w>=150){ div.style.width = w + "px"; var inputdiv=document.getElementById('txt_message'); var inputw=parseInt(inputdiv.style.width)+ud; inputdiv.style.width = inputw + "px"; } } var chat_div = document.getElementById('div_chat'); chat_div.scrollTop = chat_div.scrollHeight; } Code: <div id="div_chat" style="height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555;"></div> if i was to use the following instead Code: <div id="div_chat"></div> with Code: #div_chat { height: 300px; width: 500px; overflow: auto; background-color: #CCCCCC; border: 1px solid #555555; } in my CSS file then the JS is fired (i added an alert() to my code to check this) but the widths are not changed. what changes should i make to my codes to make this work so i can have the styles in my CSS file instead of the main HTML file. edit: just thought you may need this part too so you can see what the call looks like. Code: <div> resize chat log <img src="resize_d.gif" width="21" height="9" onclick="Div('div_chat','h',20);" alt="height +"> <img src="resize_u.gif" width="21" height="9" onclick="Div('div_chat','h',-20);" alt="height -"> <img src="resize_r.gif" width="21" height="9" onclick="Div('div_chat','w',20);" alt="width +"> <img src="resize_l.gif" width="21" height="9" onclick="Div('div_chat','w',-20);" alt="height -"> </div> further edit: i have just tried the following JS but this time i get the following error... Webpage error details Message: Invalid procedure call or argument on the following line Code: div.currentStyle["width"] = w + "px"; Hi guys, it's a bit of a large question but I've been messing around with code for a while, and nothing seems to work... Basically, I need to make, a 'dynamic theme changer'. Basically what I need to do is have several drop down boxes, each one with some colours available as options. When you select one, it automatically (without refreshing the page) updates a certain element's style. For example, if you selected green as one colour and red as another, the element linked to the first drop-down would turn green, and the element linked to the second drop-down would turn red, and so on so forth. It then needs to have a 'save' button, which saves the settings, and adds a cookie with the style details so that when they visit the page again it's still personalized. There also needs to be a cancel button which discards all changes. I know it's a large question but I'm ripping my hair out over this one! =P Your help is much appreciated. How does one get inline styles placed by javascript to work in Google Chrome? Works in Firefox and Opera, I know that Chrome is receiving the correct data by using alerts, but it is not putting the style object in the HTML.
I have a neat js wyswyg editor that works great. However I can only use existing controls. I would like to add a drop-down style menu where I can define a unique css style for each option. Any suggestions? JS Code: Code: TINY={}; function T$(i){return document.getElementById(i)} function T$$$(){return document.all?1:0} TINY.editor=function(){ var c=[], offset=-30; c['cut']=[1,'Cut','a','cut',1]; c['copy']=[2,'Copy','a','copy',1]; c['paste']=[3,'Paste','a','paste',1]; c['bold']=[4,'Bold','a','bold']; c['italic']=[5,'Italic','a','italic']; c['underline']=[6,'Underline','a','underline']; c['strikethrough']=[7,'Strikethrough','a','strikethrough']; c['subscript']=[8,'Subscript','a','subscript']; c['superscript']=[9,'Superscript','a','superscript']; c['orderedlist']=[10,'Insert Ordered List','a','insertorderedlist']; c['unorderedlist']=[11,'Insert Unordered List','a','insertunorderedlist']; c['outdent']=[12,'Outdent','a','outdent']; c['indent']=[13,'Indent','a','indent']; c['leftalign']=[14,'Left Align','a','justifyleft']; c['centeralign']=[15,'Center Align','a','justifycenter']; c['rightalign']=[16,'Right Align','a','justifyright']; c['blockjustify']=[17,'Block Justify','a','justifyfull']; c['undo']=[18,'Undo','a','undo']; c['redo']=[19,'Redo','a','redo']; c['image']=[20,'Insert Image','i','insertimage','Enter Image URL:','http://']; c['hr']=[21,'Insert Horizontal Rule','a','inserthorizontalrule']; c['link']=[22,'Insert Hyperlink','i','createlink','Enter URL:','http://']; c['unlink']=[23,'Remove Hyperlink','a','unlink']; c['unformat']=[24,'Remove Formatting','a','removeformat']; c['print']=[25,'Print','a','print']; function edit(n,obj){ this.n=n; window[n]=this; this.t=T$(obj.id); this.obj=obj; this.xhtml=obj.xhtml; var p=document.createElement('div'), w=document.createElement('div'), h=document.createElement('div'), l=obj.controls.length, i=0; this.i=document.createElement('iframe'); this.i.frameBorder=0; this.i.width=obj.width||'500'; this.i.height=obj.height||'250'; this.ie=T$$$(); h.className=obj.rowclass||'teheader'; p.className=obj.cssclass||'te'; p.style.width=this.i.width+'px'; p.appendChild(h); for(i;i<l;i++){ var id=obj.controls[i]; if(id=='n'){ h=document.createElement('div'); h.className=obj.rowclass||'teheader'; p.appendChild(h) }else if(id=='|'){ var d=document.createElement('div'); d.className=obj.dividerclass||'tedivider'; h.appendChild(d) }else if(id=='font'){ var sel=document.createElement('select'), fonts=obj.fonts||['Verdana','Arial','Georgia'], fl=fonts.length, x=0; sel.className='tefont'; sel.onchange=new Function(this.n+'.ddaction(this,"fontname")'); sel.options[0]=new Option('Font',''); for(x;x<fl;x++){ var font=fonts[x]; sel.options[x+1]=new Option(font,font) } h.appendChild(sel) }else if(id=='size'){ var sel=document.createElement('select'), sizes=obj.sizes||[1,2,3,4,5,6,7], sl=sizes.length, x=0; sel.className='tesize'; sel.onchange=new Function(this.n+'.ddaction(this,"fontsize")'); for(x;x<sl;x++){ var size=sizes[x]; sel.options[x]=new Option(size,size) } h.appendChild(sel) }else if(id=='colorb'){ var sel=document.createElement('select'), colors=obj.colors||[['Black','black'],['Green','green','0.9em'],['Blue','blue','0.7em']], cl=colors.length, x=0; sel.className='tecustom'; sel.onchange=new Function(this.n+'.ddaction(this,"forecolor")'); for(x;x<cl;x++){ var colord=colors[x]; sel.options[x]=new Option(colord[0],colord[1]) } h.appendChild(sel) } else if(id=='style'){ var sel=document.createElement('select'), styles=obj.styles||[['Style',''],['Bordo','<u>'],['Header 1','<h1>'],['Header 2','<h2>'],['Header 3','<h3>'],['Header 4','<h4>'],['Header 5','<h5>'],['Header 6','<h6>']], sl=styles.length, x=0; sel.className='testyle'; sel.onchange=new Function(this.n+'.ddaction(this,"formatblock")'); for(x;x<sl;x++){ var style=styles[x]; sel.options[x]=new Option(style[0],style[1]) } h.appendChild(sel) }else if(c[id]){ var div=document.createElement('div'), x=c[id], func=x[2], ex, pos=x[0]*offset; div.className=obj.controlclass; div.style.backgroundPosition='0px '+pos+'px'; div.title=x[1]; ex=func=='a'?'.action("'+x[3]+'",0,'+(x[4]||0)+')':'.insert("'+x[4]+'","'+x[5]+'","'+x[3]+'")'; div.onclick=new Function(this.n+(id=='print'?'.print()':ex)); div.onmouseover=new Function(this.n+'.hover(this,'+pos+',1)'); div.onmouseout=new Function(this.n+'.hover(this,'+pos+',0)'); h.appendChild(div); if(this.ie){div.unselectable='on'} } } this.t.parentNode.insertBefore(p,this.t); this.t.style.width=this.i.width+'px'; w.appendChild(this.t); w.appendChild(this.i); p.appendChild(w); this.t.style.display='none'; if(obj.footer){ var f=document.createElement('div'); f.className=obj.footerclass||'tefooter'; if(obj.toggle){ var to=obj.toggle, ts=document.createElement('div'); ts.className=to.cssclass||'toggle'; ts.innerHTML=obj.toggletext||'source'; ts.onclick=new Function(this.n+'.toggle(0,this);return false'); f.appendChild(ts) } if(obj.resize){ var ro=obj.resize, rs=document.createElement('div'); rs.className=ro.cssclass||'resize'; rs.onmousedown=new Function('event',this.n+'.resize(event);return false'); rs.onselectstart=function(){return false}; f.appendChild(rs) } p.appendChild(f) } this.e=this.i.contentWindow.document; this.e.open(); var m='<html><head>', bodyid=obj.bodyid?" id=\""+obj.bodyid+"\"":""; if(obj.cssfile){m+='<link rel="stylesheet" href="'+obj.cssfile+'" />'} if(obj.css){m+='<style type="text/css">'+obj.css+'</style>'} m+='</head><body'+bodyid+'>'+(obj.content||this.t.value); m+='</body></html>'; this.e.write(m); this.e.close(); this.e.designMode='on'; this.d=1; if(this.xhtml){ try{this.e.execCommand("styleWithCSS",0,0)} catch(e){try{this.e.execCommand("useCSS",0,1)}catch(e){}} } }; edit.prototype.print=function(){ this.i.contentWindow.print() }, edit.prototype.hover=function(div,pos,dir){ div.style.backgroundPosition=(dir?'34px ':'0px ')+(pos)+'px' }, edit.prototype.ddaction=function(dd,a){ var i=dd.selectedIndex, v=dd.options[i].value; this.action(a,v) }, edit.prototype.action=function(cmd,val,ie){ if(ie&&!this.ie){ alert('Your browser does not support this function.') }else{ this.e.execCommand(cmd,0,val||null) } }, edit.prototype.insert=function(pro,msg,cmd){ var val=prompt(pro,msg); if(val!=null&&val!=''){this.e.execCommand(cmd,0,val)} }, edit.prototype.setfont=function(){ execCommand('formatblock',0,hType) }, edit.prototype.resize=function(e){ if(this.mv){this.freeze()} this.i.bcs=TINY.cursor.top(e); this.mv=new Function('event',this.n+'.move(event)'); this.sr=new Function(this.n+'.freeze()'); if(this.ie){ document.attachEvent('onmousemove',this.mv); document.attachEvent('onmouseup',this.sr) }else{ document.addEventListener('mousemove',this.mv,1); document.addEventListener('mouseup',this.sr,1) } }, edit.prototype.move=function(e){ var pos=TINY.cursor.top(e); this.i.height=parseInt(this.i.height)+pos-this.i.bcs; this.i.bcs=pos }, edit.prototype.freeze=function(){ if(this.ie){ document.detachEvent('onmousemove',this.mv); document.detachEvent('onmouseup',this.sr) }else{ document.removeEventListener('mousemove',this.mv,1); document.removeEventListener('mouseup',this.sr,1) } }, edit.prototype.toggle=function(post,div){ if(!this.d){ var v=this.t.value; if(div){div.innerHTML=this.obj.toggletext||'source'} if(this.xhtml&&!this.ie){ v=v.replace(/<strong>(.*)<\/strong>/gi,'<span style="font-weight: bold;">$1</span>'); v=v.replace(/<em>(.*)<\/em>/gi,'<span style="font-weight: italic;">$1</span>') } this.e.body.innerHTML=v; this.t.style.display='none'; this.i.style.display='block'; this.d=1 }else{ var v=this.e.body.innerHTML; if(this.xhtml){ v=v.replace(/<span class="apple-style-span">(.*)<\/span>/gi,'$1'); v=v.replace(/ class="apple-style-span"/gi,''); v=v.replace(/<span style="">/gi,''); v=v.replace(/<br>/gi,'<br />'); v=v.replace(/<br ?\/?>$/gi,''); v=v.replace(/^<br ?\/?>/gi,''); v=v.replace(/(<img [^>]+[^\/])>/gi,'$1 />'); v=v.replace(/<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>'); v=v.replace(/<i\b[^>]*>(.*?)<\/i[^>]*>/gi,'<em>$1</em>'); v=v.replace(/<u\b[^>]*>(.*?)<\/u[^>]*>/gi,'<span style="text-decoration:underline">$1</span>'); v=v.replace(/<(b|strong|em|i|u) style="font-weight: normal;?">(.*)<\/(b|strong|em|i|u)>/gi,'$2'); v=v.replace(/<(b|strong|em|i|u) style="(.*)">(.*)<\/(b|strong|em|i|u)>/gi,'<span style="$2"><$4>$3</$4></span>'); v=v.replace(/<span style="font-weight: normal;?">(.*)<\/span>/gi,'$1'); v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>/gi,'<strong>$1</strong>'); v=v.replace(/<span style="font-style: italic;?">(.*)<\/span>/gi,'<em>$1</em>'); v=v.replace(/<span style="font-weight: bold;?">(.*)<\/span>|<b\b[^>]*>(.*?)<\/b[^>]*>/gi,'<strong>$1</strong>') } if(div){div.innerHTML=this.obj.toggletext||'wysiwyg'} this.t.value=v; if(!post){ this.t.style.height=this.i.height+'px'; this.i.style.display='none'; this.t.style.display='block'; this.d=0 } } }, edit.prototype.post=function(){ if(this.d){this.toggle(1)} }; return{edit:edit} }(); TINY.cursor=function(){ return{ top:function(e){ return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY } } }(); Html code: Code: <script type="text/javascript" src="tinyeditor.js"></script> <body> <textarea id="input" style="width:400px; height:200px"></textarea> <script type="text/javascript"> new TINY.editor.edit('editor',{ id:'input', width:584, height:175, cssclass:'te', controlclass:'tecontrol', rowclass:'teheader', dividerclass:'tedivider', controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|', 'orderedlist','unorderedlist','|','outdent','indent','|','leftalign', 'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n', 'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'], footer:true, fonts:['Verdana','Arial','Georgia','Trebuchet MS'], xhtml:true, cssfile:'style.css', bodyid:'editor', footerclass:'tefooter', toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, resize:{cssclass:'resize'} }); </script> </body> Css code: Code: body { margin: 0; font: 12px Verdana,Arial; background-color: #FFFFFF; } #input {border:none; margin:0; padding:0; font:14px 'Courier New',Verdana; border:0} .te { border: 1px solid #bbb; padding: 0 1px 1px; font: 12px Verdana,Arial; margin: 0px; background-color: #FFFFFF; } .te iframe {border:none} .teheader {height:31px; border-bottom:1px solid #bbb; background:url(images/header-bg.gif) repeat-x; padding-top:1px} .teheader select {float:left; margin-top:5px} .tefont {margin-left:12px} .tesize {margin:0 3px} .testyle {margin-right:12px} .tedivider {float:left; width:1px; height:30px; background:#ccc} .tecontrol { float: left; width: 34px; height: 30px; cursor: pointer; background-image: url(images/icons.png); } .tecontrol:hover {background-color:#fff; background-position:30px 0} .tefooter {height:32px; border-top:1px solid #bbb; background:#f5f5f5} .toggle {float:left; background:url(images/icons.png) -34px 2px no-repeat; padding:9px 13px 0 31px; height:23px; border-right:1px solid #ccc; cursor:pointer; color:#666} .toggle:hover {background-color:#fff} .resize {float:right; height:32px; width:32px; background:url(images/resize.gif) 15px 15px no-repeat; cursor:s-resize} .tecustom { margin: 0 3px; } editor { cursor: text; margin: 5px } I have this idea that I want to do basically a "state capture" of a web page through javascript. Basically, a user will click a button, and the script will run, capturing all objects and their styles in a way that can be recreated later without referencing external CSS files and images. The script could export HTML or JS, but obviously all images would have to be data urls and all styles would have to be inline/hard coded. Does anyone know of a tool that do this or have any advice on where I would start? I'm thinking it would be very useful for a bug report submission on an application I'm working on. Sure, the user can upload a screenshot, but I'm trying to save them the step (and basically have a screenshot on every bug report). JS cannot do an actual image capture, so I think a full dom export would be just as good. Any ideas would be fantastic. Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance I have a script that works in seamonkey(my html editor) but when I use it in IE8 it says errors happen. Here's the code (the first line is on line 7 of the html file): Code: <script type="text/javascript"> function enlarge(imageNum) { var numToString = ""; if(parseInt(imageNum) < 10){ numToString = "0" + imageNum; } else { numToString = imageNum + ""; } window.open("images/LgScreenshot"+numToString+".jpg","Screenshot "+imageNum,"status=0,height=675,width=900,resizable=0"); } </script> And the errors: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GTB0.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.3; .NET CLR 3.0.30729) Timestamp: Wed, 10 Feb 2010 14:58:16 UTC Message: Object expected Line: 150 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html Message: Invalid argument. Line: 18 Char: 1 Code: 0 URI: http://samssc2site.co.cc/Features.html does any expert know how to pass parameters in the <script ..> tag? for instance; Code: <script type="text/javascript" src="script.js ?param1=val1¶m2=val2&etc "> in the javascript script.js, how would we read the params after the question mark? for example, google this; google shopping cart /v2_2/cart.js |