Slideshow on not first level elements?

If you have questions about using mojoPortal, you can post them here.

You may want to first review our site administration documentation to see if your question is answered there.

This thread is closed to new posts. You must sign in to post in the forums.
7/30/2010 9:52:12 AM
Gravatar
Total Posts 116

Slideshow on not first level elements?

I had a layout looking just as I wanted it before the client decided that they wanted some rotating images on a couple of the sections, unfortunately this meant that I had to take the sections out of the containing div and do quite a bit of testing and tweaking to make everything line up nicely again, at which point the slideshow feature worked fine (and it is another excellant feature that is so easy to use in mojo!) 

Unfortunately doing it this way expanded the amount of markup quite considerably over what it had originally been - this is partly due to all the css being inline at the moment while I was testing the layout - I'll move it all into the css files once the 'ready to go live' version of the site is complete.

The questions are - is it possible to use the slideshow feature on 2nd/3rd and if not is there a better way that I could have achieved the same result i.e. is it possible to call the jquery function from the html and would that have been a 'neater' solution or would this way be the best solution once the css has been moved into the css files?  The only other slight issue I had was that at the top of the page were some mojo-tabs (great feature) and when I went into the editor all the content overlapped - hence the comment below where I used a big margin to push it down to take advantage of the easy way to add links etc).... on a similar note it would be great if the html editors preserved the format in the html window to make it easier to seperate divs etc - don't suppose that is an option I have missed is it? smiley

 

The relevant markup ended up as:

<!-- Comment out div below - added to make editing in html editor easier or content crosses over with content above
<div style="clear: both; padding-top: 600px;" _mce_style="clear: both; padding-top: 600px;">-->
<div style="float: left; width: 335px; margin-top: 20px; margin-right: 28px;">
<p><strong><a href="/products.aspx">Products</a></strong></p>
</div>
<div style="float: left; width: 335px; margin-top: 20px;">
<p><strong><a href="/engineering-services.aspx">Engineering Services</a></strong></p>
</div>
<div class="slideshow" style="float: left; width: 100px; clear: left; margin-right: 15px;"><img title="Products" src="/Data/Sites/1/uploadedfiles/products.jpg" alt="Image for Products" width="100" height="100" /><img src="/Data/Sites/1/uploadedfiles/molten2100.jpg" alt="Molten metal" width="100" height="100" /><img class="floatleftimage" src="/Data/Sites/1/uploadedfiles/moltenmetal100.jpg" alt="Molten Metal" width="100" height="100" /></div>
<div style="float: left; width: 215px; margin-right: 35px;"><a title="more details on Products" href="/products.aspx">Spiel for products with a link to products page Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</a></div>
<div class="slideshow" style="float: left; width: 100px; margin-right: 15px;"><img class="floatleftimage" title="PCU" src="/Data/Sites/1/uploadedfiles/pcu.jpg" alt="Image for Engineering" width="100" height="100" /> <img src="/Data/Sites/1/uploadedfiles/molten2100.jpg" alt="Molten metal" width="100" height="100" /> <img class="floatleftimage" src="/Data/Sites/1/uploadedfiles/moltenmetal100.jpg" alt="Molten Metal" width="100" height="100" /></div>
<div style="float: left; width: 220px;"><a title="more details on Engineering Services" href="/engineering-services.aspx">Spiel for Engineering Services with a link to engineering services page standard dummy text ever since the 1500s, when an unknown printer took a type and</a></div>
<div style="float: left; width: 335px; margin-right: 30px; margin-top: 25px;">
<p><strong><a title="more details on Quality" href="/quality.aspx">Quality</a></strong></p>
<img class="floatleftimage" title="Quality" src="/Data/Sites/1/uploadedfiles/lrqa9001.jpg" alt="Image for quality" width="100" height="100" /><a title="more details on Quality" href="/quality.aspx"></a> <a title="more details on Quality" href="/quality.aspx">Spiel for Quality with a link to quality page the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</a></div>
<div style="float: left; width: 335px; margin-top: 25px;">
<p><strong><a title="more details on Environmental Services" href="/environmental-services.aspx">Environmental Services</a></strong></p>
<img class="floatleftimage" title="Environment" src="/Data/Sites/1/uploadedfiles/envrionment.jpg" alt="Image for environmental section" width="100" height="100" /><a title="more details on Environmental Services" href="/environmental-services.aspx"> Spiel for Environmental Services with a link to environmental services page the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</a></div>
<!--</div>
-->

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