HTML: Difference between revisions

From Omnia
Jump to navigation Jump to search
 
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
== Subpage Table of Contents ==
{{Special:PrefixIndex/{{PAGENAME}}/}}
== HTML ==
== HTML ==


Line 277: Line 281:
</select>
</select>
</pre>
</pre>
== Collapse Div with Hidden Until-Found ==
Here's how to collapse a div in JavaScript while ensuring its content remains searchable:
The hidden attribute in HTML can be used to hide elements. When set to until-found, the element is hidden until it is the target of a fragment navigation request or a search, at which point the browser will reveal it. This allows the content to be searchable even when collapsed.
<pre>
<div id="collapsible-content" hidden="until-found">
  This content is collapsible and searchable.
</div>
<button onclick="toggleVisibility()">Toggle Visibility</button>
<script>
function toggleVisibility() {
  const content = document.getElementById('collapsible-content');
  content.hidden = content.hidden === 'until-found' ? false : 'until-found';
}
</script>
</pre>
When the button is clicked, the toggleVisibility function is called. This function checks the current state of the hidden attribute. If it is until-found, it sets it to false, making the content visible. If it's false (or any other value), it sets it back to until-found, hiding the content. The content remains searchable even when hidden with hidden="until-found".


== HTML5 ==
== HTML5 ==

Latest revision as of 18:58, 14 June 2025

Subpage Table of Contents

HTML

Editors

CoffeeCup Free HTML Editor - The Free HTML Editor is a Drag and Drop Editor with Built-In FTP

Nvu - Nvu Web Authoring Software

HTML Kit - for more than editing HTML


Comparison of HTML editors - Wikipedia, the free encyclopedia

  • Includes features and prices

form causing line break

Solution: 

<form style="display: inline;">...</form>

References:

META-Refresh

Dan's Web Tips: Auto-Refreshing Pages - http://webtips.dan.info/refresh.html 

<META HTTP-EQUIV="Refresh" CONTENT="30; URL=http://www.example.net/some/place/">

Note: the 'URL=' is important for IE to work correctly.

break image caching

Append timestamp to images: 

<img src="picture.jpg?1222259157.415" alt="">

 <img src="camera.jpg?<?php echo time(); ?>" />

References:

Images

<img src="myimage.png" />

Background image: 

<body background="bgimage.jpg">

See also CSS#Background Image

Hover Titles

Use the title attribute. 

 <div title="text">hover me</div>

or 

 <span title="hoverin' words">hover me</span>

[1]

Redirect

<meta http-equiv="REFRESH" content="0;url=http://www.the-domain-you-want-to-redirect-to.com">

Note: the 'URL=' is important for IE to work correctly.

Table

<table border="1">
<tr><th>header 1</th><th>header 2</th></tr>
<tr><td>data 1</td><td>data 2</td></tr>
</table>

Pretty version: 

<style>
/* pretty tables */
table, th, td {
  border-collapse: collapse;
  border: 1px solid #A0A0A0;
  padding: 0.2em 0.4em;
}
th {
  background-color: #F2F2F2;
  text-align: center;
}
</style>

Form

 <FORM action="http://somesite.com/prog/adduser" method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Last name: </LABEL>
              <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>


References:

Upload File

    <form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">  
    <fieldset>  
    <legend>HTML File Upload</legend>  
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />  
    <div>  
        <label for="fileselect">Files to upload:</label>  
        <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />  
    </div>  
    <div id="submitbutton">  
        <button type="submit">Upload Files</button>  
    </div>  
    </fieldset>  
    </form>

iframe

<iframe src="camera.php" width="640" height="480" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>

References:

---

Auto set iframe height: [2] 

<script type='text/javascript'>

function setIframeHeight( iframeId ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
 var ifDoc, ifRef = document.getElementById( iframeId );

 try
 {   
  ifDoc = ifRef.contentWindow.document.documentElement;  
 }
 catch( e )
 { 
  try
  { 
   ifDoc = ifRef.contentDocument.documentElement;  
  }
  catch(ee)
  {   
  }  
 }
 
 if( ifDoc )
 {
  ifRef.height = 1;  
  ifRef.height = ifDoc.scrollHeight;
  
  /* For width resize, enable below.  */
  
  // ifRef.width = 1;
  // ifRef.width = ifDoc.scrollWidth; 
 }
}

</script>

<iframe id = "myIframe"  onload = "setIframeHeight( this.id )">

remove body margins

<body leftmargin="0px" topmargin="0px" marginwidth="0px" marginheight="0px">

References:

image tooltip

 <img src="test.png" alt="some title" title="some title" />

Audio

html - Play mp3 file with javascript onClick - Stack Overflowhttp://stackoverflow.com/questions/10766538/play-mp3-file-with-javascript-onclick 

<audio id="id1" src="01.mp3"></audio>
<button onClick="document.getElementById("id1").play()">Play</button>
<button onClick="document.getElementById("id1").pause()">Stop</button>

Need it to loop: 

 <audio loop>

Javascript: 

<input type="image" id="annoy" src="startbutton.png" onclick="annoy(); return false;" />

...

function getel(id) {
    return document.getElementById(id)
}

var annoy_state = 0;
function annoy() {
    btn = getel("annoy");
    mp3 = getel("annoymp3");

    if (annoy_state == 0) {
        annoy_state = 1;
        btn.src="stopbutton.png";
        mp3.play();
    } else {
        annoy_state = 0;
        btn.src="startbutton.png";
        mp3.pause();
    }
}

Page Break

<br><br><p style="page-break-before: always;">

Option Select

<label for="cars">Choose a car:</label>

<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi" selected>Audi</option>
</select>

Collapse Div with Hidden Until-Found

Here's how to collapse a div in JavaScript while ensuring its content remains searchable: The hidden attribute in HTML can be used to hide elements. When set to until-found, the element is hidden until it is the target of a fragment navigation request or a search, at which point the browser will reveal it. This allows the content to be searchable even when collapsed. 

<div id="collapsible-content" hidden="until-found">
  This content is collapsible and searchable.
</div>

<button onclick="toggleVisibility()">Toggle Visibility</button>

<script>
function toggleVisibility() {
  const content = document.getElementById('collapsible-content');
  content.hidden = content.hidden === 'until-found' ? false : 'until-found';
}
</script>

When the button is clicked, the toggleVisibility function is called. This function checks the current state of the hidden attribute. If it is until-found, it sets it to false, making the content visible. If it's false (or any other value), it sets it back to until-found, hiding the content. The content remains searchable even when hidden with hidden="until-found".

HTML5

See HTML5

keywords

Retrieved from "https://aznot.com/index.php?title=HTML&oldid=8802"