TalkPHP
 
 
Account Login
Latest Articles
» The basic usage of PHPTAL, a XML/XHTML template library for PHP
» Vulnerable methods and the areas they are commonly trusted in.
» Simple way to protect a form from bot
» The Basics On: How Session Stealing Works
» How to keep your forms from double posting data
IRC Channel
IRC Speech Bubble Join the friendly bunch on IRC...
(#TalkPHP on Freenode)

...Also available via a web interface.

See this thread for information on the TalkPHP Free Hugs Initiative™. Subject to availability.
Associates
Associates
CSS Tutorials
Reply
 
LinkBack Thread Tools Search this Thread Display Modes
Old 02-03-2010, 05:27 AM   #1 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default 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 is offline  
Reply With Quote
Old 02-03-2010, 08:45 PM   #2 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default

sketch? Where are youuuuu? SKETCH?! ;)
delayedinsanity is offline  
Reply With Quote
Old 02-04-2010, 12:28 AM   #3 (permalink)
The Addict
 
Join Date: May 2009
Posts: 287
Thanks: 5
adamdecaf is on a distinguished road
Default

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';
         
     }

   }
}
__________________
My Site
adamdecaf is offline  
Reply With Quote
Old 02-04-2010, 01:23 AM   #4 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default

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.
delayedinsanity is offline  
Reply With Quote
Old 02-04-2010, 10:34 PM   #5 (permalink)
The Addict
 
Join Date: May 2009
Posts: 287
Thanks: 5
adamdecaf is on a distinguished road
Default

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']);
__________________
My Site
adamdecaf is offline  
Reply With Quote
The Following User Says Thank You to adamdecaf For This Useful Post:
delayedinsanity (02-05-2010)
Old 02-05-2010, 12:32 AM   #6 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

Quote:
Originally Posted by delayedinsanity View Post
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)
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)

Last edited by sketchMedia : 02-05-2010 at 12:47 AM. Reason: removed some cruft
sketchMedia is offline  
Reply With Quote
The Following User Says Thank You to sketchMedia For This Useful Post:
delayedinsanity (02-05-2010)
Old 02-05-2010, 12:44 AM   #7 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

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!
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)
sketchMedia is offline  
Reply With Quote
The Following User Says Thank You to sketchMedia For This Useful Post:
delayedinsanity (02-05-2010)
Old 02-05-2010, 12:52 AM   #8 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default

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.
delayedinsanity is offline  
Reply With Quote
Old 02-05-2010, 12:55 AM   #9 (permalink)
The Addict
 
Join Date: May 2009
Posts: 287
Thanks: 5
adamdecaf is on a distinguished road
Default

Quote:
Originally Posted by delayedinsanity View Post
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.)
__________________
My Site
adamdecaf is offline  
Reply With Quote
Old 02-05-2010, 03:41 AM   #10 (permalink)
is cute and cuddly
 
delayedinsanity's Avatar
 
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
delayedinsanity is on a distinguished road
Default

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
delayedinsanity is offline  
Reply With Quote
Old 02-05-2010, 03:56 AM   #11 (permalink)
The Addict
 
Join Date: May 2009
Posts: 287
Thanks: 5
adamdecaf is on a distinguished road
Default

Quote:
Originally Posted by delayedinsanity View Post
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.
__________________
My Site
adamdecaf is offline  
Reply With Quote
Old 02-05-2010, 09:31 AM   #12 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

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 ...
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)
sketchMedia is offline  
Reply With Quote
Old 02-06-2010, 04:47 PM   #13 (permalink)
The Addict
 
Join Date: May 2009
Posts: 287
Thanks: 5
adamdecaf is on a distinguished road
Default

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.
__________________
My Site
adamdecaf is offline  
Reply With Quote
Old 02-06-2010, 05:00 PM   #14 (permalink)
The Prestige
Advanced Programmer Top Contributor Good Samaritan 
 
sketchMedia's Avatar
 
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
sketchMedia is on a distinguished road
Default

Quote:
Originally Posted by adamdecaf View Post
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!
__________________
mysql> SELECT * FROM `users` WHERE `users`.`clue` > 0;
Empty set (0.00 sec)
sketchMedia is offline  
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT. The time now is 07:21 AM.

 
     

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Inactive Reminders By Icora Web Design