Run Javascript on the head

Run Javascript on the head

  
Hi everyone,

How can I run a javascript at the <head>?

Tks
Hi Carlos,

Look on this thread: http://www.outsystems.com/NetworkForums/ViewTopic.aspx?TopicId=7548&Topic=Integration-of-jQuery
The answer is on the begging of the thread, but I also recommend reading the rest of it. It may match your javascript requirements.

Regards,
João Rosado
Solution
Hi Carlos,

I'm not sure about what you want to know..
Do you want just to put a javascript block in the header(and have the javascript as a resource)?
Do you want to run a certain script when the screen loads?
It would be nice if you could explain better your specific need..
However, just some tips:
You can add your javascript to a screen head using for example, the screen advanced javascript:



or using the action AddJavaScriptTag from HTTPRequestHandler extension (you library can be for example a eSpace resource or a link/URL for the wanted library):



Best Regards,
GM


PS: For more information just look at the post indicated by João Rosado..I was writing my reply for this post and didn't saw his post.
Solution
Many thanks guys! :) 
Carlos Monteiro wrote:
Many thanks guys! :) 
 
 I think this must be pretty easy for anyone who does really know javascript...

I'm trying to use JScrollPane http://jscrollpane.kelvinluck.com/.

I've imported the js and css needed, I'm running the function with the correct css "id", but nothing appears...

Can anyone help me or provide an example?

Thanks 
In Outsystems, a special "Outsystems" id is created.  You need to use the ids that are associated with the widgets themselves for it to work.  You may need to use computed text on the form with the content escaped that calls a function in the page javascript.  Even though the purpose is different, the technique in the "Inline Edit" component will show you how this is done.  http://www.outsystems.com/NetworkSolutions/ProjectDetail.aspx?ProjectId=189
 
Thanks and I know that.

But still doesn't work.

I have this JS function called at the head element:

$(function()
{
$('wtscrollpane').jScrollPane();
});

And then, I have the following div, like the examples

<div id="wtscrollpane" class="scroll-pane" style="overflow: hidden; padding: 0px; width: 612px; ">

And it still don't work. Any help?
Hi Carlos,

First of all, a bit of insight on what you're doing. Calling $(function() { /* your code */ }); is effectively the right way to go, because that means jQuery will run your code only when the DOM is ready to be manipulated. Why is it not working? Because jQuery finds elements using CSS-like selectors, and in CSS an ID is written in the form of #id which means that you should write $('#wtscrollpane'). However, and because IDs can change, I'd rather recommend you to use a class selector instead (by using $('.scroll-pane')).
Thanks Miguel,

I've tried that way and I was no luck. I don't understand why but I wasn't able to accomplish it :)

I think someone good enough with javascript could make an example and even share on the community. I think it would be useful to have a beautiful scroll cross-browser. :)

Carlos Monteiro wrote:
Thanks Miguel,

I've tried that way and I was no luck. I don't understand why but I wasn't able to accomplish it :)

I think someone good enough with javascript could make an example and even share on the community. I think it would be useful to have a beautiful scroll cross-browser. :)
 
 
 Hi Carlos,

Here you have an example of the usage of the JScrollPane plugin using a jQuery css class selector and another using a jQuery identifier selector.
I made also some changes to make it compatible with the platform jQuery library version (1.4.2).
Hope this helps.

Best Regards,
Gonçalo M.
Gonçalo,

Many thanks! :) Really :)
No problem Carlos.
Good to know that it helps..  ; )

Cheers,
Gonçalo M.