I've been using a rollover JavaScript plugin to create smooth transitional effects when users hover over clickable page elements. Everything was going well until I decided to switch to making ajax calls instead of page loads for dynamic content. The problem is, I don't fully understand how to modify the plugin because I lack knowledge of JavaScript.
Can someone guide me on implementing a method that will keep an element opaque after it's clicked until another element is clicked?
Below is a snippet from the plugin:
$(document).ready(function(){
$("#leftBar .divider, #leftBar .dividerLast").fadeTo("9000", 0.8);
$("#leftBar .divider, #leftBar .dividerLast").hover(function(){
$(this).fadeTo("5000", 1.0);
},function(){
$(this).fadeTo("5000", 0.8);
});
});
And here is my code on the front end:
<div class="divider" onclick="$('#employee_form').submit(); SetBackgrounds(); $(this).css('background','url(common/css/images/leftBarBG.gif) top repeat-x');">
<img src="common/img/employee_image.jpg" class="float"/>
<h2>Employee Name</h2>
<h3>Founder & CEO</h3>
<p>We're passionate about bringing your great ideas to life on the web, and in print.</p>
<p><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8f87bab67d9bdd7ddc4bbe24b6b0bdbdb899bdb0">@</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30555d6e49757364494159685057427176456a676f40">[email protected]</a></a></p>
</div>
I have been making ajax calls using the onclick form submission.
The SetBackgrounds() function that I'm calling onclick needs improvement as I'm still new to JavaScript. It's not as smooth as I'd like, but once we get it working, it should mask sudden background changes. Any constructive criticism is welcome:
function SetBackgrounds()
{
$("#leftBar .divider").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x');
$("#leftBar .dividerLast").css('background','url(common/css/images/leftBarBG-hover.gif) top repeat-x');
$("#leftBar .divider:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x');
$("#leftBar .dividerLast:hover").css('background','url(common/css/images/leftBarBG.gif) top repeat-x');
}
Update: The forms being submitted are hidden forms that submit to a PHP script I wrote that queries a database for employee bios. While there are no issues with the query, understanding this may provide context on what these buttons achieve. The problems I face with this script are purely aesthetic.