I've a <p> tag and when it starts sliding from left to right it leaves a kind of trail through the screen. I've never seen anything like this before.
I'm animating it using jQuery:
$(document).ready(function(){
$(".choosenHero").animate({
"right": "300px"
}, 3000);
});
and here is the screenshot:
You might try using simple CSS transitions rather than jquery. As jquery does animation by changing css properties and is not the same thing.
So use jquery to add a class which has the end state of say:
.moved{
left: 300px;
}
and on the initial state of the paragraph use something like:
.moving-object{
position:relative;
transition: left 2s;
left: 0px;
}
Related
I've tried searching for a solution to this problem, but haven't found one yet.
What I'm trying to do is simple:
When I click one button, I'd like a box to move 200px to the right with CSS transitions. When I click a second button, I'd like the box to move 200px down from the position it is currently in.
I have this basic code here:
HTML
<button class="one">First</button>
<button class="two">Second</button>
<div class="box"></div>
CSS
.box {
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s;
}
.box.transOne {
transform: translateX(200px);
}
.box.transTwo {
transform: translateY(200px);
}
JS
$(".one").click(function() {
$(".box").toggleClass("transOne");
});
$(".two").click(function() {
$(".box").toggleClass("transTwo");
})
However, when I click on button number two, the box does move 200 down, but it moves diagonally back to the first X axis position while it's going down (I.e. it doesn't stay 200px over on the X axis).
Is there a way I can possibly do this with keyframes? Like triggering a second keyframe with a second button click, etc. Or is there a better way? I'm pretty stumped and can't find any solutions, so any help is much appreciated. Thanks!
SHORT ANSWER
set the translation X in class .transTwo too
.box.transTwo {
transform: translate(200px 200px);
}
EXPLANATION
the transform is overriding the others, this is the nature behaviour of the css, just like other property color, background-color,
The basic rule is the latest property set is the strongest, the strongest is at inline style unless you implement !important
I know this probably cannot be done without javascript but I dont mind using it.
I have a div that grabs the width percentage with PHP.
All I need to do is that on page load I would like the bar ( Div ) to start at 0px width and transition to the correct width percentage.
I can do it fine of course on a Hover or Active state but cant seem to get it right with page load.
Do you use jQuery? Theres a built-in document ready function. Inside of that, add a class to the div. Then in your CSS you can style the two different states of the div to accommodate the transition
Javascipt
$(function(){
$('.bar').addClass('.ready');
});
CSS
.bar {
width: 0;
transition: width 500ms;
}
.bar.ready {
width: 100%;
}
So I have this modal that pops up using the CSS :target selector. However, the page jumps to the anchor when clicked. I would like to prevent the page from jumping to the :target selector. How can I do this?
Info
<div id="openModal" class="modalDialog">
CSS:
.modalDialog {
position: absolute;
pointer-events: none;
z-index: 99999;
opacity:0;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 900px;
height: 506px;
position: relative;
background: rgba(0,0,0,0.9);
}
Make the .modalDialog position: fixed instead of absolute. This will cause it to always be positioned at wherever the page is currently scrolled.
A more complete example: http://codepen.io/mblase75/pen/xbRNeV
(There's some other trickery involved in that codepen demo -- adding another target to the 'close' button on the modal which is also fixed keeps the page from scrolling when the modal is closed, and changing the z-index of your modal from -1 to 100 (or some other suitably large integer) will keep it from blocking clicks right after you close it.)
Use
...
in order to change :target selector in CSS but go nowhere. The fragment #/ doesn't exists, so page won't scroll, but the :target selector will change to affect CSS change.
try stopping the default action of the anchor tag
$('a').on('click', function(e){
e.preventDefault();
//do your poppin' up here.
});
This has nothing to do with CSS actually, it's plain old HTML.
You have a hash id in your link, it references an element on the page. Every browser would scroll the page to the referenced element when such link is clicked. That's very standard behavior.
You can't prevent that other than by not using this technique. Well, maybe there is a way to prevent scrolling with JavaScript black magic, but you shouldn't.
Use some jQuery instead: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Have you tried the css3 :focus selector?
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
Also
CSS Menu - Keep parent hovered while focus on submenu
You can also use a <button> tag instead and style it however you please. That would prevent your page jumping since it is not an anchor.
So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.
What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.
I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?
Thanks all.
As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.
It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.
Hope that helps!
Here's a demo and here's the code from my example:
HTML
Box<br />Box two
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}
The simplest way for a click to trigger an animation is to add a CSS class to an object upon the click and have an CSS3 transition or animation configured for any object with that class.
Your second class to hide the item can then remove that class name from the same object.
All the details of the animation/transition would be specified in CSS3 style rules. Only the add/remove of the class name would be done with javascript.
CSS3 all by itself can trigger animations/transitions with the :hover pseudo selector, but isn't a lot more capable than that and can't trigger an animation based on a click.
I don't think this is a CSS3 vs. JavaScript question. Even if you use CSS3 for the animations, you're likely to need JavaScript to trigger the animations based on a click event.
Based on what you need to do, I see a couple of main options:
As #jfriend00 said, add or remove CSS classes which perform the animation.
Use jQuery's show, hide, fadeIn, fadeOut, and animate APIs.
What you need is some juery to spice up whatever you are developing... If am not wrong you want some thing like this: CSS3 vs Jquery
Get the jquery library and reference it in your page.
here is a snippet to jump start you.
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
You can change the effects to other available ones.
Suppose we have HTML:
<div id="wrapper">
I want this to change color when button hovered
<div class="button">Close</div>
</div>
We can change the element's style when the wrapper is hovered:
#wrapper:hover .button{
color:red
}
Now want the opposite thing:
button:hover #wrapper{
background:yellow
}
#dan; you can do this with css also like this:
#wrapper{position:relative;}
#wrapper:hover .button{
color:red;
}
.button:hover:after{
content:"";
background:yellow;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1
}
check this example http://jsfiddle.net/sandeep/b6apC/ .It's a fake but can achieve that effect with css.
While, as noted, this question cannot be answered with CSS, it can be achieved with JavaScript (and without need of a library, such as jquery, mootools etc):
var b = document.getElementsByClassName('button');
for (i = 0; i < b.length; i++) {
b[i].onmouseover = function() {
this.parentNode.style.backgroundColor = '#f90';
};
b[i].onmouseout = function() {
this.parentNode.style.backgroundColor = '#fff';
};
}
JS Fiddle demo.
Edited
You can also, with CSS3, apply fading to the backgroundColor changes:
div[id^=wrapper] {
/* other stuff */
-webkit-transition: background-color 0.5s linear;
-moz-transition: background-color 0.5s linear;
-o-transition: background-color 0.5s linear;
}
JS Fiddle demo
If you don't mind an extra element for the text (which is most common anyway) then use the hackless and pure CSS1 solution from this answer which leads to this fiddle:
Markup:
<div id="wrapper">
<span>I want this to change color when button hovered</span>
<div class="button">Close</div>
</div>
Style sheet:
#wrapper {position: relative}
#wrapper:hover {background: yellow}
#wrapper span:hover {background: white}
#wrapper span {display: block; padding-bottom: 1em}
#wrapper .button {position: absolute; bottom: 0}
This cant be done via CSS im afraid, however via Jquery... Here is a solution! (Untested but theory is there)
<script type="text/javascript">
$(document).ready(function()
{
$(".button").hover(function()
{
$(this).closest("#wrapper").stop().animate({"color": "#fff"}, "medium");
},
function()
{
$(this).closest("#wrapper").stop().animate({"color": "#000"}, "fast");
}
);
});
</script>
Hope this helps you. The key is the "closest" bit, This searchs up the structure to find the first instance of "wrapper" and then does its jquery magic to it.
In general, CSS styles can only affect things further down the tree - so you cannot affect the wrapper (essentially ever).
However, you may be able to fake it: you probably don't care about whether the wrapping element changes color, but rather whether the visual circumscribing block changes color. This outer block does not necessarily need to be a wrapping element - indeed, there are several possible alternatives if you're willing to control the layout in more detail.
You could make the "wrapper" and "button" siblings, and then use #button:hover + #wrapper
You could have an invisible element the size of the button and include the wrapper and button within it - then declare the hover style on it.
If you only care about a background color, make the wrapper's background transparent. Then, when on button hover unhide or generate a large colored background box with a lower z-index. (You can position this new background box either handily using top, left etc. or, in case that's impossible due to other positioning, simply make it huge and with negative margins and hide overflow in the wrapper).
This last approach is particularly attractive since it doesn't require manually positioning the button. However, it's also more limited in that in doesn't really affect the surrounding box; so you can only change the background-color and not for instance the text color. I've implemented an example here: http://jsfiddle.net/emn13/xExvC/