Results 1 to 4 of 4

Thread: DHTML Window widget (v1.1) CSS Question

  1. #1
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default DHTML Window widget (v1.1) CSS Question

    1) Script Title: DHTML Window widget (v1.1)

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/

    3) Describe problem: I was wondering if there was a way to assign different CSS styles to multiple Window widgets on my page. I am somewhat of a newbie to CSS but have got everything to work in this script perfectly fine (a great script, by the way) but I want to assign different images to the handling bar at the top of the windows to give the appearance of chromeless windows. I have changed the main dhtmlwindow.css to include "background-image:url(bg.jpg)" under ".drag-handle" but, as expected, this affects all windows that pop up from the various buttons that I have on my site. I have tried to setup and load stylesheets with different names into the HTML but I am really confused as to how these windows are linking to those CSS documents. Is there any way to assign a different CSS stylesheet to each idividual window?

    Thanks in advance for any help. I would be more than happy to supply a URL if necessary but since this is a rather generic question I would prefer to avoid a scolding for my messy code (I'm a graphic designer by trade working on my portfolio site...)

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    One way to do this is just to realize that when you open a DHTML window, ie:

    Code:
    <script type="text/javascript">
    var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
    </script>
    The first parameter in red corresponds to that DHTML Window main DIV's id attribute. So you can predefine additional CSS that targets that DHTML window specifically that way, such as:

    Code:
    <style type="text/css">
    #googlebox .drag-handle{
    //addtional CSS here
    "
    }
    </style>

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    SewnEyes (02-29-2008)

  4. #3
    Join Date
    Feb 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Man, and I knew it was going to be something that simple. Thanks a bunch for the quick reply. I only wish now that I mustered up the nerve to ask earlier today, it would've literally saved me HOURS of time. Thanks again, so much!

  5. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You're welcome.

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
  •