JavaScript - How Can I Alter This Code To Display Captions From Alt Tags
Hello all,
Looking for some help to alter a gallery script, very kindly provided for use he http://monc.se/kitchen/80/lightweigh...ith-thumbnails At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed. Here is the javascript: Code: var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); Here is the HTML, which I have enclosed within a div box positioned absolutely on the page: Code: <ul id="gallery"> <li><img src="images/je_1.jpg" alt="Josef & Erika 1"></li> <li><img src="images/roland_ads_2.jpg" alt="Roland Ads"></li> <li><img src="images/cd_2.jpg" alt="CD Cover 2"></li> <li><img src="images/cd_1.jpg" alt="CD Cover 1"></li> <li><img src="images/je_3.jpg" alt="Josef & Erika 3"></li> <li><img src="images/je_2.jpg" alt="Josef & Erika 2"></li> <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster"></li> <li><img src="images/je_4.jpg" alt="Josef & Erika 4"></li> <li><img src="images/inside_1.jpg" alt="Inside Magazine"></li> <li><img src="images/oceanen_4.jpg" alt="Oceanen"></li> </ul> And here is the CSS: Code: /* general styling for this example */ * { margin: 0; padding: 0; } body { padding: 20px; } /* begin gallery styling */ #jgal { list-style: none; width: 170px; } #jgal li { opacity: .7; float: left; display: block; width: 45px; height: 45px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 0px; left: 200px; display: none; border: solid; border-width:1px; border-color:#DDDDDD; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } /* styling without javascript */ #gallery { list-style: none; display: block; } #gallery li { float: left; margin: 0 10px 10px 0; } #capt <!--[if lt IE 8]> <style media="screen,projection" type="text/css"> #jgal li { filter: alpha(opacity=50); } #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); } </style> <![endif]--> I don't really know anything about javascript at all, I'm afraid, so any help anyone can give will be very gratefully received. Similar TutorialsHi all, For this page he http://morrish.juiceserver.co.uk/plo...=136&prop_id=9 I have the following code for the photo gallery: Code: var thumbProportion = .17 // thumbnails are 32% of their full size; var IE = false; if (navigator.appName == "Microsoft Internet Explorer"){IE = true;} function swapImg(nImg,nSwapImgClass,nFullSizeImg,nCaption){ var thumbImg = nImg; var thumbImgAlt = thumbImg.alt; var origFullWidth = nFullSizeImg.width; var origFullHeight = nFullSizeImg.height; var tempImgHolder = nFullSizeImg.src; var origFullAlt = nFullSizeImg.alt; nFullSizeImg.src = thumbImg.src; thumbImg.src = tempImgHolder; nSwapImgClass.style.width = nFullSizeImg.width + "px"; thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px"; thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px"; thumbImg.alt = origFullAlt; thumbImg.title = origFullAlt; nFullSizeImg.alt = thumbImgAlt; nFullSizeImg.title = thumbImgAlt; nCaption.firstChild.data = thumbImgAlt; } function init(){ var nImg = document.getElementById('fullSizeContainer'); //if (!nImg) return var fullSizeImg = nImg.getElementsByTagName('img')[0]; //if (!fullSizeImg) return nCaption = nImg.getElementsByTagName('div')[0]; IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; for (i=0; i<nRule.length; i++) { if (nRule[i].selectorText == ".swapImg") { var swapImgClass = nRule[i]; nRule[i].style.width = fullSizeImg.width + "px"; } } //var nGall = document.getElementById('photoGallery'); //var nGallery = nGall.getElementsByTagName('a'); var nGallery = document.getElementById("photoGallery").getElementsByTagName("a"); for (i=0; i<nGallery.length; i++) { nGallery[i].onclick = function() { swapImg(this.firstChild,swapImgClass,fullSizeImg); nCaption.innerHTML = this.firstChild.alt; return false; } nGallery[i].href = "#"; } } IE ? attachEvent('onload', init) : addEventListener('load', init, false); The pictures change fine, but I can't get the captions to change with them. Any help anyone can give would be massively appreciated Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code: var categoryLink=new Array(); var counter; var link = ""; categoryLink[0] = ""; categoryLink[1] = ""; categoryLink[2] = ""; counter = "0"; $(document).ready(function() { $(".atonal").live('click', function() { { alert("sometext"); if (categoryLink[0]=="") { categoryLink[0] = "atonal"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[0] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); $(document).ready(function() { $(".tonal").live('click', function() { alert("sometext"); if (categoryLink[0]=="") { categoryLink[0] = "tonal"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[0] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); $(document).ready(function() { $(".being").live('click', function() { alert("sometext"); categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); if (categoryLink[1]=="") { categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[1] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); $(document).ready(function() { $(".doing").live('click', function() { alert("sometext"); if (categoryLink[1]=="") { categoryLink[1] = "doing"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[1] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); $(document).ready(function() { $(".abstract").live('click', function() { alert("sometext"); if (categoryLink[2]=="") { categoryLink[2] = "abstract"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[2] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); $(document).ready(function() { $(".documentary").live('click', function() { alert("sometext"); if (categoryLink[2]=="") { categoryLink[2] = "documentary"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); else { categoryLink[2] = ""; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]); } }); }); and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! I just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: www.equisearch.com. I like the features area on this website. Here is my code so far: Code: <html> <head> <script type="text/javascript"> // Modified for: http://codingforums.com/showthread.php?p=949514#post949514 var ImgPtr = -1; // -1 for first pass only var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/'; ImgArray = [ // format: ['imageName','Comments about image'] ['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'], ['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'], ['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>'] // Note: No comma after last entry ]; var intervalAction; function ShowSlide(slide_num) { document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0]; document.getElementById('mypic').alt = ImgArray[slide_num][1]; document.getElementById('Caption').innerHTML = ImgArray[slide_num][1]; } function slideshow() { ImgPtr++; ImgPtr = ImgPtr % ImgArray.length; // document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr; ShowSlide(ImgPtr); } onload = function() { slideshow(); intervalAction = setInterval("slideshow()",3000); } </script> </head> <body> <div style="width:300;text-align:left;margin-left:auto;margin-right:auto"> <div id="Caption" class="duh"></div> <img src="http://i200.photobucket.com/albums/aa216/Jilldear/pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398"> <br /> </div> </body> </html> Hello I'm trying to setup and image slideshow with captions. I can't it to work so far. Can someone help me. Here is a code snippet: Javascript var crossFadeDuration = 3 var Pic = new Array() Pic[0] = '1.gif' Pic[1] = '2.gif' var t var j = 0 var p = Pic.length var preLoad = new Array() for (i = 0; i < p; i++){ preLoad[i] = new Image() preLoad[i].src = Pic[i] } function runSlideShow(){ if (document.all){ document.images.SlideShow.style.filter="blendTrans(duration=2)" document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)" document.images.SlideShow.filters.blendTrans.Apply() } document.images.SlideShow.src = preLoad[j].src if (document.all){ document.images.SlideShow.filters.blendTrans.Play() } j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', slideShowSpeed) } Html <body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()"> <img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" /> Hi, I've written a function to change the font, this is working in IE but not in FF or Chrome. No errors come up in Firebug. Once this is working in both browsers I will change the function to gradually increase the size of the font to make it look as if the font is growing. This is why I haven't just assigned a class to the text. URL of the site with the script is http://dev.creativepanda.co.uk/ Function in question is - Code: function alterFontSize(){ var sizeElem = document.getElementById('sizeTest').style; if(reverse == 0 && currentFontSize < endFontSize){ currentFontSize = endFontSize; sizeElem.fontSize = currentFontSize; } } Thanks for any help. Simple enough, one would think, but I'm rusty and haven't done this kind of thing in years. All I need to do is take the current page's url and replace/add a bit into the URL at the appropriate place. For Example, if this is the Current Page URL: Code: http://www.mysite.com/section/main.php?p=1 I want to be able to use the bookmarklet to change it to: Code: http://www.mysite.com/section2/main.php?p=1 This is all I've got for it so far. Probably botched that up too. Code: javascript:(function(){var%20a=document.URL.split("/section/");var%20newURL="www.mysite.com/section2/"+a;}) Hi all, After over a month of pounding my head against the wall (and getting ZERO help from the TinyMCE "support" forum), I have finally come up with a simple JS function (for the TinyMCE editor) that will wrap a selection with any open and any close tag one wishes, and keeps the selected text selected for further wrapping if desired. Here's the code (commented heavily): Code: /* -------- FOR TINYMCE ONLY -------- * wrap selection with BBCode or other tags * (c) 2010 r.a.krupski <krupski@roadrunner.com> * free software - use, modify, distribute freely ** -------- FOR TINYMCE ONLY --------*/ function tinyWrap(open_tag, close_tag) { var ed = (tinymce.activeEditor || opener.tinymce.activeEditor); /* get editor instance */ var selection = ed.selection.getContent(); /* get user selection, if any */ var temp_name = new Date().getTime().toString(36).toLowerCase(); /* generate a unique string */ var span_open = '<span id="' + temp_name + '">'; /* generate '<span id="unique">' */ var span_close = '</span>'; /* generate closing '</span>' */ selection = selection.replace(/<p>/g,'').replace(/<\/p>/g,'<br />'); /* convert <p></p> to <br /> */ if (selection.substr(selection.length-6) === '<br />') { selection = selection.substr(0, selection.length-6); /* strip last <br /> if present */ } /* create complete selection replacement: '<span id="unique">OPEN_TAGselectionCLOSE_TAG</span>' */ var content = open_tag + span_open + selection + span_close + close_tag; ed.execCommand('mceReplaceContent', false, content); /* replace selection with new */ var span_elem = ed.dom.get(temp_name); /* get the element of the temp span */ ed.selection.select(span_elem); /* select (highlight) the selection span */ ed.dom.remove(temp_name, true); /* remove the span, leave it's highlighted text behind(true) */ ed.focus(); /* insure editor has focus */ return; /* taa-daa! all done! */ } Hope this helps someone - I've got a few more gray hairs because of TinyMCE... hopefully this will spare others my agony...... -- Roger Can anyone recommend a good photo gallery? My client would like to be able to upload her own photos and wants to be able to add captions (a must). Can anyone recommend a good canned galley, or let me know where I could find some code? I found an exellent free gallery called "Pure Gallery" which is a front end that works with "Gallery CMS" (backend). It is actually creates an swf file and has an interface for the client, but the problem is that it leaves about a 300 pixel gap at the top of the gallery and I cannot for the life of me figure out how to change it. It is awesome, but the gap at the top makes it useless to me. Thanks much. Buffmin. PS: If anyone wants to see what "Pure Gallery looks like, you can see it at this link to my site. http://q1ofakind.com/gallerycms/gallery.php
Hello coding world, After hours of searching the net I found this awesome slideshow. Check it out: http://tympanus.net/codrops/2011/01/...comment-409563 I really do like this slideshow but I am having problems adding a caption to each image. I am hoping to have the caption located under the image and slide in with each image. Can anyone help me out? Please. Thanks in advance. Best regards, Alan I have a multiple fields on my page and wish to have a reusable javascript to update the previous box with the selction made. how would this be done Code: <form name="form1" method="post" action=""> <p> <input type="textone" name="textfieldone" id="textfieldone"> </p> <p> <select name="selectone" onChange="UpdatePreviousField()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> <input type="texttwo" name="textfieldtwo" id="textfieldtwo"> </p> <p> <select name="selecttwo" onChange="UpdatePreviousField()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> </p> </form> Hi all, I've been trying to teach myself Javascript to figure out this problem, but I'm apparently not learning what I need to. The objective is this: I want to have a div appear below my mouse when mousing over different parts of my website. I know how to swap out the background images, I know how to change the div's sizes... It's just that I'm using one div, and in order to get this right, I need it to be positioned in different places under the mouse each time the image changes. I've got a cross-browser mouse-follow worked out, I just don't know how to edit the "divvx" and "divvy" variables when I mouse over the "boxtest" div. Here is the code I'm working on, maybe I'm just missing something obvious? Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> var divvx=22, divvy=22; function doMouseMove(e){ var posx=0;var posy=0; var e=(!e)?window.event:e;//IE:Moz if (e.pageX){//Moz posx=e.pageX+window.pageXOffset; posy=e.pageY+window.pageYOffset; } else if(e.clientX){//IE if(document.documentElement){//IE 6+ strict mode posx=e.clientX+document.documentElement.scrollLeft; posy=e.clientY+document.documentElement.scrollTop; } else if(document.body){//Other IE posx=e.clientX+document.body.scrollLeft; posy=e.clientY+document.body.scrollTop; } } else{return false}//old browsers var mydiv=document.getElementById('curicon'); mydiv.style.left=(posx-divvx)+'px'; mydiv.style.top=(posy-22)+'px'; } document.onmousemove=doMouseMove function MM_callJS(jsStr) { //v2.0 return eval(jsStr) } </script> <style type="text/css"> <!-- #curicon { background-image: url(resources/cursors/Inactive_Halo.png); height: 44px; width: 44px; position: absolute; top: -80px; left: -80px; } #boxtest { position: absolute; height: 100px; width: 400px; background-color: #0F0; left: 149px; top: 213px; } --> </style> </head> <body> <div id="curicon" name="curicon" style="position:absolute; left:-250px; z-index:2"></div> <div id="boxtest" onMouseOver="MM_callJS('divvx=68')"></div> </body> </html> Thanks, everyone. This has been driving me nuts for an entire week. I was having some problems getting my function to only perform when I click the shoot button. Right now I have it where if you click the buttons and it plays the whole game. I was wondering if there is some way to maybe hide it and then just print the results only when I press the shoot button. I posted my game here its the front page. http://mmoloot4u.com/ I am trying to find out so things so far i thought about doing this, but im not sure the best way. Could i remove assignments from document.getElementByIf('whatever').value from the onclick code for rock, paper, and scissors. Instead define corresponding variables in your <script> area and assign to those variables. Then in 'shoot' you can assign those variables to the corresponding element values? I need to display a set of photos in a limited space. After some online search, I haven't found a suitable Javascript code for the task. I would like to have something similar with the image slider on meetup.com. Basically, I would like to have an image index list and able to display an image in a large size. Any recommendations? Thanks in advance for your inputs. I'm looking for something that allows me to add tags to a photo like this website: http://fukung.net By clicking add tag it opens a input box and once added adds to a DB. How would I do something along those lines? Where to put the <ol>&&</ol> tags so everytime i run the javascript it numbers each indivdiual items which the javascript is looping. Code: <table border="2"table align="center" cellpadding="40"> <tr> <th width="80%"> Questions & Time</th> <th>Status</th> </tr> <tr> <td><% for (int i=0; i < theList.size(); i++) {%> <tr> <td><%= theList.elementAt(i)+ " " + theTime.elementAt(i) %> <% }%> </td> <td>Where is the pending goes:</td> </tr> <tr> </table> Hi, hope someone can see an answer here. I have 4 div tags which are hidden to begin with from the css as shown below: Code: #story1 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;} #story2 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:top;} #story3 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;} #story4 {float:left;width:100%;display:none;background:#333;color:#fff;vertical-align:bottom;} The contents of these is pulled out of a db and so the quantity of text changes (within certain parameters) and so the size of the divs changes, hence no height: setting. I know I could get around this by setting an absolute height and using overflow to show a scrollbar but I would rather not have a scrollbar as the amount of text will only be 100-200 words. Elsewhere I have used the following script to equalise div tags Code: if (document.getElementById("member1").offsetHeight < document.getElementById("member2").offsetHeight){ document.getElementById("member1").style.height = document.getElementById("member2").offsetHeight + "px"; } else { document.getElementById("member2").style.height = document.getElementById("member1").offsetHeight + "px"; } I tried this for my div tags but because they initially start with display:none it sets the height of them to zero. Is there a simple way to make all of these the same height whilst they are hidden? Hello, I have a simple form with simple validation. I am just playing around a bit with forms and don't really have concrete knowledge. What I have done is created a form. Asking for first name, last name, age and email. When the user clicks the submit button I want 2 functions to run, the first checking the input is correct and also making sure all fields have a value. Once everything is checked and is O.K I want to go into another function which sends all this information to an array one by one. I am having difficulty accessing each individual input tag. I could achieve what I want to do, but it will take double the lines of code because each input has a different 'name'. So, what I am trying to do is access the input tags the same as you would do an array. Here is my code: HTML: Code: <form name="regForm" id="form"> <fieldset> <legend>Real Heroes - Registration Form</legend> <p>First Name:<input type="text" size="30" maxlength="20" name="txtFirstName" /></p> <p>Last Name:<input type="text" size="30" maxlength="20" name="txtLastName" /></p> <p>Age:<input type="text" size="30" maxlength="3" name="txtAge" /></p> <p>Email Address:<input type="text" size="30" maxlength="50" name="email" /></p> <p><input type="button" value="Submit Registration" name="butChkForm" onclick="callFuncs_onclick()" /> <input type="reset" value="Reset" name="resetForm" /></p> </fieldset> </form> JavaScript: Code: //CALLING THE FORM SCRIPTS// function callFuncs_onclick() { chkForm_onclick(); creatingDatabase_onclick(); } //**************FORM VALIDATION***************// function chkForm_onclick() { var theForm = document.regForm; if (theForm.txtFirstName.value == "" || theForm.txtLastName.value == "" || theForm.txtAge.value == "" || theForm.email.value == "") { alert("Please complete all of the form."); if (theForm.txtFirstName.value == "") { theForm.txtFirstName.focus(); } if (theForm.txtLastName.value == "") { theForm.txtLastName.focus(); } if (theForm.txtAge.value == "") { theForm.txtAge.focus(); } if (theForm.email.value == "") { theForm.email.focus(); } } else if (isNaN(theForm.txtAge.value)) { alert("That is not valid input for this field. Please re-enter your age."); theForm.txtAge.focus(); } else { alert("Thank you for completing the form, " + theForm.txtFirstName.value); } } function creatingDatabase_onclick() { var form = document.regForm; var index = form.input[0].value; alert(index); } I'm not quite sure where I am going wrong. Please note that these functions really labour the point, I know I have way too many lines of code but I am still very amateur with JS. Thank you for any help/information. Kind Regards, LC. Hi, How I get the images tags from an HTML page with Javascript (SRSc)? Regards FG I'm using forum with bb rich text editor, the problem that sometimes when a user copy and paste content, there ere extra codes that are not supported like: Code: [highlight=#ff0000][/highlight] [blockquote][/blockquote] [CENTER ALIGN=CENTER][/CENTER ALIGN] Can you help me to write a script that automatically reformat the html content when pasted and only keeps specified tags like [img],[url],[b], defined in array ... If it is not possible to reformat content when paste, I can add a button to the editor and call that function to format the content and return plain text with a specific tags. I tried this script: Code: function removeHtmlTag(strx){ if(strx.indexOf("[")!=-1) { var s = strx.split("["); for(var i=0;i<s.length;i++){ if(s[i].indexOf("]")!=-1){ s[i] = s[i].substring(s[i].indexOf("]")+1,s[i].length); } } strx = s.join(""); } return strx+''; } It made to strip html tags, I replaced <> with [], It removes all tags and don't put space instead of the removed tags, example: Code: hello[h1]Name[/h1] Will be like : helloName ??? I got an idea to make a stupid trick, like converting [IMG] to {IMG} and run that function and re convert {IMG} to [IMG] ... Please help, I'm not good in Regular Expressions. Thanks for your time, Regards. |