Tutorials

16 replies to this thread. Most Recent

max

30 Nov 2014, 9:50 am

[Pro] WebYep tabbed area tutorial

As a quick update Ive been testing the new webyep system out quite a lot lately and whilst I was doing that I needed to create a quick tutorial for someone.
It shows how to construct a quick tabbed area which contained dynamic content… whilst I was doing that I though it would be advantageous to see if everything worked correctly in conjunction with different javascript libraries and with the new system… so you will see that I use MoreCSS within the artwork. The system is using Mootools for the modal windows but it could have been jQuery or Scripty, but for this example I stuck with the Mootools… anyway included in the video is how to ad an image within the richtext area and how to you the floating menu within a longtext area. This is a freeway tutorial but the end bit showing the new system dose give an idea of how the system is coming along.

kind regards max
ps this is a mp4 video download

http://max-izzat.co.uk/downloads/tabs.zip

http://max-izzat.co.uk/downloads/scripts-and-styles.zip

it’s better to be lucky than clever.. :o)

Seth Rosenblum

30 Nov 2014, 1:11 pm

Absolutely awesome Max! Thanks so much!

On Nov 30, 2014, at 5:50 AM, max <[email protected]> wrote:

As a quick update Ive been testing the new webyep system out quite a lot lately and whilst I was doing that I needed to create a quick tutorial for someone.
It shows how to construct a quick tabbed area which contained dynamic content… whilst I was doing that I though it would be advantageous to see if everything worked correctly in conjunction with different javascript libraries and with the new system… so you will see that I use MoreCSS within the artwork. The system is using Mootools for the modal windows but it could have been jQuery or Scripty, but for this example I stuck with the Mootools… anyway included in the video is how to ad an image within the richtext area and how to you the floating menu within a longtext area. This is a freeway tutorial but the end bit showing the new system dose give an idea of how the system is coming along.

kind regards max
ps this is a mp4 video download

http://max-izzat.co.uk/downloads/tabs.zip

http://max-izzat.co.uk/downloads/scripts-and-styles.zip

DeltaDave

1 Dec 2014, 12:37 am

Hi Max

I hadn’t thought to use either of Script Doc.Creator or Script Doc.Linker actions until I watched your tutorial but now I have seen them in action I will certainly use them quite often. Thanks for that.

However, I am struggling to get your Tutorial to work for me - not as a WY page, but as another method to create Tabbed areas.

Can you please share a FW doc with us as I am obviously going wrong somewhere.

Many thanks

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

max

1 Dec 2014, 6:03 am

hi david yep of course i will upload a version later on for people to look at

speak soon max

it’s better to be lucky than clever.. :o)

DeltaDave

1 Dec 2014, 6:43 am

i will upload a version later on for people to look at

Thanks - quite intrigued by what the the MoreCSS javascript library offers.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

max

1 Dec 2014, 10:41 am

Hi david the artwork has been uploaded so you can have a look at it

http://max-izzat.co.uk/downloads/toggle-tabs.freeway.zip

The moreCSS library is quit an odd one really in that its been constructed in a way that allows people who are a little more comfortable with the way css is written to experiment with a javascript library I think the biggest bonus is its size, If you wanted to do what I have done with Jquery or Scripty or mootools then you are talking about a big library to tackle what is really quite a small task. MoreCSS is really very small… I think jQuery come in at 80 for 90k minified and MoreCSS comes in at about 10 or less if you start to use PHP gzip compression.

there are a lot of examples on the site although quite a lot of what it can do can be accomplished by using modern css techniques. but things like the toggle is a great bonus

it also seems to work fine when combined on the same page with other libraries so if people are on the look out for a JavaScript toolkit that has CSS like syntax then it may be just the job.

all the best max

it’s better to be lucky than clever.. :o)

max

1 Dec 2014, 10:50 am

If people are interested here is the home of the library

http://morecss.yellowgreen.de

all the best max

it’s better to be lucky than clever.. :o)

DeltaDave

2 Dec 2014, 10:33 pm

Thanks for sharing that Max.

One thing that should be noted about using MoreCSS like this is that you cannot preview the effects locally - the files will need to be on the server (the MoreCSS.css and MoreCSS.js)

You can preview locally if you reference the files on the server ie use an absolute path http//mysite.com/myfolder/MoreCSS.css rather than just a relative path /myfolder/MoreCSS.css

At least that is what worked for me! My example is a plain html page to demonstrate that the same technique can be used with or without WY.

http://deltadesign.co/FW7Test/tabs-with-morecss.html

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

max

3 Dec 2014, 11:26 am

Hi Dave yes that correct for the scripts to work they need to be running within a php environment although running it within MAMP localy is fine.

one of the nice features of that specific toggle is you can click on a link on one page and it will reveal a specific tab on another page. Although I didn’t ad that to the tutorial it is available to see on the MoreCSS site

all the best max

it’s better to be lucky than clever.. :o)

waltd

3 Dec 2014, 3:05 pm

I think you may find that what you referred to as a “relative” path was really a root-relative path. If you think from the perspective of the page where you are linking to the file, in terms of how you would navigate to that file, you can construct the sort of “up and over” URL that Freeway does when referring to resources or other elements outside the current page. If your site folder looked like this:

site/
  index.html
  scripts/
    MoreCSS.js
  stylesheets/
    MoreCSS.css
  subfolder/
    another-page.html

and you were linking from the index page, your link to the css would look like this:

<link rel="stylesheet" href="stylesheets/MoreCSS.css" />

If you were linking from “another-page”, it would look like this:

<link rel="stylesheet" href="../stylesheets/MoreCSS.css" />

The same technique would work with the script tag, too. You can extend this to any level of nesting. But did you try just using the External JavaScript and External Style Sheets Actions to apply the respective files to your page? It seems to me that that might work, unless there needs to be a complete concordance between the location of the JS and the CSS — if there are hard-coded references from one to the other. Freeway may put these files together, or it may not, depending on the size and complexity of your document and the levels of nesting therein.

There’s nothing I can see in MoreCSS that requires PHP or a real server — it should just work from a file reference too, as long as the URLs you use to load the script and style are truly relative to the current page.

Walter

Freeway user since 1997

http://www.walterdavisstudio.com

DeltaDave

3 Dec 2014, 7:34 pm

for the scripts to work they need to be running within a php environment

I don’t think you need PHP but it would appear that the script at least has to on the server.

I did try using the js linked from my Mac and even though the Web Inspector says it is loaded it doesn’t seem to function!?

it should just work from a file reference too, as long as the URLs you use to load the script and style are truly relative to the current page.

That is exactly what I thought too but I couldn’t get it to work unless the JS was on the server.

It doesn’t seem to matter about the MoreCSS.css file though.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

max

3 Dec 2014, 8:48 pm

Hi Walter and Dave I read some time back the minimum requirements and i was sure the MoreCSS.js file had to be running within a php environment. I cant find that spec anywhere any more but I am recalling something I read some time back. I don’t know why its using php but then I haven’t really gone into it very deeply

all the best max

it’s better to be lucky than clever.. :o)

Todd

3 Dec 2014, 8:54 pm

From the website:

Use a web server environment. Otherwise MoreCSS is not able to load the external CSS file.

Todd http://xiiro.com http://xiiro.com/

I read some time back the minimum requirements and i was sure the MoreCSS.js file had to be running within a php environment.

max

3 Dec 2014, 9:01 pm

aah well…. then it sounds like any server will do :o) as i said it was some time ago i read the spec thanks todd for finding the reference to the requirements

max

it’s better to be lucky than clever.. :o)

max

8 Feb 2015, 11:10 am

Hi what you are probably looking for is this http://freewaytalk.net/thread/view/156605#m_156612

I explain how to create a tabs system using a simple javascript framework and then add webyep items within the tabs I recorded a quick movie which you can download and supportive files

speak soon max

it’s better to be lucky than clever.. :o)

Back to Top

Peter Laundy

10 Aug 2015, 9:58 pm

Delta Dave:

My example is a plain html page to demonstrate that the same >technique can be used with or without WY.

http://deltadesign.co/FW7Test/tabs-with-morecss.html

If anyone else:

  • Wished that the tabs in Max’s tutorial and freeway file indicated which tab was currently selected and displayed, and
  • Was therefore happy to see that Delta Dave had figured out how to do it (without mentioning it, being ever humble, and also didn’t mention how he did it)

I figured out how to do it in FW. Here is what I did:

-1-

Did some combination of following the instructions in Max’s video and utilizing the freeway file of the results he shared, not including the steps to add webyep dynamic functionality

http://max-izzat.co.uk/downloads/tabs.zip

http://max-izzat.co.uk/downloads/scripts-and-styles.zip

http://max-izzat.co.uk/downloads/toggle-tabs.freeway.zip

-2-

Add the following code to the “bespoke code” in the page action on the page MoreCSS.css:

#a.wy-tab:active => #navigation div {
toggle-class: selected-tab;
toggle-class-active: wy-active-tab;
toggle-class-behaviour: switch;}

#a.wy-tab:first => #navigation div {
toggle-class: selected-tab;
toggle-class-active: wy-active-tab;
toggle-class-behaviour: switch;}

This assumes you’ve named the div containing the tabs “navigation”

-2-

Using the style palette, add two more classes to parallel the one’s in Max’s tutorial tagged “#navigation div” and “#navigation div.selected-tab” (no quotes) and specified different background colors and, with extended code, “display: block”.

In the inspector I selected white for the color of the tab names.

Here’s a link to the results:

http://www.peterlaundy.com/tests/01-tabbed-page-area/maxtabtest.html

Peter Laundy

Evanston, Illinois, USA