[/code] I would like "> Tek-Tips: Javascript - Change DIV width dynamically
Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • 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!

Join Tek-Tips
*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.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Change DIV width dynamicallyHelpful Member!(3) 

tmcneil (TechnicalUser) (OP)
9 Dec 05 14:39
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
Helpful Member!(2)  cLFlaVA (Programmer)
9 Dec 05 15:16
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/

tmcneil (TechnicalUser) (OP)
9 Dec 05 15:22
Now that i have it, how do I set the width value in the style tag?
cLFlaVA (Programmer)
9 Dec 05 15:23
i just told you how to.

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

tmcneil (TechnicalUser) (OP)
9 Dec 05 15:31
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.
cLFlaVA (Programmer)
9 Dec 05 15:39
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/

tmcneil (TechnicalUser) (OP)
9 Dec 05 16:38
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?
cLFlaVA (Programmer)
9 Dec 05 17:06

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/

BillyRayPreachersSon (Programmer)
9 Dec 05 18:48

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/


Helpful Member!  Fendal (TechnicalUser)
9 Dec 05 19:17
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>
tmcneil (TechnicalUser) (OP)
10 Dec 05 0:30
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
tmcneil (TechnicalUser) (OP)
12 Dec 05 10:45
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
kaht (Programmer)
12 Dec 05 11:38

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?

BillyRayPreachersSon (Programmer)
12 Dec 05 12:05
I thought I felt a sense of Déjà Vu. Still - repetition is the finest form of humour winky smile

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


theniteowl (Programmer)
12 Dec 05 12:51
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????

BillyRayPreachersSon (Programmer)
12 Dec 05 16:25
Now play fair... lead by example:

Quote (ReductionNazi):

NO! NO! NO! NO! NO! NO! NO! NO! NO!

winky smile

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


Fendal (TechnicalUser)
12 Dec 05 17:59
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 .
tmcneil (TechnicalUser) (OP)
12 Jan 06 14:34
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
tmcneil (TechnicalUser) (OP)
12 Jan 06 17:03
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

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!

Back To Forum

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