Looking for a better way...

[alex4orly]

I have this website : http://www.beleuramyhome.org.au/ourstories.html

The URL is pointing to a specic page, there are several pages on the site with the same desig.
It is designed with a Masterframe, a header + Menu inside the top layout grid
A place holder in the middle
Another layout grid aith an image at the bottom
On tis page there is a Layout grid with 2 columns, the one on the right contains a Blog object
The one on the left has in it an IFrame
Clicking any of the objects in the blog on the right, loads a PDF with a story into the IFrame

It works OK on a desktop PC and an Apple Desktop
It works OK on a Tablet (iPad or Android) in Lanscape mode
But - it looks bad on a mobile phone in Portrait - the RHS column with the blog entries is placed down the screen, underneath the IFrame. This is not very user friendly in my opinion. Some visitors will not even know they need to scroll down and click a story to read.

Will appreciate any ideas for a different method momre suitable for mmobile phones....

363 more sleeps until next time...
Cheers

[protectourlands]

For the phone layout, I would use an icon in the header to show the blog Objects on top of the pdf area - just like a dropdown. Once a blog llnk is clicked the blog object is hidden again so the pdf shows unobstructed.

Personally I think the whole concept is flawed though. When the pdf opens on my full screen, the text is too small for me to read comfortably anyway. Can you open the pdf in something like lightbox instead? This way it can open full screen over the page and none of this will be necessary.

[alex4orly]

Hello protectourlands... Interesting name you got

Thanks for the feedback.

1) With any prposed solution, I MUST consider who my audiance are, it is a retirement village with the average age around 70.
Most of them hardly know how to navigate it as it is.
2) I also don't know how to make the blog object become hidden once an option is clicked, please tell me, it can be useful
3) I tried to show it in a Modal Layer, but the layer comes on top of the blog object and prevents the options beeing clicked. The same goes for a JQuery Modal dialog.
4) I agree with you that even on a PC the text is too small, I tried a Lightbox, but this needs to be configured with width / height and whatever I will use for a desktop, will be too large for a mobile phone.

I don't like the idea of needing to have a different redirect page for mobile devices, there are out there too many sizes to cater for them all.

Any suggestions?

Thanks again

[protectourlands]

Most of them hardly know how to navigate it as it is.

I am not suggesting anything that would make it more difficult to navigate. In fact it will make it easier because it will move the links upward where they will be more accessible. This is what you asked for help/suggestions on.

Consider not using a grid layout. I don't see how this is serving your design. Make the pdf button links object its own object that shows upon ticking a header link icon/button and hides when not needed.

You would add events to the "Click To Watch" buttons to not only show the pdf but to also hide the entire links object upon click. You can use onclick > toggle for the trigger icon/button in the header. This will allow you to also hide the buttons links object upon click/touch. It will "toggle" showing and hiding the links object.

I hope this helps.

[alex4orly]

Are you suggesting that I DO NOT use the blog object, but just make individual buttons, one per topic?
If so, this brings up another problem - the blog object is sitting inside an iFrame and as the list grows, the iFrame can be scrolled to see other stories.
If I have an individual button per story - How will I do this?

Appreciate your help and feedback

[protectourlands]

Not at all. I am not familiar with Blog Object, but I don't see why it cannot be brought onto the page with iframe, then show/hide the iframe. You will need to be able to add an event to the "Click To Watch" buttons that hides the iframe upon tick. Is this possible? I apologize i am not familiar with blog object. I can set up a demo page if you like.

[alex4orly]

No need to apologize, I appreciate your input
Here is the link again : http://beleuramyhome.org.au/ourstories.html

A BLOG object, allows you to create a list of "Buttons"
Each "Button" has the option of TEXT + Picture + Button - the list on the RHS is a BLOG object with some 35 entries in it
Upon clicking the actual button (or the picture) I can configure in the properties what to show and where
The options are limited : Same window, Light box, iFrame, Popup window
There is no option for me to trap the click / event and tell it to do extra things like with a normal button

So, based on the above, will appreciate a demo if you can

Hope Santa was good to you...

[protectourlands]

Unfortunately if you cannot add the event to the blog buttons to close the inline frame upon selection, this concept will not work without a custom javascript to accomplish this. I am not familiar with blog object so I will be of little help.

I did test the rest and everything worked. You can locate an inline frame anywhere and you can show/hide it with another object like a button or icon, so essentially it acts like a dopdown. When hidden it does not prevent functions underneath it so this will work - if you can add the event to hide the iframe upon selection of any of the buttons in the blog object. That is the only thing holding this up.

[alex4orly]

Sorry, I am not with you - why do I need to hide the iFrame - it is where the document is displayed
I am confused???

Do you men, the visitor cliks the item they want to watch and then, click another button? Why?

Thanks again

[protectourlands]

You will need to hide it because it will be more like a dropdown and will be covering the pdf that opens if it is not hidden. The proposed solution is to make the blog buttons iframe a hide/show dropdown so you can use the full width to display the pdf.

Demo: http://www.icandyexperts.com/test/beleuramyhome.html

If you click "Links" or click the blog icon in my demo, you will see the blogs links show. Click either image again and it will toggle to hide the blogs links. No problem here.

The problem is, once the blogs links iframe shows you really need to hide it again upon clicking a blog link, otherwise it will remain showing and intrude on the pdf view. This is why you will need to assign an event to those blog buttons to also hide the iframe when clicked. Because the object you are using does not support this ( I didn't initially know because I am not familair with this object) you will need to either apply a javascript that hides the iframe upon clicking any of the many buttons, or build the buttons area with something different than the blog object that supports events for buttons. onclick > hide > inlineframe

I hope this helps

[alex4orly]

Interesting idea
I will have to check what else I can use instead of the blog object which is very comfortable for the functionality I want

Thanks so much for your help
Are you in Australia?

Cheers
Alex

[protectourlands]

Hi Alex

No I am in United States. Would love to visit Australia some day.

I thought about you using the standard WB table object with split rows. Then when you need to add a new link you could just duplicate a row and swap out the avatar image/change the button link. The button would now be a standard WB object that supports events. I think this would be just s easy as using the blog object - maybe even easier.

[alex4orly]

Reason I asked if you are in Australia is becasue of your funny name... We here Down under, have the same problem...
WB Table, never used it - I am going to try it right now.

Yes, This is a vast continent, with scenery from the tropical to the arctic.... You are welcome, let me know when you come...

Happy New Year and all the best for 2018

Cheers

[alex4orly]

Have a look here please : http://www.beleuramyhome.org.au/page8.html

It seems that to enter a button, I have to either split the cell or insert another table of 1 x 1 on the side of the image, otherwise - the button itself goes by default underneath the image... Or is there another way?

And when I want to add another story, I have to keep increasing the raw count of the table to make room for it, right?

Cheers

[protectourlands]

Yeah I looked at this and you cannot split a cell horizontally. So a table may not be a good idea after all. Plus assigning the links will require custom html for each cell needing a link. Not good fro adding new rows regularly.

There must be a javascript for onclick > hide that can be called upon when any blog button is clicked. Unfortunately js is not my strength.

I'm sorry I could not be of more help.

Happy New Year to you too.