I have a code that moves a div to where I clicked the mouse on a screen.
Can I use setTimeout to move it 1px every 1sec? (move it slower) instead of jump directly to that place?
setTimeout(moveDiv(),1000).
and a 1px somewhere?
Thanks
Related
I've been struggling with this one.
I'm creating a personal website, and I'm using an animated canvas element for the background (animated via jquery). The issue seems to be that the text and box shadows for my anchor tags on hover are causing my canvas element to show a vertical scroll bar, and it is only happening in Chrome.
If I remove the text & box shadows, or if I remove the canvas elements then the issue goes away. I've tried adding overflow:hidden to pretty much everything, but to no avail.
See my website here: http://www.trunker.me
#mainMenu a:hover , #mainMenu a:active {
color: rgba(255,0,0,1);
box-shadow: 0px 0px 5px 2px rgba(255,0,0,1);
border-radius: 20px;
text-shadow: 0px 0px 5px rgba(255,0,0,1);
}
Thanks in advance!
EDIT:
Using windows 7 ultimate with Chrome Version 36.0.1985.125 m. It creates a second vertical scroll bar next to the browser scroll bar. Screenshot here:screenshot http://www.trunker.me/images/Capture.PNG
Remove all those overflow:scroll from several elements in your code.
Try overriding them directly in the console.
I'm quite new to CSS and web programming. What I'm trying to do is add a hovering effect for a button. I'm doing this by using 2 images.
There is a button called download and in hover code I add:
.button:hover{
background-image:url(images/button2.png);
}
The problem is the button takes time to load ie: on hover there is a delay to show the button. How can i solve this?
EDIT: I tried using preloading,but there is also a kind of delay
div#preloadedImages
{
width: 0px;
height: 0px;
background-image: url(images/button2.png);
}
You should use an image sprite to get rid of the delay. A sprite is one larger file that contains multiple images. Your button will have it's background set to sprite.png file. You can then change the background-position property to shift the positioning of your sprite.
On the other note - why do you use images for buttons? Most buttons can be done in pure CSS with some fallbacks for older browsers.
Create a single image out of the two images (which is called a sprite)
Here is a working example with an animation as well to show you how it works.
Click here >>> FIDDLE
Then set your background position to to show the normal state of the background image
.button {
width: 150px;
height: 50px;
background-image: url('image-sprite.jpg');
background-position: left top;
}
Then on your hover css, just move the background image to show the lower part of it
.button:hover {
background-position: left bottom;
}
Keep your current css and other stuff as they are and add an <img> component at anywhere of your page and make it hidden to load the image initially.
<img src="images/button2.png" style="display:none;"/>
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.
Lets say I have a div element, with a background in position: 0%; how would I change the position to e.g position: 100%; but with keyframes on hover
I can't seem to use keyframes properly, it never works and I have all the latest browsers.
Thanks.
If you just want to animate background position on hover it's a lot easier to use a transition instead of keyframe animations. See this fiddle for an example: http://jsfiddle.net/hfXSs/
If you want to put in the extra effort of making it an animation you'll have to set the animation-play-state on the div to 'paused' and change it to 'running' on hover. See the spec on pausing animations here: http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
EDIT: I was bored so here's the same thing using keyframe animations: http://jsfiddle.net/wGRg5/
Obviously, the fiddle has the problem that when you aren't hovering over the div the animation pauses which is probably not the desired effect.
Some Code, looks like webkit only at this point in time.
.box {
display:block;
height:300px;
width:300px;
background:url('http://lorempixum.com/300/300') no-repeat;
background-position:-300px;
-webkit-transition:background-position 1s ease;
}
.box:hover{
background-position:0px;
}
Via: http://jsfiddle.net/hfXSs/
More here: http://css-tricks.com/parallax-background-css3/
i have some images (in front of my bachground-image) with low opacity(png format)
and every thing was good in ie8 & firefox until i add pie.htc(or border-radious.htc from google code) for rounded corners & Shadow Box in ie8...
after adding pie.htc by :
behaviour : url(pie.htc);
and adding below codes :
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 20px red;
-moz-box-shadow: 5px 5px 20px red;
-webkit-box-shadow: 5px 5px 20px red;
the opacity of my images has gone...
i test it with a simple html project and figured out when we use shadow box in ie 8(just ie8 & ff is ok) the shadow fills our entire element , so the opacity is wanished.
how can i fix this shadow + opacity problem?
=====================================================
MY QUESTION IN ONOTHER WAY :
HOW CAN WE COMBINE THE BELOW CODES FOR IE8 (with keeping opacity):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";//opacity
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);//opacity
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";//shadow
thanks in advance
icant is correct but has a small typo. It should be progid instead of profid. I tried editing but it wouldn't let me edit just one letter.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Thanks icant!
it seems it's not possible to use shadow with opacity In IE 8...
When You add shadow after opacity to an element (in firefox every thing is ok) in IE8 you can not feel Opacity exists , because of that shadow fills the entire element and do n't let the opacity show itself.
however i checked this issue by the simple html project and searched for solving this issue with no results / if you find a solution about this plz share it with us.
Just put the shadow after the opacity and add a space in-between. It's as simple as it could be.
filter: profid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);