TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)
-   -   Class names and reducing onclick events... (http://www.talkphp.com/javascript-ajax-e4x/5254-class-names-reducing-onclick-events.html)

delayedinsanity 02-03-2010 05:27 AM

Class names and reducing onclick events...
 
One day I'll finally find the time to sit down and learn AJAX, but until I do...

Long story short:

javascript Code:
$('.'+howDoIgetThis+'_parent').click(function(){
    $('.'+andPutItHere+'_child').toggle();
});

So that an element with the class 'a_parent' opens 'a_child', and 'b_parent' opens 'b_child' etc.

delayedinsanity 02-03-2010 08:45 PM

sketch? Where are youuuuu? SKETCH?! ;)

adamdecaf 02-04-2010 12:28 AM

I know this isn't jQuery, but this should give you a good idea how to do it.

javascript Code:
// So that an element with the class 'a_parent' opens
// 'a_child', and 'b_parent' opens 'b_child' etc.

function listen(parent_id, child_id) {

  // Grab the base element to listen for
  var parent = document.getElementById(parent_id);

  // Listen on that element for the click to open the child.
  parent.onclick = function (child_id) {
     
     // Grab and check the child's style.
     var child = document.getElementById(child_id);
     
     // You could check the .style.height, or .style.visibility
     if (child.style.display === 'none') {
         
          // Show the child element
          // You could use inline, inherit, or auto (CSS properties)
          child.style.display = 'block';
         
     } else {
         
          // Hide the child
          child.style.display = 'none';
         
     }

   }
}

delayedinsanity 02-04-2010 01:23 AM

Forgive my ignorance, but since that's a function, wouldn't I still have to implement it in an onclick event? The reason I ask is because the current function I use looks like this;

javascript Code:
function toggle_display(id){
    jQuery('.'+id+'_child').toggle();
}

...and works via the following (shown in its php form);

php Code:
'<a href="#' . $label . '_target" id="' . $label . '_parent" onclick="toggle_display(\'' . $label . '\'); click_parent(this);">'

The solution I'm hoping for would allow me to remove the onclick attribute completely, reducing the amount of html generated. This is part of a WordPress plugin that generates long lists of MLS listing results, so every byte I reduce in the generation, the quicker things will load.

adamdecaf 02-04-2010 10:34 PM

This won't allow you to remove them, but it will allow you to only assign the onclick event handlers to specific elements. Just pass it an array of element ID's that you want it to watch and it should work.

javascript Code:
function watch_elms(elms) {
// This function will grab the elements to watch and assign a
// function to show/hide them when the parent (watched) elmement
// is clicked.

   var i, count = elms.length, return_elms = [];

   for(i = 0; i < count; i++) {

      // Assign the elements to an array so we can watch them.
      return_elms[i] = document.getElementById(elms[i]);

      // Now that we're watching them assign an onclick event
      // handler to them.
      return_elms[i].onclick = function () {

         // Check if the child is visible or not and do the
         // opposite action (show if hidden and hide if shown).
         if (return_elms[i].firstChild.style.display === 'none') {
         
            // Show the child element
            // You could use inline, inherit, or auto (CSS properties)
            return_elms[i].firstChild.style.display = 'block';
         
         } else {
         
            // Hide the child
            return_elms[i].firstChild.style.display = 'none';
         
         }

      }

   }

   return return_elms;
}

// We should return the elements to get them on a level where
// you can manage them more (if you keep them in a variable
// you risk losing them when the function exists and the non-
// ability to edit the properties further.
var watched_elms = watch_elms(['a_parent', 'b_parent']);

sketchMedia 02-05-2010 12:32 AM

Quote:

Originally Posted by delayedinsanity (Post 29912)
sketch? Where are youuuuu? SKETCH?! ;)

What? Whaaaat?! Im here!

without properly understanding your problem, its 00:30 atm so my brain isnt working fully!

Bit of jQuery magic:
javascript Code:
$(function(){
    $('a.parent').click(function(e){
        //stop browser from doing default action
        e.preventDefault();
        //get parent class
        var classes = $(this).attr('class');
        var index   = classes.indexOf(' ');
        $('div.child.' + classes.substr(index + 1, (classes.length - index))).toggle();
    });
})
Using this HTML:
html Code:
<a href="#" class="parent A">Click to toggle One</a>
    <a href="#" class="parent B">Click to toggle Two</a>
    <a href="#" class="parent C">Click to toggle Three</a>
    <a href="#" class="parent D">Click to toggle Four</a>

    <div class="child A">
        Child One
    </div>
    <div class="child B">
        Child Two
    </div>
    <div class="child C">
        Child Three
    </div>
    <div class="child D">
        Child Four
    </div>

And a small bit of css:

css Code:
.child { display: none; background: #000; padding: 2em; color: #fff }

Is that what your after my dear friend? or have I completly mis-understood?! (which incidentally, wouldnt surprise me, me brains a bit low on the energy front)

sketchMedia 02-05-2010 12:44 AM

Sigh, just thought this might also be what you may need (even simpler if it is!):

javascript Code:
$(function(){
    $('.parent a').click(function(e){
        e.preventDefault();
        $('+div.child', this).toggle();
    });
});

html Code:
<div class="parent">
            <a href="#">Click to open child of A</a>
            <div class="child">
                Child of A
            </div>
        </div>
        <div class="parent">
            <a href="#">Click to open child of B</a>
            <div class="child">
                Child of B
            </div>
        </div>

and with that, Im off to bed!

delayedinsanity 02-05-2010 12:52 AM

After looking it over, I'm thinking the second example would be a much more simplified method of doing it, which (not understanding javascript very well) hadn't even crossed my mind. All the child divs are wrapped in a parent so that should work.

I'm in the middle of completing another part of the project, but as soon as I have the chance I will try implementing this and report back on the results.

I really have to take a few weeks off and learn some of this stuff.

adamdecaf 02-05-2010 12:55 AM

Quote:

Originally Posted by delayedinsanity (Post 29929)
After looking it over, I'm thinking the second example would be a much more simplified method of doing it, which (not understanding javascript very well) hadn't even crossed my mind. All the child divs are wrapped in a parent so that should work.

I'm in the middle of completing another part of the project, but as soon as I have the chance I will try implementing this and report back on the results.

I really have to take a few weeks off and learn some of this stuff.

It's not that hard to learn javascript and the DOM, I just don't know jQuery very well, so I think somethings were lost in the process. (I taught myself the 'old fashioned' way of writing javascript.)

delayedinsanity 02-05-2010 03:41 AM

And as a result you'll probably wind up being better at it than most of the new schoolers learning just the most recent techniques. Personally I'll probably wind up on the other side of the fence from you - jQuery has impressed me with it's ability to do pretty much everything I've ever asked from it, and I prefer to focus on PHP, not fancy schmancy effects. Just need to learn enough to be dangerous... :D

adamdecaf 02-05-2010 03:56 AM

Quote:

Originally Posted by delayedinsanity (Post 29932)
And as a result you'll probably wind up being better at it than most of the new schoolers learning just the most recent techniques. Personally I'll probably wind up on the other side of the fence from you - jQuery has impressed me with it's ability to do pretty much everything I've ever asked from it, and I prefer to focus on PHP, not fancy schmancy effects. Just need to learn enough to be dangerous... :D

I'm just glad that I hunkered down and learned JS and the DOM from the bottom up, now I can read jQuery/MooTools/$fx()... code and understand each step that it would take to do on a built in function. I love the frameworks, they're great for quick build time, or for beginners, but a solid base on what that framework actually does is invaluable.

sketchMedia 02-05-2010 09:31 AM

Glad they helped and my half asleep antics were at least somewhat useful!

Yea JS isn't fabulously difficult to learn, it can however provide a massive headache when browser incompatibility comes into the equation, Internet Exploder! ARGH!!!!!!

Personally I love javascript, I think its the most misused and misunderstood languages out there today and once you get to grips with its rather unconventional object model its awesome!

Anyway I suppose I'd better do some work now.

Now where did I put my coffee ...

adamdecaf 02-06-2010 04:47 PM

Adding on sketch's post, if you have just over an hour of free time you should check out this Google Tech Talk on: "Javascript -- The Good Parts". It's quite good and points out several common misuses of JS.

sketchMedia 02-06-2010 05:00 PM

Quote:

Originally Posted by adamdecaf (Post 29944)
Adding on sketch's post, if you have just over an hour of free time you should check out this Google Tech Talk on: "Javascript -- The Good Parts". It's quite good and points out several common misuses of JS.

Yea thats an awsome video, watched it a few months ago and had forgotten about it, thanks for reminding me!


All times are GMT. The time now is 01:20 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0