I am rebuilding a very old php website that used javascript to display a related content page in an iframe when a hyperlink from a list of hyperlinks is clicked on.
Is there a more contemporary way of doing the same thing using a feature in Pinegrow? This is something I’ll be adding to other sites so I’d like to use some feature in Pinegrow to accomplish this. Any ideas or suggestions of a Pinegrow feature that I could learn and use? I don’t know if a modal would work since you can’t control it’s dimensions and where it displays on the page?
You absolutely can control a modals dimensions and location on the page. It’s done through regular CSS, like any other page element.
I do not know of any updated way of displaying content in an iframe. I think iframes are still used in some cases, though it’s generally discouraged these days.
And that is the rub… which style sheet? Bootstrap? Which rule(s) govern the modal behavior, page location and size, etc.? In the time that I spent trying to locate this, I rewrote the old pages to work within PineGrow (actually works slick). So now I can click on a link from a list in the left column and have its related content detail display in an iframe in the right column.
If you’re using Bootstrap for your site, and the standard Bootstrap Modal Component, the Modal options appear in the property panel when you highlight the Modal in the Tree panel. Once it’s highlighted, the CSS rules that govern the Modal are visible in the Styles panel, just like they would be with any other highlighted Component.
I agree that’s it’s poorly documented in the Pinegrow (ahem) documentation. I vaguely remember seeing a link in the program that said “working with modals” and when you clicked it, it gave you a page 404 error. 
Great program, but you really need to know your way around code to make the most of it.
As usual with the Bootstrap framework, the best documentation (for modals) can be found here: http://getbootstrap.com/docs/4.1/components/modal/
1 Like
May I trouble you with follow-up questions I hope you can help me with?
I have 89 hyperlinks that when click on, now dynamically show relevant content in an iFrame which works really nice on a larger device but the iFrame panel slips below the list of hyperlinks on a mobile device (which also works, just inconvenient). This uses one iFrame to display the content of any of the 89 hyperlinks clicked on.
Can I use one modal to also display any content of the hyperlinks or must I make one modal for each of the 89 hyperlinks? I agree with you, the modal is a better alternate to the iFrame if I can use one modal to display any of the hyperlink’s content (I assume I could place the same code into one modal to do this like I currently have in the iFrame?) since it would popup in the center of the screen of a mobile device and display the relevant content, saving the scroll-down. How would I have it popup on the right for a larger device and in the center of the screen for a mobile device vs. popping up below the column containing the hyperlinks? Can this done via CSS or would I need to add some other code to sense the device in use?
I hope I’ve explained this clearly enough. Any directions or advice to steer me in the right direction would be greatly appreciated. Your nudge would save me a lot of trial and error since I’m unsure how to proceed.
A Modal is nothing like an iframe. All a modal does is place a div above the rest of the content, while it disable access to scrolling, and the area outside the modal is just a large box that covers the content with opaque fill. Typically, when you click outside the modal box, it closes the entire modal.
You can position the modal like any other object using CSS. You can place an iframe within the modal, but you’re really not doing anything much different from having the iframe on the page (other than using the modal to cover some page elements lower in the z-index.
Thanks for your reply, Printninja. I’ve decided to save living on Tums and went with using carousel. So far, it looks to be a better choice to display my images.
While I have you ‘hooked’ … is there a way where I can set the maximum size of the image but have the carousel window remain the same size, depending on the device’s size i.e., have the image set to a minimum size so it shrinks to a “readable” size in a mobile device’s screen but enlarges to a maximum size in the carousel"s window where the image won’t pixelate if it is viewed on a large monitor… in other words, is there a way to have the image’s min-max size independent of the carousel’s window’s size?
I’m not sure I totally understand what you’re asking. In a Bootstrap carousel, typically, you’d use an image that is clear at the max resolution you expect the site to be rendered at, and then you will only get minimal pixelation if it’s displayed on extremely large displays. On smaller displays, the image will shrink fluidly to fit the carousel’s width.
If you really want to use different images at different screen sizes, it would probably be easiest to just duplicate the entire carousel, change all the HTML to point to the other images, and then use media queries to determine which carousel displays, and which gets hidden, at different screen sizes. I have a site where I actually hide the entire carousel below 560px because I find the images are just too small to see clearly on such small displays.
Does this help?
Thanks Printninja,
I gave up on trying to be clever and simply added a fixed-width background to each image in an image processing app so their widths are now all the same. So now as they slide in the carousel, the carosel’s window remains the same width, it just changes in height depending on the picture’s orientation.
I was “playing” around with the idea of placing an iFrame within a modal to display related content from a hyperlink. It works only once but after the first click, the modal fails to display any other hyperlink content. Subsequent clicks on the same hyperlink also fails to reopen the modal with content. I’ve uploaded a screen capture to demo my “close but no cigar” page. Any ideas what’s causing this to work only one time and for one hyperlink??
Is there some place you can upload the page online, so I can look at it live?
FINALLY got my “multiple-links-to-populate-a-single-modal” to work:
Don’t know what I did to fix it but after several re-builds, it suddenly started working: http://nittanyleathernecks.com/vmf112/warriors.html
Jeesh… I just found out that modals are tied to their background page for scrolling and since there isn’t enough real estate on a mobile device to scroll the modal in portrait mode - you have to view in landscape mode so you can touch the background to scroll. Can’t believe bootstrap 4.1.3 is that immature!
So, does anyone know how to fix this.
It scrolls fine on my device in portrait mode. Motorola Droid Turbo. Android Marshmallow.
Well, I guess I have to put the blame on my iOS device then (iPhone 6). At least it’s good to hear that modals do scroll on mobile devices - just not Apple’s. I’ll have to take back my comment about BS4.1.3 being immature. Can you scroll by swiping on the modal pane itself or do you have to swipe on its background?
And thanks for your paying attention to my posts and all your responses… nice to know I’m not alone in this dark forest.
UPDATE…
I created a single, simple modal that is triggered by a single link. The modal does scroll on my iPhone so I re-visited my warriors page to see what may be different. The only difference is that the warriors page modal contains an iFrame - - I do not see why this would prevent scrolling on only my iPhone.
You said the modal scrolls fine on your Droid, would you check again please since I was loading and reloading several css changes to the page after my post and want to make sure the scrolling still works for you.
Meanwhile, I’ll keep on scrutinizing my page and the Internet to see if I can discover why the warriors page’s modal won’t scroll on my iPhone.
UPDATE 2…
I changed the modal’s iFrame width to 85%, leaving a bit more of the background to show on each side. I can now scroll the modal on my iPhone. Perhaps the iPhone screen width is an issue and the modal must be narrower than the screen to allow access to the background page in order to scroll. Would this explain why it scrolled on your Droid?
Randyrie,
I honestly don’t know why it works on Android and not iOS. What I don’t understand is why you’re doing this with a modal? You have a big empty space on the page, so why not show the information there? All you need to do is put the content for each name in a div with it’s own ID, and then use some javascript to show/hide the content when the links are clicked. Since your menu is on the side, you’d have to position the content with CSS. This is the basic idea…
http://jsfiddle.net/mA8hj/
Thanks again for your reply Printninja…
I added a wider margin to the div holding the iframe which provides more space along the left & right side for scrolling on an iOS screen. I learned that iOS has issues recognizing z-indexes which may explain why you have no scrolling issues on your Droid.
I have a page (which is my original) that displays the content on the right side. However on a mobile device, the content is pushed below the column of links and a user may not be aware that a result detail is displaying. See http://nittanyleathernecks.com/vmf112/warriors-iframe.html
And being naturally lazy, I’m using only one iframe that displays the particular link’s content rather than code a show/hide for each link and divs with corresponding id’s. Which does the same thing your as your neat example (which I bookmarked for possible later use, BTW).
