JQuery Widgets and Styling?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
11/17/2009 11:30:57 AM
Gravatar
Total Posts 114

JQuery Widgets and Styling?

Hi folks,

I'm working on a site for a local church as my first foray into mojoPortal. Began with the Mitcheson-Earthy skin, and as usual, the customer wants more 'pizzazz', and they're starting to yap about using an ithemes skin that would need to be ported into mojoPortal. My thinking is that I can make the site fancier (glassy 3d menu, etc) and not have to go through porting a skin that I don't think would work.

anyway, I have a few questions, if you guys will be kind enough to guide me.

  1. In looking at the rendered pages, I see that the site's horizontal asp menu appears to be jquery-enabled (if that makes sense), and in reading the docs here http://www.mojoportal.com/styling-jquery-widgets.aspx , I see that I should be able to change the theme of any of the jquery widgets. However, changing the theme on the StyleSheetCombiner and touching web.config changes nothing. How might I get these themes to show up? I need to see if they'll give me what I'm looking for.
  2. Reading the documentation here http://www.mojoportal.com/using-ui-widgets-in-your-content.aspx , I see that I can "dress things up" by creating content templates to make use of JQuery widgets. However, the first line of documentation states:

It it now possible as of mojoPortal version 2.3.0.4.to use some javascript UI widgets in your content.

Are there restrictions on the widgets we can use in this manner? If not, how do I go about incorporating them, and if so, am I limited to only the widgets already in the content template dropdown on the editor?

So far, I've been enjoying mojoPortal a great deal; but I'm getting to a point where I may have to do more with it in terms of styling, and am seriously hoping I don't have to dig into it too deeply to accomplish the appearance the customer wants; it wouldn't be cost-effective in terms of my time and their budget, if you know what I mean...

Thanks in advance, guys! Much appreciated.

Duane T. Doutel

Doutel Software Services, LLC

11/17/2009 12:11:13 PM
Gravatar
Total Posts 2253

Re: JQuery Widgets and Styling?

Hi Duane,

  1. The skin you are using (mitchinson-earthy) uses a SuperFish menu which is a jQuery Plug-in but it isn't affected by the same styling that controls the jQuery widgets. To modify the styling of the menus in mojoPortal, use the stylemenu.css and the styletreeview.css (if using treeview style vertical menus).
  2. I'm not sure how to answer this as you can use any jQuery widgets you like. The Accordian and Tab widgets require no "extra" scripting to implement them but other widgets probably do require extra script. For instance, if you want to the Slider, you will need to include the javascript necessary to create the slider in the HTML content section that will contain it.

HTH,
Joe D.

11/17/2009 12:36:43 PM
Gravatar
Total Posts 114

Re: JQuery Widgets and Styling?

Hey Joe!

Many thanks for the reply! I wasn't sure how to ask the questions, so your answer was better than I might have hoped for... heh!

As to the StyleMenu.css, I had gone down that route last night, with fair results. Good to know I was headed down the right track.

Good to know there aren't any restrictions as to what can be used.

Just to make sure I understand you regarding including the javascript in the HTML content: It is possible to include the necessary javascript in a content template which uses a given widget, yes? Or is this not the right way to go? I see where the code that initializes the SuperFish menu resides in the Layout.Master; perhaps if I want to use some other widget, I should place initialization code similarly, in the body of Layout.Master and not in the content template?

Again, many thanks!

Duane

 

11/17/2009 12:46:28 PM
Gravatar
Total Posts 2253

Re: JQuery Widgets and Styling?

I wouldn't include the code for other widgets in the layout.master because it has the potential to slow down your site as it will be loading those scripts every time any page is hit, regardless of whether or not you are actually using the widget on the page. That being the case, I would include the javascript in the content template. The only problem with this is TinyMCE likes to strip script and style tags. To get around this, you could use FCKeditor instead of TinyMCE. You may want to experiment with putting the javascript in a separate file and using the src attribute on the script tag to reference the exteral file. TinyMCE may not strip this out, I am not sure though.

No matter what angle you take, you should have the CSS for the widgets in your style.css file.

HTH,
Joe D.

11/17/2009 1:27:55 PM
Gravatar
Total Posts 114

Re: JQuery Widgets and Styling?

Thanks, Joe; looks like I had it exactly backward...

I already switched over to FCKEditor, so the TinyMCE isn't a problem.

Greatly appreciate your time and expertise; many thanks!

Best,

Duane

 

11/17/2009 1:42:09 PM
Gravatar
Total Posts 18439

Re: JQuery Widgets and Styling?

To use additional jQuery UI plugins you would not want to put the javascript in the content templates. None of the existing content templates have any javascript in them, they have only markup.

We make the tabs and accordion work by using special css class names in conjunction with markup designed for use with the widget. So the markup for the jQuery accordion for example looks like this:

<div class="mojo-accordion">

<h3><a href="#">Section 1</a></h3>

<div>

<p>Section 1 content.</p>

</div>

<h3><a href="#">Section 2</a></h3>

<div>

<p>Section 2 content</p>

</div>

<h3><a href="#">Section 3</a></h3>

<div>

<p>Section 3 content</p>

</div>

<h3><a href="#">Section 4</a></h3>

<div>

<p>Section 4 content</p>

</div>

</div>

 and we inject a little bit of script at the bottom of the page to hook it up (and any others on the page) like this:

<script type="text/javascript" > $('div.mojo-accordion').accordion(); </script>

So, if you were using some other widgets you would have to create a template with the right markup and then add some init script to the bottom of your layout.master page. Our script is injected by our ScriptLoader control but you would put your in layout.master.

We only have a few widgets baked in already but really some widgets require more initialization code and options, so while adding the tabs and accordion was low hanging fruit because they just work and don't require a lot of configuration, other ui widgets may not be quite as easy to add.

Best,

Joe

 

11/17/2009 1:46:55 PM
Gravatar
Total Posts 2253

Re: JQuery Widgets and Styling?

Hi Joe,

Wouldn't adding the script to the layout.master cause it to be executed on every page, even on pages that do not use any UI widgets? I would think that this has the potential to slow a site down.

-Joe D.

 

11/17/2009 2:04:19 PM
Gravatar
Total Posts 114

Re: JQuery Widgets and Styling?

Hey Joes! Tongue out

Well, I just heard from the client, and it looks like they're going to want to use one of the ithemes "essence" templates, so it's probably a whole new ball of wax, likely a port into mojoPortal. If they don't want that, I'll probably just cut my losses and tell them to find another developer; I won't do their site unless it's based on mojoPortal; the advantages of using it should be immediately obvious, even to someone who knows nothing about web development.

I did notice that there was only markup in the existing content templates, but was perfectly willing to "try something different". I suspect that Joe D. is right about the code getting loaded with every navigation, but perhaps something that can't be avoided. I also understand what Joe A. is saying. I'd just have to weigh the costs against the benefits. Everything is tradeoffs, not just in web development.

Many thanks, guys; I'll doubtless be back.

Best,

Duane

 

11/17/2009 2:06:12 PM
Gravatar
Total Posts 18439

Re: JQuery Widgets and Styling?

It does execute on every page even with the current widgets, but jquery has to first find matching elements using the css selector and this is a relatively fast and lightweight operation in jquery. The loading of external scripts can cause extra page load time, but the jquery stuff is included on every page anyway and is cached so it is not loaded again on every page request. The init script is embedded directly in the page so it doesn't incur any additional script loading from external script files.

Best,

Joe

11/17/2009 2:10:05 PM
Gravatar
Total Posts 2253

Re: JQuery Widgets and Styling?

Hey guys,

I didn't think about the scripts being cached so that pretty much negates my argument. Not having the scripts in the templates is a lot cleaner. Thanks for setting me straight Joe!

-Joe D.

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