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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Setting Maximum Page Width 1

Status
Not open for further replies.
CliveC

CliveC

Programmer
Nov 21, 2001
1,222
US
<style>
.width {width:550px}
</style>

<body>
<div class=&quot;width&quot;>
TEXT HERE
</div>
...

In setting the width of a page this becomes both the maximum width and the minimum width. Is there a way to achieve the effect of setting the maximum width but not the minimum?
Clive
 
Sort by date Sort by votes
I don't think you can do it with style but this can be achieved this way :
Code: 
...
<script language=&quot;Jscript&quot;>
  function initPage() {
    var oDiv=getElementById(&quot;myDiv&quot;);
    if (oDiv.style.width > 550)
       oDiv.style.width = 550;
  }
</script>
<body onload=&quot;initPage();&quot;>
<div id=&quot;myDiv&quot; width=&quot;100%&quot;>
TEXT HERE
</div>
...
</body>
Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Hi Targol. Thanks for the quick response. Sounds great but could not get it to work.

This line: var oDiv=getElementById(&quot;myDiv&quot;);
causes an error in the script. Clive
 
Upvote 0 Downvote
Changed the problem line to:
var oDiv=document.getElementById(&quot;myDiv&quot;);

Now I don't get the script error but the desired effect is not achieved. Clive
 
Upvote 0 Downvote
add an alert in the script to display the value of
Code: 
oDiv.style.width
because it can be stored in a string value of type &quot;550px&quot;. In this case, the test won't work. Give me the alert display, I'll give you the good code. Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Targol,
Here is what I have so far. The first alert is blank and the 2nd alert is not triggered. Thanks for your help on this.

<html><head>
<script language=&quot;Javascript&quot;>
function initPage() {
var oDiv=document.getElementById(&quot;myDiv&quot;);
alert(oDiv.style.width);
if (oDiv.style.width > 250) {
oDiv.style.width = 250;
alert('width adjusted');
}
}
</script>
</head>
<body onload=&quot;initPage();&quot;>
<div id=&quot;myDiv&quot; width=&quot;100%&quot;>
O shaken as we are, so wan with care,
Finde we a time for frighted Peace to pant,
And breath shortwinded accents of new broils
To be commenc'd in Stronds a-farre remote:
No more the thirsty entrance of this Soile,
Shall daube her lippes with her owne childrens blood:
No more shall trenching Warre channell her fields,
Nor bruise her Flowrets with the Armed hoofes
Of hostile paces.
</div></body></html>
Clive
 
Upvote 0 Downvote
An hint : if I understand well what you want to do, you want to display your div using the maximum displayed width aviable. If it's that, why not changing your div to a huge width to force it to shrink on &quot;initpage&quot; function call. eg : try to change
Code: 
<div id=&quot;myDiv&quot; width=&quot;100%&quot;>
to
Code: 
<div id=&quot;myDiv&quot; style = &quot;width : 2000px;&quot;>
and give me the result.
Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
No, that is not what I want to do. I want to establish a maximum length for a line (say 500px) without setting the minimum length of the line.

In other words if the users browser size was less than would accomodate a 500px width then I would like the lines to wrap as though a width had never been specified. Clive
 
Upvote 0 Downvote
You want :
- the whole div to be displayed for each screen res.
- limit the div with to 500px when screen res allows more than that value.

Is that right ?
Waiting your answer, I'll think to it that way. Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
I got it !!!!
Code: 
<html>
<head>
<script language=&quot;Javascript&quot;>
  function initPage() {
    var oDiv=document.getElementById(&quot;myDiv&quot;);
    var maxAllowedWidth = oDiv.parentElement.clientWidth; // Inner width of body.
    alert('maxAllowedWidth = ' + maxAllowedWidth);
    if (maxAllowedWidth > 500) 
       oDiv.style.width = 500;
    else
       oDiv.style.width = maxAllowedWidth;

    alert('width adjusted to ' + oDiv.style.width);
  }
</script>
</head>
<body onload=&quot;initPage();&quot;>
<div id=&quot;myDiv&quot;>
O shaken as we are, so wan with care, 
Finde we a time for frighted Peace to pant, 
And breath shortwinded accents of new broils 
To be commenc'd in Stronds a-farre remote: 
No more the thirsty entrance of this Soile, 
Shall daube her lippes with her owne childrens blood: 
No more shall trenching Warre channell her fields, 
Nor bruise her Flowrets with the Armed hoofes 
Of hostile paces. 
</div></body></html>
I tested this code : it works perfectly under IE6. I'm so proud of me that I'd kiss me LOL LOL LOL Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
You're welcome Clive. Thanx for the star. Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
203
lmcate
lmcate
pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
217
ChrisHirst
ChrisHirst
craigward
  • Locked
  • Question
Change IIS7 Default landing page
Replies
1
Views
124
feherke
feherke
tyutghf
  • Locked
  • Question
Slight page curl effect
Replies
3
Views
215
ChrisHirst
ChrisHirst
southbeach
  • Locked
  • Question
Rapid landing page development / templating 3
Replies
14
Views
423
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top