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.
On Nov 30, 2014, at 5:50 AM, max email@hidden 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.
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.
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.
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.
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
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:
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.
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
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
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
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
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.