I’ve been stuck in the process of constructing a framework for a window to hold my web apps. With the help of JavaScript, the window will change its color, size, and position on the page. It is so much like GUI apps in Windows OS.
Borders must be custom, that is, they will change their color for that of the window, but will be shadowed a bit with opacity of about 50%.
The head must have the same color as the window do, but will have an image with some alpha channel value as a background. (That will polish up the head of the window.)
My problem consists in that my CSS for this challenge is sort of hard to manage via JS (dynamic part of the app). So, I am here to ask some help from CSS experts. If you know how to make CSS a snap, your help will be very much appreciated. As for now, I am frustrated to find no way to write a clean and simple code.
P.S. I am willing to support Internet Explorer 6, too.
Edited: Please, have a look at the visual representation of the problem: http://savepic.org/261861.jpg How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
How would you manage to code CSS for that window so that it's easy enough to change the size and color of the window with the help of JavaScript?
That "transparent borders" thing you mention is not entirely trivial, but definitely solvable. Now I'm still not entirely sure in what direction you are looking for help - how to structure CSS vs. JavaScript, or how to solve the specific problems you mention?
Either way, have you already looked at JQuery Dialog? It's a bit much for that single problem (having a window and resizing it) but it brings a full-blown API and templating system that has solved many cross-browser problems already.
If you don't want to utilize a framework, I would say don't worry too much about JavaScript accessibility. In essence, when you build clean CSS, you can access it well from JavaScript. A few thoughts on good CSS are in this question.
Related
I'm trying to create a game that uses buttons (and text areas) that are semi-transparent (Alpha of about 60%). I can do almost everything I want in XHTML and CSS, except for these semi-transparent items. So I'm looking for the easiest way of creating semi-transparent images on my web pages.
Ideas so far:
Create PNGs with semi-transparent pixels. This is supposed to be possible, and there are well-defined interfaces for defining an Alpha channel using PHP and the GD package. Problem: I tried this, but the images were opaque in all the browsers I tried (Chrome, IE8, FF).
Do it in Flash. I know how to use Flash(*) from some work I did before I retired. Problem: Flash is priced for the professional developer, not the hobbyist.
(*) Well, Flash 8. But as I understand it, even with newer versions I can continue to create movie clips the old way, they just get translated into a bunch of AS. And it's supposedly possible to continue using AS2, although you can't mix AS2 and AS3.
Do it in Flex. Problem: interfaces best described as arcane. Even using suggestions from experienced Flex developers, trying to include code from another mxml file (other than as a class) was a PITA.
Use SVG. This looked promising. The SVG syntax is basically XML, the element tags are reasonably obvious, and the interaction of attributes only slightly arcane, and there are plenty of examples in the tutorial. But... about half of current browsers will not support using SVG in an <img> tag. You have to use <embed> That means you can't put it inside an <a> or <button>. Even using embed, I got what look like "broken image" icons in IE8.
As I'm writing this, I notice several items under "similar questions" that look promising. But when I look at them, they use attributes that are not mentioned in the CSS spec: opacity, filter:alpha, and rgba. When working in a complex language, I really prefer to have the complete language spec open in another window, or to have the equivalent dead-trees version (e.g., the O'Reilly salmon book Cascading Style Sheets, The Definitive Guide, which sits on a bookshelf next to my desk.
So I'm asking for recommendations. If the consensus is to use SVG, I'll post my code and see if people can tell me what I'm doing wrong.
The CSS "opacity" property is perfectly valid. It is part of CSS3, and is supported in all browsers (*).
http://caniuse.com/css-opacity
Or you can use semi-transparent PNGs, as Alvaro demonstrated. They should work just fine. Not sure what happened with your attempts, but you must have done something wrong.
Note for versions of IE <= 8, you need to use the "filter" property instead.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
I don't know what problem you have with PNG's. Imo the best and easiest option by far. And they look as they should in all browsers from my own experience.
check this out: http://jsfiddle.net/BDLYG/
(and here a code I need to add)
If you have most users with the 'modern' browsers, I would say go with SVG. If you do, post here, and I'll be glad to help.
Many thanks for all the useful answers. I'm currently using a combination of CSS and PNGs (generated via PHP). I could have gotten along with just CSS, but I decided I wanted to change the opacity of the background when the user hovers over the button -- but keep the text opaque. It's easy to change the opacity of the whole thing, but (as far as I can tell) not of just the background.
I also experimented with SVG, and it also works fine, but it requires extra computation so I chose the simpler (for me) approach of CSS and PHP. I'm already comfortable with those two languages, just needed to be introduced to the newer stuff in CSS3 and the one extra function call needed to make alpha work in PNGs generated by the PHP GD package.
I'm looking for a good way to implement reusable buttons in CSS on my forms. The requirements:
- Separate image and text (text is in many languages)
- Rollover effects
- Plays nicely cross browser
- No javascript (if possible)
- Rounded corners
Whats the best way to do this? Years ago I was using the sliding doors technique, but this seems out of date now. Would you use CSS3 with a fallback for older browsers? Any particularly well thought of techniques out there?
Jquery UI buttons are AWESOME. They're fully tested, completely compliant, and really look great. With one line of code, you can have a fully styled button in no time flat. Here's the thing--they can be executed without Jquery (go figure)
First, the tut
So, the standard method is to build an element (a, button, input) with an id and set it as a button in Jquery like this:$('#element').button()
However, if you do it in the manner that the tutorial shows, you just have to add some classes to an element to get a similar effect. So, to make a button out of an a tag, it would just be
Button
In this example, there's no need to set the button with the jQuery button declaration...you're doing it by style only. With the flexibility to style so many different type of elements, it opens up a ton of doors.
You would have to have the Jquery UI css loaded, which offers the added benefit of ThemeRoller, which can style elements on the page with a simple change of a file. It's really a great way to "theme" a site that has to change branding in a hurry, which has made custom themed apps my company puts out extremely profitable.
I would use css sprites for this. You can find out about them here:
http://css-tricks.com/css-sprites/
It is basically a way to make one large image that has all states of buttons(normal, hover, selected). The benefit is it is one http request and you don't see a flicker the first time a hover occurs. If you use this route, the css background property will be the image. You can then use text-align and line-height to center the text that you want to place over the image.
This library, Nifty Corners Cubed uses Javascript but is a fairly clean way to round div tags links, etc. It is tough to find a reusable solution without using a sliding doors derived technique. Otherwise you stuck making none-resuable buttons that have to fit to your size.
You can also take a look at PIE http://css3pie.com/
A sprite is a great option and I do use them from time to time.
Personally I don't mind if my websites aren't identical in all browsers and I go the CSS class route. I keep in mind what is and isn't supported by various browsers and if there is an element that needs to be a certain way I will double check with W3Schools for compatibility.
The main benefit the keeps me using CSS/CSS3 classes is if something changes it is done quickly by text in a single file, if need be I can do a quick change from a 10 year old computer with a dial-up connection (if they still exist) and no imaging software.
Where the advantage of a sprite is they are supported across all browsers and they will look identical (more or less). SpriteMe is a bookmarklet that I have heard of to help with sprites if you decide to go down this path.
I see this as a what do you prefer matter... these questions are what I ask myself when making this type of decision:
How often will it change? Big or small changes? Will it be a complete redesign job if it changes? What do you already know? How much time are you willing to spend learning something that you may not know? What does your gut say for this project?
I hope this can help you.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
I'm building an application, which is cross-platform (Linux, Win, OS X), and especially does graphics stuff via Cairo(mm), supported by a little bit of GTK+ scaffolding (i.e. DrawingArea). I now need some UI elements, which require a certain custom look. Ideally they should also be displayed as transparent overlay (i.e. different opacities for different parts of the UI).
As GTK+ is hard to customize (e.g. I want an edit-field with the suggestion-list above it), and me basically exactly knowing how I'd achieve this with HTML/CSS, the question popped up: Why not just let libwebkit handle the UI stuff?
I don't have much experience with WebKit, so what I need to know is:
Does my above reasoning make sense to anybody else?
CSS has opacity, can I interface WebKit in such way that it renders onto an RGBA-offscreen surface, with alpha-values inherited from the layout-processing of the CSS styles?
Even if 2. would not work, has anybody used libwebkit on an offscreen surface, which AFAIK requires redirection of keyboard and mouse interactions, probably via GTK+s provisions?
Is it possible to render web content over a clear background using WebKit?
is probably as good as it gets.
This issue is obviously bigger than I thought! Using the VS2008 form designer for web pages, it'd a doddle to lay everything out using pixels. In fact, as far as I can tell, it's very hard to use absolution positioning and anything but pixels.
So my webapp has developed nicely until somebody mentioned the 120DPI issue and I've wandered off into another field which I've managed to kind of ignore.
I'm the person who thinks if you get a bigger monitor, it's because you want to display more windows on there with the same size text, not make everything bigger because you're 40 and your eyes are playing up ;-)
Given that there isn't a way for the designer to lay things out in anything apart from pixels, is there is half way house? I'm not about to go through every inline style changing from pixels to em values. Sorry, but that's just too much work for a volunteer written webapp.
Is it okay to keep pixels for the layout of text boxes etc. but switch to using some percentage based system for fonts? Will that size correctly?
This is only a problem in IE7. IE8 looks at the DPI setting and scales the x,y,w,h values as required. I appreciate this is both right and wrong at the same time. IE8 now works correctly with 120DPI where fixed pixel sizes have been used.
Cheers, Rob.
Have you considered not using such strict control over your sizes? In general, you will probably find it much easier to specify as few sizes and positions as possible. HTML is designed to handle size and position dynamically. The less you specify explicitly, the more able the browser is to arrange the page as needed to fit the user's browser size and viewing preferences.
Anyway, if you really must make heavy use of fixed positioning and such, I highly recommend you not use the visual designers in visual studio. They are very much NOT up to the task. I'd recommend looking around for other designer tools that handle the WYSIWYG stuff better. While I'm not a fan, dreamweaver does a respectable job with absolute positioning and has at least some support for aspx too.
Might I suggest using the YUI 'reset-fonts-grids.css' CSS from Yahoo, then you can use EMs as your units for fonts meaning the user's browser can decide how large or small to show the text.