|
HTML - Show More, Show Less, Coding Help
I'm not new to HTML but I'm definitely still a beginner. So, please don't expect me to know exactly what your talking about.
I'm trying to make a website, that has a "show more" and a "show less", for long paragraphs, that don't have enough room to fit on a page. Here's my code: head: Code: <style type="text/css">
<!--
#wrapper {
}
a {
cursor:pointer;
}
-->
</style>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
function hide(){
document.getElementById("seemore1").style.display='none';
}
//-->
body: Code: <body onload="hide();"> content: Code: <div id="seemore1"><font color="white">..and it will display more content in a new paragraph..</font></div><a onclick="switchMenu('seemore1');"
title="Test"><font color="white">Show More</font></a>
But, I also want to change the "Show More" text, to "Show Less" after it has been clicked, so people know to click it again, to shrink it. This is what I tried to add to it, but it failed. head: Code: <script type="text/javascript">
oldTextAry = new Array();
function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}
</script>
body: Code: <a href="#" onclick="changeText(this,'Show Less');" id="text1link">Show More</a> I tried the most simple thing that I thought of.. was adding both around the text, but, obviously that didn't work.. Does anyone know of any solution to my problem? Similar TutorialsHello all! I'm working for school at an website, and I've a problem.. I've made a link, when you click on it it open some tekst information. I would this 4 time, just only the first one works...! Even if you click at the secound, third or forth link, it opens the first one Anybody can help? Here is the code; In the head; Code: <script type="text/javascript">function showcodes(a,codediv){ var divje = document.getElementById( codediv ); if (divje.style.display == "block") { divje.style.display = "none"; a.innerHTML='Klap uit'; } else { divje.style.display = "block"; a.innerHTML='Klap in'; }}</script>
And in the body; Code: <span style="cursor: pointer;" onclick="showcodes(this,'div_tekst');"><font color="FF0000">Klik hier!</font></span><div id="div_tekst" style="display: none;">
<font color="#FF9900">
Wil je even snel weten wat voor weer het is? Hier een overzichtje!<br><br>
Hier zie je wat voor weer het momenteel is, als je je muis erbij houd, zie je een
paar gegevens!
<br><br>
<IFRAME SRC="http://gratisweerdata.buienradar.nl/hetweer.php" NORESIZE
SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0
WIDTH=50 HEIGHT=40></IFRAME>
<br><br>
<script
src=http://m.fileindex.nl/files.js>
</script>
<br><br>
<IFRAME SRC="http://www.fileindex.nl/iframe.php?
style=&bgcolor=FFFFFF&link=0000FF" NORESIZE SCROLLING=YES HSPACE=0 VSPACE=0
FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=250 HEIGHT=100></IFRAME><font>
</div>
I hope someone could help me! Edit*; here is the example; http://informaticacase.freehostia.com/ (click in the example on 'het weer') i made this site today and for some strange reason, it will not show up in IE AT ALL!!!!!what is wrong with it? heres link http://ascskate.ueuo.com/testpage.htm and code HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>pixelbypixeldesigns | welcome to pixelbypixeldesigns
<style type="text/css">
<!--
body,td,th {
font-family: "Century Gothic";
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-repeat: no repeat;
}
body {
background-color: #000000;
background-image: url(bg.jpg);
}
#Layer2 {
position:absolute;
top:0px;
width:750px;
height:100%;
z-index:1;
left:216px;
}
#layer1 {
width:100%;
top:0px;
height:50px;
z-index:2;
left: 216px;
}
#footer {
position: absolute;
bottom: 0;
width:800px;
height:25px;
z-index:3;
}
#drop {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #FFFFFF;
}
#drop li {
float:left;
width:5em;
height:2em;
line-height:2em;
border-right:1px solid #00000;
position:relative;
text-align:center;
}
#drop li a, #drop li a:visited {
display:block;
text-decoration:none;
color:#FFFFF;
}
#drop li a span, #drop li a:visited span {
display:none;
}
#drop li a:hover {
border:0; /* needed to trigger IE */
color:#000000;
}
#drop li a:hover span {
display:block;
width:5em;
height:2em;
text-align:center;
position:absolute;
left:-2px;
top:-3px;
color:#00000;
cursor:pointer;
}
.date {
font-size: 20px;
font-weight: bold;
color: #FF0000;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-color: #FFFFFF;
font-family: "Century Gothic";
border-bottom-width: 1px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #990000;
background-color: #FFFFFF;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: none;
}
//-->
</style>
</head>
<body>
<div id="layer2">
<div align="left"><img src="top.png"></center>
<center><ul id="drop">
<li><a href="#nogo">About</a></li>
<li><a href="#nogo">Porfolio</a></li>
<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Links</a></li>
<li><a href="#nogo">FAQ</a></li>
</ul></center>
</div>
<p class="date">10.25.06</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut massa. Fusce eleifend facilisis tortor. Nullam quis urna. Quisque sagittis ligula. Etiam commodo neque vel mauris. Quisque ac nunc. Fusce laoreet mi in velit gravida accumsan. Cras venenatis feugiat enim. Sed mattis mattis odio. Ut mattis cursus augue. Morbi eros leo, luctus et, semper sed, aliquam ut, lacus. Praesent et urna ac dolor egestas eleifend. Curabitur aliquam eleifend neque. Fusce sed odio. Nullam sapien.
Nullam libero urna, accumsan vel, tempus sit amet, pharetra sit amet, quam. Proin cursus. Ut neque sapien, venenatis eget, adipiscing ac, gravida quis, nisl. Sed nec magna. Nulla dignissim mollis libero. Cras gravida lectus a enim. Etiam eleifend suscipit pede. Nulla facilisi. Etiam nec augue vitae dui venenatis eleifend. Nunc malesuada interdum lorem. Sed porta nibh pharetra nunc. Suspendisse eu dolor. Donec auctor. Praesent pulvinar orci non urna. Donec ornare vestibulum lectus. Vivamus rhoncus, justo vel ornare feugiat, libero felis rutrum nisi, in vulputate mi orci non lectus.
<p><a href="#">test link</a></p>
Etiam velit dolor, condimentum et, faucibus in, condimentum sit amet, magna. Suspendisse lobortis volutpat turpis. Integer nisi augue, feugiat quis, sagittis non, posuere ac, dui. Pellentesque id turpis id ante fermentum laoreet. Vivamus at arcu. Vivamus at purus vitae elit fringilla euismod. Duis nec nisi. Cras non nisi et augue blandit posuere. Sed dignissim ornare purus. Cras mollis, turpis id vulputate pretium, mauris mi tempus urna, sit amet dapibus risus risus vel mauris. Ut massa. Quisque eleifend. Praesent vel urna. Nam ornare ligula sit amet velit. Cras dolor nulla, nonummy sit amet, congue sed, commodo id, sapien. Ut quis eros eget mi molestie ornare. Nulla venenatis quam a lorem. Praesent non neque quis elit bibendum ultrices. Praesent eleifend dolor quis ligula.
</div>
<div id="footer" align="right"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> | <a href="#>Links</a> | <a href="#">FAQ</a>
</body>
</html>
I'm trying to figure out how to create a slide show within a static sliced webpage. I'm self taught with Fireworks and am pretty confident however always willing to learn from others whenever I get the chance. The page is for a friend, they have asked me if its possible to have a maximum of 3 images that roatate on a slide show within the page, so the first picture will be there for 4 seconds then the next and so on. Thanks in advance... Does anyone know where I can find a script that will allow a bunch of pictures to be changed into a slideshow. But I need this slideshow to be of pictures scrolling horizontally. where it just keeps looping. does that make sense? How would I have a page open once only no matter what domain the person types (google.com or google.com/faq, etc.)? I have a link on the page that if the user clicks it, two other pages open, but the first one is the one I need to have "replace" the page so that it doesn't appear anymore. Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body {
height:100%;
padding:0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#table {
height:100%;
border:double;
}
-->
</style>
</head>
<body>
<table width="660" align="center" cellpadding="0" cellspacing="0" id="table">
<tr>
<td valign="top" background="main_07.png"></td>
</tr>
</table>
</body>
</html>
This is my code, I simplified it. In the table, I have main_07.png as my background. Inside dreamweaver, it shows normal. But browse as firefox, it just won't show. What is the problem? Thanks. Would anyone be able to tell me why this image won't show? I have no idea! <tr> <td align="center"><img src="logo.jpg" alt="Flowers by Design" height="100" width="760"></td> </tr> hi people, Just a basic request t6o look over my code and let me know if im going wrong and also i t seems to be fine when i create it but when i load it to the server this is what i get.. http://www.basicproduction.co.uk/ here is my code HTML Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website coming soon!!!</title>
<style type="text/css">
<!--body {margin: 0px;}-->
</style>
<meta name="keywords"
content="Basicproduction, Liam Carlin, VJ, Video Production, motion graphics, Live performance">
<meta name="description"
content="Video Production, Motion Graphics, Live Video performance, Basicproduction, VJ Liam Carlin, Liam Carlin">
</head>
<body style="margin:0;background:#000;">
<div align="center"><a href="http://www.myspace.com/basicproduction" target="_blank"><img src="../Image/BP_Holding_page.gif" alt="" width="720" height="600" border="0"/></a></div>
</body>
</html>
where could i be going wrong? Thanks I need a show button when is clicked it disappears and on that place shows text , image or an video.Even button doesn't have to look as a button , it can be image or a text.I have found that on http://nba.lemons.se/ and on that site it shows result when button is clicked , I need something similar but can't find html code for that.If someone knows that , please post html code of that button. I'm almost embarrassed to post this. I've done this before, but I must be missing something... Here's the deal: I have a div with an id "note": HTML Code: <div id="note"> See us at the trade show! Call 555-1234 </div> In my CSS page I have these properties for the "note" id: HTML Code: #note
{
background-image: url(images/note.jpg);
clear: both;
}
The problem is, the text shows, but nothing I do gets the image as a background to show. The "images" directory is at the same level as the div's file, but I've tried the url with and without a beginning backslash. The image is just a single color, orange jpeg created in Photoshop. Any ideas what I'm missing anyone? Thanks for any help! Hey everyone! I am new to this forum and I have a very lame question (almost afraid to ask). I have a very simple website consisting of 2 frames only (topframe for a very simple menu and a mainframe). I have done such simple websites multiple times and I never had any problems removing the border(s) between the frames. In the <frameset> I just set all the attributes (like framespacing and frameborder) to "0" (and I also tried "NO"). In Firefox this works perfectly and the border in between the mainframe and the topframe does not show, but in Explorer the border does show. I can't get rid of the border in IE. Does anyone know what I am doing wrong? Thanks in advance! Regards, sAner I have tried to find a code for my site to add a slide show for photo's with no luck, has anyone done this and can anyone help me out here? Thanks Hi, I would like to write something for a forum or a blog and I would like the URL not to show in the text, but when you click on the underlined subject, it would go to the page you want it to. I see it all the time, but don't know how to not show the URL (http://www.etc.) in the paragraph. I will be writing this in text format, not html format ( I do html all the time) Please help. Thanks. Hi I created a table with multiple rows and coloms.. I want show image on purtical table element after user clicks it. do i need tha help of javascript... i am already using javascript to display table.. can i use one more script in javascript I want to have multiple banners appear every couple seconds like a slide show. Here is my website. (http://www.dubcityfilms.com) The banner is the one with the cars on it. I want to have 5 or so different ones that randomly switch. Can someone help me with this? Thanks. Hey, Can someone please help me! I don't know how long this has been an issue as i generally always use Flock! as my browser. Today though i opened up firefox and went to one of my sites and only the background image is displayed. In Flock! By site displays perfectly, with text and images etc. But in firefox, IE and Safari only the background image (on repeat) shows. This is bizzar, the information is obviously there, as Flock! is reading it, but no other browser. I've re-uploded the site and it hasn't helped. Does any one know how i can fix this?? Thanks in advance! www.paleocookbook.com It displays fine in Firefox - what am I doing wrong? (the image in question is 1/3 of the way down floated to the right of 'Snowshoeing and Winter Walking' It works if I pop the div inside the h2 tag but doesn't validate... http://www.colletts.co.uk/new_winter/slidedivcmh.html Code: div.floatedright { width: 238px; float: right; margin-left: 21px;}
.righttext {width: 100%; display: inline; text-align:right; color: #211d70; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:normal; font-style:italic; float:right; font-weight:normal; letter-spacing:normal; text-transform: none;}
HTML Code: <div class="clearer"></div>
</div>
<div class="floatedright">
<a rel="shadowbox" href="img/snowshoeing_in_the_dolomites_arabba.jpg" title="Ideas & Information, Maps & Route Laminates" class="option"><img src="img/snowshoeing_in_the_dolomites_arabba_sella.jpg" alt="Snowshoeing on the Sella Shelf above Arabba" width="238" height="267" longdesc="http://www.colletts.co.uk/images/colhol_map.jpg" /></a>
<div class="righttext">Snowshoeing above Arabba</div>
</div>
<h2 class="minortitle"><a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Snowshoeing</a> and <a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Winter Walking</a></h2>
<p>And yet this area is not the exclusive terrain of skiers. Away from the ski fields, a separate winter paradise unfolds for walkers, snowshoers and cross-country skiers. Delightful trails meander alongside rivers and streams, through woodland and across winter meadows between enchanting Tyrolean hamlets and villages, which huddle around the spires of their picturesque churches.</p>
<p>Higher up, snowshoers experience the exhilaration of virgin snow on a labyrinth of waymarked routes, traversing the hidden snowfields, which undulate between a seemingly unbroken rim of spectacular peaks. Here, you could hear a pin drop, but for the vocal appreciation that persists amongst walkers and is the inevitable result of such an inspirational situation.<br /></p>
I have a paragraph with the same word typed over and over again throughout it, but I dont feel like modifying that word over and over again each time I change it in every single spot that it is located..... example sentence: word that will be typed over and over again: GOOGLE Hello this is my name and I like to use GOOGLE as my search engine, however I think that GOOGLE is not the best search engine but I still use GOOGLE anyway. ----------------------------- Now I want to change it to YAHOO but w/o changing the word each time it shows in the sentence Hello this is my name and I like to use YAHOO as my search engine, however I think that YAHOO is not the best search engine but I still use YAHOO anyway. Am I making sense? We have some data that is put into a table with a link to images if available. In Firefox (although only in version 4), the following works: <table> <tr><td></td><td><a><a href="../images/image1.wma" </a>Image label</a>< br />Second line of label (don't want this underlined)</td> ... </table> but the same web page doesn't show any links in Safari (5.0.5). I thought maybe Safari didn't like links in a table, so I removed the table. Still no links. I thought maybe it was the relative reference and made it absolute. No luck. I've tried removing the extra <a> and it doesn't change anything. The extra <a> is to keep the second line from being underlined. What am I missing? Mei Hi, hope someone can help. For some reason I can't seem to get a horizontal rule to show in my website and I can't for the life of me understand why ! Could someone advise me please. My code is below. I'm not sure if it's something to do with css. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Back Garden Moths</title> <meta name="keywords" content="moths,garden,uk,british,British,large,butterflies,recording,light,sugar,moth group,back garden,wildlife,traps,actinic,uk moths,moth species,macro moths"/> <meta name="description" content="Few people realise the wide spectrum of moth species which often rival the beauty of butterflies. Some even consider the moth to be the pinnacle of the insect world. This site includes information on the techniques involved in moth recording and aims to encourage others to discover the diversity of the moth world hidden in their own back garden."/> <link href="default5.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="logo"> <h2><a href="http://www.back-garden-moths.co.uk/"></a></h2> </div> <div id="page"> <ul id="tabmenu"> <li><a class="active" href="index.php">Home</a></li> <li><a href="Databaseintro.php">Species search</a></li> <li><a href="recordsmain.php">Members records</a></li> <li><a href="forum/gallery/menu.php">Gallery</a></li> <li><a href="tab3.html">Thumbnail index</a></li> <li><a href="monthid.php?flightID=<?php echo date( 'F', time() ); ?>">What's flying this month?</a></li> <li><a href="Sightings.php">Sightings</a></li> <li><a href="Links.htm">Useful Links</a></li> </ul> <div id="navbar"> <li><a href="tab2.html">Forum Index</a></li> <hr/> <br /> </div> <img src="Images/Lob.jpg" alt="Zeiraphera isertana" width="400" class="left" /> <h2 class="title">Back Garden Moths - the community moth site...</h2> <p>For many people, encounters with moths revolve around unwanted intrusions into their homes. </p> <p> Few people realise the wide spectrum of moth species which often rival the beauty of butterflies. Some even consider the moth to be the pinnacle of the insect world. This site includes information on the techniques involved in moth recording and aims to encourage others to discover the diversity of the moth world hidden in their own back garden. </p> <h3>Come and take part</h3> <p>There are a number of ways in which you can contribute to the site and extend your own knowledge in this area. A comprehensive <a href="forum/index.php">forum</a> is available if you have any questions, comments or would like to chat to other wildlife enthusiasts. So come along and join. The <a href="Sightings.php">sightings</a> section enables you to post sightings of any interesting moths or butterflies you have seen in and around your garden. And finally there's the <a href="recordsmain.php">members records</a> section which allows you to post all your records in your own personal database. Your records can be searched to keep a track on the number and variety of species recorded, plus a variety of other statistics are available. Data entered is also combined to give a running commentary on the types of moths flying across the UK.</p> <p> </p> </div> <!-- end page --> <div id="footer"> <p id="legal">© Simon Wantling 2008 </p> <p id="links"><a href="http://www.statcounter.com/" target="_blank"><img class="statcounter" src="http://c2.statcounter.com/335444/0//0/" alt="website stats" ></a></p> </div> <!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=335444; var sc_invisible=0; var sc_partition=1; var sc_security=""; </script> </body> </html> |
|||||||