How to make a link appear as a normal link in one screen size, as a button in another?

Question 1

Annoyingnewbie’s Question:

I’m programming a website with three different sizes for desktop, netbook and mobile phone systems.

On the main page I have a click-thru html link of the

<a href="more.html">Find out more</a>

variety.

What I want is to change this to a button for mobile screens, like a conditional statement or something.

Any ideas?

Thanks

Answer

Starx

Use media queries. They can help you target type of screen and based on its width. For example

@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {

    /* Now you can write a different style of elements on a screen with maximum 300px as width */

   a {
      color: #f00; /* Make link appear red on mobile screen */

      /* make it should like a button */
      border: 1px #c00 solid;
      background: #ddd; 
   }
}

Note: Media Queries are CSS3 features, and will not work in earlier version of IE.

Question 2

Question by Voyager

Voyager

I have one small problem… I need to put this script http://jsfiddle.net/mctcs/ to work on my page, but i don’t know how to do it…. What to copy where, and how to make jquerry working! I don’t have pre-knowledge about jquerry and don’t know how it functions…

I need instructions like where to paste which code (head, body), and what file to make (js, html) also what values to change so it works! Can someone zipp example or something?

I would be forever gratefull!

Thanks!!

Answer

Answer by Starx

Starx

We can see the full paged version of a fiddle by adding an /show/ at the end.

Save this version of the fiddle. It contains all the scripts and resources needed for that particular fiddle to run.

Compare and meet them in your application.

Question 3

Question by Unicorn

Unicorn

this is what i have so far:
– a table with 20 to 30 cells
– each cell has 1 check box and a value (different value of course)
– two button to trigger select all and select none checkboxes.

Codes so far:
– to trigger select all/none:

Javascript:

function set_checked(checked) {
    $('input[name=test]').attr('checked', checked);
}

buttons:

onclick="set_checked(true)" and onclick="set_checked(false)" for both buttons.

now, how do i add color change on both buttons? for example, entire table bg color change to green when select all and change to white when select none.

Answer

Answer by Starx

Starx

This should do, what is needed

function set_checked(checked) {
    $('input:checked').attr('checked', checked); //select all checkbox
    if(checked) {
         $("table").css("backgroundColor", "#ddd"); //new color
    } else {
         $("table").css("backgroundColor", "#fff"); //old color
    }
}

Question 4

Question by masato-san

masato-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

Answer by Starx

Starx

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.

Tag: button

How to make a link appear as a normal link in one screen size, as a button in another?

Annoyingnewbie’s Question:

I need to put script from jsFiddle to work

Question by Voyager

Answer by Starx

Button to select all check boxes and change entire table's bg color

Question by Unicorn

Answer by Starx

How to remove blue border around the button in Firefox?

Question by masato-san

Answer by Starx

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