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.
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.
Have a look at www.roseanddagger.com - for the front page, I've just got an embedded jquery slider. for the galleries, I've created a custom control that implements the portal:carousel. Let me know if you have any questions I can answer for you.
The one i created is in www.sapient.com which is somewhat a little similar to that one, im just really having a rough time in finding out where to put this jscript in my layout.master in mojoPortal. this is my full layout.Master.
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="~/App_MasterPages/layout.Master.cs" Inherits="mojoPortal.Web.layout" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head id="Head1" runat="server"> <title></title> <%-- JQueryUIThemeName valid options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, vader --%> <portal:StyleSheetCombiner ID="StyleSheetCombiner" runat="server" JQueryUIThemeName="ui-darkness" UseIconsForAdminLinks="false" UseTextLinksForFeatureSettings="false" EnableNonClickablePageLinks="true" /> <portal:IEStyleIncludes ID="IEStyleIncludes1" runat="server" IncludeHtml5Script="false" IE6CssFile="style.ie6.css" IE7CssFile="style.ie7.css" /> <portal:MetaContent ID="MetaContent" runat="server" /> <!--[if IE]> <meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" /><meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" /> <![endif]--> <portal:Favicon ID="Favicon1" runat="server" /> <portal:ScriptLoader ID="ScriptLoader1" runat="server" /> <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="script.js" /> <link href="css/about.css" rel="stylesheet" type="text/css" /> <link href="css/stylemenu.css" rel="stylesheet" type="text/css" /> <link href="css/customer-spotlight.css" rel="stylesheet" type="text/css" /> <link href="css/home.css" rel="stylesheet" type="text/css" /> <link href="css/ie.css" rel="stylesheet" type="text/css" /> <link href="css/news.css" rel="stylesheet" type="text/css" /> <link href="css/platform.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body class="pagebody"> <form id="frmMain" runat="server"> <asp:SiteMapDataSource ID="SiteMapData" runat="server" ShowStartingNode="false" /> <asp:SiteMapDataSource ID="PageMapDataSource" runat="server" ShowStartingNode="false" /> <asp:SiteMapDataSource ID="ChildPageSiteMapData" runat="server" ShowStartingNode="false" /> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" /> <div id="wrapwebsite"> <div class="topnav"> <portal:SkipLink ID="SkipLink1" runat="server" /> <ul> <portal:WelcomeMessage ID="WelcomeMessage" runat="server" RenderAsListItem="true" ListItemCss="firstnav" /> <portal:HomeLink ID="HomeLink" runat="server" RenderAsListItem="true" /> <portal:SiteMapLink ID="SiteMapLink2" runat="server" CssClass="sitelink" RenderAsListItem="true" /> <portal:MyPageLink ID="MyPageLink1" runat="server" RenderAsListItem="true" /> <portal:UserProfileLink ID="UserProfileLink" runat="server" RenderAsListItem="true" /> <portal:MailboxLink ID="MailboxLink1" runat="server" RenderAsListItem="true" /> <portal:MemberListLink ID="MemberListLink" runat="server" RenderAsListItem="true" /> <portal:SearchInput ID="SearchInput1" LinkOnly="True" RenderAsListItem="true" runat="server" /> <portal:RegisterLink ID="RegisterLink" runat="server" RenderAsListItem="true" /> <portal:LoginLink ID="LoginLink" runat="server" RenderAsListItem="true" /> <portal:LogoutLink ID="LogoutLink" runat="server" RenderAsListItem="true" /> </ul> </div> <div id="header"> <div class="logo"> <a href="home.aspx">Home</a></div> <div class="contact"> <a href="#">Contact Us</a> | <a href="#">Sitemap</a> </div> </div> <div id="wrapheader"> <%-- <portal:SiteMenu ID="SiteMenu1" runat="server" EnableTheming="false" UseTreeView="false" HideMenuOnSiteMap="false" Direction="Horizontal" TopLevelOnly="true"></portal:SiteMenu>--%> <asp:Panel ID="divAlt1" runat="server" CssClass="altcontent1"> <asp:ContentPlaceHolder ID="altContent1" runat="server"> </asp:ContentPlaceHolder> </asp:Panel> </div> <div id="main"> <div class="hero-image"> <div class="inner"> <div id="wrapcenter"> <asp:Panel ID="divLeft" runat="server" CssClass="leftside" Visible="True" SkinID="pnlPlain"> <div class="sidebar"> <portal:PageMenu ID="PageMenu1" runat="server" UseTreeView="true" TreeViewShowExpandCollapse="true" /> <a id="startcontent"></a> <asp:ContentPlaceHolder ID="leftContent" runat="server"> </asp:ContentPlaceHolder> </div> </asp:Panel> <asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins" SkinID="pnlPlain"> <div class="content"> <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs> <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu> <asp:ContentPlaceHolder ID="mainContent" runat="server"> </asp:ContentPlaceHolder> </div> </asp:Panel> <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="rightside" SkinID="pnlPlain"> <asp:ContentPlaceHolder ID="rightContent" runat="server"> </asp:ContentPlaceHolder> </asp:Panel> </div> </div> </div> </div> <div id="footer"> <div id="wrapfooter"> <p> © . All rights reserved</p> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $("span.downarr a").click(function () { $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow"); }); $("span.showbar a").click(function () { $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow"); }); $("span.downarr a, span.showbar a").click(function () { return false; }); });
</script> <portal:AutoHidePanel ID="ah1" runat="server"> <div id="toolbarbut"> <span class="showbar"><a href="#">show bar</a></span> </div> <div id="toolbar"> <div class="toolbarleft"> </div> <div class="toolbarright"> <span class="downarr"><a href="#"></a></span> <portal:AdminMenuLink ID="lnkAdminMenu" runat="server" /> <portal:FileManagerLink ID="lnkFileManager" runat="server" /> <portal:NewPageLink ID="lnkNewPage" runat="server" /> <portal:PageEditFeaturesLink ID="lnkPageContent" runat="server" /> <portal:PageEditSettingsLink ID="lnkPageSettings" runat="server" /> <asp:ContentPlaceHolder ID="pageEditContent" runat="server"> </asp:ContentPlaceHolder> </div> </div> </portal:AutoHidePanel> <portal:mojoGoogleAnalyticsScript ID="mojoGoogleAnalyticsScript1" runat="server" /> <portal:Woopra ID="woopra11" runat="server" /> </form> </body> </html>
Are you planning on using your slide in multiple locations, or just a one-off on the front page?
Just the front page.
Well, since it's a one-off, you can just "cheat"; put all your instance-specific javascript in an "instance.js" file, and reference your javascript files and .css (inline, if it's not too complex) in the HTML module containing your images. It works just fine, and you can edit your content on the fly, and pull the animation entirely without having to shred the skin itself.
Here's another example where I used the same technique (site is in "pre-live" status at the moment): http://www.simplycyfair.com/
Thanks for your quick reply,
I grabbed my jscript code which is this one and i put it inside a separate .js file and add it the inline path of the .JS between the <head> tags,an
d then in the html module i added the html code, but nothing seems to happen, all the images appear but the carousel transition is not working yet here is my code.
var current_carousel_position = 1;
$(document).ready(function () {
/* initialize carousel */ $('.mycarousel').jCarouselLite({ btnNext: ".next", btnPrev: ".prev", speed: 200, easing: "easein", visible: 1, afterEnd: function (a) { show_carousel_selected(current_carousel_position); } });
show_carousel_selected(current_carousel_position);
if (jQuery.browser.webkit || jQuery.browser.msie) { $("#mycarousel").css('marginTop', '-16px'); }
/*if(jQuery.browser.webkit){ $("#mycarousel").css('marginTop', '-16px'); }*/
});
/* ***************************************************************************************** */ function show_carousel_selected(index) { //alert ($('.slideshow .button-holder ul li').size()); index = ((index - 1) % $('.slideshow .button-holder span').size() + 1); $('.slideshow .button-holder span').removeClass('on'); $('.slideshow .button-holder span#showcase-bullet-' + index).addClass('on'); }
Where are you inserting your carousel CSS?
Load the active page up in Firebug, and make sure everything's applying correctly. Is there a URL where I can look at your WIP?
I used Firebug and it gave me this error. "$ is not defined $(document).ready(function () { "
this is my script between the <head> tags
<script type="text/javascript"> var current_carousel_position = 1;
/* ***************************************************************************************** */ function show_carousel_selected(index) { //alert ($('.slideshow .button-holder ul li').size()); index = ((index - 1) % $('.slideshow .button-holder span').size() + 1); $('.slideshow .button-holder span').removeClass('on'); $('.slideshow .button-holder span#showcase-bullet-' + index).addClass('on'); } </script>