I'm working on an animating text element.
The element changes one work with animation. Much like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
The thing is I don't like that when I change one word, the other words around it shift abruptly. I'm trying to use an effect where the other words that move around shift in a nice way. Like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
Does anyone know how to do this? or link me to a relevant solution?
I'm using HTML, CSS, and JS
There may be other ways of doing it but the most consistent cross browser way of doing it that I can think of is this. This is some guidance but code samples would be helpful.
You'll need to have the animated word wrapped in an extra span. Then you'll want to define the width of the outer span to be the width of the inner span before animation. You can do this with CSS if you know what the width will be or you can do it dynamically like this:
$(outerSelector).width( $(innerSelector).width() + 'px');
Animate the text then animate the width change:
$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);
This really only works for making it smaller. You can use this method for making the word bigger but you need to know the final width of the word first. Then you could simply have one span and do this:
$(selector).animate({width:newWidth}, 500);
If you're not worried about cross browser compatibility or if you can assume that everyone using the site will have a CSS 3 enabled browser then you can do it with CSS:
selector {
transition: width 0.5s;
}
Then you for shrinking text you would need to again set the outer span width like above, but after the animation of the text you could simply do this:
$(outerSelector).width( $(innerSelector).width() + 'px');
This has the same problem with needing to know that width in advance for transitioning to longer text. You could find out the width using another span with identical text.
.copy {
position: absolute;
left: -100%;
}
Then you could get the width of the copied version and use that as the new width for animation.
Related
I would like to style a div differently when its contents are clipped due to overflow: hidden or overflow: scroll.
On some browser there is no indication that the contents can be scrolled through, and this is not great for usability.
As far as I know there is no pseudo class of :clipped or anything like that. But that would be very useful. Is there any way to do this without writing my own algorithm?
Javscript solutions also welcome...
Question: Can you indicate the type of content your is holding (i.e., text or image or vector, etc.)
You could use something like
if ($("#div1").height() > $("#div1").outerHeight()) {
//apply class1
} else {
//apply class2
}
If you have an operation that changes the content of the element, this if could be used to apply a different class. height() gets the content height, whereas outerHeight() get the size of the outside of the div.
I'm trying to write a script with jquery that substitutes the CSS calc() function for browser compatibility. What I'm trying to rewrite is background-position: center calc(100% - 80px);
My attempt was somewhat like this:
$(window).resize(function () {
$('#element').css('background-position', 'center 100%').css('background-position', '-=80px');
});
but then what do I substract from, the first or the second value? I needed help on that, couldn't think of any possible solution :/
EDIT
To make it more clear, I was trying to have my background image positioned 'center bottom' with 80px y-axis offset, '100%' in this case equals 'bottom'.
ONE MORE EDIT
So finally, I found out.
For this to work, we need to have an img element somewhere on the page with display:none, containing the background image in original width. Let's give it an ID #referrer. We could as well create it with jquery and set the img's src to the element's background image, but it's rather complicated, we'd need to get the background image url from the DOM's CSS, so we just create it manually.
like this:
<img src="our-img.png" style="display:none;" id="referrer" />
then we can call this function when needed (in my case on window resize)
function larg() {
foo = $('#element').height() - $('#referrer').height();
$('#element').css('background-position-y', foo + 'px');
};
That's how we make the image's bottom aligned with the element's bottom.
Now all we need to do to make an offset is add the numeric value of offset pixels to foo.
We can modify our function to take an argument, so we don't have to modify it everytime we change our offset.
function larg(bar) {
foo = $('#element').height() - $('#referrer').height() + bar;
$('#element').css('background-position-y', foo + 'px');
};
Then we can call it basically from anywhere, in this fiddle, it's called by buttons onClick after resizing the div like this:
<button onClick="$('#element').css('height', '300px');larg(-80);">300/-80</button>
Note that it's not universal and works only if the background image is in original size.
FINAL EDIT
Don't ask me why didn't I know it.
background-position: center bottom 80px;
But I wrote a rather cool piece of code, right?
This line of CSS doesn't work in IE8, therefore the code is useful, though minimally.
if you want to be sure about parameter, you can use background-position-y only (not far all browsers)
(you can even simply add 80px transperent margin directly to your picture and always use background-position: center bottom; in css)
FINALLY I made working demo with unusual solution
$('#slide').css('background-position', 'center bottom 80px')
I have built a music player which loads songs from a database in a random order. I would like to display track info in an info panel. Because I do not know the length of artist/track names, I would like the info to scroll with a marquee effect if it's too big. I'm told browser implementations of the marquee tag are bad so I have got a jquery plugin to do that for me in a nice smooth way (I assume the auther knows why they're bad and has sorted it).
So far so good.
The trouble is the marquee doesnt work out whether it is needed, so I would like to run a check to see if it is necessary (ie if the length of the text warrants it or not) before calling it.
Now I'm sure the problem here is a simple css one but I cannot for the life of me figure it out - you know when you've been staring at something too long...
What I am attempting to do is call the marquee on an inner div if the contents of the inner div are bigger than the outer div but no matter what I do I can't seem to get my inner div to stretch horizontally beyond my outer div unless I set a fixed width (which isn't very helpful since I don't know the width of the content).
Here is my simplified HTML (wrapper contains some other stuff floated either side):
<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>
Here is my simplified css:
#mplayerinfo_wrapper{
width:545px;
height:30px;
margin-top:32px;
display:inline-block;
float:left;
}
#mplayerinfo_trackinfo{
height:30px;
width:238px;
display:inline-block;
overflow:hidden;
float:left;
}
#ti_inner{
float:left;
height:30px;
width:auto;
}
I am then hoping to use jquery to get the width of both elements, compare them and if inner is bigger than outer, launch the marquee like so:
var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};
If this can't be solved through css, is there away to get content width with jquery/javascript. Any ideas? Thanks in advance
Since you already know the width of the outer div, it may be easier to compare against that measurement rather that ask for that width dynamically. I've tried to re-create your simplified program and the problem I ran into was that the width() function only returned the default width of the div's, not the width as modified by css.
Your CSS looks appropriate for what you are trying to accomplish. I would try this for the comparison:
if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
$('#ti_inner').marquee();
}
I have had better results when using JQuery's inner and outer measurements.
the ti_inner CSS needs to have
white-space: nowrap;
to prevent the div just increasing in height,
We can then check the widths to see if a marquee is required.
I prefer to check the scrollWidth and the offsetWidth of the outer mplayerinfo_trackinfo instead of comparing the width of the 2 separate divs, mainly so that and margins,borders or padding dont get in the way, but in this example it doesnt really matter.
Heres a sample on JSFiddle marquee if required
Sorry it's in mootools but I'm new to all this web stuff myself and have not used any JQuery but from what I've read it should be easy to swap.
I'm trying to build a content slider for a client that displays their last four posts. Right now it's just plain HTML but I'm having a problem.
The slider box needs to be 180px high with a scrollbar when necessary. My slider seems to work except it makes the slide boxes all as tall as the tallest box. That leaves short posts with a ton of blank space under them.
Anyone know a fix?
http://jsfiddle.net/insitedesignlab/kQDcb/1/
I've seen that Quovolver does this, but I'd love to know how
The basic problem is #slidesContainer needs to be dynamically resized in order for it's parent to know how long to scroll for. One way to solve the problem is to change your animate call to include a callback:
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
},null,null,
function(){
$('#slidesContainer').css('height', $(this).children(".slide:nth-child(" + parseInt((Math.ceil(-1*slideWidth*(-currentPosition) / $("#slideshow").width())) + 1) + ")").height() + "px");
}
);
There's probably a slightly better way to make that calculation, but this will work. You could alternatively hide all the other .slide divs that are not being displayed. Then #slidesContainer will auto-resize to only the visible (not display:none) slide.
I have updated your code here JS Fiddle. You need to remove the min-height property and set the background color to the slide div.
So I know all about the problems with vertical-align: middle; and the different methods people have used to vertical align elements in CSS. But I haven't found one that works for what I need it to work for.
Basically my page has just one <div> on it, which I want positioned in the center of the page, both horizontally and vertically. Obviously the horizontal part is easy, but I'm getting hung up on the vertical part. My problem is that the height of the <div> is unknown; the content changes, so I can't specify a height for it.
Anyone have any tips for me? I'm willing to use JavaScript if necessary. Thanks!
Long story short, you need two divs to get CSS-only vertical centering.
With Javascript, you can do it with a single div, though.
As you said you don't mind using JS, here it is... (I generally never fallback to a JS solution, but if you're cool with it, then so am I)
If your CSS is
#element {
position: absolute;
top: 50%;
}
Then you could use my friend jQuery
$(document).ready(function() {
var height = $('#element').height();
$('#element').css({marginTop: '-' + (height / 2) + 'px'})
{);
Note, this is untested, but should be a start. Hopefully the height / 2 will work as expected, if not, try using parseInt();