Splash Components

[rin]

I read in the wiki that we can use splash components in our maincontent. Is that still the case?

I was playing around with the code on the wiki, but it seems like there's parts missing. How do I make the tabs switch between stories like they do on the splash page?

[rin]

Ok, I figured out how to make the tabs work.

But I need to know if we're still allowed to use the splash components as the wiki indicates.

[alvin_woon]

i think it should be fine to use the tabs. I should really find time to write documentation about how to use it.

If you need to get it going right away, i would suggest we meet up so that i can better explain the innerworking of the codes for that component as it might be a wee bit confusing to explain it here.

[rin]

Thanks, I got it figured out.

Just needed to include splash.js and call the appropriate function.

[wagler]

i have been trying to get the splash component to work in the main content area...I have it working on PCs but when I go to a mac on safari it throughs the text to the left...here's a screen shot:



and the page that I am working on:
http://www.unl.edu/journalism/students/ ... uate.shtml

any help would be great!!!

Thanks in advance.l

[wagler]

a forgot the safari verison is 1.3.2. Any help would be great. I know this can be done...I saw it here...

http://www.unl.edu/ucomm/prospective/

any help would be great!!! Thanks!

[alvin_woon]

comparing both the source codes, i think you are missing a h2 tag which might be essential in holding the div block.

[wagler]

I got it worked out...when I use the three column layout it snapped into place. Thanks for the reply alvin!

[soni]

i think it should be fine to use the tabs. I should really find time to write documentation about how to use it.

If you need to get it going right away, i would suggest we meet up so that i can better explain the innerworking of the codes for that component as it might be a wee bit confusing to explain it here

We plan to use the splash components and would like to use the tabs to switch between images/stories - but I haven't figured out to use the splash.js

The only thing I've managed to do is put a link on each tab to a new page...not really what we want. I don't want to actually go to a new page when you click on a tab. Would like to replicate the behaviors used by www.unl.edu.

Anywhere you can send me to get more info? All I really need is an example *with the blanks filled in* to show me how to set it up - the splash.js in its "raw form" is over my head.

I can make do in the meantime, but we plan to launch this next section of our site soon.

The Web site where we are using the splash components is for an external youth audience so it would be nice to make this work.

Thanks for your help.

[rin]

I had to add this chunk of code to make the tabs work:

Code: Select all

<script type="text/javascript">
startajaxtabs("splashtab");
startajaxtabs("random_load");
</script>

I just stuck it in the maincontentarea underneath my splash stuff. The rest I figured out from the splash page components wiki. (http://ucommdev.unl.edu/webdev/wiki/index.php/Splash_page_components)

[rin]

well apparently that's not how things work anymore. I updated my ucomm stuff and that no longer worked. I couldn't figure out how to make it work with the new js code so I ended up just putting back the old one. Anyone wanna tell us how it works so I can update my template code.

Thanks

[alvin_woon]

Hi Rin,

Sorry for failing to notify you about the code changes. Yeah we modify the code to accomodate flash file embedding.

Here's the step-by-step tutorial on how to do the splash tab.

1.) Include the required javascript file in your HTML header.

Code: Select all

<script type="text/javascript" src="http://www.unl.edu/ucomm/templatedependents/templatesharedcode/scripts/splash.js"></script>

2.) Declared the javascript function as follow:

Code: Select all

var displayNum = 5; //number of tabs to display
var xmlURL = 'http://www.unl.edu/ucomm/splash/story.xml'; //your xml file (absolute url please)
addLoadEvent(function() {
   randomSplashContent();
});

Change the variable displayNum value to the number of tabs you want to use. In the splash page case, it's 5 tabs.

Another things about the new implementation is that the whole data structure is formatted into an xml file, which you will need to point to as a value for the variable xmlURL.

3.) Place this html codes to the area within your HTML body tags where you want the splash tab to be displayed.

Code: Select all

<div id="splash_top"></div>

            <div id="tabs3">
               <ul id="splashtab">
                   <li style="display:none;"><noscript>Javascript is required.</noscript></li>
               </ul>
            </div>

Let me explain a little bit about how the xml file is formatted. Below are the xml source for UNL's splash page:

Code: Select all

<random>

<story>
<name>
Dummy nodes to counter random number generator zero bug
</name>
<permalink>
Dummy nodes to counter random number generator zero bug
</permalink>
</story>

<story>
<name>Steve</name>     
<permalink>http://www.unl.edu/ucomm/splash/story/story1.htm</permalink>
</story>

<story>
<name>Michael</name>
<permalink>http://www.unl.edu/ucomm/splash/story/story2.htm</permalink>
</story>

</random>

To add a new story/content, we create the 'story' parent node. Inside the parent node, we have two child nodes - the name and permalink nodes. The name nodes specify the text you want to appear on the tab while the permalink points to the page content itself.

Bear in mind that the first story node is added for you for 2 reasons - as a tutorial and to counter a nasty javascript random function bug. You can start by writing the second node. So in all, if you want to have 3 feature stories, then you should have four 'story' parent nodes (3 + 1 dummy nodes).

All the story nodes are then wrapped by a supernode called 'random'.

Let me know if there's anything that needs more clarification.

[rin]

Thank you so much.

Just one question. Did the format of the story htm pages change?

I'm displaying the tabs and everything correctly, but I get a JavaScript error that says "junk after document element" on the part using p id="featureimage"

[alvin_woon]

good catch! It does actually, to kill off that bug. That javascript error pops up when your external content is not wrapped properly by an enclosing tags (div, p or whatever).

Check out one of UNL splash page source will give you a better picture of how it is formatted.

http://www.unl.edu/ucomm/splash/story/story1.htm