CODEWITHSUNDEEP
jquerywordpressfunctionfancybox
Alex Gorcea
Alex Gorcea

Reputation: 77

FancyBox does not work inside function

I have an input form and on submit (pressed the enter key) I would like to show a Fancybox. I made a function for it, but it won't trigger. The strange part is that the alert works.

This is the function:

  <script type="text/javascript">
    function showBox(){
        $("#profile").fancybox({
            'width'             : '75%',
            'padding'           : '0',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'fade',
            'transitionOut'     : 'fade',
            'type'              : 'inline',
        });
        alert('ga');
    }
  </script>

And this is the form:

<form action="javascript:showBox()" method="get">
<input name="s" type="hidden" value="add" />
<input name="pr" type="text" class="ask" placeholder="Placeholder text. So far."/> 
</form>

I'm really at a loss here and I could use a hand.

EDIT: The entire file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Answers Archive<?php } ?> <?php wp_title(); ?></title>
<?
$option1 = get_option("WpAnswersoption1Options");
$pathfavico=str_replace('../','',$option1['favicon']);
?>
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url'); ?>/<? echo $pathfavico ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php if($option1['rss']!=''){ echo $option1['rss']; }else{bloginfo('rss2_url');} ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php wp_head(); ?>

<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() 
        {

            $("#profile").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });

            $("#profile-public").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });

$("#button_right").mouseover(function () {
      $(this).hide("slide", { direction: "down" }, 1000);
      alert("ga");
});

  });
  </script>


  <script type="text/javascript">
        function showBox(){
            $("#profile").fancybox({
                'width'             : '75%',
                'padding'           : '0',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade',
                'type'              : 'inline',
            });
            alert('fa')
        };
  </script>


<script>
    if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
</script>



</head>
<body>

<div id="container">
<?php do_action('beforehead'); //added by tomas ?>
<div id="header">

<div style="display: none;">
    <div id="profile_container">
        <div id="profile-picture">
            <div class="mask" style="padding-top:8px;"><?php
                global $current_user;
                get_currentuserinfo();
                echo get_avatar( $current_user->ID, 150 );
            ?>
            </div>
                <div class="details">
                    <h3>Change profile picture</h3>
            </div>

        </div>
        <div id="profile-name">
            <?php global $current_user;
                get_currentuserinfo();
                echo $current_user->user_login;
            ?> 
        </div>
        <div id="profile-fullname">
            <?php global $current_user;
                get_currentuserinfo();
                echo "(" . $current_user->user_firstname . "&nbsp;" . $current_user->user_lastname . ")";
            ?> 
        </div>

       <div id="social">
            <span class="icon">
                <a href="http://twitter.com/<?php echo get_user_meta(1, 'twitter', true); ?>" title="Follow <?php echo $current_user->user_login; ?> on Twitter"><img src="<?php bloginfo('template_directory'); ?>/images/social/twitter-icon.png" /></a>
            </span>

            <span class="icon">
                <a href="http://facebook.com/<?php echo get_user_meta(1, 'facebook', true); ?>" title="Add <?php echo $current_user->user_login; ?> on Facebook"><img src="<?php bloginfo('template_directory'); ?>/images/social/facebook-icon.png" /></a>
            </span>
       </div>
    </div>
</div>


<div style="display: none;">
    <div id="profile_container_public">
        <div id="profile-picture">
            <div style="padding-top:8px;">
            <?php
            if (have_posts()){
                echo get_avatar( get_the_author_meta('ID'), 150 );
            }
            ?>
        </div>
        </div>
        <div id="profile-name">
             <?php
            global $post;
            echo $post->post_author;
            ?>
  </div>
        <div id="profile-fullname">
        </div>

       <div id="social">
            <span class="icon">
                <a href="http://twitter.com/<?php the_author_meta('twitter'); ?>" title="Follow <?php echo $current_user->user_login; ?> on Twitter"><img src="<?php bloginfo('template_directory'); ?>/images/social/twitter-icon.png" /></a>
            </span>

            <span class="icon">
                <a href="http://facebook.com/<?php the_author_meta('facebook'); ?>" title="Add <?php echo $current_user->user_login; ?> on Facebook"><img src="<?php bloginfo('template_directory'); ?>/images/social/facebook-icon.png" /></a>
            </span>
       </div>
    </div>
</div>



<?php if (is_user_logged_in() ) {?>
<div id="welcome_text">Hello, &nbsp;<span id="welcome_user"><?php global $current_user; get_currentuserinfo(); echo $current_user->user_login  ?></span></div>
<?php } else {?>
<div id="welcome_text">Greetings, stranger. <span id="welcome_user"><a href="/wp-login.php?redirect_to=<?php echo $_SERVER['REQUEST_URI']; ?>" class="simplemodal-login">Log in</a></span> or <span id="welcome_user"><a href="/wp-login.php?action=register" class="simplemodal-register">Register</a></span>!</div>
<?php } ?> 

<?php if (is_user_logged_in() ) {?>
<a href="<?php echo wp_logout_url( home_url() ); ?>" id="power_out"></a>
<a href="" id="help" title="Help"></a>
<a href="<?php bloginfo('url'); ?>/profile/<?php global $current_user; get_currentuserinfo(); echo $current_user->user_login  ?>" id="user" title="Profile"></a>

<?php } else {?>
<a href="/wp-login.php?redirect_to=<?php echo $_SERVER['REQUEST_URI']; ?>" class="simplemodal-login" id="power"></a>
<?php } ?>


<div id="righthead">
<?php do_action('righthead') ?>
</div>
<?
$option1 = get_option("WpAnswersoption1Options");
$pathlogo=str_replace('../','',$option1['logo']);
?>


<?php if (is_user_logged_in() ) {?>
<div id="avatar_box" >
<a id="profile" href="#profile_container"><?php
        global $current_user;
        get_currentuserinfo();
        echo get_avatar( $current_user->ID, 64 );
 ?></a>
 </div>
<?php } else {?>
<div id="avatar_box">
<?php
        global $current_user;
        get_currentuserinfo();
        echo get_avatar( $current_user->ID, 64 );
 ?>
 </div>
<?php } ?>



</div><!-- end header -->
<div id="logo"><a href="<?php bloginfo('url'); ?>" title="I Want An Idea!" id="logo"></a></div>

<div id="askbox">
    <div id="askbox_text_border">
        <div id="askbox_text">
            <form action="javascript:showBox()" method="get">
                <input name="s" type="hidden" value="add" />
                <input name="pr" type="text" class="ask" placeholder="I want an awesome idea about..."/> 
            </form>
        </div>
    </div>
</div><!-- end askbox -->

<div id="main">




<!--<div id="recentbox">
<ul>
<li><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('url'); ?>/wp-content/themes/Wp-Answers-Black/images/recent-button.gif" height="38" width="117" alt="Recent Ideas"/></a></li>
<li><a href="<?php bloginfo('url'); ?>/?s=popular"><img src="<?php bloginfo('url'); ?>/wp-content/themes/Wp-Answers-Black/images/popular-button.gif" height="38" width="127" alt="Popular Questions"/></a></li>
</ul>
</div>-->

Upvotes: 0

Views: 783

Answers (1)

JFK
JFK

Reputation: 41143

This 

$("#profile").fancybox();

doesn't trigger fancybox, it just binds the selector #profile to it so your function showBox() is actually trying to bind such selector to fancybox again (you already have an script that does that elsewhere in your document).

You still need to either, click on the selector or trigger the click via jQuery.

Since you already bound the selector #profile to fancybox in another script, maybe your function only needs to trigger it like:

function showBox(){
 $("#profile").trigger("click");
}

or maybe you would rather bind the submit event to a function that triggers fancybox instead of trying to attach it to the action attribute

$("#askbox_text form").bind("submit", function() {
 $("#profile").trigger("click");
});

Upvotes: 1

Related Questions