/    Sign up×
Community /Pin to ProfileBookmark

Shrinkable cell

Copy linkTweet thisAlerts:
Jun 18.2005

How can I create a cell in a table which shrinks when browser window is (to smaller size)resized? For example, I have an image which width is 100px. When window is resized (to smaller size) only part of the image is visible not 100px in width but 50 px (for example). The image is not jammed but only part of it is visible. How can I achieve this?
Thanks guys.

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@BonRougeJun 18.2005 — Put it in the background.

Even better, get rid of the table. It's difficult to give the best advice for your page as I haven't seen it, but you're obviously using tables for layout rather than for tabular data. Stop it.
Copy linkTweet thisAlerts:
@thisObjectauthorJun 18.2005 — what is tabular data?
Copy linkTweet thisAlerts:
@BonRougeJun 18.2005 — what is tabular data?[/QUOTE]
That's stuff like [URL=http://www.theschedule.com/]schedules[/URL], [URL=http://stats.football365.com/dom/ENG/teams/Liverpool.html]sports stats[/URL] and [URL=http://www.asx.com.au/asx/research/CompanyInfoSearchResults.jsp?searchBy=asxCode&allinfo=on&asxCode=uni#closing-prices]share prices[/URL] - usually things where you might visibly see a table that has headings for each column and the first item on each row is the subject of the row (I think you know what I mean).
Copy linkTweet thisAlerts:
@thisObjectauthorJun 18.2005 — ######### **************************** #########

######### **************************** #########

######### **************************** #########

##TEXT### **IMG*********************** ##TEXT###

######### **************************** #########


######### **************************** #########


######### **************************** #########


######### **************************** #########

Here is exactly what I have.

When I resize the browser window the imgage stays the same but I can't see

the text on the right side I need to have the following when the window is resized

######### ******* #########

######### ******* #########

######### ******* #########

##TEXT### **IMG** ##TEXT###

######### ******* #########


######### ******* #########


######### ******* #########


######### ******* #########

So, some part of the image is not visible.

How can I do that? Thank you.
Copy linkTweet thisAlerts:
@BonRougeJun 18.2005 — Put it in the background.

Can you show me your page (a link)?
Copy linkTweet thisAlerts:
@griff777Jun 18.2005 — Just did that this morning...

This is the JAVASCRIPT part of the code... The PHP script (not shown) creates the required ID tags for this to work...


[COLOR=Red]<body class="s" onLoad="resize()">[/COLOR]

[COLOR=Red]<script type="text/javascript">[/COLOR]
[code=php]

var IE4 = (document.all) ? 1 : 0;
function setObj_wh(obj_,w,h){
with(document){
if(typeof obj_ == "string"){
if(w > 0) getElementById(obj_).style.width = w;
if(h > 0) getElementById(obj_).style.height = h;
}else{
if(w > 0) obj_.style.width = w;
if(h > 0) obj_.style.height = h;
}
}
}

function resize(){
with(document){
var tNum = '';
var mDate = new Date();
var mday = mDate.getDate() ;
var cColumns = 8.0;
var hMult = (IE4) ? 0.11 : 0.095;
var wMult = ((98.0 / cColumns) / 100.0) ;
var w_ = Math.round(body.clientWidth * wMult);
var h_ = Math.round(body.clientHeight * hMult);
for(var i=1; i<= 31; i++){
tNum = '' + parseInt(i);
if(i <= mday){
if(i <= 9) tNum = '0' + tNum;
tObj = 'pic'+tNum;
setObj_wh(tObj, w_,0);
}
}
}
}
window.onresize = function() { resize() };

[/code]
[COLOR=Red]</script> [/COLOR]

[/quote]

Not perfect, but functional.

an example ( a bit racey... so beware ) is the following link:

http://jdgsoftco.no-ip.com/stare.php
Copy linkTweet thisAlerts:
@thisObjectauthorJun 21.2005 — background thingy worked! Thanks a lot to all of you!!!
×

Success!

Help @thisObject spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...