Hvis man skal være sikker på at word-wrap virker i alle browsere kan man med fordel benytte følgende CSS
<style>
.divToWordWrap {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
width:400px;
</style>
<% 'wind-chill faktor windChill = (((((((35.74)+(((0.6215)*(temp_F)))))-(((35.75)*(windMPH^0.16)))))+(((((0.4275)*(temp_F)))*(windMPH^0.16))))) ' fra F til C windChill = formatNumber((5/9)*(windChill-32),0) ' fra mph til ms windMS = windMPH*0.44704 %>
Vi designere synes at kunne lide brugen af modal windows mere og mere, da de giver en hurtig måde at vise data uden at genindlæse hele siden. Det er nemt at bruge og relativt nemt at designe. Men her er hjælpen, der gør det rigtig nemt!
<script>
this.tooltip = function(){
/* KONFIGURATION */
xOffset = 10;
yOffset = 20;
// Disse variabler bestemmer hvor langt fra cursoren popup'en vises
$(".tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
// Start script "on page load"
$(document).ready(function(){
tooltip();
});
</script>
#tooltip{
display:none;
position:absolute;
top:120px;
max-width:250px;
padding:2px 5px;
text-align:left;
color:#fff;
background:#333333;
border: 2px #999 solid;
border-radius: 8px;
-moz-border-radius: 8px;
-web-border-radius: 8px;
-moz-box-shadow: 0px 2px 10px #333333;
-webkit-box-shadow: 0px 2px 10px #333333;
box-shadow: 0px 2px 10px #333333;
}
<img src=".." class="tooltip" title="her er teksten.<br />Der kan bruges HTML-koder" />
Skulle lige på ... er da ret godt gået i disse google-tider. Uden log-in og taget fra en anden maskine.
<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>
<a href='javascript: void(0);' onclick="$('#my_hidden_div_id_1').koverlay({title: 'OVERSKRIFT HER'});$('.css_koverlay').css({'background-color':'#9c183a'});">Link Text</a>
<div id="my_hidden_div_id_1" style="display: none;">INDHOLD HER...</div>
</body>
</html>
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "TEXTEN<a href='#' onclick='return clicker();'>LUK</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>ÅBEN VINDUE</a>
</body>
<!-- facebook meta #start ************************* --> <meta content='Jacob Jensens blog om Webdesign, mm.' property='og:title'/> <meta content='website' property='og:type'/> <meta content='http://jacob-jensen.blogspot.com/' property='og:url'/> <meta content='http://www.jjweb.dk/images/jjweb-blog-facebook.png' property='og:image'/> <meta content=http://www.ditsite.dk' property='og:site_name'/> <meta content='din beskrivelsen som af sitet' property='og:description'/> <meta content='DIT-FB-BRUGER-ID' property='fb:admins'/> <!-- facebook meta #end ************************* -->Nedenstående skal placeres i <body> hvor man ønsker FB.
<!-- facebook #start ************** -->
<div id='fb-root'/>
<script language='javascript' src='http://connect.facebook.net/da_DK/all.js#xfbml=1'/>
<fb:like action='like' font='segoe ui' href='http://jacob-jensen.blogspot.com/' layout='button_count' send='false' show_faces='false' width='200'/>
<!-- facebook #end ************** -->
Du skal være opmærksom på at du ikke kan være logget på FB, når du bruger deres værktøjer. Dette også selvom du er medlem af deres developer group. Jeg kunne i hvert fald ikke!
I disse Facebook-tider er det altid rart at kunne se, hvad ens website melder tilbage - hvad der bliver posted på FB. Det kan man via Facebook Developers.@font-face {
font-family: 'DroidSerifRegular';
src: url('../DroidSerif-Regular-webfont.eot');
src: url('../DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../DroidSerif-Regular-webfont.woff') format('woff'),
url('../DroidSerif-Regular-webfont.ttf') format('truetype'),
url('../DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body, p {
font-family: 'DroidSerifRegular', Verdana, Tahoma;
}
<p >Hello world!</p>
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
| ! | ! | # | # | % | % | & | & |
| ( | ( | ) | ) | / | / | ; | ; |
| < | < | = | = | > | > | ? | ? |
| @ | @ | © | © | » | » | « | « |
| <%= | <%= |
| >% | %> |
