Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ passing parameters to .html

Posted by: koffeeman Jul 27 2021, 03:20 PM

i feel 'comfortable' with .html but i do not consider myself 'expert'
- i would like to ask for help on something i am trying to do:

to simplify:
i generate many (MANY) .html files whose sole purpose is to display .jpg files and (optional) descriptions. currently the high level .html has 3 links:

<a href="grid3.html">3-Across Grid</a><br>
<a href="grid6.html">6-Across Grid</a><br>
<a href="grid9.html">9-Across Grid</a><br>

to which i call the appropriate subsequent .html where the only difference is in the "width=" parm on the

<img src="xxx.jpg" width="33%" alt="a01"> [in grid3.html]
or
<img src="xxx.jpg" width="16%" alt="a01"> [in grid6.html]
or
<img src="xxx.jpg" width="11%" alt="a01"> [in grid9.html]
tag.

this provides a grid of the .jpg file either 3, 6 or 9 across - the three gridX.html files will display the same .jpg list of files.

i would like to just call ONE grid.html file from the high level .html file, passing the subsequent grid.html file a single value (the percentage: 33, 16, 11)

this will mean
a) that i only need to generate ONE file, and
b) i can add single, 2-across, 4-across, 5-across, 7-across, etc. "any-across"

when i go to .html help sites for 'passing parameters to .html files' i get much more complex answers using "gridX.html/? pctg=xx" and requiring javascript to 'get' the parm and never a description/example on how to use the parameter when i have it, into the <img tag's 'width='.

IS THERE ANY SIMPLE WAY OF SPECIFYING A WIDTH in an .html
AND PROVIDE / USE, THE WIDTH, in a subsequent .html
?

to admin's: if i have posted incorrectly, i'm sorry, and please feel free to delete this question.

Posted by: pandy Jul 27 2021, 04:11 PM

With only HTML? No.

Posted by: Christian J Jul 27 2021, 05:49 PM

Here's a script that gets the URL's querystring and styles the width of the images accordingly:

CODE

<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
}
</style>
</head>

<a href="index.html?cols=3">3 columns</a>
<a href="index.html?cols=6">6 columns</a>
<a href="index.html?cols=9">9 columns</a>

<div id="pics">
<img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt=""><img src="dog.jpg" width="100" height="50" alt="">
</div>


<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var query=window.location.search;
    var columns=query.split('=')[1];

    var img=document.getElementById('pics').getElementsByTagName('img');
    for(var i=0; i<img.length; i++)
    {
        img[i].style='width:'+100/columns+'%';
        img[i].style.height='auto';
    }
}, false);
</script>

Note that the container DIV needs to be exactly as wide as the BODY, neither of which can have any margin or padding, otherwise there won't be enough space for the image columns. This is also why I had to remove all whitespace between the IMG elements.

Posted by: koffeeman Jul 27 2021, 09:10 PM

THANK YOU - THANK YOU - THANK YOU

Christian J, i have just changed my .html file and the grid.html file and your solution works GREAT and exactly as i had hoped. thank you very much for the quick response !!!


Posted by: pandy Jul 27 2021, 09:26 PM

Glad you are happy, but I got the impression you didn't want to use JavaScript. laugh.gif

Posted by: Brian Chandler Jul 28 2021, 12:06 AM

Using javascript really is a cack-handed way of doing it though. The OP's question was about parameterising html files, which there is: using the query string. (Christian doesn't seem to have explained what the parameterised URL is... though we can work it out backwards)

If you want to parameterise the number of columns, you use a URL such as:

show.html?cols=N

Then use a server language (such as PHP), you extract the supplied value N into a variable called (eg) $cols, with which you can then compute whatever you need.

Note also that if all you are doing is providing alternative numbers of columns for images, to cope with different shaped (sized) screens, then the flexbox thing gives a much neater solution, as in my question on the css list - sorry don't know how to link, but here is the example page:
https://imaginatorium.com/show.php?genre=both&p2000=x&sfx=any&orient=any

HTH

Posted by: Christian J Jul 28 2021, 04:12 AM

Or, if the OP's goal is just to let users change the size of images on screen, it can be done much easier with the browser's own Zoom control --at least if there's no text on the page that would get zoomed too.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)