NetTalk Central

Author Topic: Using a custom jQuery script  (Read 6677 times)

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Using a custom jQuery script
« on: July 16, 2010, 10:20:38 AM »
Well it's not really custom but a cool image magnifier script from DynamicDrive.

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

I've downloaded the .js file and .cur file as per the instructions.  I added the .js file to the web server procedure's "scripts".  I noticed on the image that the "Class" is "Adiv".  The instructions say to use Class = "magnify"

Anyway, how do you use scripts like this in a NT web app?  Would anyone be kind enough to walk me through it?

Thank you!
Don
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Using a custom jQuery script
« Reply #1 on: July 18, 2010, 04:35:40 AM »
Anyway, how do you use scripts like this in a NT web app?
Hello Don,
Nettalk-Webserver can serve two sorts of pages: static pages and dynamically created pages.
For those static ones you are responsible to include such custom .JS. You do this in the HTML-Editor of your choice.
In these dynamically generated paged you tell Nettalk to do that for you.
This takes place in the webhandler procedure.
There you find a method called .IncludeScripts().
Here you can add your own snippet to the automatical generated yaddayadda.

The official yaddayadda is in  PARENT.IncludeScripts(). When you do a RETURN = 'your own' & 'official yaddayadda' BEFORE the ParentCall, like this:

Code: [Select]
p_web.IncludeScripts PROCEDURE

ReturnValue          ANY

! Start of "NetTalk Method Data Section"
! [Priority 5000]

! End of "NetTalk Method Data Section"

  CODE
  ! Start of "NetTalk Method Executable Code Section"
! [Priority 4500]
   return('<script src="/scripts/your.new.script.js" type="text/javascript"></script> <13,10>'    & |
          PARENT.IncludeScripts())

  ! Parent Call
  ReturnValue = PARENT.IncludeScripts()


then your dynamically generated header looks like this:

Code: [Select]
<head>
....
<script src="/scripts/your.new.script.js" type="text/javascript"></script>
<script src="/scripts/all.js" type="text/javascript"></script>
....
</head>

You also can swap places, let you custom JS be at the end.



(I have left out the styles and all other distracting stuff from the header - the <13,10> is inserted for better readability in case you look at the source of your webpage).

NB: I have tried you cool find from DynamiDrive, but it seems not to work with Nettalk-WS 4. Once I removed "all.js" from the pages, then it worked well - but as the rest relies on all.js, it was just an academical test. Nettalk 4 uses RiCO, while your script is utilizing the jQuery Framework.  

Your custom magnifier-script works well with Nettalk 5, because it uses jQuery. In NT5 you MUST NOT add the line
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
because NT5 is using the more recent jQuery version 1.4!

And in addition, in my experience you have to call your custion jQuery-script AFTER the general jquery is initialized.

          PARENT.IncludeScripts()) &  '<script src="/scripts/your.new.script.js" type="text/javascript"></script> <13,10>'  



But in general, this would be the ways to add custom javascripts to your webserver.

hth
Wolfgang

P. S.: of course you can add a script in the Webserver-Extension (which is the easiest way of all), but in this case the required Copyright-Notice is not included!
« Last Edit: July 18, 2010, 05:13:23 AM by Wolfgang Orth »

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Using a custom jQuery script
« Reply #2 on: July 18, 2010, 09:28:18 AM »
Alright, I have the script included.  

What embed do I use for this call?:

"PARENT.IncludeScripts()) &  '<script src="/scripts/your.new.script.js" type="text/javascript"></script> <13,10>' "

The instructions say to use Class="Magnify" but the image is using Class="Adiv"  The instructions also say that you can call the magnify with imageMagnify().  I'm a little clueless about this.

Thank you so much for helping me.  I learn by doing.  So this helps.  

Don
« Last Edit: July 18, 2010, 09:50:44 AM by DonRidley »
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Using a custom jQuery script
« Reply #3 on: July 18, 2010, 10:18:06 AM »
Okay, I've got the magnify script to work on static images.  But I want the magnify effect to apply to images in a browse list (see attached):

[attachment deleted by admin]
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Wolfgang Orth

  • Sr. Member
  • ****
  • Posts: 251
    • View Profile
    • oData Wolfgang Orth
Re: Using a custom jQuery script
« Reply #4 on: July 18, 2010, 12:21:33 PM »
Alright, I have the script included.  

What embed do I use for this call?:

"PARENT.IncludeScripts()) &  '<script src="/scripts/your.new.script.js" type="text/javascript"></script> <13,10>' "
As in the first quote of my previous reply.

Here a screenshot, which does it show better due to its colors.

Quote
But I want the magnify effect to apply to images in a browse list

Well, I guess we have to ask Bruce to add another entry on the "Image"-Tab, next to Height, Width, Alt to have a custom CSS-Class, like the TD also have.


[attachment deleted by admin]

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Using a custom jQuery script
« Reply #5 on: July 18, 2010, 01:32:28 PM »
Thanks Wolfgang! That clears it up. 

Well, I guess we have to ask Bruce to add another entry on the "Image"-Tab, next to Height, Width, Alt to have a custom CSS-Class, like the TD also have.

Yep.
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11

Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11250
    • View Profile
Re: Using a custom jQuery script
« Reply #6 on: July 19, 2010, 10:32:34 AM »
done in PR26

DonRidley

  • Don Ridley
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 729
  • donaldridley2011@gmail.com
    • View Profile
    • Email
Re: Using a custom jQuery script
« Reply #7 on: July 19, 2010, 10:45:36 AM »
As is often said...."You are the man!!"
"Eliminate the impossible, whatever remains, however unlikely, must be the truth."

NetTalk 12.55
Clarion 11