php - Paging og aktivt link - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php javascript css css3

<< < 1 2 3 > >>

Bruger #16627 @ 21.11.11 10:52

Hej Udvikleren.

Jeg har en side hvor jeg i bunden kan bladre mellem side 1, 2, 3 osv.
Jeg har lavet det manuelt, med almindelige <a> links, og ikke et paginition system.
Er det muligt enten med css, php eller javascript at få det link man er på til at få en anden farve?
Jeg ønsker når man trykker på 1 tallet og er på den side bliver 1 tallet rødt og hvis man herefter klikker på 2 er det det der bliver rødt osv.

Med css er det vel kun muligt at lave:

A:link
A:visited
A:active
A:hover

Der giver vel ikke mulighed for den funktion jeg ønsker gør det?

På forhånd tak!

vh

KP

26 svar postet i denne tråd vises herunder
12 indlæg har modtaget i alt 23 karma

Sorter efter stemmer Sorter efter dato

Bruger #13723 @ 21.11.11 18:15

Det kan gøres nogenlunde i den her stil

PHP kode

 // Det url jeg er på nu.
 $uri = $_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
 $aktiv = "color:#0f0"; // farven grøn
 $normal = "color:#000"; // farven sort
 
 // Hvis min url jeg er på nu lig med det mit link henviser til farves det til $aktiv ellers $normal.
 echo "<a href='www.blog.dk/blog0' style='".($uri == "www.blog.dk/blog0" ? $aktiv : $normal)."'>Blog</a>";
 echo "<a href='www.blog.dk/blog1' style='".($uri == "www.blog.dk/blog1" ? $aktiv : $normal)."'>Kontakt</a>";
 echo "<a href='www.blog.dk/blog2' style='".($uri == "www.blog.dk/blog2" ? $aktiv : $normal)."'>Bøllebank</a>";
 echo "<a href='www.blog.dk/blog3' style='".($uri == "www.blog.dk/blog3" ? $aktiv : $normal)."'>Php</a>";

Mvh Buch

Indlæg senest redigeret d. 21.11.2011 18:21 af Bruger #13723

Bruger #16622 @ 21.11.11 11:07

Hej Kristian,

Det mest normale er at lave det i php el.lign. sammen med en database, en rigtig god tutorial på det er på Lynda.com: http://www.lynda.com/PHP-tutorials/php-with-mysql-essential-training/435-2.html

Men hvis du hurtigt vil have fikset dit problem, så kan det også lade sig gøre med javascript, se her hvordan:
http://webdesign.tutsplus.com/tutorials/site-elements/tabbed-navigation-adding-css-classes-dynamically/

Og så er der en 3. mulighed med jQuery:
http://web.enavu.com/tutorials/making-a-jquery-pagination-system/
(Her loader den dog først alt dit indhold, så det kan godt blive en lidt tung løsning alt efter hvad du har på siderne).

God fornøjelse.

Bruger #13723 @ 21.11.11 19:51

fjern http:// i begge dele så burde det virke

Bruger #15624 @ 21.11.11 13:22

Er det ikke bare at gøre det følgende?

PHP kode

 <style type="text/css">
 <?php echo '#nav'.$variabel; ?>
 {
   color: red:
 }
 </style>
 <a href='1.php' id="nav1">

$variabel skal så indeholde den del af URLen der skal bruges. Det kan f.eks bruge regular expressions til, eller (hvis man skal være sikker, og ikke vil bøvle med regular expressions-nødagtighed) sammenligning med en værdi fra et array

Indlæg senest redigeret d. 21.11.2011 13:23 af Bruger #15624

Bruger #13723 @ 21.11.11 21:53

yeps og husk nu kan du ændre det ret nemt så aktiv måske er lig følgende:
$aktiv ="padding:2px;background:#ccc;color:#000;font-weight:bold";

Og det var så lidt

Er det fast defineret hvor mange links til siderne du har? For så kan det gøres med endnu mindre?
Ellers kan du gøre følgende også:

PHP kode

 $aktiv = "aktiv"; // farven rød
 $normal = "normal"; // farven sort
 
 for ($i = 0; $i <= 10; $i++) {
     $i = ($i == 0 ? $i="" : $i);
     echo "<a href='http://www.kp-foto.com/blog$i/' class='".($uri == "www.kp-foto.com/blog$i/" ? $aktiv : $normal)."'>$i</a>\n";
 }

Og ændre style til class og så definer hvordan linket skal se ud via. css.

Indlæg senest redigeret d. 21.11.2011 22:15 af Bruger #13723

Bruger #16025 @ 22.11.11 11:12

442

Man kunne også opbygge pagination systemet med PHP og jQuery, samt køre MySQL database igennem som indhold. Nu kender jeg jo dine koder ret godt Kristian, da jeg har arbejdet en del på det. Men et eksempel kunne være:

"Pagination with jQuery, MySQL and PHP"

Bruger #13723 @ 23.11.11 19:35

Hej Kristian

Det bliver straks lidt mere svært, så skal vi til at kode lidt med noget javascript. Hvis du kan finde den javascript der tager sig af de links og hvad der sker når man trykker på så kan jeg godt finde en løsning til dig ;D

Bruger #13723 @ 23.11.11 19:55

haha ja, jeg har fundet stedet er lige i gang med at lave lidt jQuery fordi det ligger ikke i PHP delen, det er lavet sådan at den bruger javascript til at hente de php filer dvs. urlen ændrer sig ikke. Derfor skal der kodes i din gallery.js fil og jeg laver lige et eksempel

Skal lige se om det virker først

Bruger #13723 @ 23.11.11 20:16

Ok først så skal du lige øndre din gallery kode til følgende:

PHP kode

 <?php
 //Lidt sikkerhed på din query.
 $name = mysql_real_escape_string(htmlspecialchars(trim($name), ENT_QUOTES));
 
 $dir = '../pictures_thumbnails/' . $name . '/';
 
 $gallery = "<h1>$name</h1><div><table>";
 
 $count = 0;
 
 $explode = explode(".", $item);
 
 
 
 $files = scandir($dir);
 shuffle($files);
 
 foreach($files as $item)
             {   
             if (!is_dir($item))
             {
                 
                 $explode = explode(".", $item);
                 
                 
     
             if (($count % 5) == 0)  
             {   
             if($count == 0)
             {
                 $gallery = $gallery .
                 "<tr>
                  <td>
                  <a href='http://www.kp-foto.com/pictures/" . $name . "/" . $item . "' rel='lightbox[gallery]' title='" . $explode[0] . "'>
                  <img src='http://www.kp-foto.com/pictures_thumbnails/" .  $name . "/" . $item . "' id='gylle'/>
                  </a> 
                  </td>";  
             }
             else
             {
                 $gallery = $gallery .
                 "</tr>
                   <tr>
                   <td>
                   <a href='http://www.kp-foto.com/pictures/" . $name . "/" . $item . "' rel='lightbox[gallery]' title='" . $explode[0] . "'>
                   <img src='http://www.kp-foto.com/pictures_thumbnails/" .  $name . "/" . $item . "'  id='gylle'/>
                   </a>
                   </td>";
             }
             } 
             else
             {
                   $gallery = $gallery . 
                   "<td>
                   <a href='http://www.kp-foto.com/pictures/" . $name . "/" . $item . "' rel='lightbox[gallery]' title='" . $explode[0] . "'>
                   <img src='http://www.kp-foto.com/pictures_thumbnails/" .  $name . "/" . $item . "' id='gylle' />
                   </a>
                   </td>";
                   
             }
         
                  $count++;
                  
             }
             }
  
 $gallery = $gallery . "</table></div>";
 echo $gallery 
 ?>

Når du har gjort det så kan jeg lige lege lidt mere med det

Jeg har lavet lidt sikkerhed + en titel på siden og den kan jeg bruge til brug af aktiv markering.

Og så prøv at ændre indholdet af gallery.js til:

JScript kode

 jQuery(document).ready(function(jQuery){
         
         
         jQuery("a.gallery").click(function(){
             var url = "'http://www.kp-foto.com/subsites/gallery.php?name=";
             var text = $(this).text();
             var head = $("#content h1").text();
             jQuery("#content").load(url + text);
             
             if(text == head){
                 $(this).addClass('red');
             }else{
                 $(this).removeClass('red');
             }
             
         });
     });

Indlæg senest redigeret d. 23.11.2011 20:26 af Bruger #13723

Bruger #13723 @ 23.11.11 21:19

Hmm okay og har du ændret den ene linje i php koden og desuden så skal der fjernes ' i gallery.js ved: var url = "'http://www.kp-foto.com/subsites/gallery.php?name=";

på den allerførste linje.
Og i din php så prøv at ændre det til:

PHP kode

 $name = $_GET['name'];

<< < 1 2 3 > >>

Paging og aktivt link

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler