Siti raccomandati

Google Search

Tutorial su Drupal
Risorse su Drupal

Link al mio profilo
Contattami

E-mailpsicomantegmailcom
MSNpsicomantekatapekkianet
Google Talkpsicomantesugmaildotcom
Skypepsicomante
Creative Commons License
Newsfeed RSS png image Google Talk png image

Eppur svolazzano! Esperimento di floating blocks in Drupal

Submitted by psicomante on Fri, 2007-04-20 09:33.

Howto|Tutorial: Floating Blocks in Drupal con jquery

Ho avuto un'idea ieri sera, far svolazzare in mezzo alla pagina dei blocchi caricati dinamicamente, all'interno di una qualsiasi installazione di Drupal. E così ho fatto Smiling
Nulla di così difficile, o per soli esperti. L'operazione è banale, e anche piuttosto incompleta.

Eccovi l'anteprima:

Floating blocks in Drupal

Requisiti:

  1. Drupal,e un tema in PHPTemplate (ovvio)
  2. La libreria xWin per jQuery
  3. 10 minuti di tempo

Inserire nel tema le due librerie fondamentali, più il CSS, nella cartella xwin. Creare nel template una sezione chiamata, ad esempio, "floating", ed inserire nel page.tpl.php il riferimento alla sezione più una "id".

Ecco il codice:

Aggiungere gli script e il css nell'head.

<script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/jQueryxWin.js"></script>
    <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/jquery.xwin.js"></script>
    <script type="text/javascript" src="<?php print base_path() . path_to_theme() ?>/xwin/script.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="<?php print base_path() . path_to_theme() ?>/xwin/xwin.css" />

Codice dello script da inserire nella pagina, io l'ho inserito in script.js

$(document).ready(function() {
    $("#floating1").xWin({
        show:    "si",
        top:     20,
        left:     50,
        width:    200
    });
  $("#floating2").xWin({
        show:    "si",
        top:     20,
        left:     500,
        width:    200
    });
});

Le due sezioni nel page.tpl.php

<div class="xWin" id="floating1"><?php print $floating1 ?></div>
<div class="xWin" id="floating2"><?php print $floating2 ?></div>

Le sezioni nel template.php

function garland2_regions() {
  return array(
       'left' => t('left sidebar'),
       'right' => t('right sidebar'),
       'floating' => t('floating1'),
       'floating2' => t('floating2')
  );
}

KNOWN BUGS
E' incompatibile, con quasi tutti i moduli che interagiscono con il DOM, io ho provato JsTools e DHTML_menu

TODO
Ricordarsi la posizione, le dimensioni e non far ricaricare con effetto comparsa ogni volta i blocchi. Insomma è solo una tech demo per vedere le potenzialità di Drupal Sticking out tongue


Fico! Lo voglio *_*

Fico! Lo voglio *_*

Mi piacerebbe creare un

Mi piacerebbe creare un blocco fluttuante ma non riesco seguendo il tuo post... potresti spiegare meglio il procedimento ?
Grazie
Vincenzo

Ciao Vincenzo. Si forse è

Ciao Vincenzo. Si forse è un pò troppo tecnico il post. Se puoi dirmi in dettaglio cosa non ti funziona, ti posso aiutare in modo mirato. Eye-wink

EDIT: C'era un errore nel codice javascript, ho corretto. Prova a controllare se era per quel motivo che non ti funzionava.

Post new comment

Smileys
:);):(:D}:):P:O:?8):jawdrop::sick:
The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <div> <br> <img> <strike> <div> <img>
  • Lines and paragraphs break automatically.
  • You may post PHP code. You should include <?php ?> tags.
  • Textual smileys will be replaced with graphical ones.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options

CAPTCHA
Rispondi alla domanda se sei umano!
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.

Recent comments

This site is proudly powered by Drupal 5.2 and Drupal Italia .

Commentatori più attivi

Ecco la lista dei 5 commentatori più attivi su Psicomante Blog!
5ThirtyOne Design | Psicomante's Blog | Top