|
HTML - Naive Newbie Needs Help With Sliding Panel Asap!
Hey there,
I'm feeling my through the dark trying to put an animated sliding panel on my site. It works, but its initial state is open, which defeats its purpose. Will someone please look at this short code and let me know what to do? Thanks! Here's the HTML, followed by the CSS, followed by the javascript: <html> <head> <link type="text/css" rel="stylesheet" href="Animated-Collapsible-Panel-5.css" /> <script language="javascript" type="text/javascript" src="Animated-Collapsible-Panel-5.js"></script> </head> <body> <!-- Animated collapsible panel, with separate CSS and JavaScript --> <div style="width:470px;"> <div class="squarebox"><div class="squareboxgradientcaption" style="height:20px; cursor: pointer;" onclick="togglePannelAnimatedStatus(this.nextSibling,50,50)"><div style="float: left">I bequeath myself to the dirt to grow from the grass I love...</div><div style="float: left; vertical-align:left"><img src="../images/collapse.gif" width="25" height="5" border="0" alt="Show/Hide" title="Show/Hide"/></div> </div><div class="squareboxcontent"> <img width="150" height="150" src="http://www.lesliehawes.com/wordpress/wp-content/uploads/2008/09/chief-joseph-pendleton-blanket-pattern.jpg" alt="This is an image" title="This is an image" /><br />Content goes here...</div> <img width="170" height="0" alt="" src="../images/shadow.gif"/> </div> </body> </html> .squarebox { width: 215%; text-align: center; overflow: hidden; } .squareboxgradientcaption { color: #ffffff; padding: 5px; background-image: url( ); background-repeat: repeat-x; } .squareboxcontent { background-color: #f5f5f5; padding: 10px; overflow: hidden; border-top: solid px #336699; } // not animated expand/collapse function togglePannelStatus(content) { var expand = (content.style.display=="none"); content.style.display = (expand ? "block":"none"); toggleChevronIcon(content); } // current animated collapsible panel content var currentContent= null; function togglePannelAnimatedStatus(content, interval, step) { // wait for another animated expand/collapse action to end if (currentContent==null) { currentContent = content; var expand = (content.style.display=="none"); if(expand) content.style.display = "block"; var max_height = content.offsetHeight; var step_height = step + (expand ? 0 : -max_height); toggleChevronIcon(content); // schedule first animated collapse/expand event content.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + interval + "," + step + "," + max_height + "," + step_height + ")", interval); } } function togglePannelAnimatingStatus(interval, step, max_height, step_height) { var step_height_abs = Math.abs(step_height); // schedule next animated collapse/expand event if (step_height_abs>=step && step_height_abs<=(max_height-step)) { step_height += step; currentContent.style.height = Math.abs(step_height) + "px"; setTimeout("togglePannelAnimatingStatus(" + 2 + "," + 2 + "," + max_height + "," + step_height + ")", interval); } // animated expand/collapse done else { if (step_height_abs<step) currentContent.style.display="none"; currentContent.style.height = ""; currentContent = null; } } // change chevron icon into either collapse or expand function toggleChevronIcon (content) { var chevron=content.parentNode .firstChild.childNodes[1].childNodes[0]; var expand=(chevron.src.indexOf("collapse.gif")>0); chevron.src=chevron.src .split(expand ? "expand.gif" : "collapse.gif") .join(expand ? "collapse.gif" : "expand.gif") } Similar TutorialsOk so I'm not html savvy, but my companies programmer left us and now I have to pick up the slack, so I need some help! I have two graphics, one is an embedded .swf file for a flash banner, and the second is a jpeg image I want them both to line up on the same line like this but when I put the two codes next to each other in html, the second graphic goes to the next line below the first graphic. I tried to do an image style moving the second image a few pixels over to the right (relevant to the first) I'm so confused, if someone can help me code this, I would be very grateful here are the codes I'm working with: <div style="width: 608px; border: solid 1px;"><object width="608" height="158" data="http://milkshakekicks.com/images/homepageflash.swf" type="application/x-shockwave-flash"><param name="FlashVars" value="clickTAG=http%3A//www.milkshakenyc.com/kicks" /><param name="menu" value="false" /><param name="scale" value="exactfit" /><param name="AllowScriptAccess" value="always" /><param name="src" value="http://milkshakekicks.com/images/homepageflash.swf" /><param name="flashvars" value="clickTAG=http%3A//www.milkshakenyc.com/kicks" /></object></div> and <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/fanny_site_ads.png" BORDER=1px /> Hi, I hope someone can help me. If you go to http://www.mnautocare.com and click on the contact us link or the services link, it sends the browser to a totally different website. If you copy the link address and paste it in your browser it is http://www.mnautocare.com/services.html. When it goes to my other site precision marketing, it comes up with http://www.precisionmarketingmn.com/services.php. I deleted the htaccess file, i deleted the links, I deleted the services page and nothing worked. I NEED to get this fixed asap and I am completely out of options. Please reply to this post if you feel you can help or email me. PLEASE and THANK YOU! Todd So, I'm creating a script for a MMO (videogame) that supports most HTML elements in creating scripts for the game. What I'm currently doing is making a script that pulls open a small window for people to view information. EX: <a href="text://Information">Link</a> It's setup basically like that, except there is obviously alot more information, and I'm using certain fonts and colors for the information inside. Now here comes the tricky part. I also need to place links WITHIN the link, so it will move to another window of information. I've successfully done this so far. The problem, is that I cannot add any tags within the second link. When I do, it causes the link to mess up. EX: <a href="text://Information1 <a href='text://Information2'>Link2</a>">Link1</a> This link would work. But it would simply show the information without any organization or colors. When I add the <font> tag, or any other tag for that matter, it breaks the link. ANY assistance in this matter would be greatly appreciated, as I need this to be up and running very soon! Hey, just so everyone knows beforehand i would like to let you know i know how to code i just cant on the computer i am on currently as certain applications are blocked. I would like a code for a site that when first going to it requires a username and password, a registration if possible (haha need to register dont you.). And once signing in takes to a chat room. Thanks. RESPOND ASAP PLEASE Hey, I have a bunch of text fields with the same field name <input type="text" name="var" value="$cost"> <input type="text" name="var" value="$cost"> <input type="text" name="var" value="$cost"> <input type="text" name="var" value="$cost"> i need to have a text field display the sum off all text fields named "var" <input type="text" name="total_var" value="total'> just a simple javascript code - I googled "add text fields" and all i get is how to add a text field to a web page, lol help asap please! Hi All OK here is situtation. I have a WMV video file I made and uploaded to a hosting site that allows hot linking and such. Anyways I got an embed code of fthe web from an HTML website not host site as they didn't have one for embedding and tested it in my HTML editor and video played great. I then tried to add the code to my profile on a social network I belong to. And I can't even get a player to show up let alone play. Now so you know I have already embedded videos off of youtube and another similar website and those work great so I know embedding isn't disabled as others play just fine. What am I doing wrong that those play and mine won't even though it works perfectly in my HTML editor Here is one code I tried with both file name areas fixed with the videos URL Quote: <OBJECT ID="MediaPlayer" WIDTH="400" HEIGHT="400" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="videofilename.wmv"> <PARAM name="autostart" VALUE="false"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="false"> <PARAM name="ShowDisplay" VALUE="false"> <EMBED TYPE="application/x-mplayer2" SRC="videofilename.wmv" NAME="MediaPlayer" WIDTH="400" HEIGHT="400" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED> </OBJECT> TIA Dave Hello everyone. I am currently working on a new project for our website. This new project is a News Ticker, with a menu that goes under the News Ticker. The problem I am having is the Menu, where I have DIV's displaying different HTML pages. It works like I want it to, but the problem I am most having is overlaying the HTML DIV's. When I click on a link, it shows the DIV window like I want to. Let's say for example I have selected Menu 1, now I selected Menu 2. I want to show Menu 1 again, but it won't unless I refresh the web page. I have attached an image below so you can see the image I am talking about above. Menu 1 Selected: Menu 2 Selected: When selecting Menu 1 after Menu 2 has been selected, it won't show. Any way to fix this? Thanks for your help, I really appreciate it! CJ I need a table that has 1 row and 3 columns. The entire table must be 100% width of the screen, yet the center column needs to be 550 pix wide and centered between the 2 outer columns It has to be this table, and it can't be a table within a table. Is there anyway of doing this? and is this understandable? If so can you send me the code for this Thanks in advanced. Alex Hello I'm having terrible trouble aligning my text into a layout using tables i will include a screen shot to show what im talking about. i thought i could fix it by putting valign=top in the td tag but nothing seems to be working if someone could help me out i would greatly appreciate it. THanks heres the screen OK so I am grabbing this code off of a local news site (WRAL) and when I embed into a myspace page, only portions of the script are showing up, not the video. So there is something wrong with the code itself i'm sure, I just don't know what. Here is the code. Do you guys see any errors he Quote: <script src="http://www.wral.com/entertainment/video/2820107/?version=embedded" type="text/javascript"></script><script type="text/javascript"> width=330; height=280; wral_insert_video_player_2820107(width,height); </script> I am currently re-coding my school's website because it was coded in HTML 4.01 and the code was extremely messy anyways. I'm recoding it in XHTML Strict. Everything was going fine, I got the homepage perfectly replicated with much nicer code, then somehow after I had finished the homepage, I refreshed it and there was a random space between the header and the nav bar. You can see it he General Amherst School Website Can someone please take a look at the code and tell me why it's happening!? It was totally fine, but then I changed some random insignificant thing unrelated to the nav bar or the header and that happened. I'll paste the stylesheet below so you on't have to download it: Code: body {
background-image: url('images/bg.jpg');
background-repeat: repeat;
background-attachment: fixed;
margin: 8px auto 0 auto;
width: 828px;
}
#header {
width: 700px;
height: 250px;
margin: 0;
padding: 0;
float: left;
background-image: url('images/designimages/headermid.png');
text-align: center;
}
#nav {
height: 50px;
width: 700px;
padding: 0 0 0 64px;
text-align: center;
background-image: url('images/designimages/navbg.png');
background-repeat: repeat-x;
line-height: 50px;
font-size: 19px;
float: left;
color: #ffffff;
}
#main {
width: 764px;
margin: 0;
padding: 0 64px 0 0;
background-image: url('images/designimages/bodyend.png');
background-position: right center;
background-repeat: repeat-y;
clear: both;
}
#nav a:link {
color: #ffcc00;
font-weight: normal;
}
#nav a:visited {
color: #ffcc00;
font-weight: normal;
}
#nav a:hover {
color: #ffcc00;
text-decoration: none;
font-weight: normal;
}
#nav a:active {
color: #ffcc00;
font-weight: normal;
}
a:link {
color: #ff0000;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #ff0000;
text-decoration: none;
}
a:active {
color: #ff0000;
}
img {border:0;padding:0;margin:0;}
h1 {
margin: 0;
padding: 0;
font-family: Gill Sans, Trebuchet MS, sans-serif;
font-size: 24px;
}
h2 {
margin: 0;
padding: 0;
font-family: Gill Sans, Trebuchet MS, sans-serif;
font-size: 16px;
text-decoration: underline;
}
h3 {
margin: 0;
padding: 0;
font-family: Gill Sans, Trebuchet MS, sans-serif;
font-size: 13px;
text-decoration: underline;
}
p {
margin: 0;
padding: 0;
font-family: Gill Sans, Trebuchet MS, sans-serif;
font-size: 13px;
line-height: 16px;
}
Hi all - I have created an entry page for my site allowing visitors to decide which section to enter. I have two images that slide on mouse over using javascript. http://www.colletts.co.uk/dolomites_pyrenees.html I used a lightweight Javascript Accordian to accomplish this from http://www.leigeber.com/2008/05/hori...ccordion-menu/ What I want to do is accomplish the same thing with a div and not an image allowing to ramp up the SEO involved, make the entry button a rollover and separate pictures and text rather than just two images. Any ideas? Any experience of this? please help, Mas Goodafternoon, How can I make pictures slide in, when you open the page? Hi all! I've recently been doing some work revamping the website for my dad's construction company, seen here. He originally created it in Dreamweaver years back and I've been using SeaMonkey to update it. I have pretty limited HTML knowledge and this is the first time I've actually done any real form of web editing. I've done the bulk of it but I really need some advice on a couple of small problems I can't seem to figure out: 1) As you can see, on the left hand side there's a list of links that change colour on mouse-over. They seem to be working fine on all pages apart from 'testimonials'. When I click that link and arrive at the page headed 'testimonials and references', the mouse-over effect doesn't seem to be working on any of the images. I've looked at the source and tried to figure it out, but as I said, I have pretty limited knowledge and couldn't spot anything obviously wrong. 2) If you go the page entitled 'services' you'll see a large image at the top. If I do anything to the image; delete it, resize it, move it slightly in any way - the whole framework of the page goes completely out of whack. It looks fine on the Composer but testing it on Chrome shows the whole side panel of links about a mile lower than where I want them and completely out of alignment with all of the other pages. I just want to resize the image slightly so it's not to in-your-face, but not at the risk of messing up the whole page layout. I can't work this one out at all, so any help would be greatly appreciated. You might also notice the 'about us' page is the only one where the links are slightly out of alignment with the others - if anyone can work out how to change that, that would be ace. Thanks a lot guys. D. Hi, can you suggest me where I can find a snippet do to these kind of animations (sliding images) ? I would like to integrate it in a Joomla website. http://wearebuild.com/ thanks Hey guys, I'm looking for a script, which I think can be made HTML, that will allow a drag-able side panel. Like a space on the 'left' side of my page that can be typed in (in my case, I'm using it for a nav bar). And the bar dividing the page and the frame is drag-able when it is online, so you can change it's size. If anyone has a script that can be used for this, or can help me make something like this, please respond Hi I'm brand new here. Trying to figure out how exactly to make a panel like the one shown on the right in my site layout. Any advice would be helpful. http://kyonn.freehostia.com/SitePlan/Layout.jpg Hi Sorry had to re-post this I put it in the wrong forum topic before. I am a college student creating a website for a school and was wondering if there is an easy way to create a login panel that the user can update a news section on the home page. For example may want to say school closed for the day. I have never made a website before and aren't that good at it so I was wondering if theres an easy way. I am using dreamweaver. Thanks in advance After some good help from Horus_Kol i made a panel to the left on my website: But now i created alot of stuff on my website, and then i found that something was wrong if there is too much text on the page (sorry, i can't explain it so good ): here is the HTML Code: Code: <html> <head> <title>Urne's Website - About</title> <link rel="stylesheet" type="text/css" href="style/style2.css"> <div id="container" style="width:100%;"> <div id="header"> </div> <div id="left" style="width:30%;float:left;"> <a href="index.html"><img alt="Home2 (15K)" src="img/Home2.png" height="50" width="200" border= "0px"/></a> <p><a href="Community.html"><img alt="Community (15K)" src="img/Community.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Tracks.html"><img alt="Tracks (17K)" src="img/Tracks.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Videos.html"><img alt="Videos (15K)" src="img/Videos.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Images.html"><img alt="Images (15K)" src="img/Images.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Other.html"><img alt="Other (13K)" src="img/Other.png" height="50" width="200" border= "0px"/></a><p/> <p><a href="Trackup.html"><img alt="Track Updates" src="img/trackup.png" height="50" width="200" border= "0px"/></a><p> <p><a href="Settings.html"><img alt="Settings (13K)" src="img/Settings.png" height="50" width="200" border= "0px"/></a></p> <p><a href="Search.html"><img alt="Search (14K)" src="img/Search.png" height="50" width="200" border= "0px"/></a><p> <p><a href="About.html"><img alt="About (12K)" src="img/About.png" height="50" width="200" border= "0px"/></a></p> </div> </head> <body> <div id="main" style="width:70%;"> <h1>Other Things</h1> </div> </body> <div id="footer"> <img alt="Pretty Plant" src="img/Pretty+Plant.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Pretty Plant 3D Model</h3></u></b></p> <p>This plant i made in September, and was made for this website. You can use it if you want to your track, or any other thing, but if you want to upload it to your website, then please contact me on my e-mail (look in the readme.txt that comes with the plant). <br>Convert the plant to any other format if you want, but please keep the readme.txt unmodified, and safe.</br> <p><a href="dload/Pretty+Plant.zip"><img alt="Download Pretty+Plant.zip" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Urne's World infodocument" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Urne's World Infodocument</h3></u></b></p> <p>The "Uworld" Project is still going around, and in the beginning i was planning alot, about how the track should be etc. <br>The infodocument contains pictures, and track information about the 5 tracks Urne's World include. Urne's World should be aviable for Download in October/November 2008.</br> Enjoy the reading! </p> <p><a href="dload/UW+Project.doc"><img alt="Download UWorld Project.doc" src="img/Download.png" height="50" width="200" border= "0px"/></a> <hr /> <img alt="Bone Island Light Pack" src="img/No+pic.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Bone Island Light Pack</h3></u></b></p> <p>Alot of people uses wrong Brightness & Contrast settings wich will cause alot of darkness in Bone Island, so i made this ligth pack to help all thoose who cant drive this amazing track because it's too dark. <br>Hope it helps!</br></p> <p><a href="http://www.mediafire.com/?xvy1gjwxll1"><img alt="FC" align="right" src="img/FC.png" height="50" width="200" border= "0px"/></a> <a href="ihttp://www.mediafire.com/?v2ygm4n7cpu.ico"><img align="right" alt="Extreme" src="img/Extreme.png" height="50" width="200" border= "0px"/></a></p> <hr /> <img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px"/> <p><b><u><h3>Other Pisa Grandprix GFX</h3></u></b></p> <p>Before me & Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix. Please feel free to download, if you like this one better than the 2 other images!</p> <p><a href="img/new+pisa.png"><img alt="Full Size" src="img/FS.png" align="right" height="50" width="200" border= "0px"/></a> </div> </div> Is there any way to make this work so everything is aligned the way that the other text are? Hi The sidebar appears on the bottom of the website I'm editing when I try to add it.I'm not the original webmaster,he abandoned it and I'm helping my friend redo it.We're both inept at html. InstanceBeginEditable name="EditRegionRightSide" --> <!-- InstanceEndEditable --> <h1>MySpace Page</h1> <p><a href="http://www.myspace.com/kellimaroney" target="myspace"><img src="graphics/myspace.gif" alt="Click Here to visit my MySpace page" border="0"></a></p> <p>Don't forget to visit me at <a href="http://www.myspace.com/kellimaroney" target="myspace">myspace.com/kellimaroney</a></p> <div align="center"><br> Check out the <a href="http://movies.groups.yahoo.com/group/kellimaroneyfans/?yguid=188954506" target="_blank">Kelli Maroney Fan Club @ Yahoo! Groups</a><br> </div> <div> <h1 align="center">Follow me on...</h1> <ul class="hnav" style="margin-left: 30px;"> <li><a href="http://twitter.com/Kellimaroney" title="Twitter"><img src="images/twitter.gif" alt="Twitter" width="32" border="0" height="32"></a></li> <li><a href="http://www.facebook.com/kellimaroney?ref=profile" title="Facebook"><img src="images/facebook.gif" alt="Kelli's Facebook Page" width="32" border="0" height="32"></a></li> <li><a href="http://www.youtube.com/user/lovesnerds" title="YouTube"><img src="images/youtube.gif" alt="Kelli's YouTube Channel" width="32" border="0" height="32"></a></li> </ul> </div> <br style="clear: both;"> <br> <div align="center"> <script type="text/javascript"><!-- amazon_ad_tag="kellsonl-20"; amazon_ad_width="120"; amazon_ad_height="600"; amazon_color_border="206BA2"; amazon_color_logo="FFFFFF"; amazon_color_link="206BA2"; amazon_ad_logo="hide"; amazon_ad_title="The Official Kelli Maroney Amazon.Com Store"; //--></script> <script type="text/javascript" src="http://www.assoc-amazon.com/s/asw.js"></script> </div> <script type="text/javascript" src="http://www.assoc-amazon.com/s/link-enhancer?tag=wwwkellimaron-20"> </script> <noscript> <img src="http://www.assoc-amazon.com/s/noscript?tag=wwwkellimaron-20" alt="" /> </noscript> </div></td> </tr> </tbody></table> <p> </p> <table width="798" border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td><img src="graphics/t_photo.gif" width="798" height="8"></td> </tr> |
|||||||