Fetstil Fetstil Kursiv Understrykning linje färgläggning tabellverk Punktlista Nummerlista Vänster Centrerat högerställt Utfyllt Länk Bild htmlmode
  • Forum & Blog
    • Forum - översikt
      • .Net
        • asp.net generellt
        • c#
        • vb.net
        • f#
        • silverlight
        • microsoft surface
        • visual studio .net
      • databaser
        • sql-server
        • databaser
        • access
        • mysql
      • mjukvara klient
        • datorer och komponenter
        • nätverk, lan/wan
        • operativsystem
        • programvaror
        • säkerhet, inställningar
        • windows server
        • allmänt
        • crystal reports
        • exchange/outlook
        • microsoft office
      • mjukvara server
        • active directory
        • biztalk
        • exchange
        • linux
        • sharepoint
        • webbservers
        • sql server
      • appar (win/mobil)
      • programspråk
        • c++
        • delphi
        • java
        • quick basic
        • visual basic
      • scripting
        • asp 3.0
        • flash actionscript
        • html css
        • javascript
        • php
        • regular expresssion
        • xml
      • spel och grafik
        • DirectX
        • Spel och grafik
      • ledning
        • Arkitektur
        • Systemutveckling
        • krav och test
        • projektledning
        • ledningsfrågor
      • vb-sektioner
        • activeX
        • windows api
        • elektronik
        • internet
        • komponenter
        • nätverk
        • operativsystem
      • övriga forum
        • arbete karriär
        • erbjuda uppdrag och tjänster
        • juridiska frågor
        • köp och sälj
        • matematik och fysik
        • intern information
        • skrivklåda
        • webb-operatörer
    • Posta inlägg i forumet
    • Chatta med andra
  • Konto
    • Medlemssida
    • Byta lösenord
    • Bli bonsumedlem
    • iMail
  • Material
    • Tips & tricks
    • Artiklar
    • Programarkiv
  • JOBB
  • Student
    • Studentlicenser
  • KONTAKT
    • Om pellesoft
    • Grundare
    • Kontakta oss
    • Annonsering
    • Partners
    • Felanmälan
  • Logga in

Hem / Forum översikt / inlägg

Posta nytt inlägg


Bostream-"css".....

Postades av 2003-10-04 20:38:59 - Mikael Aftevik, i forum javascript/dhtml, Tråden har 7 Kommentarer och lästs av 694 personer

Ett par frågor....

Ett....
I Bostreams anmälningsformulär, (med namn, adress etc), så använder de en "smart" lösning av css tillsammans med formulärkontroll.....

Tittar i "källan" men det säger inte mig så mycket....

Alltså; om jag skriver in ett telefonnummer, personnummer, postnummer felaktigt så rödmarkeras en ram runt input-fältet DIREKT.....

Dock fattar jag inte hur det går tillväga... Någon som kan förklara (visa mer kod som behövs).... eller har en annan liknande bra (bättre) lösning.


Två....
När man för musen över fältet som är felinmatat (rödmarkerat) så får man även en "alt-text" med felmeddelandet....
Räcker det med "errorMsg" i input-fältet för det skall funka (inget annat JavaScript eller så) ?


Tre....
Sedan menyn (till vänster) som Bostream använder..
När man för musen över t.ex. priser, produkter etc. så blir det en gråtonad bakgrund med en tunn svart ram runt.....
Kan inte se hur denna CSS-kod ser ut... Någon som vet ?

// Mikke


Svara

Sv: Bostream-"css".....

Postades av 2003-10-04 22:00:11 - Andreas Hillqvist

Har du kikat på:
http://www.bostream.com/skins/default.css
http://www.bostream.com/skins/msie/main.css


Svara

Sv: Bostream-"css".....

Postades av 2003-10-04 22:46:23 - Mikael Aftevik

Jo, jag har gjort en titt på de, men som sagt "de säger inte mig så mycket"....

Lite mer förklaring vore önskvärt ;-)

(något med *behaviors* verkar det vara,,,, har jag inte så stor koll på...
eller om det finns något liknande sätt att lösa det på.....)

// M


Svara

Sv: Bostream-"css".....

Postades av 2003-10-05 01:38:31 - Per Persson

Jaha, det här var något nytt för mig... Får försöka att inte bli sittande och läsa om behaviors hela natten. Här är i alla fall specifikationen: http://www.w3.org/TR/becss


Svara

Sv: Bostream-"css".....

Postades av 2003-10-06 07:58:33 - Fredrik Hjälte

Ganska basic grejor om du tittar på koden, dom har 2 st htc apps som tar hand om events på sidan.
Ex: isValid() som kollar om fältet du onBlur:ar från är ok eller inte.
osv....

Här är koden för hela deras htc

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<?xml version="1.0" encoding="ISO-8859-1"?>

<public:component urn="MKDragLayer">

<public:attach event="ondocumentready" handler="init" />
<public:attach event="onchange" handler="doChange" />
<public:attach event="onfocus" handler="doFocus" />
<public:attach event="onblur" handler="doBlur" />
<public:method name="validateDate"/>
<public:method name="validateDate"/>
<public:method name="doFocus"/>
<public:method name="validateEmail"/>
<public:method name="isValid"/>
<public:method name="isEmpty"/>
<public:method name="matches"/>



<script language="JSCRIPT">

// Copyright (c) Existic AB, www.existic.com. May not be used for commercial solutions without expressed permission

function doFocus()
{
if (this.format && this.value == this.format)
this.value =""

}

function doBlur()
{
if (this.isEmpty() && this.format)
this.value = this.format;
this.isValid();


}

function doChange()
{
this.isValid();

}

function isValid()
{
var bool = true;

if (this.compare)
{
bool = this.matches(this.compare);
}

else if (this.required == "1")
{

if(this.isEmpty())
{

bool = false;
this.title ="fältet måste fyllas i";

}
}


if (bool)
{

if(this.datatype == "date")
{
bool = this.validateDate();
if(!bool) this.title = "felaktigt datum, ska vara i formatet yyyy-mm-dd";
}



else if(this.datatype == "personnr" )
{
if (this.required == "1" && this.value == this.format)
{
bool = false;
}
else
{
bool = this.validatePersNr(this.value);
if(!bool) this.title = "Felaktigt personnr";
}
}

else if(this.datatype == "time")
{
bool = this.validateTime();
if(!bool) this.title = "felaktig tid, ska var i formatet hh:mm";
}

else if(this.datatype == "email" && !this.isEmpty())
{
bool = this.validateEmail();
if(!bool) this.title = "felaktig mailadress";

}
else if(this.expression && this.value != "")
{
var re = new RegExp(this.expression,"ig");
bool = re.test(this.value);
if(!bool) this.title = this.errorMsg;

}
}

if ((this.value == this.format) && this.required != "1")
bool = true;

bool ? hideMarker() : showMarker();
if (bool) this.title = "korrekt ifyllt";
return bool;
}

function showMarker()
{
//this.style.backgroundColor ="pink";
this.style.borderColor ="#E9181E";
}

function hideMarker()
{
//this.style.backgroundColor ="white";
this.style.borderColor ="#c6c6c6";

}

function isEmpty()
{
var re= /\S/;
bool = re.test(this.value);
return !bool;
}

function matches(id)
{
var bool = false;
var otherElement = window.document.all[id];
if (otherElement)
{
if (otherElement.value == this.value) bool = true;
}
if (!bool) this.title = this.errorMsg;

return bool;
}

function validateEmail()
{
var re= /^[^\x0d]+\@([-A-Za-z0-9]+\.)+[A-Za-z]{2,4}$/;
bool = re.test(this.value);

return bool;
}


function validateDate()
{
var re= /^(\d{4})\-(\d{2})\-(\d{2})$/ig;
bool = re.test(this.value);
var year = parseInt(RegExp.$1,10 );
var month = parseInt(RegExp.$2,10);
var date = parseInt(RegExp.$3,10);
if (year > 2200 || year < 1900)
bool = false;

if (month > 12 || month < 1)
{
bool = false;
}
return bool;
}

function validatePersNr(strNumber)
{
var result = true;

if (strNumber.length != 11)
{
result = false;
}
else {

var arrNumbers = strNumber.match(/^(\d)(\d)(\d)(\d)(\d)(\d)-(\d)(\d)(\d)(\d)$/);
var nCheckSum = 0;

if (arrNumbers == null)
{
//bool = false;
return false;
}

for (var nCnt = 1; nCnt <= 9; nCnt++)
{
var nTemp = arrNumbers[nCnt] * (nCnt % 2 ? 2 : 1);
nCheckSum += nTemp >= 10 ? 1 + nTemp % 10 : nTemp;
}
nCheckSum = (10 - (nCheckSum % 10)) % 10;

if(nCheckSum != arrNumbers[10])
result = false;
}

return result;
}

function validateTime()
{
var re= /^(\d{2})\:(\d{2})$/ig;
bool = re.test(this.value);
var firstpart = parseInt(RegExp.$1);
var lastpart = parseInt(RegExp.$2);

if (firstpart > 23 || firstpart < 0)
bool = false;

if (lastpart > 59 || lastpart < 0)
{
bool = false;
}
return bool;
}


function init()
{
this.validating = true;
if (!this.id) this.id = window.document.uniqueID;
var tagID = this.id+"_error";
var tagStr = "<span style='color:red;font-weight:bold' id='"+tagID+"'></span>";
window.document.all[this.id].insertAdjacentHTML("AfterEND",tagStr);
this.errorLabel = window.document.all[tagID];

if(this.datatype == "date")
{
this.maxLength = "10"
}
else if(this.datatype == "time")
{
this.maxLength = "5"
}
if (this.format && !this.value)
this.value=this.format;

}

</script>

</public:component>

Nästa htc

<public:component urn="MKDragLayer">

<public:attach event="ondocumentready" handler="init" />
<public:attach event="onsubmit" handler="doSubmit" />
<public:method name="isValid"/>


<script language="JSCRIPT">

// Copyright (c) Existic AB, www.existic.com. May not be used for commercial solutions without expressed permission

function doSubmit()
{

if (!this.isValid())
{
event.returnValue = false;
alert("Ett eller flera fält (rödmarkerade) är inte korrekt ifyllda. Om du vilar muspekaren över respektive fält får du mer information.");
}
else
{
for (var i=0;i< this.elements.length;i++)
{
var formElement = this.elements[i];
if(formElement.format == formElement.value)
formElement.value = "";
}

}

}

function isValid()
{

var formValid = true;
for (var i=0;i< this.elements.length;i++)
{
var formElement = this.elements[i];
if (formElement.validating && !formElement.isValid() ) formValid = false;
}
return formValid;
}

function init()
{
}
</script>

</public:component>


Svara

Sv: Bostream-"css".....

Postades av 2003-10-06 16:37:35 - Mikael Aftevik


"Ganska basic grejor om du tittar på koden,"....
.... Hum, jo kanske för den inbitne kodaren....

Men som jag skrev (ganska tydligt tycker jag) att jag inte fattade så mycket av den, utan önskade lite mer förklaring.....

Visst det går väl att rippa koden rakt av, men då lär man ju sig inget på det.

Så copland, du får gärna förklara mer ;-)


ha det !
/// Mikke


Svara

Sv: Bostream-"css".....

Postades av 2003-10-07 15:44:01 - Fredrik Hjälte

Tja, jag kan ju gå igenom lite grand i alla fall...

ta isValid funkionen...
Om du tittar i källkoden för den webbsidan så ser du att alla element som ska fyllas i har ett attribut: required=1....
Det är ett av de värden som kontorlerras varje gång det sker en onChange för formuläret <form...>

Därefter kollar dom på bostream bara om du fyllt i något eller om fältet är tomt.

Efter några övriga kontroller så kommer du till slutet på koden.

bool ? hideMarker() : showMarker();
if (bool) this.title = "korrekt ifyllt";
return bool;
}

function showMarker()
{
//this.style.backgroundColor ="pink";
this.style.borderColor ="#E9181E";
}

function hideMarker()
{
//this.style.backgroundColor ="white";
this.style.borderColor ="#c6c6c6";

}

Där kontrolleras det om bool är true eller false... och därefter så har du två andra funktioner show resp hideMarker som ändrar attribut för det element som kontrollen sker på, tex fältet förnamn...

För att du ska använda en sådan här kontroll behöver du inte krångla till det i onödan.
Gör en basic funktion för att testa som bara kontrollerar ett av dina element i formuläret och anropar en funtion du har på din sida.

Skapa en form med tex input name="a" onChange eller onBlur och kör en funktion som utför diverse grafiska ändrigar... this.style.borderColor eller nåt för att testa.

Du klarar det nog om du bara lär dig vilka attribut du ska ändra för respektive element.


Svara

Sv: Bostream-"css".....

Postades av 2003-10-07 20:07:16 - Mikael Aftevik

tackar,,, skall kolla vidare lite mer....


Svara

Nyligen

  • 19:55 kick-off med fokus på hälsa?
  • 19:53 kick-off med fokus på hälsa?
  • 16:24 Föreslå en skönhetsklinik online
  • 16:23 Föreslå en skönhetsklinik online
  • 18:42 Hvor finder man håndlavede lamper
  • 18:41 Hvor finder man håndlavede lamper
  • 16:36 Allt du behöver veta om keramiskt
  • 16:14 Vem anlitar man egentligen när tak

Sidor

  • Hem
  • Bli bonusmedlem
  • Läs artiklar
  • Chatta med andra
  • Sök och erbjud jobb
  • Kontakta oss
  • Studentlicenser
  • Skriv en artikel

Statistik

Antal besökare:
Antal medlemmar:
Antal inlägg:
Online:
På chatten:
4 570 722
27 958
271 751
564
0

Kontakta oss

Frågor runt konsultation, rådgivning, uppdrag, rekrytering, annonsering och övriga ärenden. Ring: 0730-88 22 24 | pelle@pellesoft.se

© 1986-2013 PelleSoft AB. Last Build 4.1.7169.18070 (2019-08-18 10:02:21) 4.0.30319.42000
  • Om
  • Kontakta
  • Regler
  • Cookies