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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting an element's background = another element's background

    Question:
    Is there a way to set one div's background or backgroundImage to the value of another div's background or backgroundImage?

    Basically, what I'm trying to do is the following, on mouse click:
    Code:
    div0.background = div1.background
    I have it working while using
    Code:
    div0.background = 'url(/background/of/div1.jpg)'
    but this is causing me problems in another area (described below)
    I notice that
    Code:
    alert(div0.style.background)
    returns blank, and this must be why I can't do div0.background=div1.background... but, is there a way to do this? Is my syntax just off?


    The following is the actual code I'm using. The line I'm trying to change is defBg.style.background = { 'url...

    Code:
    function rowEvents (elem, prop) {
        var y = elem.id.charAt (6);
        var z = getObj ('bg' + y + '');
        switch (prop) {
            case "visible": z.obj.className = 'visible bg'; break;
            case "hidden": z.obj.className = 'hidden bg'; break;
            case "defaultBg": {     var defBg = getObj ('bg0'); 
                defBg.style.background = 'url(/themes/ASIH/Images/FishRep/Large-Footer' + y + '.jpg) center no-repeat'; break; }
            default: alert (elem.id); }}
    #bg0 is the default background
    "elem" is the background I'm trying to set as the default background (#bg0), basically document.getElementById('bg' #) where # is between 1-9
    "prop" 'visible' and 'hidden' work fine, as does 'default', but I need it to work in a different manner.

    The divs are set up with id of bg#s 1-9, as follows, with #bg0 being the default background:

    #bg0, #bg5 { background: url(Images/desert.jpg) center no-repeat; }
    #bg1 { background: url(Images/FishRep/Large-Footer1.jpg) center no-repeat;
    #bg2 { background: url(Images/FishRep/Large-Footer2.jpg) center no-repeat;
    #bg3 { .... etc...

    so, y returns the number of the above. This has to be redeclared as when the function runs, (elem) is no longer the same



    Thus, what I'm trying to do is have the default background equal the background of the other div, ie:

    Code:
    defBg.style.background = bg#.style.background

    where # is the current value of y

    The problem I've run into stems from #bg0 and #bg5, which are different urls depending on the screen resolution, (which is declared in a different stylesheet).

    I checked alert(element.style.background), and it returns blank, which makes me think that element.style.background isn't the right syntax, or... .something...

    So, again, is there anyway to set one div's (#bg0) background equal to that of another div (#bgy)?

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    I'm pretty sure this is a problem that has seen its way around the forums.

    I've never run into it, so I'm not gonna try to solve it with code, but here's a good practical reference to check out. It will probably solve your problem.

    http://www.quirksmode.org/dom/getstyles.html

    Your syntax is right, it's something about the way styles and javascript work that's the problem.

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    the syntax is element.style.backgroundImage

    when setting:
    Code:
    element.style.backgroundImage="url('yourPicture.jpg')"
    you can get the backgroundImage if there is set with no spaces written in the url.
    if there is any spaces you must replace them with %20
    e.g '../My Pictures/My First Image.jpg'
    must be '../My%20Pictures/My%20First%20Image.jpg'

    you can 'transfer' the backgroundImage by:
    Code:
    document.getElementById('xxx').style.backgroundImage=document.getElementById('yyy').style.backgroundImage;

  • #4
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Beagle
    I'm pretty sure this is a problem that has seen its way around the forums.

    I've never run into it, so I'm not gonna try to solve it with code, but here's a good practical reference to check out. It will probably solve your problem.

    http://www.quirksmode.org/dom/getstyles.html

    Your syntax is right, it's something about the way styles and javascript work that's the problem.
    Thank you. I read through this and quite a bit more, but getPropertyValue and currentStyle aren't working... I'll read up on it tomorrow.



    Quote Originally Posted by lerura
    the syntax is element.style.backgroundImage

    when setting:
    Code:
    element.style.backgroundImage="url('yourPicture.jpg')"
    you can get the backgroundImage if there is set with no spaces written in the url.
    if there is any spaces you must replace them with %20
    e.g '../My Pictures/My First Image.jpg'
    must be '../My%20Pictures/My%20First%20Image.jpg'

    you can 'transfer' the backgroundImage by:
    Code:
    document.getElementById('xxx').style.backgroundImage=document.getElementById('yyy').style.backgroundImage;

    I wish this were working, but it isn't. I may need to look more closely at how I'm passing the elements around, as I'm using the getObj (elem) function to get the object.

  • #5
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, it's working with the following code, now:
    ..currentStyle is for IE,
    ..getComputedStyle.getPropertyValue is for Firefox.
    * If you use them, note that currentStyle is an OBJECT property, not a style,
    * getComputedStyle.getPropertyValue is based off of the document object, not off of 'this' element itself
    * Also note that getPropertyValue uses the CSS name, 'background-image' in this case, NOT the Javascript name 'backgroundImage'

    again, defBg.obj is because of the getObj function, and basically equates to
    document.getElementById('bg0').obj


    Code:
    var defBg = getObj ('bg0');
    if (defBg.obj.currentStyle) { defBg.style.backgroundImage = z.currentStyle.backgroundImage; }
    else if (window.getComputedStyle) {
    defBg.style.backgroundImage =
        document.defaultView.getComputedStyle(z,null).getPropertyValue('background-image');
    Edit: updated the code to
    defBg.style.backgroundImage = z.currentStyle.backgroundImage;
    from
    defBg.currentStyle[backgroundImage] = z.currentStyle[backgroundImage];
    I thought this was working in IE, but the []ed original version doesn't work.

    Thanks for the pointer, Beagle
    Last edited by Fluence; 07-07-2006 at 09:26 PM.


  •  

    Posting Permissions

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