Ihr würdet gerne per Javascript eure Homepage ein wenig auftunen ? Zum Beispiel :
[yframe url=’http://www.youtube.com/watch?v=SIaWRAL4eU0′]
HTML DATEI
<button id=“font-bigger“>Font – Bigger</button>
<button id=“font-default“>Font – Default</button>
<button id=“font-smaller“>Font – Smaller</button>
<div id=“container“>
<p>Here some text</p>
<p>Here is some text again</p>
<p>Here is some text again</p>
</div>
<button id=“container-max“>Container – Max</button>
<button id=“container-default“>Container – Default</button>
<button id=“container-min“>Container – Small</button>
Javascript
// font
// ——————-// config
var font_size_default = $(‚body‘).css(‚font-size‘); // Standard Font size
var font_factor = 1.2; // factor to use for resize
var font_selector = $(‚p‘); // container which contains the text to resizevar font_size_max = 30; // max font size in pixel
var font_size_min = 10; // min font size in pixel// functions
$(‚#font-bigger‘).click(function () {
var font_size_current = parseFloat(font_selector.css(‚font-size‘)); // get current font size
var font_size_new = font_size_current * font_factor; // multi with factorif(font_size_new <= font_size_max) { // is not bigger than max size
font_selector.css(‚fontSize‘, font_size_new); // apply
}
});$(‚#font-smaller‘).click(function () {
var font_size_current = parseFloat(font_selector.css(‚font-size‘)); // get current font size
var font_size_new = font_size_current / font_factor; // divi trow factorif(font_size_new >= font_size_min) { // is not smaller than min size
font_selector.css(‚fontSize‘, font_size_new); // apply
}
});$(‚#font-default‘).click(function () {
font_selector.css(‚fontSize‘, font_size_default); // only reset
});// container
// ——————-// config
var container_selector = $(‚#container‘); // container to resize
var container_default = $(‚#container‘).width(); // default width
var container_min = 300; // min container width
// container_max not nessary$(‚#container-max, #container-min, #container-default‘).click(function () {
container_selector.stop(); // stops the animation if there is any animation
});$(‚#container-max‘).click(function () {
container_selector.animate({ width: ‚98%‘ });
});$(‚#container-default‘).click(function () {
container_selector.animate({ width: container_default + ‚px‘ });
});$(‚#container-min‘).click(function () {
container_selector.animate({ width: container_min + ‚px‘ });
});
CSS
#container {
width: 500px;
background: #CCC;
padding: 10px;
margin: 10px auto;
}
p {
margin: 5px 0;
}
jsfiddle.net Source Code + Live Preview
hier mal eine Beispiel Datei :
[html]<!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>
<title>asdasd © 2011</title>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="resize.css" />
<script src="jquery.js"></script>
<script src="resize.js"></script>
//////////////////////////////
<script type="text/javascript" src="sessvars.js"></script>
<script type="text/javascript" src="intelli.js"></script>
<script type="text/javascript" src="intelli.resize.js"></script>
<script type="text/javascript" src="intelli.config.js"></script>
<script type="text/javascript" src="intelli.lang.en.js"></script>
<script type="text/javascript" src="intelli.minmax.js"></script>
<script type="text/javascript" src="intelli.thumbs.js"></script>
<script type="text/javascript" src="intelli.search.js"></script>
<script type="text/javascript" src="footer.js"></script>
//////////////////////////////
<link rel="stylesheet" type="text/css" href="thumbs.css" media="all">
<link rel="stylesheet" type="text/css" href="design.css" />
</head>
<body>
<center>
<div style="width: 80%; font-size: 1em; display: block;">
<div id="page_setup">
<ul>
<li id="font-smaller"> </li>
<li id="font-default"><div id="font-default"> </div></li>
<li id="font-bigger"> </li>
<li> </li>
<li> </li>
<li> </li>
<li id="container-min"> </li>
<li id="container-default"> </li>
<li id="container-max"><div id="container-max"> </div></li>
</ul>
</div></center>
<center><img src="head.gif"></a><br>
<font color="red">asdasdasd © 2011</font>
<br />
<br />
<div><img src="folder.png" alt="Folder" /> | <a href="/stats">asdasdasd</a></div>
<div><img src="folder.png" alt="Folder" /> | <a href="/Checker">asdasdsad</a></div>
<div><img src="folder.png" alt="Folder" /> | <a href="/cncat">asdsadsad</a></div>
<div><img src="folder.png" alt="Folder" /> | <a href="/revoltec">asdasdasd</a></div>
<br />
</center></div></body>
</html>[/html]
Ein Kommentar
Arthas
Genau das habe ich gebraucht!
Danke