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 14 of 14

Thread: Width Setting

  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Width Setting

    Is it possible to set a width of a div to whatever size the screen is?

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    First off, divs by default expand to fit. Meaning that if not constrained by any parent elements or manual styles, they will stretch to the entire screen. You can change a div with a set width to do this by:
    Code:
    document.getElementById("my_div").style.width = "auto";
    However, if you are looking for a way to grab the browser's current width, here's how it'd be done:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Example</title>
    <style type="text/css">
    body
    {
    margin: 0;
    padding: 0;
    }
    
    #my_div
    {
    width: 200px;
    height: 100px;
    background-color: orange;
    }
    </style>
    <script type="text/javascript">
    <!--
    
    function fitScreenWidth()
    	{
    	if (window.innerWidth) var w = window.innerWidth;
    	if (document.body.offsetWidth) var w = document.body.offsetWidth;
    	document.getElementById("my_div").style.width = w+"px";
    	}
    
    function setWidthToAuto()
    	{
    	document.getElementById("my_div").style.width = "auto";
    	}
    
    // -->
    </script>
    </head>
    <body>
    
    <input type="submit" value="fitScreenWidth()" onclick="fitScreenWidth()" />
    <br />
    <input type="submit" value="setWidthToAuto()" onclick="setWidthToAuto()" />
    <br />
    <div id="my_div"></div>
    
    </body>
    </html>

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Or you know, you could just do this

    Code:
    #div {
        width:100%;
    }
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I'm assuming he doesn't have access to the CSS code on load. Figured he had to change a pre-determined div to fit the screen client-side.

    Anyway, giving a div a width of 100% doesn't actually do anything unless it's been previously given a width value.
    divs by default expand to fit. Meaning that if not constrained by any parent elements or manual styles, they will stretch to the entire screen.

  • #5
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    You must also note that there are some default margins on a page which must be cleared if the <div> is to fit the entire browser window. The example by itsallkizza has this in the CSS with the body {} code.

    Although I don't understand the need for for JavaScript here. It should automatically change to the size of the browser window regardless.

    Also it might be confusing so I will say it again, a <div> will automatically expand horizontally all of the way to fill its container, so if the <div> is inside of another <div>, it will only expand to the width of the outer <div>. These elements are called block elements, because of how they set the content in large blocks. If a <div> is not inside any other element (besides the <body> tags of course) it will expand to the entire page.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Okay, let's say I have a semi-transparent div, with an opacity level of say, 80.

    How do I get this div, so that when you click a link (don't worry about that part), the div is over the whole page?

    Because

    If a <div> is not inside any other element (besides the <body> tags of course) it will expand to the entire page.
    you can't really see it because it's completely transparent, I think? Or am i just confusing myself and you?

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    transparency has nothing to do with the size of the div

    give us an example page if you have it, and point us to which div you want to expand to fit the page, then we can help you specifically

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Okay, I know transparency has nothing to do with it. It's just in my page (in IE). Haven't got an opaque div in Firefox or Safari yet. I don't have an example page right now. However, I will have one soon. I'll give you the link when I do.

  • #9
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    So you want to do something like the Lightbox scripts do?

    That is done with Javascript, which it sounds like what you are thinking as well. I haven't tested this, but basically you need a DIV which is hidden from view until some link is clicked, at which point some fun JavaScript probably turns the hidden layer visible and puts it above the page content (with the opacity).

    Would one of the lightbox scripts already written help?
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Yes, that is what I want. As long, as the lightbox takes up the whole page. What I mean is, if you scroll horizontally or vertically, the lightbox isn't there.

  • #11
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts

  • #12
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Ha, I'm starting to get on the image idea of it now. Well, yeah, I guess, but instead of an image, I could have like text on a semi-transparent background. Or I could have the image, without the border. Something I'll have to think about, but I have to remember what I wanted in the first place anyway.

    When you click something, a semi-transparent div shows up with text in it.

    Now, what could happen is that you could set a div to appear onClick in the top left hand corner of the site. This div would have an opacity of 80, I guess. I have been able to do that up to those steps. What I can't do is set the width and height to cover the whole screen. Maybe it could float, too so you wouldn't see any blank spots. I'll dig around for the code.

  • #13
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    i don't have much experience with lightbox but i've worked with ibox many a times and it can do precisely what you're asking, it has built in functions you can call

    visit that second link i posted and check out their examples

  • #14
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    It seems like an image to me...unless it's in the .zip folder?

    I can't download js files, either. I would need the actual code.


  •  

    Posting Permissions

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