CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrap
cat
cat

Reputation: 749

How can I make the twitter-like hover 'Follow' button with bootstrap?

Now I have the button with which, I can follow user, or un-follow.
Now when the target user is already followed. it's shown just like this.

Un-Follow

Then the target user is not followed, it's shown just like this.

Follow

I'd like it to be shown 'following' when the target user is already followed.
Then when I bring mouse cursor over the button, the display should be changed to 'Un-Follow'.

How can I do that with bootstrap?

view

<% if user_signed_in? %>
    <% unless user == current_user %>
      <% if current_user.following?(user) %>
        <%= link_to(unfollow_user_path(user), :remote => true, :class => 'btn') do %>
       <i class="icon-remove"></i>
       Un-Follow
     <% end %>
      <% else %>
        <%= link_to(follow_user_path(user) ,:remote => true, :class => 'btn btn-primary') do %>
        <i class="icon-ok icon-white"></i>
        Follow
        <%end%>
      <% end %>
    <% end %>
<% else %>
        <%= link_to(new_user_session_path , :class => 'btn btn-primary') do %>
        <i class="icon-ok icon-white"></i>
        Follow
        <%end%>
<% end %>

HTML

<a href="/user/1/follow" class="btn btn-primary" data-remote="true">
    <i class="icon-ok icon-white"></i>
    Follow
</a>

<a href="/user/1/unfollow" class="btn btn-primary" data-remote="true">
    <i class="icon-remove icon-white"></i>
    Un-Follow
</a>

UPDATE:

<a href="/user/1/unfollow" class="btn" data-remote="true" onhover="someFunction()">
    <i id="Following" class="icon-remove"></i>
    Following
</a>

Upvotes: 2

Views: 1997

Answers (1)

smooth_smoothie
smooth_smoothie

Reputation: 1343

Using the onHover event You can use jQuery to change the "class" attribute of the button you want to change the text too.

i.e. 

<a href="/user/1/follow"  onHover="someFunction();" class="btn btn-primary" data-remote="true">
    <i id="Following" class="icon-ok icon-white"></i>
    Following
</a>


someFunction() {
  $('i#Following').attr("class", "icon-ok icon-white").innerText("Unfollow");
}

you get the picture hopefully.

Edit: This is the full code that should fire the code in someFunction on mouse over.

<html>

<head>
<script type="text/javascript">

function someFunction()
{
 alert("Hello");
}
</script>
</head>

<body>
<a href="/user/1/unfollow" class="btn" data-remote="true" onmouseover="someFunction();return true;" >
    <i  id="Following" class="icon-remove"></i>
    Following
</a>
</body>

</html>

Upvotes: 1

Related Questions