jQuery Forum

In this thread:
https://forum.jquery.com/topic/usage-of-ids-impossible
jakecigar has already answered my question: pageshow is the event I was looking for.
Best regards - Ulrich

pageshow may or may not be what you are looking for.

Hallo watusiware,
thank you for your reply. The diagram is very useful.
I've switched to pageshow now and it has solved my issue regarding preloading of pages. Multiple firing of pageshow is no problem as I've taken precautions for this. However there is another isssue left. I've written some javascript in order to make my images responsive (1.). Now the problem is that this javascript is executed only for the active page. When the next page slides in it is not yet made responsive; this is done only when sliding is complete. I've tried to use the "pageload" event but this didn't make things better. I could try the "pagebeforechange" event but I have a different question:
Does JQM provide a solution for making the size of images responsive? I googled for this but didn't find anything that fits my needs. (My script resizes only the large image, not the buttons and an altervative solution should do the same).

1. $(document).on("pageshow", function (e) {
       var urlup = null, urlleft = null, urlright = null;
       var owimage;
       function resim(onload) {
           var wbutton = 52;
           $('.ui-page-active img').each(function (i) {
               s = $(this).attr("src");
               if (s.indexOf("buttonleft.png") < 0 &&
               s.indexOf("buttonright.png") < 0 &&
               s.indexOf("buttonup.png") < 0) {
                   wimage = $(this).width();
                   if (onload) { owimage = wimage; }
                   wviewport = $(window).width();
                   if ((wviewport - 2 * wbutton) < owimage) {
                       wimage = wviewport - 2 * wbutton;
                       $(this).attr("width", wimage);
                   }
               }
           });
       }
       resim(true);
       $(window).off("resize").on("resize", function () { resim(false); });  
   

Are your trying to do something that can't be done with CSS Media Queries?

Hallo watusiware, don't understand your last posting. I want to leave the size of my buttons unchanged and resize only the large image, as you can see here:
http://www.ulrichbangert.de/orchid/erdorchideen/2012-08_Spathoglottis_ixioides_2.php
I use the pageshow event now as this one fires when the page is loading for the first time and when JQM loads an additional page. This caused a problem as the image size was zero when it fired. I worked around this by inserting a small delay. This works but is not a clean solution and is visible in that way that the full size image flashes when the animation starts. Any hints how to find a clean solution avoiding this are welcome.

1. $(document).on("pagebeforechange", function (e) {
       var owimage = new Object();
       function resim(ol) {
           var wbutton = 52;
           $('img').each(function (idx) {
               s = $(this).attr("src");
               if (s.indexOf("buttonleft.png") < 0 &&
               s.indexOf("buttonright.png") < 0 &&
               s.indexOf("buttonup.png") < 0) {
                   var wimage = $(this).width();
                   if (!owimage[s] || wimage > owimage[s]) { owimage[s] = wimage; }
                   wviewport = $(window).width();
                   if ((wviewport - 2 * wbutton) < owimage[s]) {
                       wimage = wviewport - 2 * wbutton;
                       $(this).attr("width", wimage);
                   }
               }
           });
       }
       setTimeout(function () {
           resim(true);
           $(window).off("resize").on("resize", function () { resim(false); });
       }, 100);
   });
   

Google "CSS Media Query". It solves your problem much more easily than what you've shown above.

Hallo watusiware,
thank you for this hint. I googled something and found only what I already knew about Media Queries: It allows for different CSS dependent on the size and orientation of the device the page is viewed on. I also found the CSS instruction {width: 100%; height: auto}. But I don't understand how I can do what I intend to do: Leave constant space for the buttons left and right of the large image as I do with the JS instruction
imagewidth = viewportwidth - 2 x buttonwidth.
Could not find out how to do this by CSS and Media Queries.
Best regards - Ulrich

Hallo watusiware,
thank's for this hint. Sounds good. I've viewed this page:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
but did not understand it completely. As far as I understand I would have to change my pages by inserting containers. There are a lot of pages that already exist, but automatic editing by an AWK script would shurely be possible. Unfortunately my editor MS Webmatrix does not yet know about the flex properties. Will check all of this further.
Best regards - Ulrich

On flex-box: You will have to use browser-specific prefixes, and it's a big confusing, because there are 3 "standards":

Did a first step to follow the instructions of Mozilla. The result is this:
http://ulrichbangert.de/kakteen/hybriden/2012-05_HWH_Humkes_Roeschen_flexbox.php
The large image shrinks but the buttons shrink too which is not intended. The height of the image is not adjusted when shrinking.
All this seems to be very new and not well established. Is it part of CSS3?
No good that my editor doesn't support this.

1.     <p style="display: flex; justify-content: center; align-items: center">
       <a href="../kakteen/2011-07_Echinopsis_Stars_And_Stripes.php"><img style="flex: 0 0" src="../../images/buttonleft.png" style="border: 0px"></a>
       <img style="flex: 0 1 auto;" src="2012-05_HWH_Humkes_Roeschen.jpg" alt="Hildewintera-Hybride Humkes Röschen" style="border: 2px solid black; vertical-align:middle">
       <a href="../kakteen/2011-04_Rebutia_marsoneri_flowplayer.php"><img style="flex: 0 0" src="../../images/buttonright.png" style="border: 0px"></a>
       </p>
   

Don't use vertical-align:middle.  You can achieve vertical alignment with flex options.

Yes, I already switched to the flex instructions as vertical-align:middle did no longer work. Did not yet delete it.

Hallo watusiware,
there are several kinds of meta tags. Which one is relevant for the flexbox?
I used Firefox and there the large image flexes.

Hallo watusiware
above you wrote:

You don't have a <meta>. You need a proper <meta> to get the page width set to the device width.

Thanks for your advice. Can you explain what's the effect of this code?

width=device-width in the meta makes the page width equal to the viewport width. jQuery Mobile expects you to use this meta.

Thank you for this explanation!

I've included the meta in my testpage now but flexing doesn't work better:
http://ulrichbangert.de/kakteen/hybriden/2012-05_HWH_Humkes_Roeschen_flexbox.php
Will stop this now. Flexbox seems to be too new and poorly conceived.
Anyway, can you answer my question wether it is part of CSS3?