SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change CSS within iframe on same domain

    Hi,

    I am using JSColor script on the admin panel of my web application and I also have an iframe on the same page to preview the changes made to colors. I want the iframe's style update when I change colors using the color picker of JSColor. As this example shows, the following code changes the body background color of the current page.

    HTML Code:
    onchange="document.getElementsByTagName('body')[0].style.background = '#'+this.color"
    How can I modify it so that it will change the background color of the iframe (iframe id is "preview")?

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    You should be able to use the following

    HTML Code:
    onchange="document.getElementByName('iframe_name_here').style.background = '#'+this.color"
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by chris.upjohn View Post
    You should be able to use the following

    HTML Code:
    onchange="document.getElementByName('iframe_name_here').style.background = '#'+this.color"
    Thanks Chris, I found how to do it but I forgot to update this post. Here is the code I used:

    HTML Code:
    onchange="document.getElementById('iframe_id').contentWindow.document.getElementsByTagName('body')[0].style.background = '#'+this.color"
    also, for divs:

    HTML Code:
    onchange="document.getElementById('iframe_id').contentWindow.document.getElementById('header').style.background = '#'+this.color"
    I spent a lot of time to finally come up with this and hopefully this will help others as well who want to do the same thing.


Bookmarks

Posting Permissions

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