tisdag 27 juli 2010

Chrome visar inte animerad favicon

I dagsläget har Chrome problem med att visa favikoner som är animerade. Webbläsaren visar bara första rutan i gif-bilden. För att kunna visa animerade favikoner i alla andra webbläsare utom Chrome så lägg till i <head>:

<link rel="shortcut icon" href="favicon.ico" />

<script type="text/javascript">
//<![CDATA[
if ((navigator.userAgent.indexOf("Chrom")) == "-1"){
    document.write("<link rel=\"icon\" href=\"favicon.gif\" type=\"image/gif\">");
}
//]]>
</script>

Nu visas den vanliga favikonen för Chrome och den animerade för andra webbläsare som har stöd för den.

Fetstil och Chrome

För att Chrome ska bry sig om <strong> - fetstil - så lägg till i din stylesheet:

strong {
font-weight:900 !important;
}

tisdag 13 juli 2010

Varannan, var tredje etc i en loop

Ibland vill man veta vilken post i en loop som är t ex den andra, den tredje eller den fjärde. Då kan man använda sig av operatorn MODULUS (%) i PHP.

Säg att jag vill veta vilken var fjärde post är i min loop. Jag startar min räknare på 1 (innan loopen börjar), kollar vilken post jag är på och räknar sen upp.

$count=1;
loop-start...
if(($count%4) == 0){ echo "4:e" }
$count++;
loop-slut...

TinyMCE tar konverterar automatiskt < och >

Använder man entity_encoding : "raw" i TinyMCE, kommer alla tecken att sparas som man skriver dem - förutom XML standarderna &amp; &lt; &gt; &quot; som omvandlas till & < > ". Vill man inte att tecknen automatiskts ska omvandlas, t ex för att man ska kunna skriva ut kod i texten, kan man använda htmlentities() på texten innan den skickas till TinyMCE-formuläret:

<textarea class="tinymce"><?php echo htmlentities($text);?></textarea>

Standard teckenuppsättning är ISO-8859-1. Använder man sig av UTF-8 måste man ange detta annars får man problem med bl a å ä ö.

<textarea class="tinymce"><?php echo htmlentities($text,ENT_COMPAT,'utf-8');?></textarea>

måndag 12 juli 2010

PHP sidbläddring / pagination med MySQL RAND()

Ibland vill man ha sidbläddring av slumpmässigt valda poster från en databastabell. För att det ska fungera kan man skapa ett slumptal och spara i en session. Slumptalet används sedan i queryn.

if (!isset($_SESSION['random_number'])) {
srand ((double) microtime( )*1000000);
$random_number = rand( );
$_SESSION['random_number'] = $random_number;
} else {
$random_number = $_SESSION['random_number'];
}

För att inte samma "slumpade" poster ska visa sig när man besökt en annan sida och sedan gått tillbaka måste man ta bort sessionen mellan besöken. För att särskilja de olika sidornas sessioner lägger jag till sidans unika id till sessions-namnet. Skriv såhär istället:

//array med id för de sidor som har slumpad sidbläddring
$page_ids[]=1;
$page_ids[]=2;
$page_ids[]=3;

foreach ($page_ids as &$value) {
if($page_id<>$value){
if (isset($_SESSION['random_number'.$value])) {
unset($_SESSION['random_number'.$value]);//tar bort de andra sidornas sessioner
}
}
}

if (!isset($_SESSION['random_number'.$page_id])) {
srand ((double) microtime( )*1000000);
$random_number = $page_id.rand( );
$_SESSION['random_number'.$page_id] = $random_number;
} else {
$random_number = $_SESSION['random_number'.$page_id];
}

I SQL-queryn, lägg till:
$query.=" ORDER BY RAND(".$random_number.") ";

Se hur sidbläddring / pagination med php fungerar i mitt tidigare inlägg Pagination / Sidbläddring med PHP & Mysql

Pagination / Sidbläddring med PHP & Mysql

Ska man hämta och visa många poster från databasen, t ex nyheter, kan man dela upp resultatet på flera sidor. Då sparar man sidladdningstid och besökaren slipper skrolla så mycket. Här är ett exempel på hur man skriver kod för att bläddra mellan sidor (på engelska "pagination").

<?php

//**** Öppna databasen ****

// Antal poster per sida
$rowsperpage=10;

// Aktuell sida
$pageSide=(isset($_GET["ps"]) && is_numeric($_GET["ps"]) && $_GET["ps"]>0 ? $_GET["ps"] : 1);

// Startpost
$offset=($pageSide>1 ? ($pageSide-1)*$rowsperpage : 0 );

// Visa posterna
$query="SELECT * FROM news LIMIT $offset, $rowsperpage"; 
$result=mysql_query($query);
while($row=mysql_fetch_array($result)){
echo $row['post'] . '<br>';}

// Totala antalet poster i tabellen
$query="SELECT COUNT(id) FROM news";
$result=mysql_query($query);
$row=mysql_fetch_array($result);
$total = $row[0];

// Totala antalet sidor
$maxpage=ceil($total/$rowsperpage);

// Visa navigeringen
?><div class="news_nav">
    <ul>
        <?php if($pageSide>1){?>
            <li><a href="?"><<</a></li>
            <li><a href="?ps=<?= $pageSide-1 ?>"><</a></li>
       <?php }else{ ?>
           <li class="inactive_page"><<</li>
           <li class="inactive_page"><</li>
       <?php } ?>
      <?php
        for($i=1; $i<=$maxpage; $i++){
          if($pageSide==$i)
             echo "<li class=\"current_page\">".$i."</li>";
          else
             echo '<li><a href="?ps='.$i.'">'.$i.'</a></li>';
        }
      ?>
     <?php if($pageSide<$maxpage){?>
        <li><a href="?ps=<?= $pageSide+1 ?>">></a></li>
        <li><a href="?ps=<?= $maxpage ?>"> >></a></li>
     <?php }else{ ?>
        <li class="inactive_page">>></li>
        <li class="inactive_page">></li>
      <?php } ?>
    </ul>
</div>

.news_nav ul {
display:block;
border:none;
text-transform:uppercase;
}
.news_nav ul li {
list-style:none;
float:left;
border:1px solid #FFF;
text-decoration:none;
margin:0 5px 0 0;
padding:0 5px;
}
.news_nav ul li:hover {
border:1px solid #000;
}
.news_nav ul li.current_page {
border:1px solid #000;
color:#000;
font-weight:bold;
background-color:#FFF;
}
.news_nav ul li.inactive_page, .news_nav ul li.inactive_page:hover {
border:1px solid #666;
color:#666;
}
.news_nav ul li a{line-height:normal;}

tisdag 6 juli 2010

En annan meny med bakgrundsbild

meny

HTML:

<div id="menu">
<ul>
<li><a href="#">Start</a></li>
<li><a href="#">Tjänster</a></li>
<li><a href="#">Företaget</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>

STYLE:

<style type="text/css">
<!--
#menu {
background-color:#000;
width:490px;
}
#menu ul {
height:40px;
line-height:40px;
padding:0;
margin:0;
padding-left:20px;
list-style-type: none;
font-family:Verdana, Geneva, sans-serif;
}
#menu ul li {
float: left;
list-style: none;
margin:0;
padding:0px 4px;
height:30px;
}
#menu ul li a {
display: block;
padding: 0px 20px;
color:#00baf2;
text-decoration:none;
font-weight:bold;
background-image:url(images/menu_decor.gif);
background-repeat:no-repeat;
background-position:left center;
}
#menu ul li a:hover {
color:#FFF;
}
-->
</style>

BILD:
(högerklicka och välj spara som om du vill använda denna bilden)

menu_decor