Custom Module Images & JavaScript & CSS

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.
6/13/2010 9:57:51 AM
Gravatar
Total Posts 156

Custom Module Images & JavaScript & CSS

Where do you recommend to place images, JavaScript scripts, and very minimal style sheets that I would like applied to the module, letting the skin take care of the rest?
6/13/2010 10:15:54 AM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

You can put them anywhere beneath /Data, it is up to you if you want to have one top level folder for all your custom stuff or multiple custom folders beneath standard folders like /Data/SiteImages, and /Data/style

you could have a folder like /Data/mymoduleassets/ with sub folders as needed, it is really a matter of personal preference. Or they could go directly beneath your module folder, they don't really have to be below /Data as long as your feature knows where to find them and you configure style.config to include your css as needed.

Hope it helps,

Joe

6/13/2010 10:37:37 AM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

Alright, by style.config you are referring to a particular skin, which has to be aware of the module and then set the virtual path in its style.conf.  How do I go about the module specific CSS w/o having to modify any particular style.conf though?

6/13/2010 10:41:37 AM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

If you are distributing a feature that needs css you should provide the css and needed images in your package so they land in a known location and you should include instructions for the end user to modify the style.config of his skin to include your css file. 

To some extent depending on the feature you may not need addtional css but can re-use known css class names already in use in your feature. As soon as you need something custom then you must provide it with instructions for the user.

6/13/2010 11:18:55 AM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

Alright, so I've decided to place images and JavaScript directly beneath the module folder.  I've added post-build events to copy those up to the Web folder.  However, I'm having trouble with specifying the path to those images/scripts from within the module ascx file.  Say the module name is HelloWorld and beneath it are two subfolders:  HelloWorlds/img  and HelloWorld/js, which hold images and scripts respectively.  What's the appropriate way to specify the path to those?

6/13/2010 11:24:38 AM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

Assuming the HelloWorld folder is directly beneath the root of the site

Page.ResolveUrl("~/HellowWorld/img/myimage.png");

6/13/2010 11:39:12 AM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

If I do the following inside my ascx file:

<script src="<%Page.ResolveUrl("~/HelloWorld/js/jquery.NobleCount.min.js"); %>" type="text/javascript"></script>

then it just evalues to the following in the source:

<script src="" type="text/javascript"></script>
 

6/13/2010 11:59:06 AM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

You are missing the = like <%=, and then it would need single quotes like '<%= %>' since double quotes are in the ResolveUrl function but really you should not add javascript directly in your control. Do it like this from code:

Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                    "noblecount", "\n<script src=\""
                    + Page.ResolveUrl("~/HelloWorld/js/jquery.NobleCount.min.js") + "\" type=\"text/javascript\" ></script>");

Hope it helps,

Joe

6/13/2010 12:06:55 PM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

So you are suggesting to use a code-behind file in order to add the script.  Shoudl I just place it inside OnInit function then?

6/13/2010 12:11:47 PM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

either in code behind or if not using a code behind file inside the <script runat="server"> in page load or onint.

Doing it this way the script will only be added 1 time even if there is more than one instance of your feature on the same page. Or even if loaded by other features or controls as long as the same key is used for the script ("noblecount" in the example) is used everywhere it is loaded from.

6/13/2010 1:25:10 PM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

Joe,

When I place them in code-behind in either OnInit or Page_Load, they end up getting loaded prior to jquery and, therefore, fail.

6/13/2010 6:01:10 PM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

No more suggestions on this one here? I'm somewhat stuck. Not quite sure how to get those two to load after jQuery.  I found a thread, which suggests using UserControl in the layout.Master, but I would like get this to work within the module and not have to rely on a skin's layout.Master.

6/14/2010 6:40:12 AM
Gravatar
Total Posts 18439

Re: Custom Module Images & JavaScript & CSS

Sorry, I should have said to register your script in OnPreRender

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
 Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                    "noblecount", "\n<script src=\""
                    + Page.ResolveUrl("~/HelloWorld/js/jquery.NobleCount.min.js") + "\" type=\"text/javascript\" ></script>");


}

6/14/2010 9:47:59 AM
Gravatar
Total Posts 156

Re: Custom Module Images & JavaScript & CSS

Thank you so much Joe, that worked.

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