|
HTML - Help Moving A Hide/show Script And Also Number Highlighting
Hi,
I need to move the hide content link from the bottom up to the top. It needs to replace the show category. Example: show category is clicked hide category is then displayed. When hide category is clicked show category is displayed. Also I can't seem to make the 1 2 3 4 buttons highlight when active. When you click on a number it slides along to that number but doesn't highlight what number you are on Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css" media="screen">
/* CSS Reset */
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color:#FF0000;
}
a:link {
color: #999999;
text-decoration: none;
font-size:14px;
}
a:visited {
color: #999999;
text-decoration: none;
font-size:14px;
}
a:hover {
color: #FF0000;
letter-spacing: 3px;
text-decoration: none;
font-size:14px;
}
a:active {
color: #FF0000;
font-size:14px;
}
#wrapper{
position:relative;
width:730px;
height:600px;
margin:0px auto;
}
#images{
width:730px;
height:552px;
overflow:hidden;
float:right;
position: absolute;
top: 48px;
}
#textbox{
position: absolute;
width:205px;
height:40px;
background-color: #FFFFFF;
top: 68px;
left: 20px;
z-index: 2;
padding: 10px;
border-bottom: 2px solid red;
}
#logo {
position: absolute;
width: 101px;
position: absolute;
left: 634px;
top: 19px;
padding: opx;
margin: 0px;
z-index: 2;
}
.more {
display: none;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
border-bottom: 2px solid red;
padding-left: 8px;
padding-right: 8px;
margin-left: -10px;
width: 209px;
}
a.mo hover {
text-decoration: none;}
a.showLink, a.hideLink {
text-decoration: none;
font-size: xx-small;
color: #36f;
padding-left: 8px;
/*** background: transparent url(down.gif) no-repeat left;***/ }
a.hideLink {
/*** background: transparent url(up.gif) no-repeat left;***/ }
.drop1 {
font-size: 12px;
font-weight: bold;
}
.drop2 {
color: #666666;
font-size: smaller;
}
#apDiv1 {
position:absolute;
left:0px;
top:px;
width:141px;
height:21px;
z-index:1;
}
</style>
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id= logo><img src="logo2.png" width="101" height="92" /></div>
<div id="textbox">
<div><img src="logo_dedon.png" alt=""/>
<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;"><img src="ShowProduct.jpg" alt="" /></a><br />
<img src="clear.gif" alt="" width="135" height="10" />
<a href="#image1" id="tab1">1</a>
<a href="#image2" id="tab1">2</a>
<a href="#image3" id="tab1">3</a>
<a href="#image4" id="tab1">4</a> </div>
<div id="example" class="more">
<p><span class="drop1">BARCELONA</span><br />
<span class="drop2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin non mi in urna hendrerit tincidunt. Maecenas eleifend erat et lacus. Sed tempor. Sed venenatis consequat neque. Sed massa. Donec quis orci sed lacus ullamcorper venenatis. </span></p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;"><img src="HideProduct.jpg" alt="" /></a></p>
</div>
</div>
<div id="images">
<div><a name="image1"></a><img src="001.jpg" alt="" title="" /></div>
<div><a name="image2"></a><img src="002.jpg" alt="" title="" /></div>
<div><a name="image3"></a><img src="003.jpg" alt="" title="" /></div>
<div><a name="image4"></a><img src="004.jpg" alt="" title="" /></div>
</div>
</div>
</body>
</html>
Please can some one help? many thanks Joe Similar TutorialsI'm having a little problem with my site's Q&A. Right now, the question is shown, and the answer hidden. When a user clicks on the question, the answer will display. HOWEVER (and that's where the problem is), if said user clicks on ANOTHER question, nothing will happen UNTIL he clicks it a SECOND time! I need to make it so that the answer will display after the FIRST click (the answer will display after the first click assuming the user hasn't clicked on any questions previously). I hope this isn't too confusing. If you don't understand, say so and I'll try to explain more clearly. Code: <a onclick="showhide('div1');" href="#">Q: Is this an example?</a>
<div id="div1" style="display: none; padding: 0px; margin-left: 30px;">A: Yes, it is.</div>
<a onclick="showhide('div2');" href="#1">Q: Is this another example?</a>
<div id="div2" style="display: none; padding: 0px; margin-left: 30px;">A: Yes, unfortunately.</div>
<a onclick="showhide('div3');" href="#2">Q: What's this?</a>
<div id="div3" style="display: none; padding: 0px; margin-left: 30px;">A: You tell me.</div>
<a onclick="showhide('div4');" href="#3">Q: Is this a question?</a>
<div id="div4" style="display: none; padding: 0px; margin-left: 30px;">A: Only if this is an answer.</div>
<a onclick="showhide('div5');" href="#4">Q: Is this for real?</a>
<div id="div5" style="display: none; padding: 0px; margin-left: 30px;">A: Of course.</div>
I want to show a brief description about something and have a link that says "Show Me More". When the user clicks the link, the rest of the text will appear right below it on the same page. EXAMPLE Elephants are large animals with 4 legs. (Show Me More) <!--Once user clicks "Show Me More", the following text appears--> Elephants bla bla bla bla bla bla bla bla bla bla bla the rest of the content here... END EXAMPLE How should I go about doing this? As an extra, if I want the content that is originally under "Show Me More" to slide down the page when the new text appears, how would I do that? I have been trying to piece something together with a traditional DHTML show hide, but i cannot get it to work properly, so i trashed it. What I'm trying to do seems very simple. I have 2 videos I want to have on 1 page. I don't want to stack them, I just want to give the user a text link choice on which to choose. So the page would load with a generic looking video player. Which would switch out once you picked a video. HTML Code: <strong>Select: </strong><a href="#">video 1</a> | <a href="#">video 2</a> <div id="generic">generic page</div> <div id="video1">vid1</div> <div id="video2">vid2</div> I kinda got it to work in an earlier version, but it wasn't perfect. It would end up showing video1 properly, but when you clicked on video 2 it would show both. It wouldn't hide video 1. any help would be much apprecaited. can you show and hide layers with text? I know that you can use the behavior function on images to use it, but i just can't figure out how i can do it with text For example: have a layer in a HTML (hidden), when i put my mouse over a text "testing", it shows that layer, and vice-versa on mouse out. hi all, i am having some issues with the show/hide div commands, i was hoping someone could help me out. below is the code i am using such that depending on what image you click on, a different div is shown. this works fine, but i would also like to change more than one div located in a different table cell - not sure if this is clearly explained, hopefully the code will be more concise - javascript - Code: <script type="text/javascript">
<!--
function layerchange(szDivID, iState)
{
if(document.layers)
{
document.layers[szDivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById)
{
var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all)
{
document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
body html HTML Code: <div id="text">
<table width="775" height="215" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="258" valign="top">
<div class="layer_change">
<input type="image" src="images/text/sml/small_1.gif" onclick= "layerchange('div_one',1);layerchange('div_two',0);layerchange('div_three',0); return false;" value="Hamper 1" />
<input type="image" src="images/text/sml/medium_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',1);layerchange('div_three',0); return false;" value="Hamper 2" />
<input type="image" src="images/text/sml/large_1.gif" onclick="layerchange('div_one',0);layerchange('div_two',0);layerchange('div_three',1); return false;" value="Hamper 3" />
</div>
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
<td width="516"><table width="516" height="215" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="258" height="190" style="vertical-align:top">
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
<td width="258" height="190" style="vertical-align:top">
<div id="div_one" class="one">
Small Hamper Contents
</div>
<div id="div_two" class="two">
Medium Hamper Contents
</div>
<div id="div_three" class="three">
Large Hamper Contents
</div>
</td>
</tr>
<tr>
<td><div align="center"><a href="images/structure/nifty_hampers_logo.gif" rel="lightbox" title="Birthday Hamper">Click here to enlarge</a></div></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</div>
any ideas....? I've got a very slow server which was making the screen->new screen time very slow, so to prevent there being agonising white inbetweeney screens, i put the meta-tags in: meta http-equiv='Page-Enter' content='blendTrans(Duration=0)' meta http-equiv='Page-Exit' content='blendTrans(Duration=0) which does the trick..but, as I am also showing, hiding elements thru script I am also seeing these elements come and go, which is confusing. Any ideas? I found a way to show/hide text-tables-content (divs) in my page using a link, but unfortunately, when I hit that link, the page reloads to the top again, so if it is too long, I have to scroll down again and again... Can I reload page at the scrolling place I was before, or is there a better way to hide/show divs with mouseClick on link or picture? I use this in head tag: <script language="javascript"> <!-- var state = 'none'; function showhide(layer_ref) { if (state == 'block') { state = 'none'; } else { state = 'block'; } if (document.all) { //is IE 4 or 5 (or 6 beta) eval( "document.all." + layer_ref + ".style.display = state"); } if (document.getElementById &&!document.all) { hza = document.getElementById(layer_ref); hza.style.display = state; } } //--> </script> Also, my body looks like this...: <body> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> some text <br> <p><a href="#" onclick="showhide('div1');">Show/hide me</a></p> <div id="div1" style="display: none;">This is the content</div> <p><a href="#" onclick="showhide('div2');">Show/hide me</a></p> <div id="div2" style="display: none;"> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> This is the content 222222</div> <p><a href="#" onclick="showhide('div3');">Show/hide me</a></p> <div id="div3" style="display: none;"> <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 3</td> <td>row 1, cell 4</td> <td>row 1, cell 5</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> <td>row 1, cell 3</td> <td>row 1, cell 4</td> <td>row 1, cell 5</td> </tr> </table> This is the content</div> </body> Hi, I am working on a form. The second question depends on what the user has selected for the first question, so I have managed to set it to "Hidden" onload. This works fine. The first question is a drop-down menu option, and depending on the answer given will determine weather question 2 needs answering. I can get question to appear, if the user selects an answer needing question two answering. But if they make a mistake and decide to change the answer, question 2 won't hide again. Here is the script and html: Code: <script language=javascript type='text/javascript'>
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'hidden';
}
else { // IE 4
document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('hideshow').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.hideshow.visibility = 'visible';
}
else { // IE 4
document.all.hideshow.style.visibility = 'visible';
}
}
}
</script>
<body id="tt13" onload="javascript:hidediv()">
Code: <li>
<h3> Services Required</h3>
<label for="website">What services will you need?<br />
<select name="website" class="textarea" id="websites" onchange="javascript:showdiv()">
<option selected="selected" onchange="javascript:hidediv()">Please Choose:</option>
<option onchange="javascript:showdiv()">Web Site Only</option>
<option onchange="javascript:showdiv()">Web Site & Hosting</option>
<option onchange="javascript:showdiv()">Web Site & Domain</option>
<option onchange="javascript:showdiv()">Web Site, Hosting & Domain</option>
<option onchange="javascript:hidediv()">None of These</option>
</select>
</label>
</li>
<li id="hideshow">
<br />
How many pages do you think will you need?<br />
<select name="Pages" class="textarea">
<option value="#" selected="selected">Please Choose:</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20+</option>
<option>I'm Not Sure.</option>
</select>
</li>
I think it's something I've set wrong in onchange"" etc.. I've tried "onclick". Any ideas why the menu won't hide again? hi everyone ! I've an indented file text (directory to text, see example below ) that i need to convert in the fastest way possible to html with hide/show feature .. how can I manage this ? the list is very long and gets updated -- I i wouldnt want to do that manually .. any clue ? ex ARTIST1 CD1 1-song1 2-song2 CD2 1-song1 ARTIST2 CD3 1-song1 2-song2 CD4 1-song1 should become ARTIST1 ARTIST2 and if u click on ARTIST1 u get ARTIST1 CD1 CD2 ARTIST2 one more click on CD will show the tracks .. any idea ? thanks!F Hey there! I'm kinda new here, but I really need some help. I'm trying to show/hide the Swedish translation to our lyrics on our band WP page. It can be viewed here. I'm using a table with separate <td>'s for every individual lyric and every individual translation. The translations are in <div>'s. This is included in the header: <script type="text/javascript"><!-- function showhide(el){ el=document.getElementById(el); el.style.display=(el.style.display=="block")?"none":"block"; } //--></script> And this is the code for my little Swedish flag you click to make the translation DIVs visible. The names within '' are the different lyric DIVs. <p>Show/hide translation: <a href="#" onclick="showhide('armourswe');showhide('seamsswe');showhide('breathswe');showhide('cornersswe');sho whide('cunningswe');showhide('whiteswe');showhide('graniteswe');showhide('liliesswe');showhide('beac hesswe');showhide('pebblesswe');showhide('rockswe');showhide('ruinsswe');showhide('sarabandeswe');sh owhide('unknownswe');return false;"><img src="http://www.alpha60.net/wordpress/images/swedish.jpg" alt="Show/hide Swedish translation" /></a></p> Why does IE move the left column down when the translations are visible? It works fine in Firefox. I'm not a HTML king and tried a long time to get this far, so I'd really love some help! Address: http://www.alpha60.net/lyrics /Leo from Sweden I've been making a website for a car enthusiast and I need to be able to show different pictures of cars when the thumbnail is clicked. I'm using layers to to this. When I click on a thumbnail it shows the car and hides what was previously there. The problem I have is that when I add a new thumbnail, I have to go through all the other thumbs and set them to hide it onClick. This is getting really manotinous now that I have over 30 thumbs. I looked at the Dramweaver help file and it does state that : (You can change the visibility of multiple layers with a single behavior.) But it doesnt actually tell you how!! Anybody help me out?? Leroy It works correctly, but did I do it correctly to add color? I want the show/hide to be blue and the text to be red. <html> <head> <style type="text/css"> a.showandhide{ color: rgb(0,0,255); } body{ color: rgb(255,0,0); } </style> <title>Test hide thing from TIF T&C</title> </head> <body> <script type="text/javascript"> function showhide(id) { if(document.getElementById(id).style.display == 'none') { document.getElementById(id).style.display = 'block'; } else { document.getElementById(id).style.display = 'none' } } </script> <a href="javascript:void(0)" onclick="showhide('box')" class="showandhide">Show / Hide</a> <div id="box" style="display:none;"> Blah blah blah blah blah blah </div> </body> </html> So here's hoping you fine people will be able to help me I've found similar things, but not like this. I have a HTML Form, just a normal simple form, the data is sent using POST method to PHP, PHP has a thank you page, I get the E-Mail easy! >> Boring Part Start << This website is a online booking form for holidays in Cornwall, UK. People enter there info, then the party info. The thing is people in the party could be 1, could be 5, could be 8, or even just 2. >> Boring Part End << I Want A Drop Down Menu that will be able to hide forms or show forms So, it goes like this Title First Name Last Name Date Of Birth [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] [field] But I want it so, if someone picks the number 1 from this drop down list, only the first row of forms, or if someone picks 5, it shows 5 rows and if someone clicks 2, it only shows 2. I was wondering if I could use the Drop Down to hide DIV's or something and put each row in a DIV. Oh and btw, the fields are in tables at the moment. I made that more complicated then I should off ... lol. My HTML skill isn't that good, but I'll get my hands dirty if I must. Jme Hello all, I am searching for the html code that will allow me to including a moving script at the bottom of my page. appreciate any help, JJ Hi there, I'm experiencing a strange problem in IE with the show-hide layers behavior. I have 4 layers, each with images inside them which are meant to link to other pages. This works fine in Firefox but not so in IE. The odd thing is that when you hover over the images in IE the link appears in the status bar and if you right click and choose "open link" it does work. The site is here www.patons.org/v2/ and its the images at the top that I'm talking about. Any help would be much appreciated. Thanks, Alex Can someone write a code so this element will be hide on my page, this element do automatic import by my host so it will be before this code i need a hide code help please <noscript><div style="display:none"> </div></noscript><script type="text/javascript" src="http://media.funpic.org/layer.php?bid=73611485"></script> Hi: - All of the left-menu icons correctly highlight when I scroll over them except for the one (which I have most recently added to the site) - All of the left-menu icons correctly remain highlighted when I travel to any given corresponding destination page on the site Here's the function call of the menu button in question...this is logically identical to the other function calls invoking mouse-over "highlighting": <div><a href="destination.html" onmouseover="java script:rollOver('ln_07','ln_07_ov');" onmouseout="java script:rollOver('ln_07','ln_07');"><img src="img/ln_07.jpg" name="ln_07" alt="Destination" width="126" height="26" border="0"></a></div> Just to restate: the scroll-over highlights are correctly invoked in all instances with the exception of the one menu icon applicable to all pages of the site except its destination page (where it correctly remains in highlight mode...) Many thanks-- BR Well hello folks. Nice place you have here. This looks like just the place to ask a question I have, I hope you'll indulge me. I'm working through my blog site and trying to get it up to xhtml snuff...but that's another issue. What I'd like to start with is a little quirky problem that only seems to effect IE6. When users try to highlight text, odd things happen. Here's one person's attempt to explain it: Quote: This is the pattern: Highlight works on the page displayed on the screen (either main page or each entry). The spot I pointed to before is where the screen display ends on my initial main page load. Once I click on each entry, highlight works on the text displayed on that initial screen - it stops working (starts highlight blocks) once I scroll down beyond that initial screen display. It seems to repeat this pattern with quotes, comments, or just entry text - just beyond that initial screen. Hope it helps. I believe this highlighting issue has to do with my use of css positioning. Let me show you just the key parts of the html page, and then the corresponding bits of the stylesheet. Let's say we have a page consisting of the following div's: Code: <div id="overall"> <div id="titlecell"> <div id="navbar"> <div id="maincell"> <div id="titlebarright"> <div id="leftmargin2"> <div id="rightmargin2"> Here are the related bits of CSS: Code: div#overall {
position:relative;
width: 1000px;
margin: auto;
}
div#titlecell {
text-align: right;
vertical-align: top;
height: 150px;
font-size:x-small;
position: absolute;
top: 0px;
left: 0px;
width: 1000px;
}
div#navbar {
font-size:x-small;
position: absolute;
top: 15px;
left: 650px;
}
div#maincell {
color: #252525;
text-align: left;
vertical-align: top;
padding-top: 30px;
width: 580px;
position: absolute;
top: 160px;
left: 0px;
}
div#titlebarright {
width: 382px;
height: 185px;
background: url(http://www.solomonia.com/images/titlebarrightbox.gif) no-repeat;
position:absolute;
top:95px;
left:600px;
}
div#leftmargin2 {
height: 10000px;
color: #252525;
vertical-align: top;
text-align: center;
width: 160px;
padding: 0;
position: absolute;
top: 285px;
left: 600px;
}
div#rightmargin2 {
height: 10000px;
color: #252525;
width: 220px;
text-align: center;
vertical-align: top;
padding: 0;
position: absolute;
top: 285px;
left: 763px;
}
So note, we have a div called "overall" whose position is set to "relative" which functions as a container for all the other divs with position set to "absolute." I'm figuring there's something about this that gives IE fits when highlighting. What do you think? Edit: My apologies. This probably should have been put in the css forum. I have xhtml on the brain I guess. Please feel free to move. I'm trying to draw the visitor to this link from my site to the name, "Brett Allen", so they don't have to look though all the names to see it there. I've tried adding to the link, #brett, #brett+allen but it don't do anything. I can't add < A NAME="codeword" > to the page on nypost site, as its not mine. So, any ideas what I can add to the link? http://www.nypost.com/seven/09222006...y_weekend_.htm Hi, i am sure you's are all familiar with photobucket, well i was wonderig if anyone knows the code to automatically highlight and copy to the clipboard information in a box when it is just simply clicked like it does with the ht code, image url, etc next to your picture on photobucket. thanks, karl |
|||||||