CODEWITHSUNDEEP
jqueryhtmlcss
MortenMoulder
MortenMoulder

Reputation: 6648

Slide div from left to right, but not from the left side of the page?

I want to slide in some text from left to right, but I need it to be in the middle of the page. When I say middle, it is because this will slide from the left side of the page. Basically when I hover an element, I need it to display text next to it, but it has to slide in.

http://jsfiddle.net/do1wx8p8/

$("strong").on("mouseenter", function() {
    $("#nope").show("slide", { 
        direction: "left"
    }, 200);
}).on("mouseleave", function() {
    $("#nope").hide("slide", { 
        direction: "left"
    }, 200);
});

This works perfectly, but since it's a div, it will change it to display: block, which forces it down to the next line. What do I have to do, to make it slide in right after that colon? I basically want it to slide in from this:

to this:

All in one line. Help appreciated!

Upvotes: 2

Views: 1247

Answers (3)

Himechi90
Himechi90

Reputation: 348

Just wrap the dynamic element in another div that has inline block display property.

HTML:

<div class="text">
    <strong>Text here: </strong>
</div>
<div id="nope" class="text"><span>Sliding text</span></div>

CSS:

.text {
    display: inline-block;    
    float:left;
    margin-right: 10px;
}

See this fiddle (yours but updated)

http://jsfiddle.net/5wy0gw8a/

Good luck :)

Upvotes: 1

Joel
Joel

Reputation: 1321

You need to assign a few other CSS properties to achieve this. I added the following:

#nope {
    display: none;
    position: relative;
     float: left;

}
#rolloverme {
    display: block;
     float: left;
}


<strong id="rolloverme">Text here: </strong>
<div id="nope" >Sliding text</div>

The key is making the element float. This pulls it out of the regular box model positioning. https://jsfiddle.net/do1wx8p8/

Upvotes: 1

Mike Ross
Mike Ross

Reputation: 2972

This is a similar example for you,just the transition timing is different but you will get the idea of it

<div class="holdingbox">
  <span class="leftbox">Slide text</span>
  <span class="rightbox">
   <span class="content">Slide text here</span>
  </span>
</div>

Here is the css code, there are some flaws in it as i am not so good with transition.

.rightbox {
position: relative;
display:inline-block;
overflow:hidden;
height:30px;
vertical-align:top;
}
.content{
width:100px;
position:absolute;
left:0;
top:0;
}

And the jquery i got from some website for animate

$('.leftbox').hover(function(){
   $('.rightbox').animate({width: '90px'}, 1000)
   }, function(){
   $('.rightbox').animate({width: '0'}, 1000)
});

Upvotes: 0

Related Questions