WordPress.org

Forums

Shortcode jumps out to first place inside div (5 posts)

  1. LapanWebsite
    Member
    Posted 1 year ago #

    Lets take simple example:

    function foobar_func( $atts ){
    	return "foo and bar";
    }
    add_shortcode( 'foobar', 'foobar_func' );

    This will work nice.

    But this, when you need to call an javascript inside shortcode:

    function foobar_func( $atts ){ ?>
    <?php echo $content; ?>
    <script type="text/javascript">
    ......
    </script>
    <?php }
    add_shortcode( 'foobar', 'foobar_func' );

    The second one will jump to first place inside div.
    And it is needed to call jquery or javascript inside.

  2. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    Why do you need the JavaScript code itself to be inside a particular <div>?

  3. LapanWebsite
    Member
    Posted 1 year ago #

    Why do you need the JavaScript code itself to be inside a particular <div>?

    Text collapse jQuery, but I fixed it.
    Thanks.

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    do not use 'echo' in shortcodes.

    http://codex.wordpress.org/Shortcode_API

    Any string returned (not echoed) by the shortcode handler will be inserted into the post body in place of the shortcode itself.

  5. LapanWebsite
    Member
    Posted 1 year ago #

    do not use 'echo' in shortcodes.

    Thanks, alchymyth.

    I made shortcode this way, hope it's ok:

    function text( $atts, $content = null ) {
    	return '<a class="more-text" style="float: right;" href="#lapan">Više</a>
    <div class="text" style="display: block; margin-left: 160px; height: 20px; overflow: hidden; width: 70%;">'.$content.'</div>
    <div style="display:none;">
    <script type="text/javascript">
    jQuery(\'.more-text\').click(function() {
        if(jQuery(\'.text\').css(\'height\') != \'20px\'){
            jQuery(\'.text\').stop().animate({height: \'20px\'}, 200);
            jQuery(this).text(\'Vise\');
        }else{
            jQuery(\'.text\').css({height:\'100%\'});
            var xx = jQuery(\'.text\').height();
            jQuery(\'.text\').css({height:\'28px\'});
            jQuery(\'.text\').stop().animate({height: xx}, 400);
            jQuery(this).text(\'Manje\');
        }
    });
    </script>
    </div>';
    }
    add_shortcode( 'text', 'text' );

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.