Søg
Avatar billede walden Nybegynder
23. august 2006 - 19:46 Der er 8 kommentarer og
1 løsning

get clip.bottom

Hej

Er det muligt at lave et script, der tjekker værdien af et af clipping parameterne?

Fx:

function clip_clipBottom() {
a = document.getElementById('minDiv').style.clip.bottom;
alert(a);// skulle så i dette tilfælde returnere "120"
}

<div id="minDiv" style="position: absolute;width: 200px;height: 200px;background-color: red;clip: rect(0px 100px 120px 0px);">
Avatar billede roenving Novice
24. august 2006 - 00:13 #1
Du skal lidt længere ud, da browserne registrerer clip på forskellig måde, og ingen af mine understøtter clip-bottom ...

IE opbevarer clip-værdien som rect(0px 100px 120px 0px), mens de andre har den som rect(0px, 100px, 120px, 0px) ...

For at få det ens bliver det nødvendigt at fjerne kommaerne og så splitte, så f.eks.:

function getClipBottom(elm){
  var clp = elm.style.clip;
  clp = clp.replace(/,/g,"");
  clp = clp.split(" ");
  return clp[2];
}

-- og i een linje kan det nok gøres:

return elm.style.clip.split(/,? /)[2];
Avatar billede walden Nybegynder
24. august 2006 - 08:19 #2
tak for løsningen ... det var lige hvad jeg havde brug for ... og mere koncentreret kan koden vist ikke blive :-)
Avatar billede walden Nybegynder
24. august 2006 - 08:22 #3
Øhhh .... det virker som sagt .... men dermed ikke sikkert jeg forstår helt hvordan ... hvad nu hvis jeg gerne vil tjekke parameteren clip.right istedet for ...
er det så nemt at tilrette scriptet?

Du lægger bare et svar, så jeg kan give dig pointene.
Avatar billede walden Nybegynder
24. august 2006 - 10:20 #4
Jeg har et ekstra spm, som jeg gerne giver ekstra points for også:

Jeg vil gerne ved gentagne klik på en knap øge clipRight på et lag med fx 10px.

Roenvings script fungerer sådan set upåklageligt til det formål, men jeg har problemer med at få lagt de 10px til ved hvert klik. I stedet for at additere sætter mit script blot tallet 10 efter clipRight parametret .... altså 15010 stedet for (150+10) = 160.

Her er scriptet, hvis I ønsker at teste det:

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

<html>
<head>
    <title>Untitled</title>
   
<script>
function getClipBottom(elm){
var clp = elm.style.clip;
clp = clp.replace(/,/g,"");
clp = clp.replace(/px/g,"");
clp = clp.split(" ");
return clp[1];
}

function wipe() {
var a = getClipBottom(minDiv);
var b = 10;
var c = a+b;
document.getElementById('minDiv').style.clip = 'rect(0px '+c+'px 40px 0px)';
}
    </script>
   
</head>

<body>
<div id="minDiv" style="position: absolute;width: 2500px;height: 200px;background-color: red;clip: rect(0px 150px 40px 0px);">
</div>

<div id="container" style="position: absolute;left:10px;top:80px;">
<a href="java script:void(0);" onclick="alert(getClipBottom(minDiv));">vis clipRight</a><br>
<a href="java script:void(0);" onclick="wipe();">wipe</a><br>

</body>
</html>
Avatar billede walden Nybegynder
26. august 2006 - 08:57 #5
Roenving ønsker tilsyneladende ikke at indkassere de velfortjente point. For en ordens skyld lukker jeg hermed spørgsmålet
Avatar billede roenving Novice
30. august 2006 - 12:54 #6
Første spørgsmål, at få fat i clip-right: clp[1], som du også har fundet ud af ...

-- den anden er et resultat af, at javascript opbevarer det som en tekststreng, og derfor konkateneres fremfor adderes ...

Så således:

function wipe() {
var a = +getClipBottom(minDiv);
var b = 10;
var c = a+b;
document.getElementById('minDiv').style.clip = 'rect(0px '+c+'px 40px 0px)';
}

-- og da du nu er i gang med at bruge forskellige clip-sider, kan vi jo lave funktionen, så den kan returnere en hvilkensomhelst side:

function getClipSide(elm,side){
var clp = elm.style.clip;
clp = clp.match(/\d+/g);
return clp[side];
}

-- altså bliver det samlet til:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <title>Untitled</title>
   
<script type="text/javascript">
function getClipSide(elm,side){
var clp = elm.style.clip;
clp = clp.match(/\d+/g);
return clp[side];
}

function wipe() {
var a = +getClipSide(document.getElementById('minDiv'),1);
var b = 10;
var c = a+b;
document.getElementById('minDiv').style.clip = 'rect(0px '+c+'px 40px 0px)';
}
    </script>
   
</head>

<body>
<div id="minDiv" style="position: absolute;width: 2500px;height: 200px;background-color: red;clip: rect(0px 150px 40px 0px);">
</div>

<div id="container" style="position: absolute;left:10px;top:80px;">
<a href="java script:void(0);" onclick="alert(getClipSide(document.getElementById('minDiv'),1));">vis clipRight</a><br>
<a href="java script:void(0);" onclick="wipe();">wipe</a><br>

</body>
</html>

-- og til det sidste er der kun at sige, at jeg desværre ikke har tid til at være på Eksperten hver eneste dag !-)
Avatar billede walden Nybegynder
30. august 2006 - 13:04 #7
Det er super fint .... pointene er dine hvis du vil have dem :-)
Avatar billede roenving Novice
30. august 2006 - 13:15 #8
Velbekomme '-)

-- men spørgsmålet er jo lukket, så der kan ikke deles flere point ud !o]
Avatar billede walden Nybegynder
30. august 2006 - 13:24 #9
Surt ... jeg kan lige oprette et nyt "for your points only"
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 21:35 Lidt simpel (håber jeg) Photoshop hjælp Af fcs i Billedbehandling
16/0516:04 Canon printer vil ikke udskrive farver Af mort1 i Printere
16/0514:50 Hvilket fabrikat af Mesh systemer virker? Af fkj i Wifi
15/0513:45 AJAX kode -javascript Af Asky i Programmeringsværktøjer
15/0511:50 Vælg indstilling - blå skærm med med flere muligheder for fejlretning Af Uvanga i Windows
White papers
Flere white papers »