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

    CSS dynamic width modification

    Hello sorry to bother you but I need some help that involves html css and possible javascript.

    I made a small div.box that is shown on the left part of the screen that is dynamic (it is moving up down with the page scroll). This is the box in google chrome at a screen resolution of 1366x768:

    and this is in mozilla at a screen resolution of 1280x800:



    The problem is that if you open the website (you can find the live website at http://www.sisacademy.ro/fisiere/) with other browsers or if the user has a different resolution than the one which was coded for (I coded using google chrome at a screen resolution of 1366x768) the box width modifies and looks bad as you can easily see in the second image.

    Can you tell me if it is possible to dynamic modify the box width in this code:
    using users screen resolution and browser. I don't know how to get the screen resolution and how to find the browser the user is using.

    I want yo modify that marked width in div section.

    Can anybody help me with a code?


    Thank you,
    Adrian

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    LOL you should try viewing it on my smallish laptop.

    It is horrible. The box that is always moving up and down is completely covered by the box to the right of it.


    I found answers to this problem by using % instead of fixed pixel width.

    height doesn't matter a whole lot, one can always scroll down.

    But the width of your divs should be in % width of the div it is inside of.




    First off, you should make a div that holds BOTH boxes - call it <div id="middle">

    position:relative;width:98%;height:whatever you want. fixed pixel is fine.;

    you should position the moving box div to relative and float:left;
    It is okay to make this a fixed pixel length. Margin:10px; should be fine.

    the box to the right should be positioned relative, float:left; margin:10px;

    that way, it will always be to the right of it. Make sure you make the width of the big box a certain % - or else it will end up floating underneath everything if the screen is too small.


    dont forget to </div> for the div that holds both boxes.

    I think this should work.
    Last edited by BoyWander; 04-06-2011 at 08:34 PM.

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    btw

    If this does not work- or if you dont like this idea,

    you could always move that floating box to the right side of the screen.

    That means you put the big box with the menu first in order of divs, then the floating box after it, float:left;

    You need to experiment with smaller resolutions too, to make sure it looks right.

    On a smaller laptop like mine, it might just float off to the bottom of the screen, or i'd have to scroll right to see it all.

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks.. I forgot about percentage..

    thanks a lot..

    Take care.

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    You're welcome - but please note that I am relatively new at this.

    If this does not work, don't hesitate to say so - there are coders much better than I here at this forum.

    However, if it does work, let me know too!

    I'm still trying to get my first "Thanks". :-)

  • Users who have thanked BoyWander for this post:

    adhishor (04-06-2011)

  • #6
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BoyWander View Post
    LOL you should try viewing it on my smallish laptop.

    It is horrible. The box that is always moving up and down is completely covered by the box to the right of it.


    I found answers to this problem by using % instead of fixed pixel width.

    height doesn't matter a whole lot, one can always scroll down.

    But the width of your divs should be in % width of the div it is inside of.




    First off, you should make a div that holds BOTH boxes - call it <div id="middle">

    position:relative;width:98%;height:whatever you want. fixed pixel is fine.;

    you should position the moving box div to relative and float:left;
    It is okay to make this a fixed pixel length. Margin:10px; should be fine.

    the box to the right should be positioned relative, float:left; margin:10px;

    that way, it will always be to the right of it. Make sure you make the width of the big box a certain % - or else it will end up floating underneath everything if the screen is too small.


    dont forget to </div> for the div that holds both boxes.

    I think this should work.
    It looks the same on other resolution and using other browsers. Do you how can I put browser conditions in css to change the box width?
    I mean if it is mozilla ->width: Apx;
    chrome -> width: Bpx;
    IE -> width:Cpx

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BoyWander View Post
    You're welcome - but please note that I am relatively new at this.

    If this does not work, don't hesitate to say so - there are coders much better than I here at this forum.

    However, if it does work, let me know too!

    I'm still trying to get my first "Thanks". :-)
    Hey BoyWander! If opened the same website on a resolution of 1280x800 with chrome and mozilla.. it looks bad (the same on both). So I have to change div width using users resolution. Can you help with that? I need to find out users screen resolution and using that I have to change with if condition the div width.

    Thanks a lot.

  • #8
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Ok why don't you post your entire code so we can see?

    When you copy/paste your code, highlight all the code and click the # button on the top of this form to wrap it in code quotes so that it will look right. This is how we post code in the forums.

    The problem might be in the order of divs.

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BoyWander View Post
    Ok why don't you post your entire code so we can see?

    When you copy/paste your code, highlight all the code and click the # button on the top of this form to wrap it in code quotes so that it will look right. This is how we post code in the forums.

    The problem might be in the order of divs.
    Here is my code:

    <?
    if(isset($HTTP_COOKIE_VARS["users_resolution"]))
    $screen_res = $HTTP_COOKIE_VARS["users_resolution"];
    else //means cookie is not found set it using Javascript
    {
    ?>
    <script language="javascript">
    <!--
    writeCookie();

    function writeCookie()
    {
    var today = new Date();
    var the_date = new Date("December 31, 2023");
    var the_cookie_date = the_date.toGMTString();
    var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height;
    var the_cookie = the_cookie + ";expires=" + the_cookie_date;
    document.cookie=the_cookie

    //location = 'header.php';
    }
    //-->
    </script>
    <?
    }
    ?>



    </head>

    <body>
    <?php
    if($screen_res=='1366x768'){
    ?>
    <div id="floatdiv" style="
    position:absolute;
    width:145px;height:auto;left:0px;top:0px;
    padding:16px;background:#FFFFFF;
    border:2px solid #93329e">

    <?
    } elseif($screen_res=='1280x800'){
    ?>
    <div id="floatdiv" style="
    position:absolute;
    width:8%;height:auto;left:0px;top:0px;
    padding:16px;background:#FFFFFF;
    border:2px solid #93329e">

    <? }echo $orar; ?>
    </div>


    <script type="text/javascript"><!--
    var floatingMenuId = 'floatdiv';
    var floatingMenu =
    {
    targetX: 5,
    targetY: 218,

    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: document.documentElement
    && document.documentElement.clientWidth,

    menu:
    document.getElementById
    ? document.getElementById(floatingMenuId)
    : document.all
    ? document.all[floatingMenuId]
    : document.layers[floatingMenuId]
    };

    floatingMenu.move = function ()
    {
    if (document.layers)
    {
    floatingMenu.menu.left = floatingMenu.nextX;
    floatingMenu.menu.top = floatingMenu.nextY;
    }
    else
    {
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
    }
    }

    floatingMenu.computeShifts = function ()
    {
    var de = document.documentElement;

    floatingMenu.shiftX =
    floatingMenu.hasInner
    ? pageXOffset
    : floatingMenu.hasElement
    ? de.scrollLeft
    : document.body.scrollLeft;
    if (floatingMenu.targetX < 0)
    {
    if (floatingMenu.hasElement && floatingMenu.hasInner)
    {
    // Handle Opera 8 problems
    floatingMenu.shiftX +=
    de.clientWidth > window.innerWidth
    ? window.innerWidth
    : de.clientWidth
    }
    else
    {
    floatingMenu.shiftX +=
    floatingMenu.hasElement
    ? de.clientWidth
    : floatingMenu.hasInner
    ? window.innerWidth
    : document.body.clientWidth;
    }
    }

    floatingMenu.shiftY =
    floatingMenu.hasInner
    ? pageYOffset
    : floatingMenu.hasElement
    ? de.scrollTop
    : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
    if (floatingMenu.hasElement && floatingMenu.hasInner)
    {
    // Handle Opera 8 problems
    floatingMenu.shiftY +=
    de.clientHeight > window.innerHeight
    ? window.innerHeight
    : de.clientHeight
    }
    else
    {
    floatingMenu.shiftY +=
    floatingMenu.hasElement
    ? document.documentElement.clientHeight
    : floatingMenu.hasInner
    ? window.innerHeight
    : document.body.clientHeight;
    }
    }
    }

    floatingMenu.doFloat = function()
    {
    var stepX, stepY;

    floatingMenu.computeShifts();

    stepX = (floatingMenu.shiftX +
    floatingMenu.targetX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
    stepX = floatingMenu.shiftX +
    floatingMenu.targetX - floatingMenu.nextX;
    }

    stepY = (floatingMenu.shiftY +
    floatingMenu.targetY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
    stepY = floatingMenu.shiftY +
    floatingMenu.targetY - floatingMenu.nextY;
    }

    if (Math.abs(stepX) > 0 ||
    Math.abs(stepY) > 0)
    {
    floatingMenu.nextX += stepX;
    floatingMenu.nextY += stepY;
    floatingMenu.move();
    }

    setTimeout('floatingMenu.doFloat()', 20);
    };

    // addEvent designed by Aaron Moore
    floatingMenu.addEvent = function(element, listener, handler)
    {
    if(typeof element[listener] != 'function' ||
    typeof element[listener + '_num'] == 'undefined')
    {
    element[listener + '_num'] = 0;
    if (typeof element[listener] == 'function')
    {
    element[listener + 0] = element[listener];
    element[listener + '_num']++;
    }
    element[listener] = function(e)
    {
    var r = true;
    e = (e) ? e : window.event;
    for(var i = element[listener + '_num'] -1; i >= 0; i--)
    {
    if(element[listener + i](e) == false)
    r = false;
    }
    return r;
    }
    }

    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
    if(element[listener + i] == handler)
    return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
    };

    floatingMenu.init = function()
    {
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
    };

    // Some browsers init scrollbars only after
    // full document load.
    floatingMenu.initSecondary = function()
    {
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.shiftX +
    floatingMenu.targetX;
    floatingMenu.nextY = floatingMenu.shiftY +
    floatingMenu.targetY;
    floatingMenu.move();
    }

    if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
    else
    {
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
    floatingMenu.initSecondary);
    }

    //--></script>



    I'm using this code in header.php
    I manage to change the width using users screen resolution (the colored code - the other one is for the moving box) but unfortunately all it is after header.php disappears (for example i'm calling header.php in index.php - all it is in index.php doesn't appear).. I don't realize where is my mistake.
    Can you help me with an idea?

    Thanks

  • #10
    New Coder
    Join Date
    Mar 2011
    Posts
    62
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Hmmph.

    I'm not familiar with javascript at all. I'm not even sure how that menu works.

    But - I noticed you positioned the floatingdiv absolute.

    Positioning something "absolute" is going to make that div be oblivious to anything else on the screen - it will not make way for anything else, because absolute means it thinks its the absolute king of the page, and nothing else exists/matters.

    Try position:relative;width:145px;height:I dont know what your height is;
    margin-top:100px;(experiment with the amount of pixels until you get it to the height of the margin between it and the top of the page you want)
    margin-left:5px;


    Oh - and don't forget to close css with ; - even the last one.

    <div id="floatdiv" style="
    position:absolute;
    width:8%;height:auto;left:0px;top:0px;
    padding:16px;background:#FFFFFF;
    border:2px solid #93329e"> <----add the ; before the >


    Also - when margining all 4 sides, they go clockwise - top, right, bottom, left
    so margin:10px 5px 80px 10px would be, for example, 10 from the top. 5 from the right, 80 from the bottom, 10 from the left.

    If you did only two, for example margin:10px 50px it would go 10px from top and bottom, 50 from right and left.

    be careful with this, you probably wont need it here but if that helps you any, now you know.
    Last edited by BoyWander; 04-06-2011 at 10:11 PM.

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks I managed to solve it.

    __________________
    Join me at Cursuri Limbi Straine and Cursuri Engleza


  •  

    Tags for this Thread

    Posting Permissions

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