I'm attempting to display a login form when the user clicks a line "Login" on my page. As a user clicks the link, the intention is to use JQuery to change the CSS style of the div class from "display: none;" to "display: block;".
I've tested this in the W3 Schools code editor and it seemed to work fine. However, when I tried applying this to my wordpress site, it does not work.
I've modified the code in within the page's head tags, the content area, and of course the css file. Here's the snippets of code from each file:
style.css
#breadcrumbs-login { position: relative; float: right; color: #fff; padding-top: 9px; }
#breadcrumbs-login a { color: #fff; }
#floating-login { position: absolute; background-color: #999; color: #000; z-index: 10; right: 10px; padding: 5px; border: 1px; }
includes/breadcrumbps.php
<div id="breadcrumbs-login">
<?php if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
echo 'Welcome ' . $current_user->user_firstname;
} else { ?>
<a href="#" id="floating-login-trigger">Login</a> |
<div id="floating-login" class="login_onclick" style="display:none;">
<?php echo do_shortcode('[bbp-login]'); ?>
</div>
<?php } ?>
</div>
and of course the within the head tags in header.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#floating-login-trigger").click(function(){
$("login_onclick").css({
"display": "block;"
});
});
});
</script>
Any help is greatly appreciated. Also, if anyone knows of an easier way to do this (such as plugins designed for this type of task), I'm open to suggestions as I haven't found much in my own searches.
Aucun commentaire:
Enregistrer un commentaire