JQuery Plugin on Layout.Master

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
8/11/2009 2:38:38 PM
Gravatar
Total Posts 1

JQuery Plugin on Layout.Master

Sorry for posting it in this forum but the site won't let me post to the skins forum.  Anyways here's the issue I'm having - I did a bit of searching but couldn't find an answer on this.

I'm trying to include a JQUERY plugin (Image Cycle Plugin - http://malsup.com/jquery/cycle/) on the layout.master.  It's going to be used on all the pages that inherit it. I know that JQuery works - I have a separate function that utilizes it and it works fine.  However when I try to run this plugin, I get the javascript error "Object doesn't support this property or method"  on the call below which is the same call as used in the example:

$('#myslides').cycle({
fx: 'fade',
speed: 5000,
timeout: 2000
});

I copied the code out of the layout into a simple HTML file and it works fine.  Also, I tried placing it into a content area and it did not work there either.  It seems like it's attempting to call the script  that function calls - threw an alert in it and the alert is being thrown up.  Any insight into this is greatly appreciated. 

Thanks

Jim

8/12/2009 6:40:45 AM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

Hi Jim,

Most likely your plugin scripts are being loaded in the page before the core jquery stuff so it doesn't work. View the source of the rendered page to confirm this. See this thread for a strategy, you don't want to add the plugin script directly to layout.master. Use a UserControl to register your plugin scripts so they can land in the page below the main jquery scripts.

Hope it helps,

Joe

9/11/2009 4:15:57 PM
Gravatar
Total Posts 42

Re: JQuery Plugin on Layout.Master

Thanks for the tip Joe on using a custom user control. I wrote a quick article on how to achieve this effect,  www.code.colostate.edu/jquery-in-mojoportal.aspx

9/12/2009 12:29:39 PM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

Hi Steve,

That looks like a virtual treasure trove of good tutorials!

Mind if I link to some of those from our Community Tutorials Page?

Best,

Joe

9/13/2009 8:43:18 AM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

fyi, I am implementing support for this jquery cycle plugin in mojoPortal and will include a skin in the next release that demonstrates image/content rotation in the header. I have it working on my local machine. The new skin will be named andreasvicklund-02-alt3, its identical to andreasvicklund-02-alt2 except for the rotating content added to the header.

Best,

Joe

9/14/2009 3:21:41 AM
Gravatar
Total Posts 34

Re: JQuery Plugin on Layout.Master

Using the above example, I am trying to get this plugin http://www.vaziuojam.lt/js/geogoer/jquery_plugins/vchecks/index.html working. I had it partially working (the cookies were working) but like the OP the function was not recognized.. so I tried following the tutorial, but didn't have much success with that. 

 

I had trouble understanding where to put the register user control line, should it just go at the top of layout.master? Also, when I added this  <jquerycontrol:jqueryusercontrol runat="server" id="jQueryControl1"> I put it just after the <form> tag in the layout.master.. but it messes up the format of my whole site when this is done.

 

9/14/2009 4:42:36 AM
Gravatar
Total Posts 34

Re: JQuery Plugin on Layout.Master

Ok after further experimenting I managed to get this working by simply loading the script below the </form> tag in the layout.master, works perfect now. Is there any downside to doing it this way? (I also took a hint from another thread and used a div instead of an ID for the function)

9/14/2009 5:43:34 AM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

I don't know of any downside if the script can work by putting it at the bottom it sounds fine to me.

Best,

Joe

9/14/2009 9:48:18 AM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

fyi, check out demo.mojoportal.com the andreasvicklund-02-alt1 skin now has image rotation.

But even cooler than that is that I have enabled content slide shows right in the html content feature. Enter some paragraphs images etc and enable the slide show in feature instance settigns to see it in action. (Please don'y do it on the home pqage of the demo site) I've setup an exaple here but it may not last given its a public demo.

http://demo.mojoportal.com/about-us.aspx

experiment with it read the help links and let me know what you think

Cheers,

Joe

9/18/2009 11:19:41 AM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

fyi there is a preview of the next release of mojoPortal available that has the jQuery cycle plugin built in.

Best,

Joe

4/20/2010 9:58:41 AM
Gravatar
Total Posts 42

Re: JQuery Plugin on Layout.Master

Greetings

I have a custom control that loads jquery maphighlight and some other custom jquery stuff. However, when I place the control following the scriptloader (or anywhere else of that matter) it breaks the jquery on the page security settings. I get the following error:

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function

My control:

<%@ Control Language="C#" ClassName="jQueryLSCUserControl" %>
<script type="text/javascript" src="http://....../clientscript/jquery/jquery.maphighlight.min.js"></script>
<script type="text/javascript" src="http://....../clientscript/jQueryLSC.js"></script>
 

jQuery:

$(function() {
// map highligher
$('.buildingMap').maphilight();
});
 

4/20/2010 12:04:19 PM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

Hi Steve,

I would not try to include the scripts the way you are doing it. I would create a method in code named SetupScript() and call it from the page load of the user control. In the SetupScript() method use code like this:

Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                    "idforyourscript", "\n<script src=\""
                    + Page.ResolveUrl("~/ClientScript/path/to/uoirscript.js") + "\" type=\"text/javascript\" ></script>");

I would use StringBuilder from your user control to setup the jquery init script and you need to add it like this example:

string initAutoScript = " $('div.mojo-accordion').accordion(); $('div.mojo-accordion-nh').accordion({autoHeight: false}); $('div.mojo-tabs').tabs(); ";

 Page.ClientScript.RegisterStartupScript(typeof(Page),
    "myui-init", "\n<script type=\"text/javascript\" >"
     + initAutoScript + "</script>");

Hope it helps,

Joe

4/20/2010 12:16:05 PM
Gravatar
Total Posts 18439

Re: JQuery Plugin on Layout.Master

Oh, and thanks for permission to link to your documentation Steve!

I've linked to it from http://www.mojoportal.com/community-tutorials.aspx

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.