Jump to content

dbhynds

Members
  • Content Count

    16
  • Joined

  • Last visited

Community Reputation

0 Neutral

About dbhynds

  • Rank
    Newbie
  1. That was the problem! Thanks so much for the help.
  2. Hi all, I'm trying to create a page that has several tabs, each with their own unique content. I have my navigation as an inline list, with content divs below it. I created some javascript that, when a nav item is clicked, sets all of the content divs to display:none and sets the corresponding content div to display:block. I tested it across Firefox, Safari, Chrome and IE. It works in all of them except IE. I get the following error: Object doesn't support this property or method. Here is a live example: http://bit.ly/cbktTw Here is the relevant HTML: <div class="content tab1 left"> <div class="tabnav"> <ul> <li><a id="link1" class="this" href="java script:tab('about','link1');">About Program</a></li> <li><a id="link2" href="java script:tab('students','link2');">Our Students</a></li> <li><a id="link3" href="java script:tab('apply','link3');">How to Apply</a></li> <li><a id="link4" href="programpage-info.html">Request More Info</a></li> </ul> </div> <div class="tabContent visible" id="about"> <div class="visible" id="content1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere. Donec tincidunt nulla at enim eleifend nec cursus enim sagittis. Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue commodo condimentum. Integer ultricies mauris orci. Proin eget turpis lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper. Curabitur ligula mauris, luctus id semper blandit, scelerisque at nunc.</p> </div> </div> <div class="tabContent hidden" id="students"> <div class="visible" id="content1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere. Donec tincidunt nulla at enim eleifend nec cursus enim sagittis. Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue commodo condimentum. Integer ultricies mauris orci. Proin eget turpis lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper. Curabitur ligula mauris, luctus id semper blandit, scelerisque at nunc.</p> </div> </div> <div class="tabContent hidden" id="apply"> <div class="visible" id="content1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur luctus leo eget tortor ultricies posuere. Donec tincidunt nulla at enim eleifend nec cursus enim sagittis. Vestibulum adipiscing porta justo in suscipit. Proin turpis leo, congue ac consectetur vel, porta eu nisi. Pellentesque at metus quis augue commodo condimentum. Integer ultricies mauris orci. Proin eget turpis lectus. Aliquam auctor nulla at urna ultrices eu iaculis nulla semper. Curabitur ligula mauris, luctus id semper blandit, scelerisque at nunc.</p> </div> </div> </div> And here is the relevant java script: function tab(acontent,alink) { link1=document.getElementById("link1"); link2=document.getElementById("link2"); link3=document.getElementById("link3"); link1.className=""; link2.className=""; link3.className=""; active1=document.getElementById("about"); active2=document.getElementById("students"); active3=document.getElementById("apply"); active1.className="tabContent hidden"; active2.className="tabContent hidden"; active3.className="tabContent hidden"; obj=document.getElementById(acontent); thislink=document.getElementById(alink); obj.className="tabContent visible"; thislink.className="this"; }
  3. Thanks! That fixed it! Everything is working wonderfully. I appreciate the help.
  4. Hmm. I tried that, and nothing changed. Any other suggestions.Note: all of the adbox divs still have some extra space at the top.
  5. Thanks for the suggestion. I tried it, and it half-way fixed it. It removed the extra space at the bottom, but the extra space at the top is still there. A little more help on it would be greatly appreciated.Unrelated (I think), you'll notice that adbox8 has some issues with the top. Anybody have a guess as to what the problem is here, too?The link again is: http://hyndswebdesign.com/test/page-core.htmlThe code should all be the same except with the font-size: 0px; added in to the CSSThanks!
  6. I'm using CSS to create a drop shadow on a site, and have run into some problems using IE 8 (haven't checked yet on older versions). You can take a look at the page here.Everything is working fine in Firefox. However, IE is adding too much space to the top and bottom of the image... 13 pixels on each side, to be precise.The drop shadow works using images (small gradients) stretched the height of the div. When I use the Developers Tools to check it out, it shows that the CSS correctly designates the size the div should be (img height + 7 for shadow). However, when I take a screenshot of the div selected in Developer Tools, and measure the height in Photoshop, the div is larger than the CSS says, so I know my math isn't off.Here is my HTML: <html><head><LINK REL=StyleSheet HREF="style-core.css" TYPE="text/css" MEDIA=screen></head><body><div class="body"><div class="page-holder"><div class="column-4"><div class="adbox8"><img src="images-core/seminars.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox6"><img src="images-core/contact.jpg" /></div><div class="adbox7"><img src="images-core/blog.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox9"><div class="shadow-top"></div><img src="images-core/testimonials.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="header"><img src="images/header-core.jpg" /></div><div class="nav-holder"><div class="nav-right"><img src="images/nav-right.gif" /></div><div class="nav-left"><img src="images/nav-left.gif" /></div><div class="nav">Navigation</div></div><div class="column-1"><div class="adbox1"><div class="shadow-top"></div><img src="images-core/bio.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox2"><div class="shadow-top"></div><img src="images-core/video.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-2"><div class="adbox3"><div class="shadow-top"></div><img src="images-core/network.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div><div class="adbox4"><div class="shadow-top"></div><img src="images-core/resources.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div><div class="column-3"><div class="adbox5"><div class="shadow-top"></div><img src="images-core/programs.jpg" /><div class="shadow-bottom"><div class="shadow-left"></div><div class="shadow-right"></div></div></div></div></div></div></div><div class="footer"><div class="footer-holder"><div class="footer-left">Seaborne Leadership<br />Wendell Seaborne, Ph.D.</div><div class="footer-middle">317.750.2682<br /><a href="mailto:wendell@seaborneleadership.com">wendell@seaborneleadership.com</a></div><div class="footer-right">PO Box 401<br />Fishers, IN 46038</div></div></div></body></html> And here is my CSS: /*Theme Name: Seaborne LeadershipTheme URI: [url="http://wordpress.org/"]http://wordpress.org/[/url]Description: Template for Seaborne Leadership.Version: 0.1Author: David HyndsAuthor URI: [url="http://hyndswebdesign.com/"]http://hyndswebdesign.com/[/url]Tags: blue, red, custom header, fixed width, two columns*//*Red: B41F24Blue: 1F53C9Light blue: F1F1F4Grey: 3C3C3C*/* { margin: 0; }html { height: 100%; }body { font-size: 68.75%; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; color: #3C3C3C; text-align: center; margin: 0px; width: 100%; height: 100%; }.body { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -47px; background: url('images/bg-core.gif') repeat-x; background-color: #D1DEEB; }p { font-size: 1em; color: #3c3c3c; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; line-height: 1.375em; margin-top: 1.5em; margin-bottom: 0px; }h1 { font-size: 1.5em; font-family: "Palatino Linotype", Palatino, "Times New Roman", Serif; text-transform: uppercase; color: #3c3c3c; letter-spacing: 1px; margin: 0; }a:active, a:link { font-size: .6875em color: #B41F24; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: underline; }a:hover { font-size: .6875em color: #FF0000; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: none; }a:visited { font-size: .6875em color: #1F53C9; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: underline; }a img { border: 0px; }.body-top { width: auto; }.header { height: 185px; width: 528px; float: left; }.nav-holder { width: 527px; background: url('images/nav-bg.gif') repeat-x; background-color: #95BDE6; float:left; }.nav { padding-top: 3px; text-align: center; font-weight: bold; color: #B41F24; right: 200px; }.nav a { font-size: .75em color: #B41F24; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: none; font-weight: bold; }.nav-right { background-color: #95BDE6; width: 3px; height: 22px; float: right; background: url('images/nav-right.gif') }.nav-left { background-color: #95BDE6; width: 3px; height: 22px; float: left; background: url('images/nav-left.gif') }.page-holder { width: 811px; margin-left: auto; margin-right: auto; overflow: auto; }.shadow-bottom { background: url('images/shadow-bottom.gif') repeat-x; height: 7px; }.shadow-left { background: url('images/shadow-left.gif') no-repeat; width: 7px; height: 7px; float: left; }.shadow-right { background: url('images/shadow-right.gif') no-repeat; width: 7px; height: 7px; float: right; }.shadow-top { background: url('images/shadow-top.gif') no-repeat; width: 7px; height: 7px; float: right; }.column-1 { float: left; }.adbox1 { background: url('images/shadow-side.gif') repeat-y; background-position: right; width: 144px; height: 224px; margin-top: 20px; text-align: left; }.adbox2 { background: url('images/shadow-side.gif') repeat-y; background-position: right; width: 144px; height: 125px; margin-top: 13px; text-align: left; }.column-2 { float: left; margin-left: 13px; }.adbox3 { background: url('images/shadow-side.gif') repeat-y; background-position: right; margin-top: 20px; width: 174px; height: 99px; text-align: left; }.adbox4 { background: url('images/shadow-side.gif') repeat-y; background-position: right; margin-top: 13px; width: 174px; height: 251px; text-align: left; }.column-3 { margin-left: 13px; float: left; }.adbox5 { background: url('images/shadow-side.gif') repeat-y; background-position: right; margin-top: 20px; width: 190px; height: 364px; text-align: left; }.column-4 { float: right; width: 277px; }.adbox6 { margin-top: 20px; width: 135px; height: 93px; float: left; text-align: left; }.adbox7 { margin-top: 13px; width: 135px; height: 194px; float: left; text-align: left; }.adbox8 { margin-top: 20px; margin-left: 10px; width: 132px; height: 301px; float: right; text-align: left; }.adbox9 { background: url('images/shadow-side.gif') repeat-y; background-position: right; width: 277px; height: 251px; margin-top: 13px; float: right; text-align: left; }.footer { height: 26px; width: auto; background-color: #F1F1F4; border-top: 1px solid #3C3C3C; padding-top: 10px; padding-bottom: 10px; text-align: center; }.footer a:active, a:link, a:visited { color: #3c3c3c; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: none; }.footer a:hover { color: #3c3c3c; font-family: Tahoma, Verdana, Arial, Sans-Serif; letter-spacing: 1px; text-decoration: underline; }.footer-holder { margin-left: auto; margin-right: auto; width: 641px; }.footer-left { padding-right: 50px; color: #3C3C3C; text-align: right; float: left; }.footer-middle { padding-left: 50px; padding-right: 50px; border-right: 1px solid #3C3C3C; border-left: 1px solid #3C3C3C; text-align: center; float: left; }.footer-right { padding-left: 50px; color: #3c3c3c; text-align: left; float: left; } Any help would be greatly appreciated. I've been over it a dozen times, and can't see what I'm doing wrong.
  7. Ahah! You, my friend, are genius. Thanks much.
  8. I installed Firebug, and here's the error I get:ptau is not defined[break on this error] function showau() { ptau.openInfoWindowHtml(au);};Like I said, I'm not the best at java. What does that mean is the problem? Any suggestions on how to fix it?
  9. I'm trying to make a bubble pop up over a marker on a Google Map APIHere's the link of the page I'm working on:http://www.anderson.edu/alert/hospitals.html <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA_TcZ-f0O0u7RY2MqeKmZoBSdNmmf_GZX9MlSgEE6OFIufsXyERRvAKNW-JTjOeINh4ckZGsSG3mkEg" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[var tinyIcon = new GIcon();tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";tinyIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";tinyIcon.iconSize = new GSize(12, 20);tinyIcon.shadowSize = new GSize(22, 20);tinyIcon.iconAnchor = new GPoint(6, 20);tinyIcon.infoWindowAnchor = new GPoint(5, 1);markerOptions = { icon:tinyIcon };var geocoder = new GClientGeocoder();var au='<b>Anderson University</b><br />1100 E 5th St.<br />Anderson, IN 46012';var stjohns='<b><a href="http://www.stjohnshealthsystem.org/" target=new>Saint John's Health System</a></b><br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511';var community='<b><a href="http://www.communityanderson.com/" target=new>Community Hospital Anderson</a></b><br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242';var auaddress = '1100 East Fifth St., Anderson, IN 46012';var stjohnsaddress = '2015 Jackson St., Anderson, IN 46012';var communityaddress = '1515 N. Madison Ave., Anderson, IN 46011';var ptstjohns = new GMarker(new GLatLng(40.096,-85.681), markerOptions); var ptcommunity = new GMarker(new GLatLng(40.1303,-85.692), markerOptions); function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); var center = new GLatLng(40.1124, -85.675); map.setCenter(center, 13); map.setMapType(G_HYBRID_MAP); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); geocoder = new GClientGeocoder(); map.addOverlay(ptstjohns); map.addOverlay(ptcommunity);GEvent.addListener(ptstjohns, "click", function() { showstjohns(); });GEvent.addListener(ptcommunity, "click", function() { showcommunity(); });// THIS IS WHERE I NEED HELP geocoder.getLatLng(auaddress, function(point) { if (!point) { alert(address + " not found"); } else { var ptau = new GMarker(point); map.addOverlay(ptau); GEvent.addListener(ptau, "click", function() { showau(); }); }});// END NEED HELP } }function showau() { ptau.openInfoWindowHtml(au);};function showstjohns() { ptstjohns.openInfoWindowHtml(stjohns);};function showcommunity() { ptcommunity.openInfoWindowHtml(community);}; //]]> </script> <body onload="load()" onunload="GUnload()"><h1>Local Area Hospitals</h1> <div id="map" style="width: 590px; height: 428px"></div><ul><li><a href="java script:void(0)" OnClick="showau()"><strong>Anderson University</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=6142647476688581302,40.111180,-85.665899&saddr=&daddr=1100+East+Fifth+Street,+Anderson,+IN+46012+(Anderson+University)&mra=pe&mrcr=0&sll=40.111534,-85.664944&sspn=0.01733,0.026608&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1100 E 5th St.<br />Anderson, IN 46012</li><li><a href="java script:void(0)" OnClick="showstjohns()"><strong>Saint John's Health System</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=7087725764188778215,40.096237,-85.680490&saddr=&daddr=2015+Jackson+St,+Anderson,+IN+46016+(St+John's+Health+System)&mra=pe&mrcr=0&sll=40.103816,-85.723945&sspn=0.116069,0.20874&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />2015 Jackson St.<br />Anderson, IN 46012<br />(765) 649-2511<br /><a href="http://www.stjohnshealthsystem.org/" target=new>Website</a></li><li><a href="java script:void(0)" OnClick="showcommunity()"><strong>Community Hospital Anderson</strong></a> [<a href="http://maps.google.com/maps?f=d&hl=en&geocode=14601001884254169233,40.128660,-85.691621&saddr=&daddr=1515+N+Madison+Ave,+Anderson,+IN+46011+(Community+Hospital+Anderson)&mra=pe&mrcr=0&sll=39.874012,-85.907232&sspn=0.931682,1.669922&ie=UTF8&z=16" target="new">Get driving directions</a>]<br />1515 N. Madison Ave.<br />Anderson, IN 46011<br />(765) 298-4242<br /><a href="http://www.communityanderson.com/" target=new>Website</a></li></ul></div> Here's the excerpt of the critical code that I'm having trouble with: geocoder.getLatLng(auaddress, function(point) { if (!point) { alert(address + " not found"); } else { var ptau = new GMarker(point); map.addOverlay(ptau); GEvent.addListener(ptau, "click", function() { showau(); }); } }); I'm not the best at javascript yet, so dummy explainations with small words would be appreciated.
  10. I added a border to each div, but then the dividing line is 2px wide for a portion of the page, then cuts down to 1px. (See it here http://www.dougberkytheatre.com/). If I make it so that the divs overlap, then the first div pushes the second all the way to the bottom below it.Is there another way?
  11. I have two float divs inside of another div. Depending on the page, either could be larger than the other. I want to have a divider between the two. I've tried doing a border, but because either one could be higher, on some pages it doesn't extend all the way down the page.I need to set one of my float divs to run the entire length of its parent div, but cannot figure out how.Any suggestions?Here's the site:www.dougberkytheatre.comHere's an example of the div not running to the bottom:www.dougberkytheatre.com/?p=7Here's my CSS: body {background: url('/images/background.gif');background-color: #6D3115;background-repeat: repeat-x;margin-top: 24px;}h1 {font-family: 'Times New Roman';text-align: left;font=color: #271008;font-size: 24px;}a img {border: 0px;}a {font-family: tahoma;color: #BB4400;font-size: 12px;}p, b, strong, em, i, u{text-align: left;font-family: tahoma;color: #554433;font-size: 12px;line-height: 18px;}.headerdiv {background-color: #EAD5BA;width: 702px;}.pagediv {border-left: 3px #C59265 solid;border-right: 3px #C59265 solid;border-bottom: 3px #C59265 solid;width: 696px;background-color: #EAD5BA;overflow: auto;}.navdiv {background-image: url('/images/navbg.gif');background-color: #D3BB99;border-bottom: 1px #271008 solid;border-top: 1px #271008 solid;height: 29px;vertical-align: top;}.navitem {border-right: 1px #C9A883 solid;float: left;height: 23px;padding-top: 6px;}.navitem a {font-family: tahoma;color: #271008;font-size: 12px;text-decoration: none;margin-left: 20px;margin-right: 20px;}.bodydiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: left;width: 453px;border-right: 1px #C9A883 solid;}.sidebardiv {background-image: url('/images/subnav.gif');background-repeat: repeat-x;background-color: #EAD5BA;padding-left: 20px;padding-right: 20px;padding-bottom: 10px;padding-top: 37px;vertical-align: top;float: right;}.footerdiv {width: 702px;padding-top: 3px;padding-right: 23px;}.footerdiv p {color: #C59265;text-align: right;}.footerdiv a {color: #C59265;text-decoration: none;} And here is the code on my page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>><head profile="http://gmpg.org/xfn/11"><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /><title><?php bloginfo('name'); ?>. <?php wp_title(); ?></title><meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <style type="text/css" media="screen"> @import url( <?php bloginfo('stylesheet_url'); ?> ); </style><link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /><link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /><?php wp_head(); ?></head><body><center><div class="headerdiv"><?php get_header(); ?></div><div class="pagediv"><div class="navdiv"><?php $my_query = $wp_query; ?><?php query_posts('cat=3'); ?><?php while (have_posts()) : the_post(); ?><div class="navitem" nowrap><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></div><?php endwhile; ?></div><div class="sidebardiv"><?php get_sidebar(); ?></div><div class="bodydiv"><h1><?php the_title(); ?></h1><?php the_content(); ?></div></div><div class="footerdiv"><?php get_footer(); ?></div></center><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript">_uacct = "UA-3170858-4";urchinTracker();</script></body></html>
  12. I'm creating a website using WordPress, www.dougberkytheatre.com.I'm new to php (really new, as in learning it for this project) and I'm having some trouble getting it to do what I want.I have several posts labelled under Category 3. I want to display the titles of each page in the navigation. I can get it to display correctly, but any time you click the link to load a page, always loads the same post.Here is the code I have for the navigation: <table border=0 cellpadding=0 cellspacing=0><tr><?php query_posts('cat=3'); ?><?php while (have_posts()) : the_post(); ?><td class="nav" nowrap><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></td><td><img src="/images/navdivider.gif"></td><?php endwhile; ?><td class="nav" width="100%"></td></tr></table> Here is my code for the main body of my page: <h1><?php the_title(); ?></h1><?php the_content(); ?> So here's the problem, the site automatically loads the page entitled "Test Post." However, when you click "Test post 2" it will load "Test Post" instead. Basically, any link you click will always display "Test Post."I think the "<?php query_posts('cat=3'); ?>" code is somehow causing it, because when I delete that, everything works fine. The problem is that I don't want posts in Category 4 to be displayed in the navigation, and deleting this code causes Category 4 posts to be displayed. Oh, the other wierd thing that tells me it's somehow connected to that line of code is that when I move the Navigation code below the Main Body, everything works fine. So it's like the query_post function is somehow getting hung up on the last post in the category (which is "Test Post"), but only does so if the function occurs before the main body code.Can someone help me out here? I'm completely new to php.
  13. Thanks! That's what I was trying to do.I still have some bugs I'm working out, but you answered my question. Thanks a bunch!
  14. Anyone know what I'm doing wrong?
  15. Odd... it works fine for me. I had a friend test it, too. Anyone else having the same problem?If not... anyone help me on the original question?
×
×
  • Create New...