Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Heavy javascript. Need to trim repeated parts?

    Hi all, I have some javascript which repeats large blocks of code with a few subtle difference. I was wondering how to trim it. Ideally I would like to refernce as much as possible from an external .js file. But I am not sure which parts can be cut out. The code is in the body of the html.

    The page has about 50 different images and each leads to a chunk of code which is an onclick event...The middle part of each chunck does not vary.

    Each section looks like this (i have changed the bits that vary to "VARIES"



    Code:
    <TD vAlign=top width=45><A href="#topanchor"
    onclick="
    VARIES.src='http://hardyart.co.uk/frame/VARIES.jpg';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    document.getElementById('VARIES').style.backgroundImage =
    'url(\'http://hardyart.co.uk/frame/VARIES.jpg\')';
    frameselected = 'VARIES'; frametitle = 'VARIES'; frameprice = VARIES; framethick = VARIES; 
      THIS PART DOES NOT VARY    check(); 
    document.calc2.Title.value = 'Frame for print ' + ebaytitle; 
    document.calc2.Print.value = '' + printprice;
    document.calc2.Total.value = '(print and frame) ' + ((Math.round((calcaddframe(setup,backbrdprice,barrierbrdprice,glassprice,innermprice,framedarea,oute  rmprice,framethick,borderwidth,borderheight,frameprice,slipthick,picturewidth,pictureheight,slippric  e)+printprice)/5)*5)-0.01);
    document.calc2.Link.value = 'http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&item=' + testmeout;
    document.calc2.Frame.value = frametitle + ' (' + frameselected + ')';
    document.calc2.Mount1.value = 'Outer Mount: ' + outermtitle + ' (' + outermselected + ')';
    document.calc2.Mount2.value = 'Inner Mount: ' + innermtitle + ' (' + innermselected + ')';
    document.calc2.Slip.value = sliptitle + ' (' + slipselected + ')';
    document.calc3.D.value = 'eBay Item Number: ' +testmeout; document.calcprice.p.value = 'Print only: ' + printprice + ' ; Framed print: ' + ((Math.round((calcaddframe(setup,backbrdprice,barrierbrdprice,glassprice,innermprice,framedarea,oute  rmprice,framethick,borderwidth,borderheight,frameprice,slipthick,picturewidth,pictureheight,slippric  e)+printprice)/5)*5)-0.01);"> THEN IT VARIES AGAIN
    <IMG name=imagef1 src="http://hardyart.co.uk/frame/VARIES.jpg" Title="VARIES" border=0></A></TD>
    Cheers

  • #2
    Regular Coder
    Join Date
    Jun 2006
    Location
    UK
    Posts
    892
    Thanks
    301
    Thanked 2 Times in 2 Posts
    Hey I am also looking for a similar answer, anyone can reply this?



    Thanx

  • #3
    VR2
    VR2 is offline
    New Coder
    Join Date
    Jul 2006
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmmm often times in this situation I find that what needs to be done is to setup an array and everything gets solved


    var arr = ["Varies1", "Varies2", "Varies3", "Varies4"];

    for (var i = 0; i < arr.length; i++)
    {
    var ele = arr[i];
    var img = document.createElement("img");
    img.src = ele + ".jpg";
    document.getElementById(ele).style.backgroundImage = ele + "_back.jpg";

    // etc
    }


    or if that is too limiting then have an array of objects

    var arr = [{src: "varies1.jpg", id: "something", backgroundSrc: "SomethingElse.jpg"}, {src: "varies2.jpg", id: "something2", backgroundSrc: "SomethingElse2.jpg"}];

    for (var i = 0; i < arr.length; i++)
    {
    var ele = arr[i];
    var img = document.createElement("img");
    img.src = ele.src;
    document.getElementById(ele.id).style.backgroundImage = ele.background Src;

    // etc
    }


  •  

    Posting Permissions

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