|
|
| Page 1 of 1 |
|
|
 Posted: Mon, 25th May 2015 11:47 Post subject: Optimizing jquery code |
|
 |
I made a modal element for wordpress, and it's working relatively fine. I'm just wondering if my code is optimized enough
http://jsfiddle.net/rpdm95jm/
| Code: | //Modal element
var $modal_content_wrapper = $('.modal-content-wrapper');
var $modal_content = $('.modal-content');
var $modal_button = $('.modal-button');
var $modal_button_close = $('.modal-close');
$modal_content.each(function () {
$(this).css('top', ($(window).height() - $(this).outerHeight(true)) / 2);
});
$modal_button.each(function () {
var $button = $(this);
$button.on('click', function () {
var id = $button.data('button_id');
if ($('#modal_wrapper_' + id, '.modal').length == 1) {
$('#modal_wrapper_' + id).detach().appendTo('body').addClass('opened');
} else {
$('#modal_wrapper_' + id).addClass('opened');
}
});
});
($modal_button_close, $modal_content_wrapper).on('click', function () {
$modal_content_wrapper.removeClass('opened');
});
$(document).keyup(function (e) {
if (e.keyCode === 27) {
$modal_content_wrapper.removeClass('opened');
}
}); |
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 26th May 2015 03:02 Post subject: |
|
|
you don't need to loop through a jq object - it's not an array
apply it to the jq object and it'll affect every object under it
even so, doing it like this creates individual eventhandlers for each element, and only elements that already exist
this is fine for most sites, but for bigger web apps it will be a performance killer, and any new elements matching the description will be unbound
instead do this
| Quote: | $parentdiv.on('click','.buttonclass',function(){
alert('penis');
}); |
this creates a single eventhandler, which is actually on the parent but only applies to the buttons, present and those created in the future
a good read: http://www.elijahmanor.com/differences-between-jquery-bind-vs-live-vs-delegate-vs-on/
also, changing query strings with inserted ids is really ugly and i would just do it as a broader search and then filter for it from data
or save the proper custom name to button's data
|
|
| Back to top |
|
|
|
|
| Posted: Tue, 26th May 2015 06:36 Post subject: |
|
|
But what if I have multiple modal elements on site? They differ by the id only. If I would to call on just one buttonclass, that would trigger all the modal elements on the site.
I ask, because I've read that .each() is pretty taxing on a web site, and I need to make the theme I'm working on as light and as fast as possible.
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 00:59 Post subject: |
|
|
event only triggers on the clicked element
or rather
the eventhandler is a function that gets passed information about the element that triggered it
not the other way around
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 06:27 Post subject: |
|
|
So even if I click on one button with the same class as another, the modal that will pop up will be from that button only?
Because I remember doing something similar, and both modals on page 'popped' up.
I'll try your suggestion 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 09:15 Post subject: |
|
|
I did it like this, works great:
| Code: |
var $modal = $('.dnd-modal');
$modal.on('click', $modal_button, function(e){
e.preventDefault();
var id = $(this).find($modal_button).data('button_id');
if($('#dnd-modal_wrapper_'+id, '.dnd-modal').length == 1){
$('#dnd-modal_wrapper_'+id).detach().appendTo('body').addClass('opened');
} else{
$('#dnd-modal_wrapper_'+id).addClass('opened');
}
});
|
Thanks!
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 09:35 Post subject: |
|
|
Why build $('#dnd-modal_wrapper_'+id) 3 times?
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 14:08 Post subject: |
|
|
Woops 
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 14:41 Post subject: |
|
|
I have this in the end:
| Code: |
var $modal_content_wrapper = $('.modal-content-wrapper');
var $modal_content = $('.modal-content');
var $modal = $('.modal');
var $modal_button = $('.modal-button');
var $modal_button_close = $('.modal-close');
$modal_content.each(function(){
$(this).css('top', ($(window).height()-$(this).outerHeight(true))/2);
});
$modal.on('click', $modal_button, function(e){
e.preventDefault();
var id = $(this).find($modal_button).data('button_id');
var $wrapper_id = $('#modal_wrapper_'+id);
if($('#modal_wrapper_'+id, '.modal').length){
$wrapper_id.detach().appendTo('body').delay(200).queue(function(){
$(this).addClass('opened');
});
} else{
$wrapper_id.addClass('opened');
}
});
function modal_close(){
$modal_content_wrapper.removeClass('opened');
if ($modal_content.has('iframe')) {
$modal_content.find("iframe").attr("src", $modal_content.find("iframe").attr("src"));
}
}
($modal_button_close, $modal_content_wrapper).on('click', function(e){
e.preventDefault();
modal_close();
});
$(document).keyup(function(e){
if(e.keyCode === 27){
modal_close();
}
});
|
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 15:03 Post subject: |
|
|
use a string rather than the selector object and you can do this
| Code: | $modal.on('click', '.modal-button', function(e){
var id = $(this).data('button_id'); |
the selector object somehow breaks that
also you probably wanted .stopPropagation(), which stops event bubbling rather than .preventDefault(), which stops element default actions like submit or link navigate
|
|
| Back to top |
|
|
|
|
| Posted: Wed, 27th May 2015 19:40 Post subject: |
|
|
| shole wrote: | use a string rather than the selector object and you can do this
[code:1]$modal.on('click', '.modal-button', function(e){
var id = $(this).data('button_id');[/code:1]
the selector object somehow breaks that
also you probably wanted .stopPropagation(), which stops event bubbling rather than .preventDefault(), which stops element default actions like submit or link navigate |
I'll do the first suggestion. And the second one is done to prevent any accidental link activation if I click on a button. I just need to open the window, no submission or navigation .
"Quantum mechanics is actually, contrary to it's reputation, unbeliveably simple, once you take the physics out."
Scott Aaronson | chiv wrote: | | thats true you know. newton didnt discover gravity. the apple told him about it, and then he killed it. the core was never found. |
|
|
| Back to top |
|
|
| Page 1 of 1 |
All times are GMT + 1 Hour |
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
Powered by phpBB 2.0.8 © 2001, 2002 phpBB Group
|
|
 |
|
