CSS - Software development and programming

How to set up a CSS switcher

How to set up a CSS switcher I'm working on a website that will switch to a new style on a set date. The site's built-in semantic HTML and CSS, so the change should just require a CSS reference change. I'm working with a designer who will need to be able to see how it's looking, as well as a client who will need to be able to review content updates in the current look as well as design progress on the new look. I'm planning to use a magic querystring value and/or a javascript link in the footer which writes out a cookie to select the new CSS page. We're working in ASP_NET 3.5. Any recommendations? I should mention that we're using IE Conditional Comments for IE8, 7, and 6 support. I may create a function that does a replacement: <link href="Style/<% GetCssRoot() %>.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 8]> <link type="text/css" href="Style/<% GetCssRoot() %>-i...

Wrapping lists into columns

Wrapping lists into columns I'm using ColdFusion to populate a template that includes HTML unordered lists ( <ul> s). Most of these aren't that long, but a few have ridiculously long lengths and could really stand to be in 2-3 columns. Is there an HTML, ColdFusion or perhaps JavaScript (I'm accepting jQuery solutions) way to do this easily? It's not worth some over-complicated heavyweight solution to save some scrolling. Is this jquery plugin of any use to you? Check out the Columnizer jQuery plugin. 13 Answers So I dug up this article from A List Apart CSS Swag: Multi-Column Lists. I ended up using the first solution, it's not the best but the others require either using complex HTML that can't be generated dynamically, or creating a lot of custom classes, which could be done but would require loads of in-line styling and possibly a huge page. Other solutions are still welcome though. It's sad that two years later there is still no clean w...

How to set background color of HTML element using css properties in JavaScript How can I set the background color of an HTML element using css in JavaScript? 17 Answers In general, CSS properties are converted to JavaScript by making them camelCase without any dashes. So background-color becomes backgroundColor . function setColor(element, color) { element.style.backgroundColor = color; } // where el is the concerned element var el = document.getElementById('elementId'); setColor(el, 'green'); I'd like to add the color obviously needs to be in quotes element.style.backgroundColor = "color"; for example - element.style.backgroundColor = "orange"; excellent answer In Selenium tests: ((IJavaScriptExecutor)WebDriver).ExecuteScript("arguments[0].style.background = 'yellow';", webElement); @Catto In this case, color is an argument to the function, hence it should not be in quotes. However, you are right that normally, i...

How can I make the browser see CSS and Javascript changes? CSS and Javascript files don't change very often, so I want them to be cached by the web browser. But I also want the web browser to see changes made to these files without requiring the user to clear their browser cache. Also want a solution that works well with a version control system such as Subversion. Some solutions I have seen involve adding a version number to the end of the file in the form of a query string. Could use the SVN revision number to automate this for you: ASP . NET Display SVN Revision Number Can you specify how you include the Revision variable of another file? That is in the HTML file I can include the Revision number in the URL to the CSS or Javascript file. In the Subversion book it says about Revision: "This keyword describes the last known revision in which this file changed in the repository". Firefox also allows pressing CTRL+R to reload everything on a particular page. To cl...

How to detect which one of the defined font was used in a web page? Suppose I have the following CSS rule in my page: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } How could I detect which one of the defined fonts were used in the user's browser? For people wondering why I want to do this is because the font I'm detecting contains glyphs that are not available in other fonts. If the user does not have the font, then I want it to display a link asking the user to download that font (so they can use my web application with the correct font). Currently, I am displaying the download font link for all users. I want to only display this for people who do not have the correct font installed. One thing to keep in mind is that some browsers will replace certain missing fonts with similar fonts, which is impossible to detect using the JavaScript/CSS trick. For example, Windows browsers will substitute Arial for Helvetica if it's not installed. The tr...

Showing posts with the label CSS