[Pro] JQuery help...

Freeway
1

Hi Guys,

I’m aware that Jquery has its complications with FW & certain libaries, but on its own on a page some of its features (plugins) are visually impressive!

I’m trying to implement JQuery into my FW doc, but having a few teething problems… Can anyon please help? See my link

I think to help not only myself, but many many others on here could someone please write a simple consise documented list of step by step guide to implementing Jquery in FW… I would if only I knew!!!

Here is a link to the resource I’m currently looking at:
http://devsmash.com/projects/kwicks/examples/horizontal

Many thanks

Worm

http://www.cmlmarketing.com/2012/j/jquery.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

It looks like all you’re missing from your example page is valid links to the jQuery files and the CSS. How did you upload these:

  • jquery-1.8.2.min.js
  • jquery.qwicks.js
  • jquery.qwicks.css

The only issue I see is that they aren’t where your script is looking for them. How did you get the unordered list with IDs into the page? Was that pasted into a Markup Item?

Walter

On Nov 6, 2012, at 5:50 AM, Mr worm wrote:

Here is a link to the resource I’m currently looking at:
http://devsmash.com/projects/kwicks/examples/horizontal

Many thanks

Worm

http://www.cmlmarketing.com/2012/j/jquery.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walt, I used teh upload stuff page action!!! Was that wrong?

& yes the list is pasted into a DIV that contains the crowbar action - I placed the unordered list with IDs in the code button, within this

Worm

What is the best way to do this Walt?

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

You need to take a look at where the scripts were uploaded on your server, and adjust the paths you pasted into CrowBar accordingly. Unless you created a js folder and uploaded into it, that path is certainly wrong. Upload Stuff allows you to either place the files in the Resources folder or in the same folder as the page it’s applied to (With HTML). Adjust your link and script tags to match the actual location of those files, and you should see a little better results.

Walter

On Nov 6, 2012, at 10:02 AM, Mr worm wrote:

Hi Walt, I used teh upload stuff page action!!! Was that wrong?

& yes the list is pasted into a DIV that contains the crowbar action - I placed the unordered list with IDs in the code button, within this

Worm

What is the best way to do this Walt?

Thank you

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Here is mine http://www.deltadesign.co/fw_examples/menus/kwicks.html

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Hi guys,

had to pick this one up again as I’ve bin away.

I had a look at the links & changed them to inline, but still no luck? I must be doing something wrong in my workings…

http://www.cmlmarketing.com/2012/j/jquery.html

Understanding how to implement Jquery into FW would help me, but there is NO clear tutorial or resource to be found?

Your example was great Dave, very nice! Just so frustrating as like most on here so close!!

Sorry to be a pain

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Worm, what are you trying to accomplish with jQuery?

Todd
http://xiiro.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Hi Todd, Jquery has some very nice effects…

With little knowledge of Jquery & how it works, Im intrigued as to how to implement this into FW! Not just the example above, but this is a starting point that I try can develop to teach myself the basic’s of Jquery.

I understand I’m a novice & not afaid to learn so any tips for best tutorials or learning are welcomed!

Once I know how to place in FW correct, refreence the .js .css etc files also correctly… I can then look to take thing a little further with the code side of things to tweak & make things do what I wish to do, without having to always ask like designers always do! :slight_smile:

FW is very good & I have used for years & will continue to do so, but my intrigue, ambition & own/clients needs are pushing the boundaires of what I want do achieve!

Any help is appreciated

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Ah, ok. Most of what I outline below is generally considered best practice but it’s not carved in stone and as always there’s more than one way to do something.

  1. The script calls should either go immediately before the closing tag or in the tag. The closing body tag is generally preferable but it also depends on what your trying to do, it may be necessary to load the js as soon as possible by placing it the head tag instead. In FW go to Menu > Page > HTML Markup… and selection the location.

  2. As your example shows always make sure the core js file, e.g., “jquery-1.8.2.min.js” is listed first with any plugin scripts coming after it.

  3. The js can either be inline, like in your example, or preferably in a separate file which, like CSS, has several benefits when it’s separated from the structure. However, the latter option will require a bit more work (you will need a proper editor to write your js and/or CSS) then in FW you’ll have to use some actions to attach these external files to the FW document. Either option will work but I’m a big proponent of separation. It’s your call.

Does that help get you started?

Todd

On Nov 13, 2012, at 11:27 AM, Mr worm email@hidden wrote:

Hi Todd, Jquery has some very nice effects…

With little knowledge of Jquery & how it works, Im intrigued as to how to implement this into FW! Not just the example above, but this is a starting point that I try can develop to teach myself the basic’s of Jquery.

I understand I’m a novice & not afaid to learn so any tips for best tutorials or learning are welcomed!

Once I know how to place in FW correct, refreence the .js .css etc files also correctly… I can then look to take thing a little further with the code side of things to tweak & make things do what I wish to do, without having to always ask like designers always do! :slight_smile:

FW is very good & I have used for years & will continue to do so, but my intrigue, ambition & own/clients needs are pushing the boundaires of what I want do achieve!

Any help is appreciated

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Hi Todd,

Totally understand what your saying…

Why is my example still not working?

What am I doing wrong? Can you take 2 mins to write how you would do this in FW! That would help hugely

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

What is your example supposed to do?

Todd

Totally understand what your saying…

Why is my example still not working?

What am I doing wrong? Can you take 2 mins to write how you would do this in FW! That would help hugely

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Hi Worm,

I think the problems you’re having are related to linking to the scripts.

  1. First download all the Kwicks scripts: https://github.com/jmar777/kwicks/zipball/v2.0.0

  2. Upload those to your server. If you put them within a folder on your server make sure the links read, "/yourfolder/jqueryscript. If your index.html and script files are in the same directory your script src would be without slashes infront.

  3. Copy all the code within the tags into your websites head via: Insert>HTML Markup. Make sure you correct the stylesheet link to reference the one you have uploaded to your directory.

  4. Copy all the code within the tags into an Markup item on your page via: Insert>Markup Item. Again, make sure you correct all the script paths.

  5. Within that markup item, one of the scripts is called ‘js/jquery-1.8.1.min.js’. Replace this with ‘//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’.

This is the same file however, it is hosted by google. Just a good way of doing it for various reasons!

After this it should all work perfectly. Here is a demo I uploaded quickly: http://sct-photography.co.uk/wormjquery/jquerytest.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Simply do this:

http://devsmash.com/projects/kwicks/examples/horizontal

I can then use this as a main header in my page, revealing sections on my web site… design, about, portfolio, contact… each containing an image & possibly text!

As a absolute novice, I think a times people on here assume you have knowledge of javascript, CSS, html etc etc… therefore presume certain things. I need a basic, run through so I understand, take on board & can then develop from there! Otherwise you never really learn…

Its possibly why Dan Jaskers name still echo’s around this forum… he did things so well, simply & on a fundamental basic level with no prusumptions taking into account people are on different levels. Patience is a vertue he sure had & why his tutorials are still sought after! I think FW could take a leaf out of his book & would greatly benefit from a live video tutorial resource.

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

I have just skimmed over this Seb, but on first impressions.

Thank you!!! will let you know how i get on asap

Also greatly appreciate, everyone else’s help always…

Worm

On 14 Nov 2012, 2:32 pm, Sebastian Crewe-Turrell wrote:

Hi Worm,

I think the problems you’re having are related to linking to the scripts.

  1. First download all the Kwicks scripts: https://github.com/jmar777/kwicks/zipball/v2.0.0

  2. Upload those to your server. If you put them within a folder on your server make sure the links read, "/yourfolder/jqueryscript. If your index.html and script files are in the same directory your script src would be without slashes infront.

  3. Copy all the code within the tags into your websites head via: Insert>HTML Markup. Make sure you correct the stylesheet link to reference the one you have uploaded to your directory.

  4. Copy all the code within the tags into an Markup item on your page via: Insert>Markup Item. Again, make sure you correct all the script paths.

  5. Within that markup item, one of the scripts is called ‘js/jquery-1.8.1.min.js’. Replace this with ‘//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’.

This is the same file however, it is hosted by google. Just a good way of doing it for various reasons!

After this it should all work perfectly. Here is a demo I uploaded quickly: http://sct-photography.co.uk/wormjquery/jquerytest.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Let me know if you have any problems. I have tried to explain myself the best I can.

Always happy to help and finally think I’m at a stage where I can give something back to the Freeway Community!

Seb

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

I hate to preach, but if I thought I could cover every subject… I would do what Dan once did!

Much appreciated Seb

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Likewise. I don’t think I’m reading to make that jump just yet but who knows. Maybe some video tutorials may help someone!

Seb

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

I just cant get it to work!!! Im going mad here… :frowning:

I have done everything you have said, I must be doing something wrong, yet it seems so simple!!! arrrrhhhhhh

I MUST be doing something wrong!

Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Kwicks scripts are on my server here:

http://www.mydomain.com/2012/j/scripts/name.js

This is whats in my PAGE>HTML Markup:

 <link rel='stylesheet' type='text/css' href='http://www.mydomain.com/2012/j/scripts/jquery.kwicks.css' />
        <style type='text/css'>
            .kwicks {
                width: 515px;
                height: 100px;
            }
            .kwicks > li {
                width: 125px;
                height: 100px;
                /* overridden by kwicks but good for when JavaScript is disabled */
                margin-left: 5px;
                float: left;
            }

            #panel-1 { background-color: #53b388; }
            #panel-2 { background-color: #5a69a9; }
            #panel-3 { background-color: #c26468; }
            #panel-4 { background-color: #bf7cc7; }
        </style>

This is whats in my markup item:

 <ul class='kwicks kwicks-horizontal'>
            <li id='panel-1'></li>
            <li id='panel-2'></li>
            <li id='panel-3'></li>
            <li id='panel-4'></li>
        </ul>

        <script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js’ type='text/javascript'></script>
        <script src='http://www.mydomain.com/2012/j/scripts/jquery.kwicks.js' type='text/javascript'></script>

        <script type='text/javascript'>
            $().ready(function() {
                $('.kwicks').kwicks({
                    size: 125,
                    maxSize : 250,
                    spacing : 5,
                    behavior: 'menu'
                });
            });
        </script>

ANY ideas…

(so frustrated) Worm

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

I understand your frustration!

All your code seems to be correct so, from the info I’ve got in front of me, there must be an error/misspell in the links to your scripts.

Are you able to post a live preview of your page?

Thanks,

Seb

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options