CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapjquery-ui
1_bug
1_bug

Reputation: 5717

Slide bootstrap element inline

My problem is keeping prepended element (glyphicon) with existing text inline.

I have a text and when user hover it I prepend icon with slide effect from JQuery UI 1.10.2. But prepended icon push my text to new line.

This is my html:

<div class="hover-me">
  <h4>My title</h4>
</div>

And jQuery:

$('.hover-me').hover(function() {
     $('<span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px;"></span>&nbsp;').prependTo($(this).find('h4')).toggle('slide', { direction: 'left' }, 400);
}, 
function() {
    $(this).find('.glyphicon').hide().toggle('slide', { direction: 'right' }, 400);
});

I have made some example in JSFiddle too.

The second problem is hide effect (on mouseleave event). Icon slide from right to left but not hide.

How can I keep glyphicon and text in one line, and why icon not disappear on mouseleave event?

Upvotes: 0

Views: 53

Answers (1)

Banzay
Banzay

Reputation: 9470

You can define gliphicon just in the html: 

<div class="hover-me">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="display: none; font-size: 15px; line-height: 35px;"></span>&nbsp;<h4>My title</h4>
</div>

$('.hover-me').mouseenter(function() {
     $(this).find('.glyphicon').show('slide', { direction: 'left' }, 400);
});
$('.hover-me').mouseleave(function() {
    $(this).find('.glyphicon').hide('slide', { direction: 'right' }, 400);
});

To prevent wrapping text in new line make blocks floated left: 

.hover-me span, .hover-me h4{
  display: block;
  float: left;
}

Upvotes: 1

Related Questions