Run/fire/trigger javascript on button click?

Question

Well I don't know correct word for this so I wrote three of them, hope you wont mind...

Now, my question. I have javascript that is running on pageload as it's usual... The script hide specified id's and reveal them on click. Let's call this script "hide on load".

My problem here is, that another javascript, let's call it "news" is running as well on page load and I can see it only 1 second, until another script hide div id's.

Once I click on specified div that should run reveal "news", nothing happends. I can see that "hide on load" running fading (fadein) but nothing is being revealed.

Hide on Load script:

$(window).load(function(){
var activeElement;

function activateElement( eltSuffix ) {
    if( activeElement ) {
        activeElement.fadeOut( 500, function() {
            activeElement = $('#content-reveal-'+eltSuffix);
            activeElement.fadeIn( 500 );
        } );
    } else {
        activeElement = $('#content-reveal-'+eltSuffix);
        activeElement.fadeIn( 500 );
    }
}

$(document).ready( function() {
    $('#content div').hide();
    $('#info a').click( function() {
        activateElement('info');
    } );
    $('#search a').click( function() {
        activateElement('search');
    } );
    $('#music a').click( function() {
        activateElement('music');
    } );
    $('#socials a').click( function() {
        activateElement('socials');
    } );
} );
});

News script:

    $(document).ready(function () {
        $('#newsticker_1').newsticker({
            'style': 'fade',
            'showControls': false,
            'autoStart': true,
            'fadeOutSpeed': 'slow',
            'fadeInSpeed': 'slow',
            'transitionSpeed': '4000',
            'pauseOnHover': true
        });
})(jQuery);

Thank you!

Note that (function ($) and $(document).ready(function () do the same thing .... ie you only need one of them ! See the docs here — Manse
– Manse, Commented May 15, 2012 at 10:11

James · Accepted Answer · 2012-05-15 10:31:33Z

1

You can use onclick html on the div so....

<div id="whatyouwanttoclickon" onclick="news()"></div>

But you would have to name the function news like this.

function news(){
        $('#newsticker_1').newsticker({
            'style': 'fade',
            'showControls': false,
            'autoStart': true,
            'fadeOutSpeed': 'slow',
            'fadeInSpeed': 'slow',
            'transitionSpeed': '4000',
            'pauseOnHover': true
        });

Or you could use jquery like this....

$('#divyouwanttoclickon').click(function(){//putyourfunctioninhere});

answered May 15, 2012 at 10:31

James

3,2934 gold badges43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nonwip Over a year ago

Well, I use <a onClick :) but it's same thing... Thank you for this. I replaced function tho, instead of $(document).ready(function news(){ I used: $(window).load(function news (){ Works perfectly, thank you so much !

Collectives™ on Stack Overflow

Run/fire/trigger javascript on button click?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related