I am working on a joomla 1.5 site. I have been asked to add oclick events to the top level nav for google event tracking like so
I can't see anyway to do this in the joomla admin. I know in jquery I could use the append command to add it but not sure how to add this with mootools.
can somebody point me in the right direction?
Look at the class of the elements in the top level nav, then u could do something very easy like:
window.addEvent('domready', function(){ //when the DOM is ready
$$('.class-name').addEvent('click', function(evt){
/* your event tracking, knowing that 'this' is the current .class-name element */
});
});
Related
I have an element in my product list page that I want to hide until the rest of the document has finished loading. (it's a list item with the class "hideme")
The JS solution doesn't work for me, so I'm looking for a scriptaculous method, which should work better in Magento.
Any help would be greatly appreciated.
Thanks!
If you want to make something client-side once the DOM has been loaded, you should try with this:
document.observe("dom:loaded", function() {
// initially hide all containers for tab content
$$('div.tabcontent').invoke('hide');
});
Is more like jQuery(document).ready();
Greetings.
I need to add click event in my xtype : 'panel' in extjs 4.1.3
But I can do this by two ways.
panel.mon(panel.getEl(), 'click', function(){
panel.fireEvent('click');
});
panel.getEl().on('click',function(){
panel.fireEvent('click');
});
So after doing above code, in controller I can get click event of panel and can do my stuff there. But I can't get difference between these ways.
And also other question in my mind is which is best way?
Please can anybody help me to understand this diff??
Thanks in advance.
mon is used when a component is binding an event to something that we want to remove when the component is destroyed. For example:
// Some shared menu
var menu = new Ext.menu.Menu();
var p = new Ext.panel.Panel();
p.mon(menu, 'show', function(){
p.update('Menu was shown');
});
// This automatically causes the show event on the menu
// to be removed, even though the menu wasn't touched
p.destroy();
In your case, a component will always clean up it's element, so it doesn't really matter either way.
I have button with id = new which loads the new page
$("#new").click(function(){
$('#message_area').load('new.php');
});
There is a button in new.php which sends message to database. But i have a problem with it , it only works for first time when page loads if i navigate to some other links via ajax and again load new.php using above code then send button in new.php does not work i have to refresh the page then it works. I think its because the send button in new.php is added after DOM is created for first time .
Please help Thanks in advance ..
You will need to post more details of your markup for a more accurate answer, but the general idea is to use event delegation. Bind the event handler to an ancestor of the button that does not get removed from the DOM. For example:
$("#message_area").on("click", "#yourButton", function() {
//Do stuff
});
This works because DOM events bubble up the tree, through all of an elements ancestors. Here you are simply capturing the event higher up the tree and checking if it originated from something you are interested in (#yourButton).
See jQuery .on for more. Note that if you're using a version of jQuery below 1.7, you will need to use delegate instead.
//jquery >= v1.7
$("body").on('click', '#new', function(){
$('#message_area').load('new.php');
});
//jquery < v1.7
$("#new").live('click',function(){
$('#message_area').load('new.php');
});
$("#new").live("click", function(){
$('#message_area').load('new.php');
});
just realized this was deprecated-- should be using on instead.. my bad.
To manage dynamically created elements like this, you need to use .on() (jQuery 1.7 and above) or .delegate() (jQuery 1.4.3 and above) to assign the events. Seems everyone has beaten me to the code, but I'll post this for the links to the functions.
I´m trying to add a click event via id to a div, so that when you click on it, it moves using effects.move, but after clicking on it the first time I want the id to be removed so that it doesn´t move anymore. So far I´ve tried using observe and stopObserving - and also removing the associated id so that it doesn´t move any more. I can´t figure out how to integrate a click event with an observe, without adding it directly to the div.
Any suggestions or relative links would be greatly appreciated!
link to jsfiddle:
http://jsfiddle.net/QN4TN/2/
Once you have set the observer removing the ID will not stop the event being handled. You should do something like this:
<div id="moveme">...</div>
<script type="text/javascript">
$('moveme').observe('click', function(ev) {
ev.stop();
ev.target.stopObserving('click');
... Call move function here ...
});
</script>
This will respond to the click by removing all the click handlers from the div (And then calling your scriptaculous code). If this is a problem, you should store the pre-bound handler and then pass that as the second parameter of the stopObserving method.
I'm using S5 Accordion Menu on my Joomla site.
http://jalousie.al-soft.ru/o-programme
What I need is to make it not slide down, when I reload page. It needs to work like accordion only when you click on it items, but not when the page reloads.
However it will be great, if it will be possible to save its open state for current page, but without accordion effect when page loads, just load it opened.
Sorry for my english. Let me know if you have any ideas.
Here is the source
http://jalousie.al-soft.ru/modules/mod_s5_accordion_menu/js/s5_accordion_menu.js
if you use the Accordion class that ships with mootols/more/FX just use the initialDisplayFx option to disable the initial animation. Something like the following code should work.
var s5_accordion_menu = new Accordion($('s5_accordion_menu'),
'h3.s5_am_toggler',
'div.s5_accordion_menu_element', {
opacity: true,
allowMultipleOpen: true,
display: s5_am_openElement,
alwaysHide: true,
initialDisplayFx: false
});
The signature of the class you use does not match the "official" one but maybe it is just a wrapper otherwise the answer is not, you can't disable the effect