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.
I'm writing a custom feature, and the portal:carousel would be perfect in it - if I could get it to work. So far, the CSS works, but no joy with an actual control. Any suggestions?
NM - missed the step of adding the jcarousel style sheets to the style config of the custom skins I'd created for this client project. Much better now - thyx!
<div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div>
I've implemented the portal:carousel control, and it works great in FF, but not so very well in IE - my "Prev"/"Next" buttons have disappeared. Any suggestions of what I might need to be looking for?
Edit: OK, looking at how the code's rendering in IE vs. FF, I think I see the problem:
IE:
<div< disabled="disabled" class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" div=""/> <DIV< style="DISPLAY: block" class="jcarousel-next jcarousel-next-horizontal" div jQuery1283637218429="8">
FF:
<div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div> <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div>
I think I'll take a look at how the control's actually generating the jCarousel code...
Ah - found it!
private string buttonNextHTML = "<div</div>"; /// <summary> ///The HTML markup for the auto-generated next button. If set to null, no next-button is created. /// </summary> public string ButtonNextHTML { get { return buttonNextHTML; } set { buttonNextHTML = value; } } private string buttonPrevHTML = "<div</div>"; /// <summary> ///The HTML markup for the auto-generated next button. If set to null, no next-button is created. /// </summary> public string ButtonPrevHTML { get { return buttonPrevHTML; } set { buttonPrevHTML = value; } }
Close the div tag, and it's gravy!
Thanks!
This is now fixed in the source code repository.
Best,
Joe
No problem; it's just the exact thing I needed, just a tiny tweak!
Hello i added a carousel script similar to the one on this site http://www.sapient.com/.. i had it working perfectly when i was using DNN but is not working at all in mojoPortal, i mean all the images appear which are three images, but its all broken. How can i fix this i have read a few samples but not luck, i tried teh asp:Script control but nothing i dont knwo what else to do.
this is the script that i had working on DNN
<!--script type="text/javascript" src="<%= SkinPath %>js/jquery-1.4.2.min.js"></script--> <script type="text/javascript" src="<%= SkinPath %>js/jquery.jcarousellite.js"></script> <script type="text/javascript" src="<%= SkinPath %>js/jquery.easing.1.1.js"></script> <script type="text/javascript"> 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'); } </script>
Thank you
please do not post the same question more than once.
I already gave you a good answer on this thread and you have not taken advantage of my help there. please review the links I posted for you and watch the video I told you about and you will learn how to integrate jquery including carousels in mojoPortal.
Unless you need that "navigator" control in your slideshow, I'd recommend using the built in "Slideshow of elements" settings of the mojoPortal HTML feature. It's much easier than maintaining extra JavaScript code in each skin. We're using this on the home page of our site: http://www.escondido.org.
Jamie
Yes i need the navigator, but im only using this script for the front home page. i added the images in the html.
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.