 |
 |
 |
 |
 |
| Author |
Message |
Ramon
Joined: 12 Oct 2005
Posts: 462
Location: Hoogeveen, NL |
|
 fminside.nl |
 |
So I just did a redesign of fminside.nl, there where some issues with our last design so i kinda had to redo the whole site. Luckily I could just use our existing database, so we did not loose any data 
I quess the design is crap in IE 6, as I don't have that browser anymore. I'm planning on also making it compatible with IE 6 cause to many damn people still use it...
here's the URL  : http://www.fminside.nl/
Let me know what you think
_________________
 |
|
| Mon Jun 11, 2007 9:25 am |
   |
|
Guest
|
| |
|
Please login to hide the ads.
|
|
|
|
|
yesitsfree
Joined: 03 May 2007
Posts: 88
|
|
|
| Mon Jun 11, 2007 7:46 pm |
|
|
scottdallas
Joined: 04 May 2006
Posts: 1782
Location: US |
|
| |
|
Woah! Me likes that a lot!
_________________
www.scottdizzle.com uses cnr
last update: 07-22-08: 8:30 pm |
|
| Tue Jun 12, 2007 3:09 pm |
 |
|
Torstein
Joined: 03 Aug 2006
Posts: 78
|
|
| |
|
I'm no design expert, but I'll try to come with some constructive critisism:
I really like when things that looks like they are supposed to align with eachother actually align.
On my screen (1280x960) with firefox 2 not all the boxes align horizontally, to illustrate what I mean I made this image for you: http://sjogress.com/fminside.jpg
Other than that I really like your design, it seems to fit the theme of your website aswell as providing a user friendly non-bloated user interface. 
|
|
| Tue Jun 12, 2007 5:52 pm |
|
|
Ramon
Joined: 12 Oct 2005
Posts: 462
Location: Hoogeveen, NL |
|
| |
|
Thanks. I get your point, but i needed for the "Laatst Toegevoegd" to have more space as also news titles will appear there which are normally a bit longer then the titles under "gidsen" and "spelers".
--
I've got a little javascript problem, somehow it works great in FF, but in IE7 it has a little bug. It's hard to explain, so i'll just give you guys a link » http://www.fminside.nl/nieuws/test-post-cnr.html
Somehow in IE it shows "Naam" before the name field, instead of inside the name field.
Used Javascript
http://www.fminside.nl/inc/js/v4.js
http://www.fminside.nl/inc/js/lite.js
_________________
|
|
| Sat Jun 16, 2007 4:11 pm |
|
|
scottdallas
Joined: 04 May 2006
Posts: 1782
Location: US |
|
| |
|
I think it looks fine. I didn't notice what he was talking about til I looked again but even so it still looks good. It looks like you made enough room for everything that you needed to and they are boxes just big enough for their content.
_________________
www.scottdizzle.com uses cnr
last update: 07-22-08: 8:30 pm |
|
| Sat Jun 16, 2007 4:39 pm |
|
|
FI-DD
Admin
Joined: 22 Sep 2005
Posts: 2635
Location: Germany |
|
| |
|
 | | Somehow in IE it shows "Naam" before the name field, instead of inside the name field. |
Why do you put "Naam" into a <label> tag?
What about this instead:
 | | <input id="author" name="name" type="text" class="inputtext" value="Naam"> |
|
|
| Sat Jun 16, 2007 6:09 pm |
|
|
Ramon
Joined: 12 Oct 2005
Posts: 462
Location: Hoogeveen, NL |
|
| |
|
The javascript should make that go in the box. When i add "naam" as a value it shows up, but it won't work with the live preview.
I just don't get it. The javascript files are alright. When i just grab the code and put in one file and open it with IE it also works fine. Somehow something breaks it when it's online, i just don't know what that might be 
| | <head>
<script type="text/javascript">
/* Prototype JavaScript framework
* (c) 2005 Sam Stephenson <sam@conio.net>
* Prototype is freely distributable under the terms of an MIT-style license.
* For details, see the Prototype web site: http://prototype.conio.net/
/*--------------------------------------------------------------------------*/
//note: modified & stripped down version of prototype, to be used with moo.fx by mad4milk (http://moofx.mad4milk.net).
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (property in source) destination[property] = source[property];
return destination;
}
Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}
Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}
function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;
function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
}
if (!window.Element) var Element = new Object();
Object.extend(Element, {
remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
},
hasClassName: function(element, className) {
element = $(element);
if (!element) return;
var hasClass = false;
element.className.split(' ').each(function(cn){
if (cn == className) hasClass = true;
});
return hasClass;
},
addClassName: function(element, className) {
element = $(element);
Element.removeClassName(element, className);
element.className += ' ' + className;
},
removeClassName: function(element, className) {
element = $(element);
if (!element) return;
var newClassName = '';
element.className.split(' ').each(function(cn, i){
if (cn != className){
if (i > 0) newClassName += ' ';
newClassName += cn;
}
});
element.className = newClassName;
},
getStyle: function(element, style) {
element = $(element);
var value = element.style[style.camelize()];
if (!value) {
if (document.defaultView && document.defaultView.getComputedStyle) {
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(style) : null;
} else if (element.currentStyle) {
value = element.currentStyle[style.camelize()];
}
}
if (window.opera && ['left', 'top', 'right', 'bottom'].include(style))
if (Element.getStyle(element, 'position') == 'static') value = 'auto';
return value == 'auto' ? null : value;
},
cleanWhitespace: function(element) {
element = $(element);
$c(element.childNodes).each(function(node){
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node);
});
},
find: function(element, what) {
element = $(element)[what];
while (element.nodeType != 1) element = element[what];
return element;
}
});
var Position = {
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
};
document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = [];
$c(children).each(function(child){
if (Element.hasClassName(child, className)) elements.push(child);
});
return elements;
}
//useful array functions
Array.prototype.each = function(func){
for(var i=0;ob=this[i];i++) func(ob, i);
}
function $c(array){
var nArray = [];
for (i=0;el=array[i];i++) nArray.push(el);
return nArray;
}
Object.extend(String.prototype, {
camelize: function() {
var oStringList = this.split('-');
if (oStringList.length == 1) return oStringList[0];
var camelizedString = this.indexOf('-') == 0
? oStringList[0].charAt(0).toUpperCase() + oStringList[0].substring(1)
: oStringList[0];
for (var i = 1, len = oStringList.length; i < len; i++) {
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
}
return camelizedString;
}
});
</script>
<script type="text/javascript">
var FMI = {};
FMI.prepareCommentForm = function()
{
if($('comments_form'))
{
this.prepareField({field:'author',text:'Naam',record:true,clear:true});
this.prepareField({field:'url',text:'http://',record:true,clear:false});
this.prepareField({field:'CommentBody',record:false,clear:true});
$('comments_form').onsubmit = function()
{
var els = this.getElementsByTagName("*");
for(var i=0,j=els.length;i<j;i++)
{
if(els[i].noValue)
{
if(els[i].value == els[i].noValue) els[i].value = '';
if(els[i].record) FMI.remember(els[i]);
}
}
}
}
var el = $('postcomment');
var isie = false;
if(el && !isie)
{
var btn = document.createElement('div');
btn.id = 'commentswitcher';
btn.onclick = function()
{
var now = new Date();
now.addYear();
if(Element.hasClassName(this,'static'))
{
this.className = 'fixed';
// this.style.top = '0';
FMI.setCookie('FMI-cp', 'fixed', now);
} else {
this.className = 'static';
// this.style.top = 0;
this.style.left = 0; /* reset position */
FMI.setCookie('FMI-cp', 'static', now);
};
}.bind(el);
el.appendChild(btn);
el.className = FMI.getCookie('FMI-cp') == 'static' ? 'static':'fixed';
}
}
FMI.prepareLivePreview = function()
{
// return; // feature disabled for the time being
var el = $('livepreview');
if(!el)return;
el.style.display = 'block'; // bring the livepreview to life!
var txt = $("CommentBody");
var auth = $("author");
var url = $("url");
var ison = false;
$('lpswitch').onclick = function()
{
if(ison)
{
url.onkeyup=auth.onkeyup=txt.onkeyup = null;
$('lpswitch').innerHTML = "Live preview aanzetten";
ison = false;
}else{
url.onkeyup=auth.onkeyup=setMetaData;
txt.onkeyup=setCommentText;
setCommentText();
setMetaData();
$('lpswitch').innerHTML = "Live preview uitzetten";
ison = true;
}
}
function setCommentText()
{
$('lptext').innerHTML = '<p>' + txt.value.replace(/\n/g, "<br/>") + '</p>';
}
function setMetaData()
{
var pre = '', post = '';
if(url.value.length > 0 && url.value != 'http://')
{
pre += '<a href="'+url.value+'">';
post += '</a>';
}
var dt = new Date();
var ms = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var hr = (dt.getHours()==0?12:(dt.getHours()>12?dt.getHours()-12:dt.getHours()));
var cpd = $('lpdate');
cpd.innerHTML = ms[dt.getMonth()] + ' ' + dt.getDate() + ', ' + dt.getFullYear();
var lp = $("lpposter");
lp.innerHTML = pre + auth.value + post;
}
$('lpswitch').onclick();
}
FMI.prepareField = function(options)
{
var opt = {
field: '',
text: '',
record: false,
clear: false,
restore: true
};
Object.extend(opt, options);
var el = $(opt.field);
if(el) // make sure field exists
{
if(opt.record) el.value = this.getCookie("FMI" + opt.field);
el.previousSibling.style.display = 'none';
el.noValue = opt.text;
el.record = opt.record;
if(!el.value) el.value = opt.text;
if(opt.clear){ el.onfocus = function(){ if(this.value == this.noValue){this.value = '';} }; };
if(opt.restore){ el.onblur = function(){ if(this.value == ''){this.value = this.noValue;} }; };
}
}
// Cookie code Copyright (c) 1996-1997 Athenia Associates.
// http://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Tomer Shiran.
FMI.setCookie = function (name, value, expires) {
var domain = 'fminside.nl';
var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((domain) ? "; domain=" + domain : "") + "; path=/";
document.cookie = curCookie;
}
FMI.getCookie = function(name) {
var prefix = name + '=';
var c = document.cookie;
var nullstring = '';
var cookieStartIndex = c.indexOf(prefix);
if (cookieStartIndex == -1)
return nullstring;
var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
if (cookieEndIndex == -1)
cookieEndIndex = c.length;
return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
</script>
</head>
<body>
<div class="commentform">
<div id="postcomment" class="static">
<form method="post" action="" id="comments_form">
<div id="postmeta">
<div><label for="author">Naam</label><input id="author" name="name" type="text" class="inputtext" value=""></div>
<div><label for="url">URL</label><input id="url" name="mail" type="text" class="inputtext"></div>
<input name="password" tabindex="3" value="8fa80811212abea3241c87ce473845ae" type="hidden">
<div id="postdata">
<div class="inputgroup"><label for="CommentBody">Comments</label><textarea name="comments" id="CommentBody" tabindex="4"></textarea></div>
<input type="submit" value="Reageer"> <span id="lpswitch"></span>
<input name="action" value="addcomment" type="hidden">
</div><input type="hidden" name="id" value="465">
<input type="hidden" name="ucat" value="44">
</div>
</form>
</div>
</div>
<div class="comment" id="livepreview">
<div class="in">
<div class="commentmetadata">
<h4>
<span id="lpposter" class="auteur"></span>
<span id="lpdate" class="datum"></span>
<span class="wijzig"></span>
</h4>
</div>
<div id="lptext" class="commenttext"></div>
</div>
</div>
<script type="text/javascript">
FMI.prepareCommentForm();
FMI.prepareLivePreview();
</script>
</body>
</html> |
_________________
|
|
| Sat Jun 16, 2007 6:29 pm |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You cannot download files in this forum
|
|
|
 |
 |
|
