Splash Components

A place to ask questions and get help. Be the first on your block to post ...

Splash Components

Postby rin » Fri Sep 29, 2006 11:36 am

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
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

Postby rin » Fri Sep 29, 2006 2:43 pm

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.
rin
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

Postby alvin_woon » Mon Oct 02, 2006 4:22 pm

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.
alvin_woon
Site Admin
 
Posts: 59
Joined: Wed Mar 01, 2006 11:05 am

Postby rin » Mon Oct 02, 2006 4:28 pm

Thanks, I got it figured out.

Just needed to include splash.js and call the appropriate function.
rin
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

another splash component question

Postby wagler » Fri Oct 06, 2006 8:53 am

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:

Image

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
adam
wagler
 
Posts: 17
Joined: Thu Aug 17, 2006 12:42 pm
Location: Lincoln

safari version

Postby wagler » Fri Oct 06, 2006 12:11 pm

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!
adam
wagler
 
Posts: 17
Joined: Thu Aug 17, 2006 12:42 pm
Location: Lincoln

Postby alvin_woon » Fri Oct 06, 2006 12:33 pm

comparing both the source codes, i think you are missing a h2 tag which might be essential in holding the div block.
alvin_woon
Site Admin
 
Posts: 59
Joined: Wed Mar 01, 2006 11:05 am

figured it out

Postby wagler » Fri Oct 06, 2006 4:13 pm

I got it worked out...when I use the three column layout it snapped into place. Thanks for the reply alvin!
adam
wagler
 
Posts: 17
Joined: Thu Aug 17, 2006 12:42 pm
Location: Lincoln

Postby soni » Sun Jan 14, 2007 9:46 pm

alvin_woon wrote: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.
soni
 
Posts: 30
Joined: Mon Aug 01, 2005 3:46 pm
Location: Lincoln

Postby rin » Tue Jan 16, 2007 4:59 pm

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
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

Postby rin » Wed Feb 07, 2007 1:49 pm

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
rin
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

Postby alvin_woon » Wed Feb 07, 2007 5:10 pm

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.
alvin_woon
Site Admin
 
Posts: 59
Joined: Wed Mar 01, 2006 11:05 am

Postby rin » Wed Feb 07, 2007 5:37 pm

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"
rin
 
Posts: 21
Joined: Thu Jul 27, 2006 8:48 am

Postby alvin_woon » Thu Feb 08, 2007 5:23 pm

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
alvin_woon
Site Admin
 
Posts: 59
Joined: Wed Mar 01, 2006 11:05 am


Return to Help & Assistance

Who is online

Users browsing this forum: Google [Bot] and 1 guest

cron