Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

Oliver Haag www.ohcon.de

« Newer Snippets
Older Snippets »
Showing 1-10 of 14 total  RSS 

show image in selection-box

// works only in mozilla

<style type="text/css">
<!--

    option[value=ohcon]:before { content:url("ohc.gif"); }
    option[value=baerlin]:before { content:url("baer.gif"); }
    option[value=zendo]:before { content:url("zendo.gif"); }

-->
</style>

..

Select Company
<select>
  <option value="ohcon">Oliver Haag IT consulting</option>
  <option value="baerlin">Bärlin Partners</option>
  <option value="zendo">Zendo-Marketing</option>  
</select>
to html css by ovhaag on Oct 02, 2006

css learns to calculate

// only css3.0, preliminary

div#left_half  {
  float:left;
  width:calc(50% - 8px);
}
to html css by ovhaag on Oct 02, 2006

Javascript Browser Check

// the navigator object stores the browser and additional secifications

<html><head><title>JS Browser Check</title></head><body>

<script type="text/javascript">
document.write("Your browser is " + navigator.appName);

if (navigator.appVersion.substring(0, 1) == "4")
  document.write("4th generation browser!");
  
document.write("patform/os:" + navigator.platform);
document.write("user agent data:" + navigator.userAgent);

if (navigator.cookieEnabled == true) {
  document.write("cookies enabled");
} else if (navigator.cookieEnabled == false) {
  document.write("no cookies.");
} else {
  document.write("cookies? No Info available.");
}

if (navigator.javaEnabled()) {
  document.write("java enabled.");
} else {
  document.write("java not available.");
}

if (navigator.language.indexOf("en") > -1) {
  document.write("language ins english");
}else if (navigator.language.indexOf("de") > -1) {
  document.write("language is german");
}

</script>

</body></html>
to html javascript browser by ovhaag on Oct 02, 2006

javasrcritpt email to avoid spam

// email is written with javascript to hide it aganst scanning.
// if javascript is off, the email is obfuscated
<script type="text/javascript" language=javascript>
<!--
name=('hugo');
at=('@');
domain=('mueller');
dot=('.');
ext=('de');
document.write('<a href="mailto:' + name + at + domain + dot + ext + '">' + name + at + domain + dot + ext + '<\/a>');
//-->
</script>
<noscript>hugo (at) mueller (dot) de</noscript>
to html javascript mail email spam by ovhaag on Sep 26, 2006

reformat unsigned lists (bullet lists)

// unsigned list look the same in firefox and internet explore
// but firefox uses padding and ie uses margin to indent
// so if you want to eliminate the indent you mat set both

// here the top margin is negative too
// so the bullet list is written directly under the text
// and the bottom-margin of the p-tag can remain (needet elsewhere)
ul {
	padding-left: 15px;
	margin-left: 0px;
	margin-top: -10px;
	margin-bottom: 10px;
}
to html css browser by ovhaag on Sep 25, 2006

avoid visible whitespace in html

// if you want a line break and want to indent your html code
// but the browser makes problems with the whitespace
// make the whitespace a comment

//example
<div id="topimages">
	<image class="left" src="image/left.jpg"><!--
	--><image class="left" src="image/mid.jpg"><!--
	--><image class="right" src="image/right.jpg">
</div><!--topimages-->
to html browser whitespace by ovhaag on Sep 25, 2006

set width and padding without ccs browser hack

// firefox an internet explorer handle padding in div-elements with width differently
// you don't need a css browser hack, you can use two div-elements insteas
// the outer-div handles width
// the inner div handles padding

//html
<div id="left_text">
	<div class="paddingbox">
		<p>loem ipsum dolor ...</p>
	</div>
</div><!--left_text-->


//css
//padding: top right, bottom, left;
#left_text {
	width: 208px;
	float: left;
}
div.paddingbox {
	padding: 4px 8px 4px 8px;
}
to html css browser browser-hack by ovhaag on Sep 25, 2006

change title with javascript

// change title with javascript

..
<title>original title</title>
..
<script type="text/javascript">
function changeTitle(title) { document.title = title; }
</script>
..
<input type='button' onclick='changeTitle("new title")' value='Change Title'/> 
..
to html javascript dom title by ovhaag on Sep 17, 2006

check user agent with javascript

// check user agent

<a href="javascript:alert(navigator.userAgent)">User Agent</a>
to html javascript user agent by ovhaag on Sep 17, 2006

evaluate form fields with php

// contains all types of fields

// of special interest are selection boxes.
// They can return an array.
// Here is a quick evaluation with implode().

<!-- Formular auswerten (evaluate form)
     ********************************** -->

<?php
$hidden_value_1 = $_POST['hval1'];
$hidden_value_2 = $_POST['hval2'];

$short_text	= $_POST['stext'];
$password	= $_POST['pwd'];
$long_text	= $_POST['ltext'];

$selected_option = $_POST['optn'];
$radio_selection = $_POST['radsel'];

$check_selection = $_POST['checksel'];
$check_text = implode(', ',$check_selection);
?>



<html><body>
<h1>Kurze Anzeige (show values)</h1>
Versteckte Werte: <?=$hidden_value_1?>, <?=$hidden_value_2?><br>
Kurzer Text und Passwort: <?=$short_text?>, <span style="color: gray;"><?=$password?></span><br>
Langer Text:  <?=$long_text?><br>
Option: <?=$selected_option?><br>
Radio-Auswahl: <?=$radio_selection?><br>
CheckBox-Auswahl: <?=$check_text?>

<h1>Ein Formular (form)</h1>

<!-- Das Beispielformular (form example)
     ********************************** -->
<form action="form.php" method="post">

<!-- versteckte Elemente (hidden elements) -->
<input type="hidden" name="hval1" value="Der erste versteckte Wert">
<input type="hidden" name="hval2" value="Der zweite versteckte Wert">
<p>

<!-- einzeiliges Eingabefeld und Passwortfeld (text fields) -->
Kurzer Text und Passwort <br>
<input type="text" size="32" maxlength="64" name="stext" value="Kurze Textvorbelegung">
<input type="password" size="16" maxlength="16" name="pwd" value="geheim">
</p><p>

<!-- mehrzeiliges Eingabefeld (text area) -->
Langer Text <br>
<textarea cols="128" rows="4" name="ltext">
Optionale Textvorbelegung (optional text presetting): kann bei
mehrzeiligen Textfeldern lang sein,da genügend Platz vorhanden ist.
</textarea>
</p><p>

<!-- Auswahlliste mit Vorauswahl (selection list) -->
Option <br> <select name="optn">
<option selected>Die Erste Option</option>
<option>Die zweite Option</option>
<option>Die dritte Option</option>
</select>
</p><p>

<!-- Radio-Buttons mit Vorauswahl (radio buttons) -->
Radio-Auswahl <br>
<input type="radio" name="radsel" value="first">Die erste Radiowahl<br>
<input type="radio" name="radsel" value="seccond">Die zweite Radiowahl<br>
<input type="radio" name="radsel" value="third" checked> Die dritte Radiowahl
</p><p>

CheckBox-Auswahl <br>
<input type="checkbox" name="checksel[]" value="chk1" checked>Die erste Checkwahl<br>
<input type="checkbox" name="checksel[]" value="chk2" checked>Die zweite Checkwahl<br>
<input type="checkbox" name="checksel[]" value="chk3">Die dritte Checkwahl
</p><p>

<!-- Buttons zum Absenden/ Abbrechen (buttons to submit/reset) -->
<input type="submit" value="auswerten">
<input type="reset" value="zurücksetzen">

</form>
</body></html>
to html php form field by ovhaag on Sep 17, 2006
« Newer Snippets
Older Snippets »
Showing 1-10 of 14 total  RSS