I'm having some minor problems with some animations I'm trying to set up. I have a couple divs stacked on top of each other kind of like this.
<div id="div1">
Stuff...
</div>
<div id="div2">
More Stuff...
</div>
Each of these divs has a drop shadow applied to it via jQuery plugin (jquery.dropshadow.js).
The problem occurs when I expand one of the divs using some kind of animation. The shadow does not update with the size of the div. I can redraw the shadow in the callback of the animation but still looks pretty joggy.
Is there a way that I can update the status of my shadows periodically throughout the course of the animation or can anyone recommend a better drop shadow library that would fix the problem? It doesn't have to be jQuery plugin.
I think the only way to do this (at least with that particular drop shadow plugin) would be targeting both the element you want and all the drop-shadow "phantom" elements, in your animation. So, for example:
<style type="text/css">
#div1 { width: 50px; }
</style>
<div id="div1">
<p>Here is a lot of stuff. Stuff stuff stuff.</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#div1").dropShadow();
$("#div1").click(function() {
$("#div1, #div1 + .dropShadow .dropShadow").animate({ width: "400px" }, 1500);
});
});
</script>
This is based on the structure of the rendered code that the drop-shadow plugin produces... all the fuzzy copies of your original element get a class of .dropShadow and get grouped into a container element which also has a class of .dropShadow and gets stuck into the document right after the original element (thus the + selector).
As long as you apply whatever animation you're doing to all of these shadow elements, they all get animated (however, it is a bit jerky from all that processing... uffda).
I would suggest using CSS for your drop shadows, and not JS.
I have dealt with this exact problem in the past and I have completely stopped using JS for drop shadows. I have never seen animations with JS shadows look as smooth as pure CSS. Also, using too much JS to alter the page elements can cause performance issues.
Try to apply the same animation effects to the shadow element(s).
I don't know the exact technique used in jquery.dropshadow.js, but I suspect it creates copies of your shadow casting elements and styles them to achieve shadow like appearance. It is possible that these copies are siblings of their source elements, thus don't "follow" animation (as child elements would).
Ok, I still don't know how you animate, but I give you another example:
$('#foo').slideToggle().ready(function(){
$('#foo').dropShadow(options);
});
So, instead of slideToggle, just use whatever animation thingy you got.
Hope that helps.
Related
I'm making a loader for a website. The HTML is as follows:
<div class="loadingContainer">
<div class="greyContainer">
<img class="eggGrey" src="img/egg-grey.png">
<p id="bluePercent">50%</p>
</div>
<div class="blueContainer">
<img class="eggBlue" src="img/egg-blue.png">
<p class="greyPercent">50%</p>
</div>
</div>
When element blueContainer has a height of 2%, I want the text in both paragraphs to be 2%. I want the paragraph text to always show the height in percentage of blueContainer. Height values are applied through an external CSS file, I am not very well versed in the language of Javascript, and I've tried some ways but I cannot figure out how I should do this.
EDIT: Some of the things I've tried (and probably miserably failed at):
function percentages(){
document.getElementByClassName("greyPercent, bluePercent"){
if (document.getElementByClassName("greyContainer, blueContainer"){
}
}
}
This is where I'm stuck at too, because I have no idea how I could tell the javascript to run the function when the element has a certain height.
EDIT: Here is a jsfiddle to illustrate what I'm doing. I gave the containers a background colour because of a lack of images.
https://jsfiddle.net/1s5tw6es/
from https://stackoverflow.com/a/9628472/2818869.
First, There is no such css-changes event out of the box, but you can
create one by your own, as onchange is for :input elements only.
not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
Nowadays, there are more solutions.
MutationObserver (If you can drop old IEs)
CSS Element Queries
But in this case, I would create function like setProgress which change both the element height and the paragraph.
Example: http://jsfiddle.net/e59u3p4j/1/
This should work:
$("document").ready(function(){ //In case you didn't use this
$(window).resize(function(){
$('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
});
});
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.
I have a button that, when hovered over, shows a <span> that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
EDIT: I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
The best way I would see to do this is to make the span have display:inline-block; with a defined width. Then you can use a javascript animation library to animate the span's display.
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...
I'd like to create a slide effect using jQuery. I have several div's:
<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>
The idea is that div_2 appears while sliding and "pushing" div_1 out of sight, a little like scrolling a window (horizontal or vertical). I think I can't use actual scrolling because the divs' content is loading via ajax, so I can't position it precisely before it's loaded.
Any idea?
TIA
greg
You mean like this:
$('#div_2').slideDown('slow', function(){
$('#div_1').slideUp('slow');
});
See the working demo here.
Greg, it sounds like you are looking for something like I have done here:
http://jsfiddle.net/2E5Qv/
If so, what you want to do is to contain all of those <div>s inside a parent, and then when you want to slide them, animate the top of each div up the correct number of pixels. The solution I provided above has each <div> more or less set to a fixed height of 20px (via line-height).
The parent <div> acts as a sort of window to show only the current content.
I took what Sarfraz provided and modified it slightly based on what I think you were looking for. For the sake of the demo, I also made it fire on the click event. You can find the working example here: http://jsbin.com/emowu3/3
$('#div_1').click(function(){
$('#div_1').slideUp('slow');
$('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
$('#div_2').slideUp('slow');
$('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
$('#div_3').slideUp('slow');
$('#div_1').slideDown('slow');
});