josko
%Europe/Berlin %827 %2007, 19:50
Twee vragen.
[list=1]
Zie screen shot.
Waarom positioneerd hij het zo raar?
Zie dezelfde screen shot.
Waarom gaat het plaatje niet naar de rechterkant?
Ik weet niet hoelang hij aan blijft staan, maar hier is een demo online
Naar demo. (http://josko.testingserver.nl:50080/Portfolio/)
-- > portfolio
----> Op item klikken
--
-- De css
--
body
{
background-color: #FFFFFF ;
margin : 0px ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
div#headImage
{
width : 800px ;
height : 60px ;
border-bottom : 1px solid #000000 ;
background-image : url('images/bg.gif');
background-repeat : no-repeat ;
background-position: center ;
text-decoration: none
}
div#headMenu
{
text-align : left ;
width : 800px ;
height : 14px ;
border-bottom : 1px solid #000000;
}
div#contentMenu
{
background-image: url('images/scrat.gif');
background-repeat: no-repeat;
background-position: bottom;
height: 500px;
width: 150px;
border: 1px solid #000000;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
float: left;
position: relative;
}
div#holder
{
border : 1px solid #000000;
width : 800px ;
height : 600px ;
position: relative;
left: 50%;
margin-left: -400px;
}
div#contentBox
{
height : 500px;
width : 600px;
border : 1px solid #000000;
margin : 0px ;
overflow : auto ;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
float: right;
position: relative;
}
#headMenu ul
{
margin : 0px ;
padding : 0px ;
text-align: left ;
width : auto ;
height : 14px ;
}
#headMenu li
{
list-style-type: none ;
display : inline ;
text-align : left ;
padding-left : 3px ;
padding-right : 3px ;
border-right : 1px solid #000000;
width : 50px ;
height : 14px ;
}
#contentMenu ul
{
margin : 0px;
padding-left : 5px;
padding-right: 5px;
}
#contentMenu li
{
margin : 0px;
padding : 0px;
list-style-type: none;
border-bottom : 0px;
}
#contentMenu li.child
{
margin : 0px;
padding : 0px;
list-style-type: none;
border-bottom : 1px solid #AFD34D;
}
#contentMenu ul li ul
{
visibility: hidden;
position: absolute;
}
#contentMenu a
{
color: #333333;
text-decoration: none;
}
#headMenu a
{
color: #333333;
text-decoration: none;
}
#headMenu a:hover
{
color: #333333;
text-decoration: none;
border-bottom: 1px solid #AFD34D;
}
img
{
border: 0px;
background-color: none;
}
div#contentHolder
{
width: auto;
height: auto;
clear: both;
}
div.portfolio
{
margin-left: 20px;
margin-top : 20px;
width: 500px;
height: 100px;
}
div.portfolio img
{
float: left;
border : 1px solid #000000;
cursor: pointer;
}
div#portfolio
{
z-index: 500;
position: absolute;
border: 2px solid #000000;
}
div#windowbar
{
float: right;
}
--
-- Het javascript
--
var XmlObject = null;
var url = "load.php";
var content = "";
var interval = null;
var busy = false;
var currentChar = 0;
var scrolling = true;
var contentX = 800;
var contentY = 600;
var boxX = 0;
var boxY = 0;
window.onload = function(){ document.getElementById('triggerBox').checked = (scrolling==true)?"checked":""; };
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
if( XmlObject == null )
{
alert("You don't got Ajax support installed");
}
function load( Id )
{
url = url.split("?")[0];
url += "?Id=" + Id;
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = alterText;
XmlObject.open( "GET", url, true );
XmlObject.send( null );
}
function script( page )
{
url = "load.php?clearance=" + page;
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = function()
{
if( XmlObject.readyState == 4)
{
if( XmlObject.status === 200)
{
if( XmlObject.responseText == "Access" )
{
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = alterText;
XmlObject.open("GET", 'extensions/' + page, true );
XmlObject.send( null );
}
}
}
}
XmlObject.open( "GET", url , true);
XmlObject.send( null );
}
function alterText()
{
if( XmlObject.readyState === 4 )
{
if( XmlObject.status === 200 )
{
if( busy == false )
{
busy = true;
currentChar = 0;
content = XmlObject.responseText;
document.getElementById('contentBox').innerHTML = "";
if( scrolling == true )
{
interval = setInterval(function(){type();}, 1 );
}
else
{
document.getElementById('contentBox').innerHTML = content;
busy = false;
}
}
}
}
}
function trigger()
{
if( scrolling == true )
{
scrolling = false;
}
else
{
scrolling = true;
}
}
function type()
{
if( content.length != currentChar )
{
document.getElementById('contentBox').innerHTML = content.substr( 0, currentChar );
currentChar++;
}
else
{
busy = false;
clearInterval( interval );
}
}
function nested( identifier )
{
var menuObject = document.getElementById('' + identifier + '');
if( menuObject.style.visibility == "hidden" || menuObject.style.visibility == "")
{
menuObject.style.visibility = "visible";
menuObject.style.position = "static";
}
else
{
menuObject.style.visibility = "hidden";
menuObject.style.position = "absolute";
}
imageswap( identifier );
}
function imageswap( identifier )
{
var object = document.getElementById( identifier + '_image');
var source = object.src;
source = source.split('/');
source = source[ source.length - 1 ];
if( source == 'kruisje.png' )
{
object.src = 'images/minnetje.png';
}
else
{
object.src = 'images/kruisje.png';
}
}
function loadPortfolio( screenPic )
{
var box = document.createElement("div");
box.id = "portfolio";
box.style.backgroundImage = "url(" + screenPic + ")";
box.style.width = contentX + "px";
box.style.height = contentY + "px";
var windowbar = document.createElement("img");
windowbar.alt = "Close screen shot";
windowbar.src = "images/kruisje.png";
windowbar.id = "windowbar";
box.appendChild( windowbar );
document.getElementById("holder").appendChild( box );
}
function sizePortfolio()
{
}
--
-- de html
--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Portfolio - Josko de Boer
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" >
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="holder">
<div id="headImage">
</div>
<div id="headMenu">
<ul><li><a href="http://www.google.nl">Google</a></li><li><a href="http://www.flashfocus.nl">FlashFocus</a></li></ul>
</div>
<div id="contentMenu">
<div style="visibility: visible; top: 90%;">
<a title="Met deze optie kunt u het effect bij het inladen van tekst aan en uit zetten.">
<input type="checkbox" onchange="javascript: trigger();" id="triggerBox" checked />
Text scrolling
</a>
</div>
<ul>
<li>
<a href="javascript: nested('nested1');" style="border: 0px; ">
<img src="images/kruisje.png" id="nested1_image" alt="" /> Over mij
</a>
<ul id="nested1">
<li class="child">
<a href="javascript:load('1');">
blaat
</a>
</li>
</ul>
<li>
<li class="child">
<a href="javascript: script('portfolio.php');">
portfolio
</a>
</li>
<ul>
</div>
<div id="contentBox">
<div class="portfolio" onclick="javascript: loadPortfolio('pics/wijn.png');">
<img src="pics/wijn-thumb.png" alt="" />
De wijnsite, zoals wij het project noemden,<br />
Is een administratief systeem voor een wijn proeverij.<br />
<br />
Het design is van Thijmen Put.
</div>
<br />
</div>
</div>
</body>
</html>
Het stuk javascript waarom het draait is dus
function loadPortfolio( screenPic )
{
var box = document.createElement("div");
box.id = "portfolio";
box.style.backgroundImage = "url(" + screenPic + ")";
box.style.width = contentX + "px";
box.style.height = contentY + "px";
var windowbar = document.createElement("img");
windowbar.alt = "Close screen shot";
windowbar.src = "images/kruisje.png";
windowbar.id = "windowbar";
box.appendChild( windowbar );
document.getElementById("holder").appendChild( box );
}
--
-- de bijlagen
--
klik
(http://img342.imageshack.us/img342/881/screenportut7.png)
[list=1]
Zie screen shot.
Waarom positioneerd hij het zo raar?
Zie dezelfde screen shot.
Waarom gaat het plaatje niet naar de rechterkant?
Ik weet niet hoelang hij aan blijft staan, maar hier is een demo online
Naar demo. (http://josko.testingserver.nl:50080/Portfolio/)
-- > portfolio
----> Op item klikken
--
-- De css
--
body
{
background-color: #FFFFFF ;
margin : 0px ;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
div#headImage
{
width : 800px ;
height : 60px ;
border-bottom : 1px solid #000000 ;
background-image : url('images/bg.gif');
background-repeat : no-repeat ;
background-position: center ;
text-decoration: none
}
div#headMenu
{
text-align : left ;
width : 800px ;
height : 14px ;
border-bottom : 1px solid #000000;
}
div#contentMenu
{
background-image: url('images/scrat.gif');
background-repeat: no-repeat;
background-position: bottom;
height: 500px;
width: 150px;
border: 1px solid #000000;
padding: 0px;
margin-left: 10px;
margin-top: 10px;
float: left;
position: relative;
}
div#holder
{
border : 1px solid #000000;
width : 800px ;
height : 600px ;
position: relative;
left: 50%;
margin-left: -400px;
}
div#contentBox
{
height : 500px;
width : 600px;
border : 1px solid #000000;
margin : 0px ;
overflow : auto ;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
float: right;
position: relative;
}
#headMenu ul
{
margin : 0px ;
padding : 0px ;
text-align: left ;
width : auto ;
height : 14px ;
}
#headMenu li
{
list-style-type: none ;
display : inline ;
text-align : left ;
padding-left : 3px ;
padding-right : 3px ;
border-right : 1px solid #000000;
width : 50px ;
height : 14px ;
}
#contentMenu ul
{
margin : 0px;
padding-left : 5px;
padding-right: 5px;
}
#contentMenu li
{
margin : 0px;
padding : 0px;
list-style-type: none;
border-bottom : 0px;
}
#contentMenu li.child
{
margin : 0px;
padding : 0px;
list-style-type: none;
border-bottom : 1px solid #AFD34D;
}
#contentMenu ul li ul
{
visibility: hidden;
position: absolute;
}
#contentMenu a
{
color: #333333;
text-decoration: none;
}
#headMenu a
{
color: #333333;
text-decoration: none;
}
#headMenu a:hover
{
color: #333333;
text-decoration: none;
border-bottom: 1px solid #AFD34D;
}
img
{
border: 0px;
background-color: none;
}
div#contentHolder
{
width: auto;
height: auto;
clear: both;
}
div.portfolio
{
margin-left: 20px;
margin-top : 20px;
width: 500px;
height: 100px;
}
div.portfolio img
{
float: left;
border : 1px solid #000000;
cursor: pointer;
}
div#portfolio
{
z-index: 500;
position: absolute;
border: 2px solid #000000;
}
div#windowbar
{
float: right;
}
--
-- Het javascript
--
var XmlObject = null;
var url = "load.php";
var content = "";
var interval = null;
var busy = false;
var currentChar = 0;
var scrolling = true;
var contentX = 800;
var contentY = 600;
var boxX = 0;
var boxY = 0;
window.onload = function(){ document.getElementById('triggerBox').checked = (scrolling==true)?"checked":""; };
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
if( XmlObject == null )
{
alert("You don't got Ajax support installed");
}
function load( Id )
{
url = url.split("?")[0];
url += "?Id=" + Id;
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = alterText;
XmlObject.open( "GET", url, true );
XmlObject.send( null );
}
function script( page )
{
url = "load.php?clearance=" + page;
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = function()
{
if( XmlObject.readyState == 4)
{
if( XmlObject.status === 200)
{
if( XmlObject.responseText == "Access" )
{
if (window.XMLHttpRequest)
{
XmlObject = new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
XmlObject = new ActiveXObject("Microsoft.XMLHTTP")
}
XmlObject.onreadystatechange = alterText;
XmlObject.open("GET", 'extensions/' + page, true );
XmlObject.send( null );
}
}
}
}
XmlObject.open( "GET", url , true);
XmlObject.send( null );
}
function alterText()
{
if( XmlObject.readyState === 4 )
{
if( XmlObject.status === 200 )
{
if( busy == false )
{
busy = true;
currentChar = 0;
content = XmlObject.responseText;
document.getElementById('contentBox').innerHTML = "";
if( scrolling == true )
{
interval = setInterval(function(){type();}, 1 );
}
else
{
document.getElementById('contentBox').innerHTML = content;
busy = false;
}
}
}
}
}
function trigger()
{
if( scrolling == true )
{
scrolling = false;
}
else
{
scrolling = true;
}
}
function type()
{
if( content.length != currentChar )
{
document.getElementById('contentBox').innerHTML = content.substr( 0, currentChar );
currentChar++;
}
else
{
busy = false;
clearInterval( interval );
}
}
function nested( identifier )
{
var menuObject = document.getElementById('' + identifier + '');
if( menuObject.style.visibility == "hidden" || menuObject.style.visibility == "")
{
menuObject.style.visibility = "visible";
menuObject.style.position = "static";
}
else
{
menuObject.style.visibility = "hidden";
menuObject.style.position = "absolute";
}
imageswap( identifier );
}
function imageswap( identifier )
{
var object = document.getElementById( identifier + '_image');
var source = object.src;
source = source.split('/');
source = source[ source.length - 1 ];
if( source == 'kruisje.png' )
{
object.src = 'images/minnetje.png';
}
else
{
object.src = 'images/kruisje.png';
}
}
function loadPortfolio( screenPic )
{
var box = document.createElement("div");
box.id = "portfolio";
box.style.backgroundImage = "url(" + screenPic + ")";
box.style.width = contentX + "px";
box.style.height = contentY + "px";
var windowbar = document.createElement("img");
windowbar.alt = "Close screen shot";
windowbar.src = "images/kruisje.png";
windowbar.id = "windowbar";
box.appendChild( windowbar );
document.getElementById("holder").appendChild( box );
}
function sizePortfolio()
{
}
--
-- de html
--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Portfolio - Josko de Boer
</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="style.css" >
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div id="holder">
<div id="headImage">
</div>
<div id="headMenu">
<ul><li><a href="http://www.google.nl">Google</a></li><li><a href="http://www.flashfocus.nl">FlashFocus</a></li></ul>
</div>
<div id="contentMenu">
<div style="visibility: visible; top: 90%;">
<a title="Met deze optie kunt u het effect bij het inladen van tekst aan en uit zetten.">
<input type="checkbox" onchange="javascript: trigger();" id="triggerBox" checked />
Text scrolling
</a>
</div>
<ul>
<li>
<a href="javascript: nested('nested1');" style="border: 0px; ">
<img src="images/kruisje.png" id="nested1_image" alt="" /> Over mij
</a>
<ul id="nested1">
<li class="child">
<a href="javascript:load('1');">
blaat
</a>
</li>
</ul>
<li>
<li class="child">
<a href="javascript: script('portfolio.php');">
portfolio
</a>
</li>
<ul>
</div>
<div id="contentBox">
<div class="portfolio" onclick="javascript: loadPortfolio('pics/wijn.png');">
<img src="pics/wijn-thumb.png" alt="" />
De wijnsite, zoals wij het project noemden,<br />
Is een administratief systeem voor een wijn proeverij.<br />
<br />
Het design is van Thijmen Put.
</div>
<br />
</div>
</div>
</body>
</html>
Het stuk javascript waarom het draait is dus
function loadPortfolio( screenPic )
{
var box = document.createElement("div");
box.id = "portfolio";
box.style.backgroundImage = "url(" + screenPic + ")";
box.style.width = contentX + "px";
box.style.height = contentY + "px";
var windowbar = document.createElement("img");
windowbar.alt = "Close screen shot";
windowbar.src = "images/kruisje.png";
windowbar.id = "windowbar";
box.appendChild( windowbar );
document.getElementById("holder").appendChild( box );
}
--
-- de bijlagen
--
klik
(http://img342.imageshack.us/img342/881/screenportut7.png)