SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change Background Gradient with JQuery

    Hi guys, basically I have a background with a vertical gradient light to dark on a div.

    Now when that div expands I lose the gradiated effect because the css has it set up to start in a certain place and blend to dark at a set percentage of the div. I would like to use JQuery so that when the div expands, I can change the gradient positioning. Can anyone paste some code?

    Also on older versions of IE (7 and 8) I am using filters to do the gradient, does anyone know if JQuery can dynamically change these filters too?

    thanks in advance
    "Persistence is the path to perfection"

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does the div expand to pre-defined values? If so the simplest way to tackle this is to create several classes with the variant gradients you are using and apply those instead of changing the css properties. You could even animated them using CSS transitions, but you won't get support for that in older browsers and very limited support in versions of IE. If you have a more fluid expansion then this probably won't work and someone might have an answer for setting those properties.

  3. #3
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Anthony, I should have realized that is the best solution cheers
    "Persistence is the path to perfection"

  4. #4
    SitePoint Enthusiast OMGCarlos's Avatar
    Join Date
    Apr 2012
    Location
    Boston, MA
    Posts
    91
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you really need it, don't forget about SVG. It'll allow you to animate the gradient across all modern browsers (IE9+). This page can get you started http://apike.ca/prog_svg_gradients.html ... although you might be better off with what Anthony suggested.

  5. #5
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thanks OMGCarlos,

    I will look into it, have been hearing about SVG for years, shall check it out
    "Persistence is the path to perfection"


Bookmarks

Posting Permissions

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