Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change DIV width dynamically 3

Status
Not open for further replies.
tmcneil

tmcneil

Technical User
Nov 17, 2000
294
US
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
 
Sort by date Sort by votes
1) always use units (px, %, etc.).

2) do this:

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

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Now that i have it, how do I set the width value in the style tag?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
this is javascript:

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

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

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
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?
 
Upvote 0 Downvote
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



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
You can't have a javascript event in the style section of a DIV. Not sure why that never clicked in my head.
Click to expand...
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?
sheepico.jpg
images
 
Upvote 0 Downvote
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????
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
318
lexer
lexer
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
307
AbidingDude
AbidingDude
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
751
berkshirea
berkshirea
GOSCO
  • Locked
  • Question
JQUERY Animate width using variable
Replies
2
Views
235
c0deM0nK424
c0deM0nK424

Part and Inventory Search

Sponsor

Back
Top