I’ll give this a shot, but it will take some experimentation on your part, for which you will need the proper tools. I recommend BBEdit from http://barebones.com (paid, with a free use option) as a great general-purpose code editing tool. If all goes well, you will only need this for reading, not writing, but the benefit of using a professional editor (rather than a general purpose text editing tool like TextEdit or a word-processing application like Pages) is that you will see your code in a color-coded monospaced layout, where it stands a chance of being slightly more understandable.
Make sure that your document preferences in Freeway include “Output / HTML code: More Readable”. That will put the output HTML that Freeway writes into a “pretty” format, rather than mashing everything together on as few lines as possible (More Efficient).
Let’s start with the CSS. If you have a block of CSS code that you want to put into the page, and it’s all written for you and ready to go, the very simplest way to do this is with the Page / HTML Markup dialog in Freeway. Opening that dialog will show you a code editor window with a picking list below it, indicating where the entered code is to be inserted into the page tree. Choose “Before ” as your option, and paste in the code. If you are coming from CodePen, you won’t have the start and end blocks (since CodePen works in a different manner, with separate CSS files, rather than putting the code into the page head). You will need to add those. The result should look like this:
<style type="text/css">
[PASTE
CODE
HERE]
</style>
Next the JavaScript. We can use the same sort of trick as the CSS, in fact, you can keep that same window open and add your script there. In CodePen, there are options to add library code to the page before the script block shown in the interface is run. In the case of your example, there are three libraries: jQuery, Google Maps, and Noisy (which is a plug-in to jQuery). Those can be found in the Settings / JavaScript part of CodePen.
A word about jQuery here: If you have used any of my “Scripty” Actions on the page, or even used any of the built-in Freeway Actions like Rollover with any of their Effects options enabled, you will have added Prototype.js to the resulting page. Prototype and jQuery don’t get along well, and in any case, do exactly the same thing (so you only would want to use one of them, never both). The code you found in CodePen is based on jQuery, and won’t work without it. So you have (unbeknownst to you) chosen a fork in the road that has large consequences. When you use jQuery in Freeway, you are effectively on your own, and you can’t use Actions (this is not strictly true, but the Actions you CAN use are quite geeky – I would argue almost as geeky as writing the code long-hand the way we are here).
To insert the three libraries into your page, you will need to add “scriptsrc” blocks to the Before block of Page / HTML Markup. Your Before code will seem to disappear when you choose the Before option, but it is still there, and you can navigate between a number of different ordinal points in the page tree in this manner.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.2/jquery.noisy.min.js" type="text/javascript"></script>
Next, add another script block below those to contain the code from the JavaScript portion of the Pen:
<script type="text/javascript">
[PASTE
CODE
HERE]
</script>
Now you can close the HTML Markup dialog, and publish the page. If you set up BBEdit as one of your browsers (File / Preview in Browser / Browser Setup) in Freeway, you will be able to choose BBEdit as the “browser” and preview from Freeway directly into your code editor, where you can see that the code you pasted is properly output in both the page head and at the bottom of the page.
Next, you will need to duplicate the HTML portion of the Pen. This Pen is based on a very simplified HTML structure, and Freeway won’t usually make that for you without some coaching. You will need one Action to suppress Freeway’s usual behavior when using inline Markup Items (it wraps them in a paragraph tag for some reason). CrowBar - ActionsForge
In your layout, choose or create your 100%-width element where you want the map to appear. Double-click it so that you have a blinking text cursor inside it. (There should be no other content in this box.) From the Insert menu, choose Action Item / Crowbar. Click once on the Crowbar item (little box with a gear on it) and look in the Actions palette. You should see a highlighted tab for Crowbar, with a button on it labeled Code. Click that, and paste in the code from the Pen:
<div id="map_container"></div>
<div id="map"></div>
Note that I didn’t choose all of the HTML from the Pen to paste. That’s because Freeway is going to take over the building of the “container” element and the headline (if you want one). The only parts you need, therefore, are the map+container and map elements. Because these are being added “behind Freeway’s back”, it is incumbent on you that you don’t name anything else on the page the same – so don’t draw a box on the page and make its name (in the Inspector) “map” or “map_container”. That will end badly.
Publish and upload your page (the scriptsrc tags we added initially cannot be previewed locally, because they begin with // rather than http://). Visit the finished page in your browser, and see what you see. If you made the outer element (where you inserted the Crowbar) flexible width, and the page also flexible width, you should see a nice stretchy map.
Now you’ll need to tumble further down the rabbit hole, finding the latitude/longitude for the center of your map, and updating the JS code you put in the Page /HTML Markup dialog, and making any other adjustments to the description etc. You’ll also need to figure out how to make the map adjust its height (Height: Flexible on the outer HTML item in Freeway). If you want it to have a different aspect ratio, you’ll need to adjust the CSS you added, making the padding-bottom value for #map a different percentage. None of this will work without a page that is designed in the “Inline” layout style. Just drawing boxes on the page will not work well for flexible items.
Previewing into BBEdit will show you a nice view of the code you’ve created in Freeway, but learning to read that is a lifetime’s pursuit. Any journey begins with the first steps, and if you follow these (and follow up with us here, posting links in progress), you will be able to carry this as far as you like.
Walter
On Apr 21, 2017, at 10:39 PM, Dirk van den Berg email@hidden wrote:
I guess that some here will take me for a green idiot - but I am a film director, not a web coder (which is why I have been using Freeway). So I am not shy and ask the question I haven’t found a comprehensive answer for.
Freeway says in its manual that you can “Easily add custom code”, specifying that if you got some code you want to add to your site, there is “no problem, you can add any code you want, whether it’s PHP, JavaScript, CSS or just straight markup.”
Now, one of the things I would like to do on my website is to create a responsive Google map. I found this page here: https://codepen.io/hubpork/pen/xriIz#presentation
which seems to do exactly that.
But now there are those three sections: HTML, CSS and JS (which I assume stands for Javascript).
Now here it comes, the stupid question: HOW DO I PUT THESE THREE PARTS INTO FREEWAY???
I would greatly appreciate the help and I swear - I have looked everywhere but most of you seem to know this and therefore NEVER explain the steps one by one…
Thank you!
Dirk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options