Auto resize Website

[Verwijderd]

Ik heb een web site gemaakt op een scherm met een resolutie van 1280 x 1024
Maar als je hem natuurlijk bekijkt op een lagere resolutie is het niet aan te zien

Maar nu is mijn vraag of er een script bestaat en een programma die de hele site automatisch resized naar de resulutie van de bekijker van de site

Want anders moet ik voor elke resolutie de hele website handmatig gaan resizen
en dat is een beetje veel werk

Ik hoop dat iemand er een oplossing voor heeft

Dank U

Dotje

[razor-x]

je hebt de oplossing al zelf gegeven

(als er ook een prog. bestond die de website zou resizen, dan zou de site ook onleesbaar worden etc )

[Verwijderd]

Dus dat wordt een hoop nachten niet slapen

[Verwijderd]

[overbodig_maar_kon_het_niet_laten]
Elke browser is prima in staat om een web site te resizen naar elke willekeurige scherm resolutie. Daar hoef je niets voor te doen. Je moet er alleen wel rekening mee houden tijdens het ontwerpen van je site
[/overbodig_maar_kon_het_niet_laten]

[Hermanvh]

Moet dacht ik wel kunnen. Ik dacht dat er een extensie voor Dreamweaver was

[MrEdge_]

Je moet een website altijd op 800*600 maken, dan kan iedereen het goed zien.
Maar mogelijke oplossingen: maak een extra site in 800*600 en redirect de mensen op basis van de resolutie.
Je kunt ook met tables werken. Als je die bijv. op 100% zet zal de inhoud altijd over de gehele breedte worden weergegeven. Een simpel scriptje om de boel te resizen bestaat niet.

[RM-rf]

msie kent de zoom-css-propertie, je kunt een eenvoudig script schrijven dat de schermresolutie opvraagt en vervolgens de zoominstellingen berekent;

iets als

code:

zoom = "zoom(" + ( 1280 / screen.width * 100 ) + "%)"
if (document.body) document.body.style.filter= zoom

code is niet gechecked en zul je misschien zelf moeten debuggen

verder is de eerdere opmerking terecht, en had je vooraf de verschillende scherminstellingen moeten realiseren en de persoonlijke keus van mensen om bv op 800x600 te surfen respecteren, een website ontworpen voor 1280 breed (belachelijk breed voor een website) kan je niet zomaar terugschalen waarbij hij bruikbaar blijft.
[/code]

[ Voor 4% gewijzigd door RM-rf op 21-03-2003 12:18 ]

[Verwijderd]

Idd niet zo enorm bijdehand van mij om hem in 1280 x 1024 te maken

[Verwijderd]

razor-x schreef op 21 maart 2003 @ 12:03:
je hebt de oplossing al zelf gegeven

(als er ook een prog. bestond die de website zou resizen, dan zou de site ook onleesbaar worden etc )

Gebruik maken van 'tables' is in dit geval zeer gewenst

[Compubiter]

=> Webdesign & Graphics
Heeft meer met het ontwerp van je site te maken dan met de software die je daarvoor gebruikt .

[1st_Ro]

Misschien even een handig dingetje :

Maak een nieuwe bookmark aan en geef dit aan als URL :

javascript:void(resizeTo(800,600));void(moveTo((screen.availWidth-800)/2,(screen.availHeight-600)/2))

Open een browserwindow, laadt een pagina en klik dan op deze bookmark. de pagina wordt dan geresized.

Op die manier fake je een 800x600 schermpje (ik weet het hij's niet helemaal op de pixel nauwkeurig, tiz ook maar een benadering).

De code kan je natuurlijk aanpassen voor elke resolutie die je wil.

[Muurbestormer]

Ik verdenk je er zelfs van om hem nog op 1280 ware pixels te hebben gemaakt en geen rekening hebt gehouden met je browser scherm! of heb ik het fout?

[Dennis van der Stelt]

Dát is een tof scriptje zeg!!! Thanks!

[Noork]

Maar waarom maak je alle frames/tables niet relatief? dat kan er weinig misgaan. Dan ziet het er op elk scherm wel redelijk uit, (nou ja 640*480 misschien niet)

[MrEdge_]

Noork schreef op 21 maart 2003 @ 13:26:
Maar waarom maak je alle frames/tables niet relatief? dat kan er weinig misgaan. Dan ziet het er op elk scherm wel redelijk uit, (nou ja 640*480 misschien niet)

psies. Maar waarschijnlijk heeft topicstarter ook plaatjes gebruikt met bepaalde afmetingen. En die laten zich niet zo 1 2 3 resizen.

[1st_Ro]

Als de topicstarter inderdaad zijn/haar site op 1280x1024 heeft ontworpen en ontwikkeld, dan zal hij/zij toch die site moeten verbouwen om hem goed te krijgen op 800x600 en 1024x768 ... (ik vind Dotje echt een typische meisjesnick, dus daarom het hij/zij)

Ik ga zelf overigens uit van 800x600 en zorg dat het hoofdgedeelte, waar de echte content staat kan schalen. Dat is meestal het netste (vind ik persoonlijk)

En anders zou je moeten kijken of je een tabel maakt met 3 cellen waarvan de middelste cel een vaste breedte heeft.

[gvdh81]

800x600.. pff mensen weten jullie nu nog niet dat dit niet de werkelijke resolutie is die je kunt gebruiken? Denk aan een titlebar, eventuele toolbar (met grote of kleine knoppen) en dan ook nog eens een statusbalk die met XP skin weer groter is etc etc.. Ik ontwerp mijn sites tegenwoordig op een resolutie van 770 bij 570 en open ze in een popup, zonder statusbalk alleen met titlebar want die kun je nog steeds niet uitzetten (chromeless windows werken namelijk niet op ieder os etc etc). Vervolgens centrescreen ik ze, of ik maak een website zonder popup en die bereken ik op 770 bij 448...

[1st_Ro]

Xces,

Hmmm even denken hoor : ik zit sinds 1996 online en bouw al sinds die tijd sites.
Ja dan weet ik het wel ...

Waar jij geen rekening mee houdt is dat er heel veel variaties in browsers etc zijn

Ik heb bijv. een Googlebar. Om nog maar te zwijgen over Mozilla, Phoenix, Opera en andere browsers op verschillende platformen, die verschillende menus en statusbalken hebben.

Dus qua ontwerp moet je gewoon flexibel genoeg zijn om dat af te handelen, simpel.
Mijn scriptje is dan ook een benadering ...

[Sport_Life]

Er bestaan wel scripts die detecteren wat voor resolutie iemand heeft een aan de hand daar van forward naar verschillende reso's (maar dan moet je wel meerdere layouts maken )

[Noork]

psies. Maar waarschijnlijk heeft topicstarter ook plaatjes gebruikt met bepaalde afmetingen. En die laten zich niet zo 1 2 3 resizen.

ja dat is natuurlijk wel zo, maar hele grote plaatjes moet je toch niet in websites gebruiken i.v.m. de laadtijd van een website.

en het is heel vaak mogelijk afbeeldingen als background te gebruiken waardoor er geen scrollbars ontstaan wanneer de afbeelding groter is als het frame.

[MrEdge_]

gvdh81 schreef op 21 maart 2003 @ 13:51:
800x600.. pff mensen weten jullie nu nog niet dat dit niet de werkelijke resolutie is die je kunt gebruiken? Denk aan een titlebar, eventuele toolbar (met grote of kleine knoppen) en dan ook nog eens een statusbalk die met XP skin weer groter is etc etc.. Ik ontwerp mijn sites tegenwoordig op een resolutie van 770 bij 570 en open ze in een popup, zonder statusbalk alleen met titlebar want die kun je nog steeds niet uitzetten (chromeless windows werken namelijk niet op ieder os etc etc). Vervolgens centrescreen ik ze, of ik maak een website zonder popup en die bereken ik op 770 bij 448...

pfff...

Je maakt natuurlijk je site niet 800 bij 600 pixels maar je ontwerpt hem, uitgaande van de schermresolutie 800 bij 600. Dat is natuurlijk heel wat anders... Verder vind ik sites die al mijn werkbalken weghalen en up poppen in een nieuw venster behoorlijk irritant.

[BtM909]

Noork schreef op 21 March 2003 @ 14:06:
[...]


ja dat is natuurlijk wel zo, maar hele grote plaatjes moet je toch niet in websites gebruiken i.v.m. de laadtijd van een website.

hmmm... niet alleen het formaat van het plaatje bepaalt de grootte van het bestand.


Groot plaatje is niet altijd groot bestand!

[Noork]

BtM909 schreef op 21 March 2003 @ 14:11:
[...]


hmmm... niet alleen het formaat van het plaatje bepaalt de grootte van het bestand.


Groot plaatje is niet altijd groot bestand!

ja dat weet ik, ik ben niet achterlijk. Maar in de regel zijn grote plaatjes, ook groter van omvang.

p.s. waar kan ik die website bekijken? ben nu wel benieuwd hoe het er uitziet

[alienfruit]

Je maakt natuurlijk je site niet 800 bij 600 pixels maar je ontwerpt hem, uitgaande van de schermresolutie 800 bij 600. Dat is natuurlijk heel wat anders... Verder vind ik sites die al mijn werkbalken weghalen en up poppen in een nieuw venster behoorlijk irritant.

Precies, voor die web-site die de website fullscreen laten zien, die ga ik niet eens kijken. Ik browse toch niet voor niks in een venster, als ik websites fullscreen wil zien had ik me browser wel fullscreen staan

[Verwijderd]

1st_Ro schreef op 21 March 2003 @ 13:19:
Misschien even een handig dingetje :

Maak een nieuwe bookmark aan en geef dit aan als URL :

javascript:void(resizeTo(800,600));void(moveTo((screen.availWidth-800)/2,(screen.availHeight-600)/2))

Open een browserwindow, laadt een pagina en klik dan op deze bookmark. de pagina wordt dan geresized.

Op die manier fake je een 800x600 schermpje (ik weet het hij's niet helemaal op de pixel nauwkeurig, tiz ook maar een benadering).

De code kan je natuurlijk aanpassen voor elke resolutie die je wil.

Dit ga ik eens proberen Ik hoop dat dit een beetje helpt

[Sn3akz]

MrEdge_ schreef op 21 March 2003 @ 14:09:
[...]

pfff...

Je maakt natuurlijk je site niet 800 bij 600 pixels maar je ontwerpt hem, uitgaande van de schermresolutie 800 bij 600. Dat is natuurlijk heel wat anders... Verder vind ik sites die al mijn werkbalken weghalen en up poppen in een nieuw venster behoorlijk irritant.

Ik kijk bij veel sites naar de statistieken en dan blijkt dat het overgrote deel bezoekers reeds een resolutie van 1024*768 heeft. Wij hebben ook al verschillende aanvragen gehad van klanten die hun website van 800*600 naar 1024*768 willen ombouwen. Puur omdat ze gewoon een slag meer ruimte hebben. Ik ben persoonlijk ook voorstander van dynamische grootes, is helaas niet altijd mogelijk met het design.

[MrEdge_]

Sn3akz schreef op 22 maart 2003 @ 10:33:
[...]


Ik kijk bij veel sites naar de statistieken en dan blijkt dat het overgrote deel bezoekers reeds een resolutie van 1024*768 heeft. Wij hebben ook al verschillende aanvragen gehad van klanten die hun website van 800*600 naar 1024*768 willen ombouwen. Puur omdat ze gewoon een slag meer ruimte hebben. Ik ben persoonlijk ook voorstander van dynamische grootes, is helaas niet altijd mogelijk met het design.

Het is waar dat het overgrote deel van de mensen 1024*768 of hoger draait. Maar toch is het nog zo'n 20% wat op 800*600 zit.
Verder ben ik van mening dat sites die voor 800*600 zijn gemaakt er ook een stuk beter uitzien op hogere resoluties en er zijn maar weinig dingen die niet in een 800*600 ontwerp passen.

[saviour]

Ik probeer mijn site zo te maken dat hij er in 1024 x 768 netjes uitziet. Maar in 800 x 600 is de breedte nog steeds goed (je hoeft niet horizontaal te scrollen). je zal alleen wel verticaal moeten scrollen voor de inhoud.

[RobIII]

* RobIII kreeg een idee, thanks to 1st_Ro en flanste een scriptje in elkaar...

Copy & Paste onderstaande code in notepad, save als BrowserSizes.html en dubbelklik het bestand daarna....

(info komt van Microsoft)

Veel plezier ermee

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>BrowserSizes</title>
    <script language="JavaScript">
        var oWin;
        function bool2yesno (bVal) {
            if (bVal) {
                return 'yes';
            } else {
                return 'no';
            }
        }
        
        function showSite() {
            var strPar;
            var f;          
            var lWidth, lHeight;

            f=frmOpenSite;

            lWidth = parseInt(f.selSize.value.substring(0, f.selSize.value.indexOf(',')));
            lHeight = parseInt(f.selSize.value.substring(f.selSize.value.indexOf(',')+1));
            if (f.chEx.checked) { lHeight-= 28 } //Adjust for start bar
            
            strPar='';
            for(t=0;t<f.chOpt.length;t++) {
                strPar+=',' + f.chOpt[t].value + '=' + bool2yesno(f.chOpt[t].checked);
            }
            if (oWin) oWin.close();
            oWin = window.open('javascript:void(resizeTo(' + lWidth + ',' + lHeight + '));void(moveTo((screen.availWidth-' + lWidth + ')/2,(screen.availHeight-' + lHeight + ')/2));void(window.location.href=\'' + f.txtURL.value + '\');',null,strPar);
            oWin.focus();
            return false;
        }
    </script>
    <style>
        body {
                font-family     :   arial;
                font-size       :   12px;
            }
    </style>
</head>

<body>
    <p>
    <form name="frmOpenSite" onsubmit="return(showSite());">
        <select name="selSize">
            <option value="640,480">640 x 480</option>
            <option value="800,600">800 x 600</option>
            <option value="1024,768">1024 x 768</option>
            <option value="1152,864">1152 x 864</option>
            <option value="1280,720">1280 x 720</option>
            <option value="1280,768">1280 x 768</option>
            <option value="1280,960">1280 x 960</option>
            <option value="1280,1024">1280 x 1024</option>
            <option value="1360,768">1360 x 768</option>
            <option value="1600,900">1600 x 900</option>
            <option value="1600,1024">1600 x 1024</option>
            <option value="1600,1200">1600 x 1200</option>
        </select>
        <input type="text" maxlength="250" name="txtURL" value="http://www.google.com" style="width:200px;"><br>
        <input type="Checkbox" name="chOpt" value="channelmode"> Channelmode<br>
        <input type="Checkbox" name="chOpt" value="directories" checked> Directories<br>
        <input type="Checkbox" name="chOpt" value="fullscreen"> Fullscreen<br>
        <input type="Checkbox" name="chOpt" value="location" checked> Location bar<br>
        <input type="Checkbox" name="chOpt" value="menubar" checked> Menu bar<br>
        <input type="Checkbox" name="chOpt" value="resizable" checked> Resizable<br>
        <input type="Checkbox" name="chOpt" value="scrollbars" checked> Scrollbars<br>
        <input type="Checkbox" name="chOpt" value="status" checked> Status<br>
        <input type="Checkbox" name="chOpt" value="titlebar" checked> Titlebar<br>
        <input type="Checkbox" name="chOpt" value="toolbar" checked> Toolbar<br><br>
        <input type="Checkbox" name="chEx" value="1" checked> Adjust height for windows start menu<br><br>
        <input type="submit" value="Go" style="width:100px;">
        
    </form>
    </p>
    <p>
        <ul>
            <li><b>channelmode</b>  &gt;&gt; Specifies whether to display the window in theater mode and show the channel band. The default is no.</li>
            <li><b>directories</b> &gt;&gt; Specifies whether to add directory buttons. The default is yes.</li>
            <li><b>fullscreen</b> &gt;&gt; Specifies whether to display the browser in full-screen mode. The default is no. Use full-screen mode carefully. Because this mode hides the browser's title bar and menus, you should always provide a button or other visual clue to help the user close the window. ALT+F4 closes the new window.</li>
            <li><b>location</b> &gt;&gt; Specifies whether to display the input field for entering URLs directly into the browser. The default is yes.</li>
            <li><b>menubar</b> &gt;&gt; Specifies whether to display the menu bar. The default is yes.</li>
            <li><b>resizable</b> &gt;&gt; Specifies whether to display resize handles at the corners of the window. The default is yes.</li>
            <li><b>scrollbars</b> &gt;&gt; Specifies whether to display horizontal and vertical scroll bars. The default is yes.</li>
            <li><b>status</b> &gt;&gt; Specifies whether to add a status bar at the bottom of the window. The default is yes.</li>
            <li><b>titlebar</b> &gt;&gt; Specifies whether to display a title bar for the window. This parameter is ignored unless the calling application is an HTML Application or a trusted dialog box. The default is yes. </li>
            <li><b>toolbar</b> &gt;&gt; Specifies whether to display the browser toolbar, making buttons such as Back, Forward, and Stop available. The default is yes.</li>
        </ul>
    </p>

</body>
</html>

P.s. Excuses voor de layout

[ Voor 128% gewijzigd door RobIII op 23-03-2003 04:19 ]