I just want the bounce effect to be on the mousover of the #bounce1,2,3... images on the homepage, but it seems to be forcing images to the next line.
what gives?
http://jameshiggins.ca/nlms/
You can achieve the same effect without JavaScript and jQuery, using only CSS3. Use #keyframes to define the key frames and then use it in animation property.
Here is the JSFiddle demo regarding to your example.For more information about the animation property of CSS3 please check this URL.
You'll want to add this to your style sheet.
#fp_brands a .ui-effects-wrapper {
float: left !important;
width: 33% !important;
}
The ui-effect-wrapper div that jquery-ui uses in it's animations can sometimes mess up floated elements. This is because it's css rules include width: 100%; and float: none;
Using the element inspector, applying float:left; to each image made them animate as desired. I would apply it to the class attachment-medium if you don't use it anywhere else to save code
Try to add this css and remove width="33%" from img tag?
.attachment-medium {
position:relative;
width:235px;
height:100px;
}
Related
First li in line of several ones doesn't glue to the next one if the first one smoothly derceases to 0 using css3 animation via transform property. Why?
Working sourcecode example: http://codepen.io/anon/pen/lLpeo
Thanx
Because you use scaleX. It actually doesn't change the size of the li but scales it. I think the solution is to use width property http://codepen.io/anon/pen/lIbyC
#-webkit-keyframes 'movement'{
to {
width: 0px;
}
}
I have a div "whitebox" which is basically a div that should cover my original "stimuli" div. It goes smooth and appears nicely, yet it does not cover the original div but seems to be transparent so that I can still see my original div though it. But I want it to be covered completely.
Apparently 'opacity' does not fix it.
<div id="stimuli"> Just press B and get started... </div>
$("#whitebox").fadeIn("fast").delay(500).fadeOut("fast");
CSS:
#whitebox{
background: #fc3a54;
opacity: 1;
position:absolute;
height: 80%;
width: 70%;
}
Is there a simple trick to fix the transparency issue with my code above, or any other hints?
try using an image with #fc3a54 colour instead of using the background function, you can then use z-index to insure your whitebox is in front
Are you positive #whitebox is covering #stimuli? Also, jQuery fadeIn and fadeOut will toggle the display property so if you start with an element that has display:none and run fadeIn on it it will show it. You can use fadeToggle (https://api.jquery.com/fadeToggle/) as well.
I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/
You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that
I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!
After looking through W3Schools I'm still not sure if this is possible or not.
The idea is to have the div be a progress bar. (Yes, I am aware of jQuery UI's progress bar.) I would like it to start out 100% filled with one background-image, but overtime have it fill from 0%/100% to 100%/0%.
I see that it is possible to have multiple background images specified using css: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background_multiple
but I am not sure how to extend that logic to having only % widths. Any ideas? Thanks
You can't set the width of a background image. But the solution is easy. The div by itself is the progress bar at 0% (so has the unloaded background image), then have another div inside that which is the actual progress (which animates from 0% to 100% and has the loaded background image). So you animate the width of the div inside the progress bar to represent progress.
This site has a few examples that use a span within a div:
http://css-tricks.com/css3-progress-bars/
it's not using images (just CSS3), but you could easily update it have background images on both the span and the div. CSS3 does allow multiple background images (http://www.css3.info/preview/multiple-backgrounds/) but I'm not really sure if it's the best use for your example.
Using position: absolute; or position: relative;, it's possible to overlay one image with another; you'll have to be careful with the z-index, though. You'll then be able to animate the width of the image you want to act as the 'progress meter' using jQuery's animate() function, like this (assuming your progress meter image width starts out at 0px and will end up at 100px):
$("#progress_meter").animate( {"width": "100px"}, 5000);
No, but you can set another div on top of the initial div and have a higher z-index property.
For example, on the code below, div-a will be on top of div-b:
.div-a {
with: 50%;
height: 30px;
z-index: 2;
}
.div-b {
width: 100%;
height: 30px;
z-index: 1;
}
I'm trying to get hover effect similar to this example. But couldn't get it. Here is the link
Your <script> tag references a jquery-1.2.6.min.js which does not exist. Put that file in the same directory as hovereffect.html on your web server.
Or, perhaps even better, get JQuery from Google Libraries:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
It looks like the code copied to the new page is missing the position:relative, which would fix the issue. Now, for security, you may want to limit the height of the block and set the overflow to hidden.
On test page this is your css:
.thumb {
list-style: none;
float: left;
background: white;
width: 250px;
position: relative;/* this makes all the difference */
}
On production page:
.project .thumb {
width: 260px;
float: left;
}
Add position: relative to .project .thumb
The reason it's not working is because you are missing a css property
.project .thumb img {position:absolute}
notice that you have this line in your test page.
the way you are using jQuery's animate function to change the position of the top image {top:150px}, so you need make it absolutely position for this to work.
Also the .project .thumb a line is missing it's width and height.
Also note that if you just add that line, the affect still won't be the way you expect. Create an outer div with an overflow:hidden.
You want to specify height:150px; on your outer class (.outer). Currently it's set to 250px which is too tall.
Its because in your real project your css is in the /css directory. So your CSS style is looking for /css/images/snbw_thumb.jpg which doesn't exist. Change your CSS style to ../images/snbw_thumb.jpg and it should fix it.
Your image is 404ing due to your css rule for .project .thumb a{}
It points to "images/snbw_thumb.jpg" but you'll likely want to use "/images/snbw_thumb.jpg"
Bad URL : http://dragonfly.zymichost.com/css/images/snbw_thumb.jpg
Good URL : http://dragonfly.zymichost.com/images/snbw_thumb.jpg
(Also, it looks like your pages aren't really serving 404s as the bad URL )
Hope this helps
-Chris