CSS snap box like facebook timeline or about.com - css

Its possible to creating snap box, like facebook timeline or about.com without javascript/jquery?. And its crossbrowser.
I mean irregular box.
Facebook: http://www.webpagescreenshot.info/i/472778-12222011104910am.png
About.com:
http://www.webpagescreenshot.info/i/974882-12222011104727am.png

There is nothing cross-browser that will accomplish "vertically floated" boxes without using some Javascript to simulate it.
If you decide jQuery is okay, look at Isotope and Masonry.

Related

Creating a nice mouse over effect (includes example)?

I have an image and want to create a mouse over effect as soon on the following page:
http://www.zalando.de/roxy-pam-snowboot-winterstiefel-grey-ro511c00e-101.html
To see the effect, move your mouse over the "Auf den Wunschzettel" on the right side. How are those tings done?
Thanks!
If you want to do this the 'easy way', take a look at the jQuery plugin qTip: little link.
If you want to build this yourself, here are the stuff you'll mostly likely need to learn:
CSS Positioning.
onmouseover/onmouseout events.
The CSS display property.
Hope that's enough to get you started!
Note: this might be possible to achieve using CSS only, but it's more paradigmatic to use JavaScript for such things.

How Did dropbox create landing page?

Im looking to create a landing page that emulates DropBox (in wordpress). I was wondering how they achieved the effect of clicking the play button that overlays the background box that then turns into a video?
I see from the source that they are using JW player but again no clue on where to start with this. Are there skins you can buy that allow this? Any ideas to lead me in the right direction are appreciated.
Thanks
Can be done easily with jquery and css. First, absolute position both divs centrally on the page so that when visible one is on top of the other, then set the video div css to "display:none;". Then you can use jquery to show the video and hide the play button on click, something like this:
$(function(){
$('#play-btn').click(function(){
$('#play-btn').hide();
$('#video').show();
});
});
Simply done mi amigo. Bare in mind they don't have to be centered, they just have to be positioned one above the other...

Flip image in jQuery

I have a collection of small images (bellow “Some examples” in the left column ) I would like to flip one at the time.
I imagine that they flip and a new image is shown (like flipping a card).
Is there a jQuery plug in for this, or can I do it with ordinary jQuery?
Link to site
//Johan
Flip!: http://lab.smashup.it/flip/
Edit: I also really like the jQuery Cycle plugin: http://jquery.malsup.com/cycle/
It does loads of transitions so in your case it might be overkill, but just a tip if you want other cool effects.

Glossy buttons in Flex 3

Any ideas how to create a button class that looks something like this:
Taken from this tutorial page. I'm struggling to figure out what combination of filters I need to use to achieve the glossy effect.
The rounded corners and bevel/glow effect are simple enough. But how can I add a gloss gradient over only the top half of the button?
Use this App --> http://jirox.net/AsButtonGen/
Found it. Degrafa has a Button Loader thing that does this exactly.
Open source too.

Lightbox with Flex

I want a fusion chart in my flex app to display with a Lightbox effect like the effect you get when you click on any of the charts here or checkout the demos here
These effect have been attained with the help of javascript. How do i get the same effect via Flex? Any idea?
Thanks a lot
I built a Flex component called PopUpThumbnail that is very similar to HTML/JavaScript lightbox components.
Here's an example application that I created with it to displays Flickr images.
Add a mask over the top of the whole application with the content area in the middle and the semi alpha area around it. Clicking on the surrounding mask removes the layer, and you can interact with the content area as normal (make it look like a popup rather than actually using one...)

Resources