This is an archived, read-only copy of the United-TI subforum , including posts and topic from May 2003 to April 2012. If you would like to discuss any of the topics in this forum, you can visit Cemetech's Calculator Programming subforum. Some of these topics may also be directly-linked to active Cemetech topics. If you are a Cemetech member with a linked United-TI account, you can link United-TI topics here with your current Cemetech topics.

This forum is locked: you cannot post, reply to, or edit topics. General Coding and Design => Calculator Programming
Author Message
Newbie


Bandwidth Hog


Joined: 23 Jan 2004
Posts: 2247

Posted: 17 May 2006 09:12:16 pm    Post subject:

How do you create a navigation menu like the one found on mlb.com? (The navigation with scoreborad, standings etc)
Back to top
Weregoose
Authentic INTJ


Super Elite (Last Title)


Joined: 25 Nov 2004
Posts: 3976

Posted: 18 May 2006 01:16:37 am    Post subject:

That should be about a week to a month's worth of fiddling with JavaScript for those who haven't done it before. Don't expect to pull one off without A) stealing the source code from another page, or B­) taking the time to learn how the effect is achieved. Since I don't know how and don't want to bother with JavaScript for a while, all I can say is "good luck." Wink
Back to top
Arcane Wizard
`semi-hippie`


Super Elite (Last Title)


Joined: 02 Jun 2003
Posts: 8993

Posted: 18 May 2006 04:26:26 am    Post subject:

Well you can achieve something very similar with just CSS. You just won't have the scrolling animation of the menu coming down slowly.

http://www.seoconsultants.com/css/menus/tutorial/


Last edited by Guest on 18 May 2006 04:34:17 am; edited 1 time in total
Back to top
Newbie


Bandwidth Hog


Joined: 23 Jan 2004
Posts: 2247

Posted: 18 May 2006 11:09:29 am    Post subject:

Thanks Arcane. I'll try that site. How would you slow the menus down though?, Javascript? (It's not a big deal if I cant.)
Back to top
Arcane Wizard
`semi-hippie`


Super Elite (Last Title)


Joined: 02 Jun 2003
Posts: 8993

Posted: 18 May 2006 04:45:00 pm    Post subject:

First you register a mouseevent so it can react to the hover.

Then you create the HTML object(s) for the menu.

Then you use setTimeOut() to run a function that updates the animation every x milliseconds.
Back to top
Newbie


Bandwidth Hog


Joined: 23 Jan 2004
Posts: 2247

Posted: 18 May 2006 06:07:11 pm    Post subject:

I got the code working for IE and Mozilla, but what language is this code? Its saved as an HTC file.


Code:
<attach event="ondocumentready" handler="parseStylesheets" />
<script>


var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
   onhover:{on:'onmouseover', off:'onmouseout'},
   onactive:{on:'onmousedown', off:'onmouseup'}
}

function parseStylesheets() {
   if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
   window.attachEvent('onunload', unhookHoverEvents);
   var sheets = doc.styleSheets, l = sheets.length;
   for(var i=0; i<l; i++)
  parseStylesheet(sheets[i]);
}
   function parseStylesheet(sheet) {
  if(sheet.imports) {
     try {
    var imports = sheet.imports, l = imports.length;
    for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
     } catch(securityException){}
  }

  try {
     var rules = (currentSheet = sheet).rules, l = rules.length;
     for(var j=0; j<l; j++) parseCSSRule(rules[j]);
  } catch(securityException){}
   }

   function parseCSSRule(rule) {
  var select = rule.selectorText, style = rule.style.cssText;
  if(!csshoverReg.test(select) || !style) return;

  var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
  var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
  var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
  var affected = select.replace(/:(hover|active).*$/, '');
  var elements = getElementsBySelect(affected);
  if(elements.length == 0) return;

  currentSheet.addRule(newSelect, style);
  for(var i=0; i<elements.length; i++)
     new HoverElement(elements[i], className, activators[pseudo]);
   }

function HoverElement(node, className, events) {
   if(!node.hovers) node.hovers = {};
   if(node.hovers[className]) return;
   node.hovers[className] = true;
   hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
   hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
   function hookHoverEvent(node, type, handler) {
  node.attachEvent(type, handler);
  hoverEvents[hoverEvents.length] = {
     node:node, type:type, handler:handler
  };
   }

   function unhookHoverEvents() {
  for(var e,i=0; i<hoverEvents.length; i++) {
     e = hoverEvents[i];
     e.node.detachEvent(e.type, e.handler);
  }
   }

function getElementsBySelect(rule) {
   var parts, nodes = [doc];
   parts = rule.split(' ');
   for(var i=0; i<parts.length; i++) {
  nodes = getSelectedNodes(parts[i], nodes);
   }   return nodes;
}
   function getSelectedNodes(select, elements) {
  var result, node, nodes = [];
  var identify = (/\#([a-z0-9_-]+)/i).exec(select);
  if(identify) {
     var element = doc.getElementById(identify[1]);
     return element? [element]:nodes;
  }
  
  var classname = (/\.([a-z0-9_-]+)/i).exec(select);
  var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
  var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
  for(var i=0; i<elements.length; i++) {
     result = tagName? elements[i].all.tags(tagName):elements[i].all;
     for(var j=0; j<result.length; j++) {
    node = result[j];
    if(classReg && !classReg.test(node.className)) continue;
    nodes[nodes.length] = node;
     }
  }   
  
  return nodes;
   }
</script>
Back to top
Arcane Wizard
`semi-hippie`


Super Elite (Last Title)


Joined: 02 Jun 2003
Posts: 8993

Posted: 18 May 2006 06:26:41 pm    Post subject:

http://filext.com/detaillist.php?extdetail=HTC

It's a HTML component file used/generated by frontpage.

The langauge seems to be javascript.


Last edited by Guest on 18 May 2006 06:26:59 pm; edited 1 time in total
Back to top
Newbie


Bandwidth Hog


Joined: 23 Jan 2004
Posts: 2247

Posted: 18 May 2006 06:36:28 pm    Post subject:

How do you deal with different resoulutions and browsers when making pages that include images and tables?, or pretty much anything.

Last edited by Guest on 18 May 2006 07:51:29 pm; edited 1 time in total
Back to top
Display posts from previous:   
Register to Join the Conversation
Have your own thoughts to add to this or any other topic? Want to ask a question, offer a suggestion, share your own programs and projects, upload a file to the file archives, get help with calculator and computer programming, or simply chat with like-minded coders and tech and calculator enthusiasts via the site-wide AJAX SAX widget? Registration for a free Cemetech account only takes a minute.

» Go to Registration page
    »
» View previous topic :: View next topic  
Page 1 of 1 » All times are UTC - 5 Hours

 

Advertisement