Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post

    CSS or JavaScript?

    Say I wanted to implement a rollover on my website - should I do this via CSS or JavaScript? I understand rollovers can be created in both, but which of those methods is better and more reliable, and generally just recommended to use over the other, and for what reason?

    Thanks for any help in advance.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    It depends on what kind of functionality you want. There are intricate rollover behaviors/interactions that can only be done with JS. But if it’s a simple rollover thing then definitely use CSS. It’s easier and it requires less processor power.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    But are there any advantages/disadvantages of using one over the other? Is it recommended to use one over the other?

    Also, say I wanted to achieve something like this:

    http://www.marketforceinc.net/index.html

    ...speaking specifically of the main menu rollover and also the ones on the smaller links at the top of the page - I realize that is done via Flash, just tested it, but would it be possible to achieve the same thing using CSS or JS just as smoothly and effectively?
    Last edited by Hashim1; 01-16-2012 at 10:47 PM.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The biggest disadvantage of using for javascript for ANY site functionality is that ppl can and have disabled js in their own browsers. Therefore, anything in your site that requires js to work, wouldn't work for them. You can see how this might be quite a problem for some ppl.

    A good rule of thumb is, javascript should only enhance the user experience, the site shouldnt hinge on it to function.
    Teed

  • Users who have thanked teedoff for this post:

    Hashim1 (01-17-2012)

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 646 Times in 636 Posts
    Very few people have CSS disabled or use a plain text browser (eg. Lynx).

    A slightly larger percentage use browsers that don't support JavaScript or have disabled JavaScript in their browser. This group will include everyone in the above group as a subset.

    A much larger percentage will have flash disabled or more likely will not have installed it in the first place.

    It is therefore better to use CSS when it will do what you require.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Well you can't really compare CSS and Javascript as a one versus-the-other type thing, as they are both different parts of web design that serve different functions- CSS alters the presentation of your page while Javascript allows you to dynamically alter your page (to say the least) at runtime. So, for example, your navigation buttons could be given a default background via CSS when the page loads and when a user hovers over the button, javascript could be used to change the CSS background property. If Javascript isn't necessary, though (a lot of features that could previously only be accomplished with Javascript are now possible with HTML5 and CSS3), it shouldn't be used, as it requires more resources and may be disabled on a users browser.

    You should also look into JQuery. It offers lots of pretty presentation functions, from accordion menus to shaking elements.
    "Yeah science!"
    Online Science Tools

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 646 Times in 636 Posts
    Quote Originally Posted by djh101 View Post
    Well you can't really compare CSS and Javascript as a one versus-the-other type thing, as they are both different parts of web design that serve different functions
    You obviously haven't read the thread properly as this discussion is about something that can be done in CSS in a limited way but which can be done in a more powerful way using a small amount of JavaScript. jQuery is definitely not necessary for such a simple task.

    The OP needs to decide whether to implement the simple version in CSS or to implement a more powerful one with a couple of lines of JavaScript. Of course a slightly more complicated approach would be to implement both so that the CSS version works when JS is unavailable.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Hashim1 (01-17-2012)

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Okay, thanks. Finally, what about the last part of my question...

    ...would it be possible to achieve the same thing using CSS or JS just as smoothly and effectively?
    Can a rollover like as seen on that page I linked to above, be created with JavaScript or CSS and work exactly the same, just as smoothly as the Flash one? Is one faster, slower, more limited, etc, than the other?

    Thanks for all the help I've got in this thread, it's much appreciated and will be taken on board.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #9
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    You obviously haven't read the thread properly as this discussion is about something that can be done in CSS in a limited way but which can be done in a more powerful way using a small amount of JavaScript. jQuery is definitely not necessary for such a simple task.
    The only way this can be done is with CSS. Javascript merely changes the CSS to alter the presentation, it isn't something separate that can style something all by itself. And creating a rollover as animated as the one in the example isn't really that simple a task. For animations like that, JQuery is usually the way to go.

    And to answer the above question, no, the above cannot be created with pure CSS. As already mentioned, I would recommend JQuery (a nice animation tutorial can be found here) to get animations similar to the one in the example.
    Last edited by djh101; 01-17-2012 at 08:35 PM.
    "Yeah science!"
    Online Science Tools

  • #10
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 646 Times in 636 Posts
    Quote Originally Posted by Hashim1 View Post
    Can a rollover like as seen on that page I linked to above, be created with JavaScript or CSS and work exactly the same, just as smoothly as the Flash one? Is one faster, slower, more limited, etc, than the other?
    A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

    A CSS version would only be able to do a straight swap of one image for the other without any transition.

    Take a look at http://www.brothercake.com/site/reso...s/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Hashim1 (01-17-2012)

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by felgall View Post
    A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

    A CSS version would only be able to do a straight swap of one image for the other without any transition.

    Take a look at http://www.brothercake.com/site/reso...s/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).
    Although CSS3 has the ability to do transitions without any js, but not sure how m any browser support it. I'm pretty sure FF4 and up, as well as Opera and Chrome. But even IE9 doesn;t see to support it. IE 10 possibly?

    You can read about CSS3 transitions here.
    Teed

  • Users who have thanked teedoff for this post:

    Hashim1 (01-17-2012)

  • #12
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Thanks a lot for all the help, and teedoff, that link you provided helped immensely, it's really cleared up what transitions are in CSS, how they work, plus much more. One very tiny problem, but a major one at the same time - that article seems to be an excerpt from a book published in 2010, in which it mentions transitions aren't supported by all major browsers as of yet - does anyone know whether, 2 years later, the situation has changed? Are transitions supported by all major browsers now, and therefore, can I use them confidently knowing that users of all the major browsers can see them just the same?

    EDIT - Sorry, teedoff, just realized you explained that in your post, too. So, everything else except IE supports it? Hmmm... to boycott IE users, or not to?
    Last edited by Hashim1; 01-17-2012 at 10:20 PM.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #13
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by felgall View Post
    A JavaScript version can do just about anything that a Flash version can with the added bonus of working in browsers that don't have Flash installed but do have JavaScript.

    A CSS version would only be able to do a straight swap of one image for the other without any transition.

    Take a look at http://www.brothercake.com/site/reso...s/transitions/ for examples of the sorts of transitions that can be done easily in JavaScript (using the library supplied on that site).
    So am I to take this to mean that, in a nutshell - JavaScript can achieve the navigation bar rollover effect used in that site I linked to (http://www.marketforceinc.net), and it will look just as smooth and clean as it does in Flash, but if done in CSS, it won't look as smooth and clean?
    Last edited by Hashim1; 01-17-2012 at 10:26 PM.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #14
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Hashim1 View Post
    So am I to take this to mean that, in a nutshell - JavaScript can achieve the navigation bar rollover effect used in that site I linked to (http://www.marketforceinc.net), and it will look just as smooth and clean as it does in Flash, but if done in CSS, it won't look as smooth and clean?
    You can achieve that effect in both javascript AND CSS3, but there are drawbacks to both. You could even use BOTH to cover your bases.

    Many browsers dont support CSS3 properties yet, so thats the drawback to relying on CSS3.

    But many user may have disabled js for one reason or another, a small percent granted, but some nonetheless.

    Why not go ahead and work up a demo of both methods, then you can see how each one looks. There are plenty of demos for each method online.
    Teed

  • Users who have thanked teedoff for this post:

    Hashim1 (01-17-2012)

  • #15
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by teedoff View Post
    You can achieve that effect in both javascript AND CSS3, but there are drawbacks to both. You could even use BOTH to cover your bases.

    Many browsers dont support CSS3 properties yet, so thats the drawback to relying on CSS3.

    But many user may have disabled js for one reason or another, a small percent granted, but some nonetheless.

    Why not go ahead and work up a demo of both methods, then you can see how each one looks. There are plenty of demos for each method online.
    Ok, let's suppose I did both? Would I need to setup a script in place to detect whether CSS3 is supported in the user's browser (is it even possible to do so?), and whether JS is supported? Or would it just be a case of, having both the CSS and JS script active at the same time and seeing which the user's browser supports? If the latter, then wouldn't this cause issues with CSS and JS clashing somehow?
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.



  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •