Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Tags Active Topics RSS Search Mark Forums Read

Reply
 
Thread Tools Search this Thread
  #1  
Old 18-08-2009
Member
 
Join Date: Apr 2009
Posts: 69
How to set the javascript gradient background in HTML

A gradient background effect will display your selected HTML background colors in ascending or descending color variations, and also the problem is when we use the <canvas> tag to manipulate an image or a graphic, it is treated in HTML as an inline object (similar to a super-charged <img>). I've made this with photoshop but when I want to add it to my site, it doesn't give the effect I want. This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.
Reply With Quote
  #2  
Old 18-08-2009
Member
 
Join Date: Mar 2008
Posts: 258
Re: How to set the javascript gradient background in HTML

When you use the <canvas> tag to manipulate an image or a graphic, it is treated in HTML as an inline object (similar to a super-charged <img>). The behavior attaches itself to the onload event and walks through the DOM looking for objects with a class name containing the word "gradient" in the 0th position of the string. To add more colour bands, simply add more sets of parameters to the "createGradient" method calls. To have less colour bands, remove any extra "createGradient" method calls.
Reply With Quote
  #3  
Old 18-08-2009
Member
 
Join Date: Dec 2008
Posts: 161
Re: How to set the javascript gradient background in HTML

This script gets around this limitation by using the toDataUrl() function in canvas (supported in Firefox and Opera). toDataUrl() essentially takes the contents of a canvas and turns it into an image, which can then be made into the background of a <div>. Upon finding an object that matches the criteria, it is added to an array which is returned to the caller upon completion.
Reply With Quote
  #4  
Old 18-08-2009
Member
 
Join Date: Jan 2009
Posts: 140
Re: How to set the javascript gradient background in HTML

A series of div elements be created and set as children of the element. I wasn't suppost to be a double post, I just hoped to find some guys over here who could wright javascript. The innerHTML of the parent element is copied, placed into a div or span element (depending on if the display of the element is block or inline), The div elements are appended to a documentFragment object and then appended to the parent element for maximum speed of execution.
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "How to set the javascript gradient background in HTML"
Thread Thread Starter Forum Replies Last Post
How to use javascript to create HTML and CSS KennedII Software Development 5 23-02-2010 12:10 AM
How to Set table with Html Background? Aakarshan.d Software Development 3 26-11-2009 01:22 PM
HTML/JavaScript/onclick KADEEM Software Development 4 03-11-2009 06:37 PM
Flash as HTML background Gap meer Software Development 3 23-04-2009 10:33 PM
JavaScript with HTML Parsing! Samsher Software Development 4 02-02-2009 12:30 PM


All times are GMT +5.5. The time now is 01:22 AM.