×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Change DIV width dynamically
3

thread216-1163325

Change DIV width dynamically

Change DIV width dynamically

(OP)
All,

I have a DIV with a set width  

CODE

<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200; width: 1270;">

I would like to create a javascript function that will change the width depending on the screen resolution.  Basically I would like to change the width to 1015 if the screen resolution is 1024 x 768.

I've written this much on the asp page so far, but don't know how to apply my dstyle value,  

CODE

{
    //Determine screen resolution
    resolution = screen.width+' x '+screen.height
    alert('Your resolution is: ' + resolution);

    if (resolution == "1024 x 768")
    {
        dstyle = "overflow: auto; height: 200; width: 1015;";
    }
    else
    {
        dstyle = "overflow: auto; height: 200; width: 1270;";
    }
}

Todd

RE: Change DIV width dynamically

2
1) always use units (px, %, etc.).

2) do this:

CODE

d = document.getElementById('scrollUserTable');
d.style.width="1270px";

*cLFlaVA
----------------------------
I already made like infinity of those at scout camp...
http://www.coryarthus.com/

RE: Change DIV width dynamically

(OP)
Now that i have it, how do I set the width value in the style tag?

RE: Change DIV width dynamically

i just told you how to.

*cLFlaVA
----------------------------
I already made like infinity of those at scout camp...
http://www.coryarthus.com/

RE: Change DIV width dynamically

(OP)
what I mean is,  how does this:

CODE


<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200px; width: 1015px;">

change to this:

CODE


<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200px; width: 1270px;">

Don't you have to pass a value or something into the function and back to the div.

RE: Change DIV width dynamically

this is javascript:

CODE

// get the div element
d = document.getElementById('scrollUserTable');
// set the width
d.style.width="1270px";

there's not much more to say.  you can use that in your function that you posted above.

*cLFlaVA
----------------------------
I already made like infinity of those at scout camp...
http://www.coryarthus.com/

RE: Change DIV width dynamically

(OP)
div:

CODE

<div class="scrollTable" id="scrollUserTable" style="changewidth(this);">

function:

CODE

<script language="Javascript">
<!--
function changewidth(srcElement)
{
    var screenres = screen.width+'x'+screen.height;
    var elem = document.getElementById("scrollUserTable");
    alert(elem);
   
    if (screenres == "1024x768")
    {
        elem.style = "overflow: auto; height: 200px; width: 1015px;";
        alert("if");
    }
    else if (screenres == "1152x864")
    {
        elem.style = "overflow: auto; height: 200px; width: 1142px;";
        alert("else if");
    }
    else
    {
        elem.style = "overflow: auto; height: 200px; width: 1270px;";
        alert("else");
    }
    return false;
}
-->
</script>

what am I doing wrong?

RE: Change DIV width dynamically

Quote:

what am I doing wrong?

not reading my advice.  you've gotten as far as you have, you don't need me to write your code for you...

*cLFlaVA
----------------------------
I already made like infinity of those at scout camp...
http://www.coryarthus.com/

RE: Change DIV width dynamically


tmcneil,

You cannot call JavaScript from a style element like that. You need to put your script in its own script section, and call it when the page has loaded.

I suggest you do a search on Google for the basic HTML document structure to learn a bit more about what type of markup (HTML, CSS, JS) goes where, and how they all correlate.

Hope this helps,
Dan

Dan's Page @ Code Couch
http://www.codecouch.com/dan/

RE: Change DIV width dynamically

try,

CODE

<html>
<body>
<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200px;">
<script language="Javascript">
onload=changewidth()
function changewidth(){
document.getElementById("scrollUserTable").style.width= + screen.width - 10;
}
</script>
</body>
</html>

RE: Change DIV width dynamically

(OP)
Well, I think I've got something here and that it's working in @ least two screen resolutions on my laptop.  I've tested with 1024 x 768 and 1280 x 1024.

DIV tag:

CODE


<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200px;" onLoad="changeWidth()";>

I created this function and placed it in one of my js files instead of on the page with the help of Fendal and cLFlaVA.

CODE

function changeWidth()
{
    var elem = document.getElementById("scrollUserTable")
    var screenres = screen.width+'x'+screen.height;
    if (screenres == "1024x768")
    {
        elem.style.width= + screen.width - 10;
        alert(elem.style.width);
    }
    else if (screenres == "1152x864")
    {
        elem.style.width= + screen.width - 10;
        alert(elem.style.width);
    }
    else  //1280x1024
    {
        elem.style.width= + screen.width - 10;
        alert(elem.style.width);
    }
}

Well, I think it's working but I'm not able to get the alert boxes to show on the screen.  I'll keep testing, but for now, thanks for all the help amid my frustration.

Todd

Todd

RE: Change DIV width dynamically

(OP)
Well,

You can't have a javascript event in the style section of a DIV.  Not sure why that never clicked in my head.  So, I've got it working, however, it doesn't look like I really need to use it.  The DIV tag will resize to the entire screen, regardless of screen resolution, if a width is not specified.  This means that the js function will not be needed in this particular case.  I have figured out another way to use it, but haven't fully tested it yet.  Thanks for everyone's patience and assistance.

Todd

RE: Change DIV width dynamically

Quote:

You can't have a javascript event in the style section of a DIV.  Not sure why that never clicked in my head.
That's exactly what Dan said 4 posts above.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

RE: Change DIV width dynamically

NO! NO! NO! NO! NO! NO! NO! NO! NO!
Redundancy is bad, we must stop redundancy and make things less redundant.

This message brought to you by the Department of Redundancy Department.  Working and working to stamp out, eliminate and abolish redundancy.

Paranoid?  ME??   WHO WANTS TO KNOW????

RE: Change DIV width dynamically

still not sure why you need all the "if else"'s but if you do need to do it that way, take a look at the switch case in javascript http://www.w3schools.com/js/js_switch.asp .

RE: Change DIV width dynamically

(OP)
All,

Let's just say, I had an epiphany.  This made me realize that I had the solution all along and was making it more difficult than it had to be.  I implemented this code:

CODE

<script language="JavaScript"><!--
//set DIV tag width dynamically
if ((screen.width ==1280)&&(screen.height ==1024))
{
//document.write ("1280x1024");
document.write ('<div class="scrollTable" id="scrollAnnTable" style="overflow: auto; height: 200px; width: 1270px;">');
}
if ((screen.width ==1152)&&(screen.height ==864))
{
//document.write ("1152x864");
document.write ('<div class="scrollTable" id="scrollAnnTable" style="overflow: auto; height: 200px; width: 1142px;">');
}
if ((screen.width ==1024)&&(screen.height ==768))
{
//document.write ("1024x768");
document.write ('<div class="scrollTable" id="scrollAnnTable" style="overflow: auto; height: 200px; width: 1015px;">');
}
//--></script>
I could use case statements, but this works just fine.

Todd

RE: Change DIV width dynamically

(OP)
Here's one that a little cleaner:

CODE

<script language="JavaScript"><!--
//change DIV tag width dynamically
var divWidth = 1270;
if      ( (screen.width == 1280) && (screen.height == 1024) ) //1280 x 1024
    divWidth = 1270;
else if ( (screen.width == 1152) && (screen.height == 864) )  //1152 x 864
    divWidth = 1142;
else if ( (screen.width == 1024) && (screen.height == 768) )  //1024 x 768
    divWidth = 1015;

document.write ('<div class="scrollTable" id="scrollUserTable" style="overflow: auto; height: 200px; width: ' + divWidth + 'px;">');
//-->
</script>

Todd

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close