ansaurus

Question

Allow users to select an arbitrary element on the page

Answer 1

+3 A:

I personally am a fan of ExtJS (now Sencha), and this is fairly simple and straightforward to do using that framework. This is how I'd do it:

<body>
  <button id="content_define" class="zone_define">Content</button>
  <button id="sidebar_define" class="zone_define">Sidebar</button>
  <div id="template">
    <!-- put your template here -->
  </div>
</body>

<script type="text/javascript">
Ext.onReady(function() {
  Ext.select('button.zone_define').on('click', function(ev, target) {
    ev.stopEvent();

    // this listener is bound to two buttons, determine which one was pressed
    var zone = target.id.split('_')[0]; // 'content' or 'sidebar'

    // add a click listener listener to the template so that when an element within is clicked,
    // an Ajax request is initiated
    var template = Ext.get('template');
    template.addClass('targetable').on('click', function(ev, target) {
      template.removeClass('targetable');

      // this part is optional, in case the user clicks an <a> or <img> element,
      // you may want to get the block element containing the clicked element
      var target = ev.getTarget('div'); // or ul, table, p, whatever

      // invoke zone_capture on the click target (or containing block element)
      zone_capture(zone, target);
    }, window, {single: true});
    // the {single: true} part removes this listener after one click,
    // so the user has to go back and press the button again if they want to redefine
  });

  // this is the code to do the ajax request
  // and also add a class to the target element
  function zone_capture(zone, target) {
    // first, remove the class from elements which are already defined as this zone
    Ext.select(String.format('#template .{0}_zone', zone)).removeClass(zone + '_zone');

    // now add that class to the target
    target.addClass(zone + '_zone');

    // do the POST
    Ext.Ajax.request({
      method: 'POST',
      url: '/region/define',
      params: { // these are the params POSTed to your script
        template: Ext.get('template').dom.innerHTML
      }
    });
  }
});
</script>

I would also add the following CSS rules for hovering effects, etc.

#template.targetable:hover div { /* add div, p, table, whatever */
  border: 1px solid #f00;
}

#template.targetable {
  cursor: crosshair;
}

I would call this pseduo-code, but the idea should be enough to get you started. Since you are dealing with user input, you will have a lot of corner cases to check for before you can call this production-ready. It sounds like a cool way to define the template, good luck!

Jesse Dhillon 2010-07-16 23:16:14

Thanks! I'll let you know if the project ever gets off the ground :P

Chris T 2010-07-17 01:43:01

Answer 2

A:

its simple to implement it in jQuery : this simple example how to change an element class when its clicked by the users

<script type="text/javascript">
         $('a').click(function(){
               $(this).attr('class','newClass');
          });
             //mouseover
         $('a').mouseover(function(){
               $(this).attr('class','newClass');
          });
</script>

shox 2010-07-16 23:22:15

Answer 3

+1 A:

In plain old jQuery, let's see if I get your question. First, some markup:

<div id="header"></div>

<div id="sidebar"></div>

<div id="main">
    <div class="moveable-element">
        <ul class="content-panel">
            <li><a href="#" id="header">Header</a></li>
            <li><a href="#" id="sidebar">Sidebar</a></li>
            <li><a href="#" id="main">Main</a></li>
            <li><a href="#" id="footer">Footer</a></li>
        </ul>
        <p>This is content in the moveable-element.</p>
    </div>
</div>

<div id="footer"></div>

And the jQuery script (something like this):

$(function() {
    $('.moveable-element').hover(function() {
        $(this).find('.content-panel').show();
        $(this).css('border', '1px solid red');
    }, function() {
        $(this).find('.content-panel').hide();
        $(this).css('border', '1px solid black');
    }

    $('.content-panel a').click(function() {
        var class_name = $(this).attr("id");
        $(this).parents('.moveable-element').appendTo($('#'+class_name));
    }
}

And some parts of the CSS:

.content-panel {display: none; position: absolute;}
.moveable-element {border: 1px solid black; position: relative}

NOTE: I don't see the purpose of the AJAX in your question, please clarify. Also, this is very rough and for informational purposes, please don't expect it to work out of the box as is. If you want me to revise it though, I'd be happy to, just ask.

tjko 2010-07-16 23:48:36

In a way this is what I need but problem is the html isn't controlled by me (I just insert the script into it server side, or it's inserted with a bookmarklet). What would happen is if they click the element the script sends the new html to the server to be saved (basically it'd replace the selected element with a `<template:slot name="sidebar" />` or `<template:slot name="content" />` then send the new html)

Chris T 2010-07-17 01:33:16

This is not what he's trying to do. He has a template that he's showing somewhere in the document, and he has buttons which, when clicked, allow you to define which element in the template should be identified as the "content", "sidebar" etc. Use case is: 1. Click sidebar define button, 2. Click an element within the template portion of the document, 3. Indicate with CSS classes (or something else) that the clicked element is now the sidebar, 4. Submit the new template document to the server, with the CSS classes (or whatever) we just added.

Jesse Dhillon 2010-07-17 01:37:06

^ You explained what I wanted better than I did :P

Chris T 2010-07-17 01:41:55

ansaurus

tags:

views:

answers:

Allow users to select an arbitrary element on the page

related questions