HTML5/CSS3 User Text Resize - html

I'm trying to add an accessibility option to a website, where you can click some buttons ' A A A ' and these would change the size of the text on the whole site, using HTML5 and CSS3 only. I don't want to use jQuery or Javascript to do it.
Based on this idea: http://www.dynamicdrive.com/dynamicindex9/textsizer.htm
Any help would be great!

Maybe you can do it like this:
#element{
font-size:12px;
}
#element:click{
font-size:14px;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

Related

How can i make a template cross browser compatible?

I have a very normal issue.But I couldn't find any answer.I made a simple PSD to HTML.I tried to make it cross-browser compatible.But I couldn't do it.So that's why I have a question.If I make a template in IE or Safari.Is it automatically compatible with all other browsers? Because Safari and IE are the worst browsers.Need suggestion from experts.
Thanks in advance
try some compiler like prepros which'll automatically add browser prifixes
most of css2 properties works correctly for all browsers but the real problem is in css3
so you can use each browser code
for example we need to use tranisition the code will be
-webkit-transition: all 0.3s linear; /*chrome and safari*/
-moz-transition: all 0.3s linear; /*firefox*/
-o-transition: all 0.3s linear; /*opera*/
-ms-transition: all 0.3s linear; /*internet explorer*/
-transition: all 0.3s linear; /*for all new versions of browsers*/

In dreamweaver using css, how to click a button then an image will fade in?

I am still new in dreamweaver and still trying to learn new things.
I currently can do an hover image then an image will fade in.
Like below.
#home1 {
background-image:url(bestseller.jpg);
background-size:100%;
background-position:center;
background-attachment:fixed;
margin-top:84px;
background-color:#F9C;
width:98%;
height:500px;
}
#home1 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#home1:hover{
background-image:url(bg.jpg);
}
But the thing is, what should the ":hover" be if I want it to "on click" ?
And what should I type if I wanted to fade an image in (for example home2) by clicking the home1 ?
Note : Without using an URL, so it will still in the same page. And I'm still new so I don't know any relation between javascript and dreamweaver.

Chrome select element erratic

I have a problem which I really hate.
In Chrome all my select elements in my forms are erratic.
When I click on the select and then move cursor down then the
focus jumps on the elements very strangely.
If I wait about 1 second after clicking on the select box then
the behaviour is OK, the focus is on the same element as the cursor (which is not the
case if I don't wait)
Just pure HTML no JS.
All forms are Zend Forms.
FF, IE, Opera are OK
Thanks,
David
Finally I have found it.
I my CSS
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear
changed to 0.01 and now everything is OK.
Regards

Show/hide div with link same link should also work for the tab content

The title may seem little bit confusing so I draw a sketch, so you can understand more what I want to achieve: https://www.dropbox.com/s/luoiz4erg4jfk8y/howitshouldwork.png
The tab function is based on liquidslider
I've start on the transition part, but I need some help...
CSS:
li a:onClick + .bottom {
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
bottom: 400px;
}
http://jsfiddle.net/ea9VT/1/
It should not be a scroll.
Can anybody explain how this should be done?
My Suggestion is you can use Jquery for this Animation. I hope this done very simple by using JQuery animate function.

CSS Transition not working properly

I have the following code: http://jsfiddle.net/8TG8L/
On another part of my HTML I can get the transition CSS to work great, but here on the right hand side I cannot get the transition to have any delay.
Relevant code:
.home_subvid_hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
EDIT:
To clarify, please look at this code: http://jsfiddle.net/9UuY7/
That one works although it's the same principle as the first one, why is that?
Thanks,
The reason the background isn't animated, is because the backround-image isn't set on the initial class .home_subvid.
You can't animate background-image:none to background-image:url(...).
If you try this, it's gonna work:
.home_subvid {
background-image:url('http://placehold.it/1x1/000');
background-size: cover;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.home_subvid:hover {
background-image:url('http://www.ptroa.com/images/video_hover.png');
/*background-repeat:no-repeat;*/
}
FIDDLE.
You can't transition background images from none to an image, see this document on MDN. Transitioning from image to image doesn't have amazing browser support either; as far as I know it's only supported in Chrome.
You can, however, create a similar effect with different markup/CSS.
How about an element made invisible with opacity: 0; and then transitioned into opacity: 1; when hovered?
Your css is changing the background image from nothing to an image, which the current generation of CSS can't animate.