Web Analytics Made Easy -
StatCounter from javascript to css - CodingForum

Announcement

Collapse
No announcement yet.

from javascript to css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • from javascript to css

    I need to change this javascript into a css file and make it function like it is now but I don't want to have javascript enabled on the web browser. Can someone help me?

    <script type="text/javascript">
    function SelectSize()
    {
    var dropDown=document.getElementById("size");
    var SelectedSize = dropDown.options[dropDown.selectedIndex].value;
    document.body.style.fontSize=SelectedSize + "px";
    }
    </script>
    <form name="frmcontrol">
    <select id=size onChange="SelectSize()" >
    <option value="20">Default
    <option value="12">Very Small
    <option value="72">Very Large
    </select>
    <input type="button" value="Change Size of Text" name="myButton" onClick="SelectSize()" />
    </form>

    <script language="javascript">

    function colorChange()
    {
    document.bgColor=document.list.colors.options[document.list.colors.selectedIndex].value;
    }
    </script>
    <form name="list">
    <select name="colors">
    <option value="006633">Default
    <option value="black">Black
    <option value="white">White
    </select>
    <input type="button" value="Change Background color" name="myButton2" onClick="colorChange()" />
    </form>

    <BODY bgColor=#006633>

    <script language="javascript">

    function change()
    {
    document.fgColor=document.text.color.options[document.text.color.selectedIndex].value;
    }
    </script>
    <form name="text">
    <select name="color">
    <option value="black">Default
    <option value="black">Black
    </select>
    <input type="button" value="Change Text color" name="myButton3" onClick="change()" />
    </form>

  • #2
    You cannot handle onchange or onclick events with CSS. They are inherently script.

    You'd have to change the element to something else that supports hover, then use hover, and even then IE doesn't support hover for anything other than anchors yet so you'd still need javascript.

    Look at the CSS menus out there that work off list items. They use CSS hover for most browsers, but use an htc file (javascript) for MSIE.

    If you need to ditch client-side script, have the user submit the form and generate the html with server-side script.

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

    Comment


    • #3
      but I don't want to have javascript enabled on the web browser.
      You don't want, you will have not. Make up you mind... You want exaggerated maximum security or you want effects on page?. There is no middle way.
      but use an htc
      I usually refuse a htc. This is a really dangerous item (same with java applets)
      KOR
      Offshore programming
      -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

      Comment


      • #4
        Originally posted by nikkiH
        Look at the CSS menus out there that work off list items. They use CSS hover for most browsers, but use an htc file (javascript) for MSIE.
        <corollary>
        the final version of IE 7 will support the hover pseudo-class on all elements. therefore IE 7 will also support CSS menus. no more HTCs for minor things like that.
        </corollary>

        *keep it simple (TM)

        Comment


        • #5
          Originally posted by jbot
          <corollary>
          the final version of IE 7 will support the hover pseudo-class on all elements. therefore IE 7 will also support CSS menus. no more HTCs for minor things like that.
          </corollary>

          YEAH!!!
          As a side note, I just discovered the htc thing when I was learning about CSS menus. That's all I use them for. If people refuse it, no big deal. Menu is still navigable without script, they just have to go the long way. LOL
          Script should enhance pages, not define them.

          If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
          Bored? Visit
          http://www.kaelisspace.com/

          Comment


          • #6
            I have nothing against htc, at least nothing more than you have against javascript Anyway, a good solution is the solution that fits to your needs. If it will bring you benefits, it is a good one. Good luck
            KOR
            Offshore programming
            -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

            Comment


            • #7
              Originally posted by nikkiH
              Script should enhance pages, not define them.
              agreed. we call this progressive JS.


              Originally posted by Kor
              a good solution is the solution that fits to your needs. If it will bring you benefits, it is a good one.
              so long as it benefits all end users, too. making an application which relies on JS to the exclusion of users without it is wrong. but using JS to benefit users which have it is good, just as long as those without can still get the same end result, however long it takes them to get to it.
              *keep it simple (TM)

              Comment


              • #8
                Originally posted by jbot
                .... making an application which relies on JS to the exclusion of users without it is wrong. ....
                I've seen similar statements before, but don't understand them. Looking at my webstats, all viewers have javascript capable browsers. So having it disabled seems like self-inflicted injury. I'd be interested to see thoughts on why javascript disabled browsers should be catered for.

                Meantime, I do try to use pages not dependent on javascript. But one page I have has a javascript triple dependent menu selection for a form, which neatly opens up 50 options to the enquirer. Our users love it. I have not figured a way of doing this without javascript - but would welcome suggestions.

                Comment


                • #9
                  I don't cater to any browser, personally.
                  I just know that I personally disable a lot of things in script that people abuse, including popups and window resizing, so I try to make sure my pages work all right (that is, they are readable and people can find things) even if the user is using Lynx.

                  Now, for intranet applications, that's a whole 'nother story...I get to require script for those.
                  But for your garden-variety site to assume people have script enabled, or flash installed, or anything else is just begging to piss off people who don't have that. And in some cases, it's even illegal. In the UK, commercial sites are required to support users with disabilities and code must work in special UAs they use.

                  Basically, if you don't know your users, code for the widest audience you can. Enhancements are just that -- enhancements.
                  If you know your users or if you have an application, you can tell people what they must use, but beware -- they might go somewhere else!

                  Our users love it
                  KEY WORDS
                  See, you know your users.
                  Whole 'nother ballgame from general internet sites.

                  ...
                  My 2 cents.

                  / i hate flash
                  // i hate applets more
                  /// do NOT resize my windows!!!
                  Last edited by nikkiH; Aug 3, 2005, 06:06 PM.

                  If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
                  Bored? Visit
                  http://www.kaelisspace.com/

                  Comment


                  • #10
                    Well, actually I think I do know my users for the site in question, since the site has been very specifically targeted at a certain audience, and the webstats suggest that this has been achieved. In the UK, the Disability Discrimination Act was poorly drafted, IMHO. I think it will take case law to establish what the law really is. So far as I am aware, there have been few prosecutions.

                    The act requires "reasonable steps" to be taken. So far, though I have asked around, no one has come up with a non-script alternative to my triple drop down menu in a form. So far, my "reasonable steps" have been to include a noscript statement that for the page in question, javascript is required.

                    Comment


                    • #11
                      Originally posted by kiwibrit
                      So far, though I have asked around, no one has come up with a non-script alternative to my triple drop down menu in a form.
                      You can do it with a server-side script. You need to have a submit button and submit the page after each selection and let the server-side script generate the corresponding options based on the selected item.
                      Glenn
                      vBulletin Mods That Rock!

                      Comment


                      • #12
                        in fact you can use both, using onsubmit="return false". If user has javascript enabled, it will run the code client-side. If not, it will submit and run the server-side.

                        Or u may include a site map. Users with javascript disabled could follow the navigation using the site map instead...
                        KOR
                        Offshore programming
                        -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

                        Comment


                        • #13
                          Originally posted by Kor
                          in fact you can use both, using onsubmit="return false". If user has javascript enabled, it will run the code client-side. If not, it will submit and run the server-side.

                          Or u may include a site map. Users with javascript disabled could follow the navigation using the site map instead...
                          The first solution is a possibility - and I will look at it. I don't see the site map being a viable option. Already the triple drop down calls up 50 options - and more are in the pipeline.

                          Comment


                          • #14
                            A simple site map with plain text links available from a place that doesn't require javascript would be all the solution you would need. Doesn't have to be anything fancy. Just enough so people can get to stuff, even if it takes longer without script.
                            As a bonus, this makes your site indexed better by spiders, too.

                            I have my main menu items be clickable so that they go to a page that lists the submenu links. Works good for search engines as well as non-JS UAs.

                            If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
                            Bored? Visit
                            http://www.kaelisspace.com/

                            Comment


                            • #15
                              as I said. Well, if it is about a site which adds/removes pages/links quite often, that would be probably tiresome... but I guess that it would take less time to do it that a server-side application... And that site-map could be as well a server-generated page, which could spare a lot of effort... It depends very much about the type of site, I reckon
                              KOR
                              Offshore programming
                              -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

                              Comment

                              Working...
                              X