The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> passing parameters to .html, parameters html
koffeeman
post Jul 27 2021, 03:20 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 17-September 19
Member No.: 26,991



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 27 2021, 04:11 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



With only HTML? No.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 27 2021, 05:49 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
koffeeman
post Jul 27 2021, 09:10 PM
Post #4


Newbie
*

Group: Members
Posts: 14
Joined: 17-September 19
Member No.: 26,991



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 !!!

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 27 2021, 09:26 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Glad you are happy, but I got the impression you didn't want to use JavaScript. laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 28 2021, 12:06 AM
Post #6


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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=bo...&orient=any

HTH
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 28 2021, 04:12 AM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:59 PM