A few questions regarding JS and JQuery.

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.
8/4/2010 1:51:50 PM
Gravatar
Total Posts 12

A few questions regarding JS and JQuery.

Hello, I've been trying to design a skin and I quickly ran into a few problems.

 

The first is this: I'm using an image for my navigation bar and setting its display values using this code in the css: "background: transparent url('sitemenu_new.png') repeat-x 50% 50%;"

This displays fine in Firefox, but for some reason the colors all change in IE8. I know there is a browser detect code in JS, but I'm not particularly familiar with it, so I'm looking for other answers (or help with the JS code involved).

My second problem involves Jquery. I designed a Jquery theme using their ThemeRoller, but when I install it into the skin for some reason it wont use any of the graphic effects that were displayed on their site.

Mainly I had it set to texture and shadow, but none of those effects work. I was wondering if there is a specific file I'm missing. I only used the css files in the theme because the js files I used messed up other parts of the page (mainly the file manager).

 

Sorry for the length of this post, and thanks ahead of time if any of you have answers for these questions.

8/4/2010 4:05:13 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: A few questions regarding JS and JQuery.

I think the IE png color problem is pretty well known. Here are some possible workarounds you could try. Sorry I'm not very familiar with JQuery, but I'm sure others can answer that part of your question.

8/4/2010 4:52:45 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Ah, thank you very much that fixed the PNG problem just fine.

The program on that web site didn't work, but I simply converted the pngs to gifs and that fixed the problem.

Thanks again. =]

8/4/2010 8:49:32 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Hey everybody. When I originally used the PNG files I created them using GIMP. However, it was suggested that I use another program like Paint.NET to create the PNG files and see if they still rendered wrong.

I wanted to post this here so that people know for future reference, using GIMP to create the files did have a different effect from using Paint.NET, however both sets of PNGs were off-color in IE8 compared to FireFox. I've not had this issue with IE8 until now, and I'm not entirely sure of the cause.

The only thing I can think of is that it is because I am not using a set-image for the whole background, but rather just a portion of an image (as you can see from the code I posted above), and that perhaps it isn't a Gamma issue but is rather a positioning issue with the image.

I'm not able to prove that, and an obvious contradiction arises - if its a positioning issue, why would a Gif work better than a PNG?

Also, while Paint.NET did a better job of keeping the colors correct, it wasnt close enough to match the shadow (Fade to transparent) that I have below the menu.

The only reason I really prefer PNGs over Gifs in this instance is that PNGs support alpha opacity filtering and I would like my fade to transparent to actually be transparent, so that I don't have to change the image each time I change the background color of the site.

Once again, sorry for the length of this post, and thanks to anybody who helps.

8/5/2010 5:41:32 AM
Gravatar
Total Posts 18439

Re: A few questions regarding JS and JQuery.

Hi Isaac,

Regarding jQuery UI, by default we load jQuery and jQuery UI from the google CDN (Content Delivery Network). To use a custom theme you should self host the jqeury files and install them as documented here:

http://www.mojoportal.com/self-hosting-jquery-and-jquery-ui-files.aspx

Hope it helps,

Joe

8/5/2010 2:21:03 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Joe Audette, thanks for the link, I had only been looking under "creating skins" in the documentation.

I am still having a problem, however. I followed the steps outlined in the link you gave (and have re-checked it twice), but now instead of showing an incorrect UI, it's not showing any UI at all.

I was wondering, when self-hosting Jquery, do I still need to link to files in my style.config file (as explained here: http://www.mojoportal.com/styling-jquery-widgets.aspx )?

And if so, would I need to do something like this: "<file ccsvpath="/ClientScript/jqueryui182/themes/ui-zen/jquery.ui.all.css" imagebasevpath="/ClientScript/jqueryui182/themes/ui-zen/images"</file>"?

 

Thanks for your time.

8/5/2010 4:39:32 PM
Gravatar
Total Posts 2253

Re: A few questions regarding JS and JQuery.

Hi Isaac,

Unless you have need to use a different jQuery version or your site will not have internet access, there is really no reason to host the jQuery JS yourself. If you want to simply use a theme that you created on the ThemeRoller website, do the following:

  1. Create the theme at http://jqueryui.com/themeroller/ and download it. You do not need to download anything other than the custom theme.
  2. Unzip the theme zip file you downloaded in step 1
  3. In the location you unzipped the them to, you will find a CSS directory. Inside of the CSS directory, you will find a custom-theme directory unless you actually named the theme on the themeroller website. Rename the CSS file inside of the custom-theme directory to something nicer, like stylejquery.css.
  4. Open the css file and add single quotes (' ') around each image reference. For example:
    url('images/ui-bg_flat_75_ffffff_40x100.png')
  5. Upload the css file and the images directory inside of the custom-theme directory to your skin directory (ie: \data\sites\1\skins\MyCoolSkin\)
  6. Open your style.config and add the following above the closing </files> element.
    <file>stylejquery.css</file>

I have done this on my sites and it works great!

HTH,
Joe D.

8/5/2010 6:14:58 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Hey Joe Davis, thanks for the info - that self-hosting thing was not working either, and I'm certain that I nested something wrong, I just don't know exactly what (I re-did it 4 times to check with no luck).

Sadly, for some reason the theme still isn't coming out right.

It is loading the Jquery theme, but the shading isn't working (its all just plain, blocky colors with no depth), and I'm really not sure why. I checked in both IE8 and firefox, so its not simply a browser problem.

8/5/2010 9:27:06 PM
Gravatar
Total Posts 2253

Re: A few questions regarding JS and JQuery.

Hi Isaac,

You need to make sure you have the CSS file in the root of your skin directory and the images can be in either their own directory or in the root of the skin directory. Also make sure the image references are all pointing to the correct location.

HTH,
Joe D.

8/5/2010 11:04:09 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Ah, thanks Joe that worked (and I have tweaked it a little, though I think it might still need some work).

Thanks again to everybody, both problems have been dealt with.

 

Edit: I take it back, the Jquery thing isn't quite fixed yet.

For some reason, when I have a custom Jquery UI set up, the File Manager becomes all skewed and starts acting like a simple list of text.

8/7/2010 7:24:32 AM
Gravatar
Total Posts 2253

Re: A few questions regarding JS and JQuery.

Hi Isaac,

The default file manager uses the QTfile css and it is usally listed below the rest of the CSS files in your style.config. The way the CSSHandler works is if any css file has an error in it, the handler doesn't read anything after the error. I would check the jQuery stylesheet for problems. The most common problem is the use of parentheses without single quotes.

I think I ran across this one time with a jQueryUI stylesheet. I had all of the image references wrapped in single quotes but I didn't wrap things like:

filter:Alpha(Opacity=70)

Once I wrapped the Opacity like so, everything worked fine again:

filter:Alpha('Opacity=70')

HTH,
Joe D

8/7/2010 7:47:39 AM
Gravatar
Total Posts 18439

Re: A few questions regarding JS and JQuery.

One additional thought on this, if you are loading the css for jquery ui directly in the skin using style.config, then you should set IncludejQueryUI to false on the stylesheet combiner control in layout.master to avoid loading 2 different jquery ui css themes

<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" UseIconsForAdminLinks="false" IncludejQueryUI="false" />

otherwise there might be conflicts caused by loading 2 sets of css.

Best,

Joe

8/8/2010 7:09:54 PM
Gravatar
Total Posts 12

Re: A few questions regarding JS and JQuery.

Joe Audette,

I did both of the things you suggested and that seems to have fixed it.

Once again, thanks for the help.

 

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