How to do using componet modal window...

User 2699991 Photo


Registered User
4,782 posts

I can see what you are wanting to achieve, I think the problem you will still be facing is that just placing the html code for the content of the modal window on your static site, into your modal window on your responsive site, won't necessarily make the static site content responsive.

I will do a test today (not now though as it's 2:00 am here in Indonesia, Just landed in my house in Java,, ) will let you know later after a few hours resting. If it does work and you are using ff "WITH COMPONENTS" as your project, then I will make a demo video for you as to the process.

Don't hold out too much hope though, because I am pretty sure you will need build in the model content again directly within FF not link it to a static page file, and it becoming responsive.

If anyone knows better about putting html code from a static page, into an html element in FF and that then makes the static page responsive then please chip in,
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

The only way I can think of to make the site responsive without having to start from scratch, is building it with the HTML Editor. You can download Foundation from http://foundation.zurb.com/sites/download.html/ in order to get the framework and the necessary css and js files. Then you can add your own contents and styles by copy/pasting a bit. And using a bit of flex would make the three panels reorganise themselves below each other, and the book covers to wrap for smaller screens.
With RFF I guess you need to start all over again. The existing code seems to have a lot of scripts, and I wouldn't know if they belong to the NetObjects or if they are pertaining to some special effects. It would be some massive html elements if you were to place the existing code in them. And maybe some of the scripts would clash with the ones from Foundation, I wouldn't know because I don't know NetObjects.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2699991 Photo


Registered User
4,782 posts

Hi Inger,
I also did a similar reply to yours but lost internet for a while lost lost it again before I could post it.

Larry
My recommendation would be just do the whole thing from FF (even project without components, can make your own modal window) and the latest stuff from foundation also solves the problem that TABS have in responsiveness.) my only worry is that it is an awful lot of modal windows on one page (so to speak) I have done a site with 15 modal windows on a page although it works it did start to cause some problems with ff in stability (think that was what was causing it) and also you would need careful placing of the actual modal container & the images for the books (trigger for the modal window would need to be placed as a picture link

Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts

Hello again

I have made a demo of using the modal window in FF
its a very simple demo no fancy stuff really
I also know that the text in the modal should wrap around the image but if the look and what happens is something you want to take a bit further then the text can be made to wrap to give a better effect.

have a look anyway and see what you think, i can then make another video showing the process etc for you to try and follow

here is the link to the demo
https://www.dropbox.com/s/vqsvl1pgmp1ff0h/model-demo.zip?dl=0
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 244626 Photo


Registered User
811 posts

I downloaded your video Wayan for a looky - very well done.

I do not know if this is useful....

http://codepen.io/rafibomb/pen/kXEwWq?editors=1010

You are way beyond my clouds......

Thanks
Bootstrap 5 CSS Grid.
User 2699991 Photo


Registered User
4,782 posts

Foundation Framer has built in model window which you can change to just a reveal rather than full reveal.

You can also create your own using the foundation class insert a container into a column set the class to "reveal" set the attribute to "data reveal" set ID of the container to whatever you want then just set the attributes for the button or image link or text link or link container to "data open" then add the id for the container "reveal".

I have even created a model gallery (sort of) with back and forward buttons,, looks pretty cool too.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts

Hello again from Dark Cloudy Rainy Indonesia

I have had a good look around your static site which is still very good (even though a bit outdated) and I think can be reasonably re-made to be responsive directly within FF keeping somewhat to the original design), with a little bit of work and thinking about.
Although this could be an opportunity to completely re-design and think about the layout and update some of the content of your web-site I also understand that you would probably be wanting to keep the overall style/design of the existing site as much as possible in order to not over confuse your elderly clients, although perhaps a little bit more credit should be given as to the adaptability and resourcefulness of all us elderlies :D) If the design is clean/modern and the navigation clear and simple then it will be fairly straightforward for young or old to follow :D

HOWEVER,

Whichever way you decide, your existing web-site design is going to need some re-designing and thinking about, to make it fully functional and visually pleasing in Responsive mode.

One of the main design changes needed(layout function ability (take your pick) is the use of "Tabs" in some of your pages especially in your "Testimonials" where at the moment there are some with quite a few tabs.
The problem with "Tabs" in responsiveness is they don't respond very well and can look squished untidy or too close together (the almighty Google also don't like links (tabs in this case) to be too close together at smaller device sizes, especially for those of us who have large fingers and unsteady hands (due mostly to old age) as in those devices one doesn't have the luxury of a mouse, so the dangers are hitting the wrong link/tab/button etc, or even worse hitting 2 at the same time.
The new FF 6.(something) is supposed to have a new feature which changes "Tabs" into" accordion" at lower viewports, I haven't yet had the time or opportunity to test it out, but even so I am not sure that would be a clean and proper solution for the best experience for your clients. so this is definitely one part of your design for a responsive site that needs thinking about.

I have done some testing within FF for the use of a modal window idea and so far not had any problems getting all of the links/ images on your pages for all of them to bring up a modal window, (including some of the one's which originally are separate pages (the "About Us" for example I have tried that as a modal ) The pdf files can be placed into the project folder within FF and linked to from there, works a treat, so that shouldn't give you a problem.

I am not sure about the link to the shopping cart for orders, can't seem to get that to work properly, so that might need more thinking about as to how to get that going

The "Help" buttons alongside your page title, don't do anything except go to pages that have no help content at all, these should be removed in your new design (or create some proper help pages).

Some of your content needs updating/freshening up (especially quoting dates etc) a little bit, always has and always will be something that is essential with any web-site is to keep updating content (that includes images etc) in order to keep the almighty Google and the other lemming followers happily indexing your pages

Other than those few things, you shouldn't really have too many problems getting a new responsive site up and running in no time at all looking good and as close to your static design as doesn't matter, by working directly from within FF,
It is still going to take some work, but not nearly as much as trying to alter and change your existing site, and far less danger of mistakes/conflicts going on, and putting static pages into a responsive modal window or any other way is possible, it doesn't make the static page responsive, so trying it that way is about as much use as a chocolate fire guard..

Anyway I hope that sort of helps, I can put together some video's for you to show the process for adding modal window etc if you would find that helpful.

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts

Scrap the comment about the "Help " Buttons turns out it was my slow internetconnection that would't load the help pages.
apologies
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2796380 Photo


Registered User
94 posts

Been gone a few days for Christmas so it looks like I have a little reading to do.
Yes I am using FF with components.
All pages you see on my static site I am almost finished creating so they are all responsive. The way I have done this is: The main web pages are in one project. The FAQ pages are in another project. The EZorb Library pages are in another project. The Marvlix Library pages are in another project. My idea was to export each project and upload into their separate folder on server. Then upload main pages. Click on a book icon and let the modal window component open its associated link pages. I hope you understand what I am trying to explain. The end result would function like the static web page but all pages are responsive.

The way the static site worked is when you click on a "book icon link" it will open its file located in a folder that contains all the html and pdf file that the modal window drags in.

So all I want to do is use the FF modal component and have it open the new responsive page in a modal window with the main page in background.

I am hoping that is what you have created if not should be close.
Thank for all the help will be in touch.
Larry
PS: I am using TAB's and have done away with Help buttons sounds like your thinking is on same page as I am on. Hope to get this uploaded for demo testing by this weekend. Will make it easier getting help. This will be my FIRST responsive web site.
Larry Penny
User 2796380 Photo


Registered User
94 posts

Hi Wayan,
I get a 404 on the demo.
Sorry I didn't mean to leave myself out of the elderly group. I will be 79 next August. I have finished all pages in web site except Testimonials working on them now. They will be tricky.
Thanks,
Larry Penny

Wayan Jaya wrote:
Hello again

I have made a demo of using the modal window in FF
its a very simple demo no fancy stuff really
I also know that the text in the modal should wrap around the image but if the look and what happens is something you want to take a bit further then the text can be made to wrap to give a better effect.

have a look anyway and see what you think, i can then make another video showing the process etc for you to try and follow

here is the link to the demo
https://www.dropbox.com/s/vqsvl1pgmp1ff0h/model-demo.zip?dl=0
Larry Penny

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.