+ Post New Thread
Results 1 to 4 of 4
Coding Thread, Replace ID instead of CLASS in Coding and Web Development; The code searches for occurances of <div class="dan"> but i want it to replace: <div id="dan"> does anyone know how ...
  1. #1

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29

    Replace ID instead of CLASS

    The code searches for occurances of <div class="dan"> but i want it to replace: <div id="dan"> does anyone know how the below javascript might be changed to do this?

    Code:
    /*
    dan function by Roger Johansson, http://www.456bereastreet.com/
    */
    var dan = {
    	init : function() {
    	// Check that the browser supports the DOM methods used
    		if (!document.getElementById || !document.createElement || !document.appendChild) return false;
    		var oElement, oOuter, oI1, oI2, tempId;
    	// Find all elements with a class name of dan
    		var arrElements = document.getElementsByTagName('*');
    		var oRegExp = new RegExp("(^|\\s)dan(\\s|$)");
    		for (var i=0; i<arrElements.length; i++) {
    	// Save the original outer element for later
    			oElement = arrElements[i];
    			if (oRegExp.test(oElement.className)) {
    	// 	Create a new element and give it the original element's class name(s) while replacing 'dan' with 'cb'
    				oOuter = document.createElement('div');
    				oOuter.className = oElement.className.replace(oRegExp, '$1cb$2');
    	// Give the new div the original element's id if it has one
    				if (oElement.getAttribute("id")) {
    					tempId = oElement.id;
    					oElement.removeAttribute('id');
    					oOuter.setAttribute('id', '');
    					oOuter.id = tempId;
    				}
    	// Change the original element's class name and replace it with the new div
    				oElement.className = 'i3';
    				oElement.parentNode.replaceChild(oOuter, oElement);
    	// Create two new div elements and insert them into the outermost div
    				oI1 = document.createElement('div');
    				oI1.className = 'i1';
    				oOuter.appendChild(oI1);
    				oI2 = document.createElement('div');
    				oI2.className = 'i2';
    				oI1.appendChild(oI2);
    	// Insert the original element
    				oI2.appendChild(oElement);
    	// Insert the top and bottom divs
    				dan.insertTop(oOuter);
    				dan.insertBottom(oOuter);
    			}
    		}
    	},
    	insertTop : function(obj) {
    		var oOuter, oInner;
    	// Create the two div elements needed for the top of the box
    		oOuter=document.createElement("div");
    		oOuter.className="bt"; // The outer div needs a class name
    	    oInner=document.createElement("div");
    	    oOuter.appendChild(oInner);
    		obj.insertBefore(oOuter,obj.firstChild);
    	},
    	insertBottom : function(obj) {
    		var oOuter, oInner;
    	// Create the two div elements needed for the bottom of the box
    		oOuter=document.createElement("div");
    		oOuter.className="bb"; // The outer div needs a class name
    	    oInner=document.createElement("div");
    	    oOuter.appendChild(oInner);
    		obj.appendChild(oOuter);
    	},
    	// addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
    	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]);
    		}
    	}
    };
    
    dan.addEvent(window, 'load', dan.init);

  2. #2
    ChrisH's Avatar
    Join Date
    Jun 2005
    Location
    East Lancs
    Posts
    4,938
    Thank Post
    114
    Thanked 272 Times in 250 Posts
    Rep Power
    104
    I think you just need to change the references to class to their ID equivalents as the regular expression looks like it will find anything with "dan" as part of it.

  3. #3

    Join Date
    Feb 2009
    Location
    Norfolk, England
    Posts
    12
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    11
    As long as you don't want to change anything else - just change

    if (oRegExp.test(oElement.className))

    to

    if (oRegExp.test(oElement.id))

    All the outer loop does is to get an array of all the elements and go through them matching the className using the given regEx.

    having said that it's only checking for Dan with optional spaces, not containing Dan, so if you are pretty sure you haven't got the spaces you could cut most of it out with Document.getElementById("Dan")

    L8R: No it doesn't, wasn't looking carefully, it looks for the word Dan on its own !

    Have you considered jQuery ?
    Last edited by autismuk; 14th March 2009 at 07:29 AM. Reason: Corrected Mistake

  4. Thanks to autismuk from:

    danIT (13th March 2009)

  5. #4

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29
    Autismuk - Thank you so much!

    I dont know javascript and have heard of JQuery but think for the novice (me) it will be slightly beyond me lol

    This has saved me so much bother!

SHARE:
+ Post New Thread

Similar Threads

  1. Replace Apache with IIS???
    By tobrz in forum Windows
    Replies: 14
    Last Post: 18th November 2008, 11:17 PM
  2. Replace Windows 2003 DC
    By netadmin in forum Windows
    Replies: 10
    Last Post: 20th April 2008, 02:24 AM
  3. Time to replace?
    By cgiuk in forum Hardware
    Replies: 11
    Last Post: 24th January 2008, 08:27 AM
  4. To upgrade or replace
    By richard in forum General Chat
    Replies: 13
    Last Post: 13th March 2007, 12:54 PM
  5. Class Server Authentication and Class Sites
    By dagza in forum Virtual Learning Platforms
    Replies: 2
    Last Post: 15th November 2006, 12:05 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •