![]() |
![]() ![]() |
![]() |
koffeeman |
![]()
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. |
pandy |
![]()
Post
#2
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 ![]() |
With only HTML? No.
|
Christian J |
![]()
Post
#3
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,656 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. |
koffeeman |
![]()
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 !!! |
pandy |
![]()
Post
#5
|
🌟Computer says no🌟 ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 ![]() |
Glad you are happy, but I got the impression you didn't want to use JavaScript.
![]() |
Brian Chandler |
![]()
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 |
Christian J |
![]()
Post
#7
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,656 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.
|
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 24th April 2024 - 04:30 AM |