 |
Account Login
|
 |
 |
Latest Articles
|
 |
 |
IRC Channel
|
 |
 |
Associates
|
 |
 |
Associates
|
 |
|
 |
 |
|
 |
02-03-2010, 05:27 AM
|
#1 (permalink)
|
|
is cute and cuddly
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
|
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.
|
|
|
|
02-03-2010, 08:45 PM
|
#2 (permalink)
|
|
is cute and cuddly
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
|
sketch? Where are youuuuu? SKETCH?! ;)
|
|
|
|
02-04-2010, 12:28 AM
|
#3 (permalink)
|
|
The Addict
Join Date: May 2009
Posts: 287
Thanks: 5
|
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'; }
} }
|
|
|
|
02-04-2010, 01:23 AM
|
#4 (permalink)
|
|
is cute and cuddly
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
|
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.
|
|
|
|
02-04-2010, 10:34 PM
|
#5 (permalink)
|
|
The Addict
Join Date: May 2009
Posts: 287
Thanks: 5
|
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']);
|
|
|
|
|
The Following User Says Thank You to adamdecaf For This Useful Post:
|
|
02-05-2010, 12:32 AM
|
#6 (permalink)
|
|
The Prestige
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
|
Quote:
Originally Posted by delayedinsanity
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
|
|
|
|
|
The Following User Says Thank You to sketchMedia For This Useful Post:
|
|
02-05-2010, 12:44 AM
|
#7 (permalink)
|
|
The Prestige
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
|
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)
|
|
|
|
|
The Following User Says Thank You to sketchMedia For This Useful Post:
|
|
02-05-2010, 12:52 AM
|
#8 (permalink)
|
|
is cute and cuddly
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
|
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.
|
|
|
|
02-05-2010, 12:55 AM
|
#9 (permalink)
|
|
The Addict
Join Date: May 2009
Posts: 287
Thanks: 5
|
Quote:
Originally Posted by delayedinsanity
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.)
|
|
|
|
02-05-2010, 03:41 AM
|
#10 (permalink)
|
|
is cute and cuddly
Join Date: Mar 2008
Location: Vegas, Baby
Posts: 963
Thanks: 31
|
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
|
|
|
|
02-05-2010, 03:56 AM
|
#11 (permalink)
|
|
The Addict
Join Date: May 2009
Posts: 287
Thanks: 5
|
Quote:
Originally Posted by delayedinsanity
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.
|
|
|
|
02-05-2010, 09:31 AM
|
#12 (permalink)
|
|
The Prestige
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
|
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)
|
|
|
|
02-06-2010, 04:47 PM
|
#13 (permalink)
|
|
The Addict
Join Date: May 2009
Posts: 287
Thanks: 5
|
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.
|
|
|
|
02-06-2010, 05:00 PM
|
#14 (permalink)
|
|
The Prestige
Join Date: Oct 2007
Location: Manchester, UK
Posts: 854
Thanks: 32
|
Quote:
Originally Posted by adamdecaf
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)
|
|
|
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|