NFW
Posts: 5
Joined: Thu Dec 21, 2017 1:36 pm

Random Photo from Array wont render text

Sat Dec 23, 2017 2:34 pm

I have an array that selects a random photo. When executed, it won't render the text out of the corresponding div statement. For the sake of curiosity, I put a "static" photo call below the array for testing. Neither is working to render the text. Again, I know I must be doing something stupid, but I can't see it.

There is a test page at: http://www.northfloridawoodworking.com/test.html.

Browsers: Chrome, Firefox, Edge
OS: Windows 10, Android

Thanks for anyone that can give me a hand with it.

Regards,
Sam Rogers

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Random Photo from Array wont render text

Sat Dec 23, 2017 6:32 pm

I ran into the same thing with my little test page. Not sure why, but if you replace the <p> tags with <div> tags in this, I believe it will work:

Code: Select all

<p align=center> 
	<script>document.write(myImage[index]); </script>
</p>
Oh, and align=center is not valid HTML5. Better:

Code: Select all

<div style="text-align:center;"> 
	<script>document.write(myImage[index]); </script>
</div>

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Random Photo from Array wont render text

Sat Dec 23, 2017 6:37 pm

I've put my demo page back up, so you can see what it's doing: (demo removed)
Last edited by MisterNeutron on Wed Feb 21, 2018 2:28 pm, edited 1 time in total.

NFW
Posts: 5
Joined: Thu Dec 21, 2017 1:36 pm

Re: Random Photo from Array wont render text

Sun Dec 24, 2017 1:09 am

Okay, that's completely bizarre, but it worked. However, I can't think of a single reason why that would make any difference, and I'd like to find the answer.

Having said that, your fix worked like a charm. Thank you again for your help.

Regards,
Sam Rogers

MisterNeutron
Posts: 430
Joined: Sun Aug 18, 2013 11:20 am

Re: Random Photo from Array wont render text

Sun Dec 24, 2017 3:58 am

Messy, but it has to do with the fact that a <p> element may not contain a <div> element (or any other block-level element), per the HTML specs. The opening <div> of the highslide-caption effectively closes the <p> tag. The Highslide script is now looking for an element that is a sibling of the <a> tag, but the <p> tag has now been closed, so the highslide-caption <div> isn't recognized by the script.

In short, the effect is the same as if one had written this:

Code: Select all

<p><a class='highslide' href='images/gallery1.jpg' onclick='return hs.expand(this)'>
<img src='images/gallery1.thumb.jpg' alt=''></a></p>
<div class='highslide-caption'>This is the caption</div>
The caption <div> has now become an orphan.

Return to “Highslide JS Usage”