↓ Archives ↓

Posts Tagged → javascript

Youtube og TinyMCE

Dagens hurtige tip, der længe har drillet – nok mest fordi jeg bare ikke har sat mig godt nok ind i editoren, men pr. default er det ikke muligt at indsætte Youtube videoer i TinyMCE, men hvis man tilføjer:

extended_valid_elements : "iframe[src|title|width|height|allowfullscreen|frameborder]"

Så bliver det muligt :)

Idé til skalerbart design

Det er jo pænest at lave webdesign der virker uanset størrelsen på den skærm eller browservindue der viser den. Der findes uden tvivl andre metoder, eller frameworks til at lave følgende, men jeg synes alligevel det er en smart finte :-)

En klassisk hjemmeside ser sådan ud:

[...]
<body>
 
<div id="wrapper">
    [indhold]
</div>
 
</body>
[...]

Inde i wrapper-elementet har man så nogle menuer m.m. der har nogle forskellige breder. Typisk en menu på 30 % og indhold på 70 %. Når man trækker i vinduet, eller ser den på en lille skærm, så vil de to kolonner måske være meget smalle.

En løsning kan være at man med jQuery lytter på om brugeren skalerer vinduet (og udgangsstørrelsen når siden er loadet), og så afhængig af bredten af vinduet tilføjer eller fjerner en klasse til wrapper-elementet. Eks.:

$(window).resize(function() {
  if (document.width < 600) {
    $("#wrapper").addClass("small");
  }
  else {
    $("#wrapper").removeClass("small");
  }
});

I eksemplet sætter jeg en klasse ved navn ‘small’ på wrapper-elementet når siden er smallere end 600 px. I mit stylesheet skal jeg så definere mine elementer ud fra det. Eks.:

/* Default */
#wrapper #left_side {
  float:left;
  width:70%;
}
 
#wrapper #right_side {
  float:right;
  width:30%;
}
 
/* width < 600 px */
#wrapper.small #left_side {
  float:none;
  width:100%;
}
 
#wrapper.small #right_side {
  float:none;
  width:100%;
}

En idé til nemme POST-links

En fejl jeg tit ser når folk udvikler websites er, at de laver nogle almindelige links, der ændrer i noget data på serveren, og dette gi’r nogle sikkerhedsproblemer da et GET-request kun er beregnet til at hente data.

Jeg har et lille stump Javascript der kan omgå problematikken ved at omskrive links til Ajax-kald via jQuery-framework’et:

$(document).ready(function() {
  $("a.post").unbind("click").click(function() {
    if ($(this).attr("title") && !confirm($(this).attr("title"))) {
      return false;						
    }
 
    var url = $(this).attr("href");
    var data = url.substr(url.indexOf("?")+1);				
 
    $.post($(this).attr("href"), data , function(result) {
      // ...
    });
    return false;
  });
});

For at bruge ovenstående skal man tilføje klasse “post” til sine linke, og ellers lave sine links med de data man nu ønsker at sende. Tilføjer man en titel på linket promptes brugeren for den besked når han klikker.

<a href="post.php?foo=123&bar=456" class="post" title="Slet?">test</a>

Eller en lidt mere simpel:

<a href="post.php?foo=bar" class="post">test</a>

Der er sikkert andre måder at løse problematikken på, men det her var hvert fald en af dem :-)