MonoX support board

Start the conversation, ask questions and share tips and solutions with fellow developers.

Non-registered users can only browse through our support boards. Please register now if you want to post your questions. It takes a second and it is completely free. Alternatively, you can log in without registration using your credentials at major sites such as Google, Microsoft Live, OpenId, Facebook, LinkedIn or Yahoo.

How to Implement jquery slider on the homepage (Closed) (Mono Support )

Viewed 20585 time(s), 6 post(s) 7/17/2011 11:08:50 PMby yousaid

Related topics

yousaid

yousaid

7/17/2011 11:08:50 PM
Greetings;
Your webpage here:
http://www.mono-software.com/#

Uses a slider to rotate images. I already have my jquery slider done and it works as I want it. In my own case, it rotates different pictures and products.
(I don't need help with the jquery. I already have what I want to use working on another website)

So my question is:
How did you implement this on your website?
Is it (on your website) Jquery or Ajax slider? (my preference is to use jquery).
I want it located as same exact location on the template as you have on your website. Any guidance on how to implement this will be great.
Please assume that I am using the demo site
cheers,
yousaid

This content has not been rated yet. 
206 Reputation 36 Total posts
khorvat

khorvat

7/18/2011 1:42:45 PM
Hi,

our web site is using one of the jQuery slider plug-ins. I have spoke to our design department and they will explain how to do this in a few simple steps.

Regards
This content has not been rated yet. 
15993 Reputation 2214 Total posts
siriosus

siriosus

7/20/2011 4:05:04 PM
Hi! I want to ask where Jquery and it's plug-ins connect to the page? Like in simple HTML page with tags <script></script>? I looked for this in example theme presented in template gallery and didn't find anything. Please, can you show me the right direction to use jquery on MonoX site?
This content has not been rated yet. 
30 Reputation 4 Total posts
khorvat

khorvat

7/20/2011 7:23:41 PM
Hi,

jQuery is automatically "connected" to every page on MonoX so you can just start using it on your page that inherits from MonoX BasePage. The link to jQuery is set in the web.config and it looks like this:

<!-- jQuery reference path. Change it to use other jQuery versions. Consider using CDNs - for example, http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js -->
    <add key="jQueryReferencePath" value="/MonoX/Scripts/jquery-1.3.2.min.js" />

If you need to change the version of jQuery please change the URL above to CDN URL or your own downloaded location.

If you need some custom plug-ins you need to reference them on your Web page or Web part.

Regards
This content has not been rated yet. 
15993 Reputation 2214 Total posts
siriosus

siriosus

7/21/2011 3:40:34 AM
I understand from your another topic that jQuery is automatically includes in every MonoX Page, but can You show an example how to to reference plug-ins on Web page or Web part? Sorry for my persistence but I'm more designer than developer that's why I ask so stupid questions.

Thank you for your patience!
This content has not been rated yet. 
30 Reputation 4 Total posts
khorvat

khorvat

7/21/2011 8:32:17 AM
Hi,

here are the steps you need to follow to use the jQuery plug-in (of course there are other approaches that you can take this is only one of them):

1. Download jQuery plug-in and save it to /YourAppName/Scripts/PluginName/ (Note: This is our practice you can save the files to any other location)
2. Now you need to register your plug-in script with MonoX
protected void Page_Load(object sender, EventArgs e)
{
    ...           
    JavascriptUtility.RegisterClientScriptInclude(this, "/YourAppName/Scripts/PluginName/jQuery.File1.js");
    JavascriptUtility.RegisterClientScriptInclude(this, "/YourAppName/Scripts/PluginName/jQuery.File2.js");           
}
3. Now you need to use your plug-in in your Web part of Web page and you can use it like this
- Register your script from the code-behind (Note: this is jQuery auto grow script sample)
protected void Page_PreRender(object sender, EventArgs e)
{
    string expandScript = @"
    $(document).ready(function() {
        $.registerAutoGrow(""jq_expandingTextBoxSmall"");
    });
    ";
    JavascriptUtility.RegisterStartupScript(this, this.GetType(), "expandComment", expandScript, true);
}
- Use the plug-in in the mark-up
<script type="text/javascript" language="javascript">
    //<![CDATA[
      $('div.demo').slideUp('fast', null);
    //]]>
</script>


Here is the example of MonoX Demo indicator 

Code-behind
protected void Page_Load(object sender, EventArgs e)
{
    CheckVisibility();
}
 
/// <summary>
/// Determines if the demo indicator should be shown.
/// </summary>
protected virtual void CheckVisibility()
{
   ...           
   if (this.Visible)
        JavascriptUtility.RegisterClientScriptInclude(this, Paths.MonoX.Scripts.jquery_cookie_js);
}

Mark-up
<div class="demo">
    <%= DefaultResources.DemoIndicator %>
    <a href="#" class="close"></a>
</div>
 
<script type="text/javascript" language="javascript">
    //<![CDATA[
    $('div.demo > .close').click(function() {
        $('div.demo').slideUp('fast', function() {
            $.cookie("DemoIndicatorClosed", "true", { expires: 365 });
        });
    });
    //]]>
</script>

I hope this gives you a proper overview of what needs to be done to get the jQuery plug-in up and running.

Regards



This content has not been rated yet. 
15993 Reputation 2214 Total posts