I can easily animate divs FROM the stylesheet position to another position using JQuery, but is there an easy way to do the reverse? Basically I want to avoid changing my stylesheet, yet have divs start off the page and be animated into their correct position.
You can try doing something like this:
var origt = $("#yourdiv").offset().top, origl = $("#yourdiv").offset().left;
$("#yourdiv").css({top:"auto", left:"auto"}); /*or wherever you want them to start*/
$("#yourdiv").animate({top:origt, left: origl});
Hope that helped!
Can you use css() function from jquery to get their style attributes? How wide and long they should be and animate them using those values?
Set the div's display: none;
Find the original location via javascript.
Move them outside of the visible window.
Change them back to display: block;
Animate them from current position back to original values stored in JS.
I think you are asking: Can one pass class names to jQuery animate instead of defining an object literal of css properties.
http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles
Related
I have an element that I want to add multiple inline filter styles on top of at different times.
The code I have now always resets the inline style so that whatever I set last is all that is there.
Here is an example snippet:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px)");
.box{background:blue; width:100px; height:100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
You can see that i'm setting grayscale first and at that time it turns black. Then I set blur second, but it erases the grayscale filter and turns it back to blue then it blurs.
I want both grayscale and blur to be applied.
The issue is that you're overwriting the previous style since they both use the same property. Try putting them together in the same statement like so:
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
EDIT: If you need to apply them at different times, try this:
$("div").css("-webkit-filter","grayscale(1)");
$("div").css("-webkit-filter","blur(5px) grayscale(1)");
This will set the grayscale first and then preserve it by reapplying it with the blur effect as well
This will take the current css and append the new stuff.
var $div = $("div");
$div.css($div.css() + "-webkit-filter","blur(5px)");
You may want to add both filters in one line, as you can see here:
https://developer.mozilla.org/en/docs/Web/CSS/filter
Jquery wants to overwrite the css if your setting the same property.
This question also addresses a similar problem, doesn't seem like a very clean solution though.
Don't overwrite css properties, but add to them with jQuery
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 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.
I need help sizing the post-title div correctly at the following link. If you scale the result panel so that it is narrower, eventually the title will overlap the date. Rather than overlapping as shown here:
I would prefer that the title wrap onto a new line to avoid this collision. optimally, I would like it to also make use of the area above the the date like so:
Currently, the title will wrap once it reaches the end of the containing post div, as shown by the blue line beneath the title.
I have included a JSFiddle for you to test with.
http://jsfiddle.net/sph74/
You can use float: right on the date to get close to what you want. No more absolute positioning:
http://jsfiddle.net/sph74/1/
This is done via float: right (and that alone on the date). The .post-title element has to be display: inline or inline-block You could also use float: left, but that makes things a lot more hectic.
You also need to properly clear after the .post-heading element which I have done the old fashioned way via overflow: hidden.
I am working with a pre-existing javascript plugin (a slider) that aligns one of it's internal elements (navigation icons) with "left:50px". Under very specific circumstances, I want to align this to the right, using "right:50px" instead. The problem is that when I add "right:50px" to it inline, the right property is still over-ruled by the pre-existing "left:50px" property that is set in the plugin's .css file. I have been unsuccessful in finding a way to remove the left property, or to overwrite it with some other value, such as "left:none".
Is there a way around this?
You want:
left: auto;
Along with setting the right property. It's not that your right declaration is being ignored, rather it will be applied at the same time as the existing left.