PDA

Volledige versie bekijken : Kleurverloop Javascript

fonzfonz
%Europe/Berlin %448 %2007, 10:45
Beste allemaal,

Ik hoop dat iemand me kan helpen. Sinds een jaar maak ik zo nu en dan een website en steeds probeer ik wat nieuws uit.
Zo gebruik ik wel eens javascripts. Nu heb ik er een gebruikt en die werkt prima in bijv IE. Maar als ik in Safari kijk komt ie niet naar voren? Heeft iemand een idee of ik iets fout doe of zit er misschien een fout in het script.

Dit is het script.

<body style="filter:progid:DXImageTransform.Microsoft.Gradient( endColorstr='#0066cc', startColorstr='#000000', gradientType='1');">

Alvast bedankt voor jullie hulp!
mknol
%Europe/Berlin %504 %2007, 12:06
Zie code: Dit een Microsoft filter, en dit is alleen Microsoft-compliant, dus ga je never nooit op deze manier werkend krijgen in andere browsers. Helaas.
fonzfonz
%Europe/Berlin %593 %2007, 14:14
Heb je enig idee hoe ik aan een script kom met hetzelfde effect maar dan dus wel werkend op andere browsers?
Alvast bedankt!
fonzfonz
%Europe/Berlin %840 %2007, 20:10
Ik heb al een oplossing gevonden voor dit probleem. Nog een ander probleem heb ik wel. Eigenlijk hetzelfde probleem, wel zichtbaar in IE niet in Safari. Het gaat om onderstaand script. Het gaat om een rand om de site heen:

if (document.all){
with (window.document.body.style){
borderWidth=20;
borderStyle='solid';
borderColor='#CCFFCC';
}
}
//-->
</script>

Enig idee? Wederom bedankt!
mknol
%Europe/Berlin %929 %2007, 22:17
document.all is verouderd. Je kunt beter dit gebruiken:<script type="text/javascipt">
var bodyTag = document.getElementsByTagName("body")[0];
function naamFunctie() {
if (bodyTag){
bodyTag.borderWidth=20;
bodyTag.borderStyle='solid';
bodyTag.borderColor='#CCFFCC';
}
}
//-->
</script>
Terror-web
%Europe/Berlin %019 %2007, 00:27
Misschien ook handig voor de zoekmachine gebruikers om je oplossing voor het eerste probleem te posten.. Zo krijgt de rest van FF ook deze info ;)
fonzfonz
%Europe/Berlin %797 %2007, 19:08
Ja sorry, je hebt gelijk. Ik heb in Photoshop een nieuw bestand aangemaakt van 1px bij 950 px. Daarin heb ik met kleurverloop wat je kan vinden in je gereedschap het bestand gevuld met kleur. Toen opgeslagen gewoon als jpg. Dus toen heb ik het bestand als achtergrond erin gezet.
fonzfonz
%Europe/Berlin %806 %2007, 19:21
Ik probeerde je script maar helaas hij doet het niet. Wil je er misschien nog eens naar kijken voor me?
Dank je!
mknol
%Europe/Berlin %870 %2007, 20:54
Ik zit nu te kijken (ook omdat ik dacht dat je probleem moeilijker was dan bleek), maar eigenlijk heb je gewoon CSS nodig:
<style type="text/css">
body {
border:20px solid #CCFFCC;
}
</style>
Of moet het perse Javascript zijn. (in dat geval gewoon ergens de functie aanroepen)
fonzfonz
%Europe/Berlin %883 %2007, 21:11
Nee geweldig! Dit is het natuurlijk. dank je!
Energy Design
%Europe/Berlin %668 %2007, 16:02
Wat trouwens een oplossing is om in overige browsers dan IE een gradient te creëren is door het gebruik van een .png bestand.
Het nadeel hiervan is dat je dan vast zit aan één vaste kleur waardoor het eigenlijk alleen voordeel heeft bij gradients die lichter moeten worden:)

je css zal er dan als volgt uitkomen te zien:
.classie{
background: url('../images/gradient.png') #ff0000 bottom repeat-x;
,background: none;
,filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#33ff0000', EndColorStr='#FFff0000');
}
Dus eerst wordt een achtergrond afbeelding over een rode achtergrond geplakt
vervolgens wordt in IE de achtergrond helemaal verwijderd en vervangen door een gradient(die je al werkend had)
Als het goed is moet er ook een manier zijn om de achtergrond afbeelding uitterekken maar die heb ik niet direct bij de hand 0.o

Voor het geval je vragen hebt over de .png...
1. Je opent PS maakt van de bg een normale laag...
2. Zet de fill op 0%
3. voeg een layer style toe -> gradient van zwart naar wit
4. zet de blend mode van je gradient op multiply of screen(afhankelijk of je een donker of licht gradientje wilt)
5. zet de laag opacity lager zodat je meer transparancy krijgt en dus een iets eleganter gardient...
6. CTRL+SHIFT+S -> Format: .PNG

Nou is dat mooi of niet :D
Handtekeningen zijn bestelbaar *ahum*

Mja succes!
fonzfonz
%Europe/Berlin %432 %2007, 10:22
Hier ga ik even op studeren.... Ik moet ook nog zoveel leren..