Tag: styles
Nabin Nepal (Starx) css styles table
April 23, 2012

Is there a way to take off the style off a certain table?

Question by user1250526

user1250526user1250526

Hi guys I have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like and then it is plain and ignores the css?

I have looked but I can not find anything related!

Answer by mert

mertmert

Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.

CSS

table.myClass {
...
}

HTML

<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>

Answer by Starx

StarxStarx

CSS are cascading style sheets, they only style an element. Can’t manipulate anything. You will need to use JavaScript.

Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.

Nabin Nepal (Starx) css html styles
March 7, 2012

How can i change an inline css style when clicking a link?

Question by Lucas Matos

Lucas MatosLucas Matos

i have a form hidden with inline style="display: none;"

how can i dinamicaly change this style to style="display: inline;" when a link on the page is clicked?

Answer by Starx

StarxStarx

Prety simple

<a href="#" onclick="document.getElementById('myform').style.display = 'inline';">Click me</a>

Update

jQuery is a lightweight JavaScript library that can do tons of cool stuff, with writing a very less script from the developers side.

First of all, I suggest you to read “How jQuery works?“, is has everything you need to get started using the jQuery.

I will explain the code I wrote in the fiddle.

First of all the link & form

<a id="linktotoggle" href="#">Click Me</a>
<form id="formtotoggle"></form>

Remember the id in the link and form above. That is how we are going to select the element in the script just like what document.getElementById() does.

Lets hide the form by default

#formtotoggle { display: none; }

Now lets write the jquery

$(document).ready(function() {
// ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.
   $("#linktotoggle").click(function() {
   // ^ Attach a click event to our link
        $("#formtotoggle").toggle();
        // ^ select the form and toggle its display

   });
});

Hope it is enough, to get you started.

Nabin Nepal (Starx) border button css firefox styles
March 2, 2012

How to remove blue border around the button in Firefox?

Question by masato-san

masato-sanmasato-san

I’m using Firefox 10, Windows 7 and not sure older version but when I clicked the button, the blue border appears around the button.

I created the example below.

http://jsfiddle.net/dEvKb/58/

I removed the dotted line with css below but I also do not want blue border. I can’t figure how to remove it or is it even possible to remove?

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner
{
    border: none;
    outline: none;
}

below didn’t work…

input[type="button"]:visited
{
    outline: none;
    border: none;
}

This is evil blue border I’m talking about.

enter image description here

Answer by Starx

StarxStarx

That is the UI of Firefox, whether themed or none. Not something you got from coding.

If it is troubling you so much you can reset it and define your own style. Here is a reset rule for that.

button { background: none transparent; border: none; }

Check here

And you can add your styling on it later on. Here is a demo for that. You can define custom states for hover, visited , active like the way you want.

...

Please fill the form - I will response as fast as I can!