I am looking for a way to produce the jQuery mobile horizontal page transition effect on a mobile site without using the full JQuery lib. Does anyone know of a solution using a much smaller stripped down specific JS script? We are trying to keep file sizes to a minimum.
I found a decent solution to this.
Check out 'Non-Jquery Page Transitions lightweight' by fasw.
Demo here:
http://www.fasw.ws/demos/transitions1/slide1.html
And source here:
http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/
This is 1.7k of JS producing transitions that are just like those produced by the whole mobile jQuery Lib.
I had the exact same question; take a look at the accepted answer by Jasper on my post here.
You could also look at the decoupled widgets here.
Related
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."
I'm making a page to display testimonials for a client of mine. Some of the testimonials are short while others are long. It looked kind of "blocky"... Here is a picture of what it actually looks like:
(Please ignore the temporary repeated testimonials for the time being)
After thinking it over a bit, I realized that it would look much nicer if everything kind of filled up the empty space a bit more efficiently, this is what I cooked up in my image editing program:
Does anybody know how to have it do something like this? I've Googled around a bit but I can't quite figure out the best search term for something like this...
Thanks!
EDIT
Here is what it ended up looking like after the answers below. Thanks guys!
If you don't mind working with jQuery, a plugin called jQuery Masonry is perfect for this task. You might have to learn a little bit of jQuery to get it to work, but that shouldn't take too long if you follow the somewhat-extensive tutorial.
You can't do this with CSS because the only way to do this is with floats, but those only work horizontally. This plugin emulates a float: top style via jQuery, which is what you are trying to do.
Check out masonry jquery.
If you can use jQuery, I'd check out this plugin:
http://masonry.desandro.com/
Check out the jQuery Masonry plugin.
This is exactly what CSS3 multi-column layout is made for.
Unfortunately, not many browsers support it yet so you may have to apply some cleverness to make it "not ugly" in other browsers. For example, you could just let the default take over and have each testimonial take up the full width - this isn't so bad to read through and is certainly better than the original layout.
I'm new to Flex.
I want to build cool web application in flex.
For displaying content of my site, I use viewstack and button bar. It is ready, but now I'd like to add some animation effect in that.
For example changing the navigation content shows flip animation.
So how do I do that?
Help full link.
This sounds similar to another question: How can I nicely animate between viewstacks.
Perhaps that will help?
That example shows the most basic kind of animation which is readily available using open and widely supported web-standards such as HTML, CSS, and JavaScript. The jQuery library will allow you to do this in just a few lines of code. Do you have an absolute requirement for flex?
I've got a script that performs rotation in all modern browsers using jQuery UI and CSS transform property. But I doesn't work in IE. I've managed to make it rotates as expected (around it's center) but I fails when I resize it again.
You can find an example in here http://vremenno.net/examples/jquery-ui-rotation/
If someone could make the same thing for IE (resizing, rotating and dragging) using this (jQuery UI + filter for IE) or another way (raphael js, canvas, etc.) I could also pay for it.
Thanks in advance.
Just pointing in the right direction for IE
have a look at microsoft's Matrix Filter
They have examples and an actual demo page explaining how to do it..
But it would probably take some tackling to integrated it with the jQuery plugins..
Also look at this jquery plugin, jQuery 2D Transformation Plugin
Currently, I am implementing a scrollbar using a custom embedded image using my CSS stylesheet. This is a very simple, thin scrollbar. I would like to configure this scrollbar using CSS properties at runtime, but so far I have been unable to do so.
I know it can be done because I've seen examples of it in the net, but no code to review. Anyone have any suggestions?
Thanks!
This blog has an example that you can view the source of with a right click:
http://www.axelscript.com/2008/02/20/custom-scroll-bar-using-css/
This one has a few links that redirect to examples with image skins:
http://www.foxarc.com/blog/article/101.htm
You can see a lot of the css stuff for scrollbars and pretty much everything else here:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#