Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Hi to all it's a few days that I'm trying to add some new functions to my theme option-panel, you can see my questions here:

What's wrong with it? I'm trying to add a live preview of some modification BEFORE saving them but...I'm not able to add it...I'm almost a completely newbie in JS, I know a little PHP, enough CSS and HTML so here are the reasons of my questions...

Anyway my new idea is to add the possibility to DRAG & DROP some DIVs, place them on a map, save their position and show them inside my website.

I try to explain it better.

Actually in my option-panel I have 10 functions: zona1, zona2, zona3 ..... with 4 values:

  • zona1c = checkbox to choose if you want to show it or not
  • zona1x = X Axys position (it changes LEFT CSS ATTRIBUTE)
  • zona1y = X Axys position (it changes BOTTOM CSS ATTRIBUTE)
  • zona1l = user have to write the URL of the post linked to this point

Everything is working so if I write a value inside zona1x and zona1c is set to TRUE it shows the div in my website.

But I would like to improve this because sometimes I make mistakes so I don't want to go "live" before everything is good.

What I would like you to teach me is how to add a preview of that page then if zona1c is set to true I want to be able to move this DIV inside the preview (that is visible in my admin-panel) choose the right position, drop it and SAVE.

Is there any easy or STEP BY STEP (Please, I would like to learn something new) solution for my problem?

Thank you very much to all!

Let's start with the code:

This is my Functions.php : http://pastebin.com/8cVmne1s

This is my admin-panel.php: http://pastebin.com/xX8G4Zxr or:

<?php
/** Declare the themename and shortname -- Ecco il nome del template e la sua abbreviazione **/
$themename = "Appartamenti Acquario";

$shortname = "appaqua";
/** Set the array with all the theme options -- Impostiamo l'array con tutte le opzioni del tema **/

$options = array (

array(

"desc" => "<h3>IMPOSTAZIONI GENERALI</h3>",
"type" => "title"),
array( "name" => "Prima di cominciare",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Link pagina mappa",
    "desc" => "Inserisci il link alla pagina della mappa",
    "id" => $shortname."_pama",
    "type" => "text",
    "std" => " "),
array( "type" => "close"),
array( "name" => "General",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Logo URL",
    "desc" => "Inserisci il link all'immagine del tuo logo",
    "id" => $shortname."_logo",
    "type" => "text",
    "std" => " "),  
array( "type" => "close"),
array( "name" => "Homepage",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Homepage Immagine Slide 1",
    "desc" => "Inserisci il link alla prima immagine degli slide",
    "id" => $shortname."_header_img",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-1.jpg"),
array( "name" => "Homepage Immagine Slide 2",
    "desc" => "Inserisci il link alla seconda immagine degli slide",
    "id" => $shortname."_header_img2",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-2.jpg"),
array( "name" => "Homepage Immagine Slide 3",
    "desc" => "Inserisci il link alla terza immagine degli slide",
    "id" => $shortname."_header_img3",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-3.jpg"),
array( "name" => "Homepage Immagine Slide 4",
    "desc" => "Inserisci il link alla quarta immagine degli slide",
    "id" => $shortname."_header_img4",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-4.jpg"),
array( "name" => "Homepage Immagine Slide 5",
    "desc" => "Inserisci il link alla quinta immagine degli slide",
    "id" => $shortname."_header_img5",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-5.jpg"),
array( "name" => "Homepage Immagine Slide 6",
    "desc" => "Inserisci il link alla sesta immagine degli slide",
    "id" => $shortname."_header_img6",
    "type" => "text",
    "std" => "http://nextube.info/images/ImmijQuery/image-6.jpg"),
array( "type" => "close"),
array( "name" => "Footer",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Google Analytics Code",
    "desc" => "Inserisci il tuo codice Google Analytics per tracciare le visite che ricevi.",
    "id" => $shortname."_ga_code",
    "type" => "textarea",
    "std" => ""),
array( "type" => "close"),
array( "name" => "Social",
    "type" => "section"),
array( "type" => "open"),
array( "name" => "Indirizzo Feed",
    "desc" => "Feedburner è un sistema fornito da Google per ottimizzare la distribuzione dei tuoi feed, inserisci qui il link al tuo feed",
    "id" => $shortname."_feedburner",
    "type" => "text",
    "std" => get_bloginfo('rss2_url')),
array( "name" => "Facebook URL",
    "desc" => "Inserisci il link alla tua pagina Facebook",
    "id" => $shortname."_facebook",
    "type" => "text",
    "std" => "http://facebook.com/pages/Downloadtaky/325661998362"),
array( "name" => "Twitter URL",
    "desc" => "Inserisci il link al tuo account Twitter",
    "id" => $shortname."_twitter",
    "type" => "text",
    "std" => "http://twitter.com/downloadtaky"),
array( "type" => "close"),
array( "name" => "Punti sulla mappa",
    "type" => "section"),
array( "type" => "open"),
/** Copia da qui per aggiungere un nuovo punto - start copy to add a new point on the map **/
array( "name" => "Zona 1",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 1?",
        "desc" => "Seleziona se vuoi il primo fermaposto",
        "id" => $shortname."_zona1c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 1 Nome",
    "desc" => "Inserisci il nome del primo appartamento",
    "id" => $shortname."_zona1n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 1 Asse x",
    "desc" => "Scegli dove posizionare il primo punto, se attivato asse x",
    "id" => $shortname."_zona1x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 1 Asse y",
    "desc" => "Scegli dove posizionare il primo punto, se attivato asse y",
    "id" => $shortname."_zona1y",
    "type" => "text",
    "std" => "Top:???"),
array( "name" => "Zona 1 URL",
    "desc" => "Inserisci il link al post della zona 1",
    "id" => $shortname."_zona1l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
/** Copia fino a qui e rinomina progressivamente in zona2, zona3, zona4 ecc -- Copy from here to add a new zone like zone3, zone 4 and so on**/
array( "name" => "Zona 2",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 2?",
        "desc" => "Seleziona se vuoi il secondo fermaposto",
        "id" => $shortname."_zona2c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 2 Nome",
    "desc" => "Inserisci il nome del secondo appartamento",
    "id" => $shortname."_zona2n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 2 Asse x",
    "desc" => "Scegli dove posizionare il secondo punto, se attivato asse x",
    "id" => $shortname."_zona2x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 2 Asse y",
    "desc" => "Scegli dove posizionare il secondo punto, se attivato asse y",
    "id" => $shortname."_zona2y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 2 URL",
    "desc" => "Inserisci il link al post della zona 2",
    "id" => $shortname."_zona2l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 3",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 3?",
        "desc" => "Seleziona se vuoi il terzo fermaposto",
        "id" => $shortname."_zona3c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 3 Nome",
    "desc" => "Inserisci il nome del terzo appartamento",
    "id" => $shortname."_zona3n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 3 Asse x",
    "desc" => "Scegli dove posizionare il terzo punto, se attivato asse x",
    "id" => $shortname."_zona3x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 3 Asse y",
    "desc" => "Scegli dove posizionare il terzo punto, se attivato asse y",
    "id" => $shortname."_zona3y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 3 URL",
    "desc" => "Inserisci il link al post della zona 3",
    "id" => $shortname."_zona3l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 4",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 4?",
        "desc" => "Seleziona se vuoi il quarto fermaposto",
        "id" => $shortname."_zona4c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 4 Nome",
    "desc" => "Inserisci il nome del quarto appartamento",
    "id" => $shortname."_zona4n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 4 Asse x",
    "desc" => "Scegli dove posizionare il quarto punto, se attivato asse x",
    "id" => $shortname."_zona4x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 4 Asse y",
    "desc" => "Scegli dove posizionare il quarto punto, se attivato asse y",
    "id" => $shortname."_zona4y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 4 URL",
    "desc" => "Inserisci il link al post della zona 4",
    "id" => $shortname."_zona4l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 5",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 5?",
        "desc" => "Seleziona se vuoi il quinto fermaposto",
        "id" => $shortname."_zona5c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 5 Nome",
    "desc" => "Inserisci il nome del quinto appartamento",
    "id" => $shortname."_zona5n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 5 Asse x",
    "desc" => "Scegli dove posizionare il quinto punto, se attivato asse x",
    "id" => $shortname."_zona5x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 5 Asse y",
    "desc" => "Scegli dove posizionare il quinto punto, se attivato asse y",
    "id" => $shortname."_zona5y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 5 URL",
    "desc" => "Inserisci il link al post della zona 5",
    "id" => $shortname."_zona5l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 6",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 6?",
        "desc" => "Seleziona se vuoi il sesto fermaposto",
        "id" => $shortname."_zona6c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 6 Nome",
    "desc" => "Inserisci il nome del sesto appartamento",
    "id" => $shortname."_zona6n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 6 Asse x",
    "desc" => "Scegli dove posizionare il sesto punto, se attivato asse x",
    "id" => $shortname."_zona6x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 6 Asse y",
    "desc" => "Scegli dove posizionare il sesto punto, se attivato asse y",
    "id" => $shortname."_zona6y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 6 URL",
    "desc" => "Inserisci il link al post della zona 6",
    "id" => $shortname."_zona6l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 7",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 7?",
        "desc" => "Seleziona se vuoi il settimo fermaposto",
        "id" => $shortname."_zona7c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 7 Nome",
    "desc" => "Inserisci il nome del settimo appartamento",
    "id" => $shortname."_zona7n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 7 Asse x",
    "desc" => "Scegli dove posizionare il settimo punto, se attivato asse x",
    "id" => $shortname."_zona7x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 7 Asse y",
    "desc" => "Scegli dove posizionare il settimo punto, se attivato asse y",
    "id" => $shortname."_zona7y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 7 URL",
    "desc" => "Inserisci il link al post della zona 7",
    "id" => $shortname."_zona7l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 8",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 8?",
        "desc" => "Seleziona se vuoi l/'ottavo fermaposto",
        "id" => $shortname."_zona8c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 8 Nome",
    "desc" => "Inserisci il nome dell/'ottavo appartamento",
    "id" => $shortname."_zona8n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 8 Asse x",
    "desc" => "Scegli dove posizionare l/'ottavo punto, se attivato asse x",
    "id" => $shortname."_zona8x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 8 Asse y",
    "desc" => "Scegli dove posizionare l/' ottavo punto, se attivato asse y",
    "id" => $shortname."_zona8y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 8 URL",
    "desc" => "Inserisci il link al post della zona 8",
    "id" => $shortname."_zona8l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 9",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 9?",
        "desc" => "Seleziona se vuoi il nono fermaposto",
        "id" => $shortname."_zona9c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 9 Nome",
    "desc" => "Inserisci il nome del nono appartamento",
    "id" => $shortname."_zona9n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 9 Asse x",
    "desc" => "Scegli dove posizionare il nono punto, se attivato asse x",
    "id" => $shortname."_zona9x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 9 Asse y",
    "desc" => "Scegli dove posizionare il nono punto, se attivato asse y",
    "id" => $shortname."_zona9y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 9 URL",
    "desc" => "Inserisci il link al post della zona 9",
    "id" => $shortname."_zona9l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "name" => "Zona 10",
    "type" => "section"),
array( "type" => "open"),
array(  "name" => "Attivare zona 10?",
        "desc" => "Seleziona se vuoi il decimo fermaposto",
        "id" => $shortname."_zona10c",
        "type" => "checkbox",
        "std" => "false"),
array( "name" => "Zona 10 Nome",
    "desc" => "Inserisci il nome del decimo appartamento",
    "id" => $shortname."_zona10n",
    "type" => "text",
    "std" => "Nome dell'appartamento"),
array( "name" => "Zona 10 Asse x",
    "desc" => "Scegli dove posizionare il decimo punto, se attivato asse x",
    "id" => $shortname."_zona10x",
    "type" => "text",
    "std" => "Left:???"),
array( "name" => "Zona 10 Asse y",
    "desc" => "Scegli dove posizionare il decimo punto, se attivato asse y",
    "id" => $shortname."_zona10y",
    "type" => "text",
    "std" => "Top:???"),
    array( "name" => "Zona 10 URL",
    "desc" => "Inserisci il link al post della zona 10",
    "id" => $shortname."_zona10l",
    "type" => "text",
    "std" => "Indirizzo del post qui"),
array( "type" => "close"),
array( "type" => "close"),
);

function appaqua_add_admin() {

global $themename, $shortname, $options;

if ( $_GET['page'] == basename(__FILE__) ) {

    if ( 'save' == $_REQUEST['action'] ) {

        foreach ($options as $value) {
        update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

foreach ($options as $value) {
    if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

    header("Location: admin.php?page=admin-panel.php&saved=true");
die;

} 
else if( 'reset' == $_REQUEST['action'] ) {

    foreach ($options as $value) {
        delete_option( $value['id'] ); }

    header("Location: admin.php?page=admin-panel.php&reset=true");
die;

}
}

add_menu_page($themename, $themename, 'administrator', basename(__FILE__), 'appaqua_admin');
}

function appaqua_add_init() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("functions", $file_dir."/includes/css/functions.css", false, "1.0", "all");
wp_enqueue_script("rm_script", $file_dir."/includes/js/rm_script.js", false, "1.0");
wp_enqueue_script("site_preview", $file_dir."/includes/js/preview.js", false, "1.0");
};

function appaqua_admin() {

global $themename, $shortname, $options;
$i=0;

if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';

?>
<div class="wrap rm_wrap">
<h2><?php echo $themename; ?> Settings</h2>

<div class="rm_opts">
<form method="post">
<?php foreach ($options as $value) {
switch ( $value['type'] ) {

case "open":
?>

<?php break;

case "close":
?>

</div>
</div>
<br />


<?php break;

case "title":
?>
<p>To easily use the <?php echo $themename;?> theme, you can use the menu below.</p>


<?php break;

case 'text':
?>

<div class="rm_input rm_text">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'])  ); } else { echo $value['std']; } ?>" />
 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>

 </div>
<?php
break;

case 'textarea':
?>

<div class="rm_input rm_textarea">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>
    <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows=""><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id']) ); } else { echo $value['std']; } ?></textarea>
 <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>

 </div>

<?php
break;

case 'select':
?>

<div class="rm_input rm_select">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>

<select name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>">
<?php foreach ($value['options'] as $option) { ?>
        <option <?php if (get_settings( $value['id'] ) == $option) { echo 'selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?>
</select>

    <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
</div>
<?php
break;

case "checkbox":
?>

<div class="rm_input rm_checkbox">
    <label for="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></label>

<?php if(get_option($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = "";} ?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />


    <small><?php echo $value['desc']; ?></small><div class="clearfix"></div>
 </div>
<?php break; 
case "section":

$i++;

?>

<div class="rm_section">
<div class="rm_title"><h3><img src="<?php bloginfo('template_directory')?>/includes/css/images/trans.png" class="inactive" alt="""><?php echo $value['name']; ?></h3><span class="submit"><input name="save<?php echo $i; ?>" type="submit" value="Save changes" />
</span><div class="clearfix"></div></div>
<div class="rm_options">
<?php break;
}
}
?>
<input type="hidden" name="action" value="save" />
</form>
<form method="post">
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
<div style="font-size:9px; margin-bottom:10px;">Icons: <a href="http://www.woothemes.com/2009/09/woofunction/">WooFunction</a></div>
 </div>
 <iframe id="themepreview" name="themepreview" src="<?php echo get_option('appaqua_pama'); ?>/?preview=1"></iframe>
<?php
}
?>
<?php
$nonce = wp_create_nonce('site_preview');
?>
<?php
add_action('admin_init', 'appaqua_add_init');
add_action('admin_menu', 'appaqua_add_admin');
?>

This is the css stylesheet of the divs I would like to move with DRAG & DROP (only in backend): http://pastebin.com/pih7yaT1 or:

<?php define('WP_USE_THEMES', true);
require('./wp-blog-header.php');?>
.mappa{width:960px;height:394px;background:url(<?php bloginfo(template_url);?>/mappa/images/mappa.png);margin:0 auto;}
#zona1{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona1x');?>px;left:<?php echo get_option('appaqua_zona1y');?>px;}
#zona2{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona2x');?>px;left:<?php echo get_option('appaqua_zona2y');?>px;}
#zona3{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona3x');?>px;left:<?php echo get_option('appaqua_zona3y');?>px;}
#zona4{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona4x');?>px;left:<?php echo get_option('appaqua_zona4y');?>px;}
#zona5{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona5x');?>px;left:<?php echo get_option('appaqua_zona5y');?>px;}
#zona6{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona6x');?>px;left:<?php echo get_option('appaqua_zona6y');?>px;}
#zona7{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona7x');?>px;left:<?php echo get_option('appaqua_zona7y');?>px;}
#zona8{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona8x');?>px;left:<?php echo get_option('appaqua_zona8y');?>px;}
#zona9{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona9x');?>px;left:<?php echo get_option('appaqua_zona9y');?>px;}
#zona10{width:27px;height:27px;background:#000;z-index:10000;position:relative;top:<?php echo get_option('appaqua_zona10x');?>px;left:<?php echo get_option('appaqua_zona10y');?>px;}

I hope that someone can help me and please, if you need more info just ask... Thank you very much to all!

share|improve this question
2  
That's an intimidating amount of content to try and work through - you might want to simplify and summarise where possible, as well as correct the formatting! –  anu Mar 24 '11 at 12:36
    
@anu you are right but I still can't understand how to format it properly here... anyway I added all these files to let others know where they can "put their hands" I don't really know where I will need to add the scripts so... –  Downloadtaky Mar 24 '11 at 15:13
add comment

1 Answer 1

up vote 2 down vote accepted

3 steps:

php

<?php
wp_enqueue_script( 'jquery-ui-sortable');

html

<div class="metabox-holder">
   <div class="postbox-container">
    <div id="my_div" class="meta-box-sortables ui-sortable">
        <div class="postbox" id="el1">
            <h3 class="hndle"><span>title2</span></h3>
            <div class="inside">content1</div>
        </div>
        [...elements...]
        <div class="postbox" id="el20">
            <h3 class="hndle"><span>title20</span></h3>
            <div class="inside">content1</div>
        </div>
    </div>
</div>

javascript

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#my_div').sortable();
});
share|improve this answer
    
.. I can't understand very well how to add it to my admin-panel.php In my admin-panel I have 20 functions and each of these send 2 values: example zona1x (x-axys); zona1y (y-axys) so I need to add the functionality you wrote there to each of this DIV then as soon as the user chooses where to place this DIVs on a map he has to be able to save the position in 2 options : $zona1x and $zona1y so they will be visible even on the "live" website where NO ONE will be able to modify them. Could you please help me to add this to my admin-panel.php? Thank you very much! –  Downloadtaky Mar 24 '11 at 21:49
    
If you want to take a look to a litte part of my admin-panel.php you can click here: pastebin.com/DZSs87VW –  Downloadtaky Mar 24 '11 at 21:56
    
I'm testing the script you gave me on a simple HTML page and if I understood it well I can move IDs only to replace other IDs place so I can create a CSS grid on my map then assign to each one of them a Javascript call but even after this silly idea I still don't know how to save the place where the ID will be placed neither a fast way to add lines (columns = no problem... thank you: 960.gs !!!) –  Downloadtaky Mar 24 '11 at 22:51
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.