Skip to content

Instantly share code, notes, and snippets.

@carlesso

carlesso/word_with_classes.html.erb

Created November 18, 2011 16:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carlesso/1376986 to your computer and use it in GitHub Desktop.
Save carlesso/1376986 to your computer and use it in GitHub Desktop.
Download ZIP
Inverted colors
Raw
word_with_classes.html.erb
<!DOCTYPE html>
<html>
<head>
<title>jQCloud Example</title>
<link rel="stylesheet" type="text/css" href="../jqcloud/jqcloud.css" />
<style type="text/css">
<%
def css_lines(color)
new_lines = []
r = color[:target][0..1].to_i(16)
g = color[:target][2..3].to_i(16)
b = color[:target][4..5].to_i(16)
steps = [(255 - r)/13.0, (255 - g)/13.0, (255 - b)/13.0]
puts steps.inspect
11.times do |i|
step_color = ""
steps.each do |s|
puts (255 - (s*(i+3)))
step_color << "%02x" % (255 - (s*(i+3)))
end
new_lines << "div.jqcloud span.#{color[:label]}.w#{i} { color: ##{step_color}}"
end
new_lines
end
colors = [ {:label => "aliceblue", :target => "f0f8ff"},{:label => "antiquewhite",:target =>"faebd7"},{:label => "aqua", :target =>"01ffff"} ,{:label => "aquamarine", :target => "7fffd4"} ,{:label => "azure", :target =>"f0ffff"} ,{:label => "beige", :target =>"f5f5dc"} ,{:label => "bisque", :target =>"ffe4c4"},{:label => "blanchedalmond", :target => "ffebcd"},{:label => "blueviolet", :target => "8a2be2"} ,{:label => "brown", :target => "a52a2a"} ,{:label => "burlywood", :target => "deb887"} ,{:label => "burntsienna", :target => "ea7e5d"} ]
# def css_lines(color)
# new_lines = []
# r = color[:target][0]
# g = color[:target][1]
# b = color[:target][2]
# 12.times do |i|
# new_lines << "div.jqcloud span.#{color[:label]}.w#{i} { color: rgba(#{r},#{g},#{b},#{((i+1)*(255/12.0))/255.0}) }"
# end
# new_lines
# end
# red = {:label => "red", :target => [255,0,0]}
# green = {:label => "green", :target => [0,255,0]}
# blue = {:label => "blue", :target => [0,0,255]}
lines = []
# lines += css_lines(red)
# lines += css_lines(blue)
# lines += css_lines(green)
colors.each do |c|
lines += css_lines(c)
end
lines.each do |l|
%>
<%= l %>
<% end %>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="../jqcloud/jqcloud-<%= version %>.js"></script>
<script type="text/javascript">
// var word_list = [
// {text: "Lorem", weight: 13, url: "https://github.com/DukeLeNoir/jQCloud", css_class: "green"},
// {text: "Ipsum", weight: 10.5, url: "http://jquery.com/", title: "My Title", css_class: "red"},
// {text: "Dolor", weight: 9.4, url: "javascript:alert('JavaScript in URL is OK!');", css_class: "green"},
// {text: "Sit", weight: 8, css_class: "blue"},
// {text: "Amet", weight: 6.2, css_class: "red"},
// {text: "Consectetur", weight: 5, css_class: "blue"},
// {text: "Adipiscing", weight: 5, css_class: "green"},
// {text: "Elit", weight: 5, css_class: "blue"},
// {text: "Nam et", weight: 5, css_class: "red"},
// {text: "Leo", weight: 4, css_class: "blue"},
// {text: "Sapien", weight: 4, css_class: "green"},
// {text: "Pellentesque", weight: 3, css_class: "blue"},
// {text: "habitant", weight: 3, css_class: "blue"},
// {text: "morbi", weight: 3, css_class: "red"},
// {text: "tristisque", weight: 3, css_class: "blue"},
// {text: "senectus", weight: 3, css_class: "green"},
// {text: "et netus", weight: 3, css_class: "blue"},
// {text: "et malesuada", weight: 3, css_class: "blue"},
// {text: "fames", weight: 2, css_class: "red"},
// {text: "ac turpis", weight: 2, css_class: "blue"},
// {text: "egestas", weight: 2, css_class: "blue"},
// {text: "Aenean", weight: 2, css_class: "blue"},
// {text: "vestibulum", weight: 2, css_class: "blue"},
// {text: "elit", weight: 2, css_class: "blue"},
// {text: "sit amet", weight: 2, css_class: "red"},
// {text: "metus", weight: 2, css_class: "blue"},
// {text: "adipiscing", weight: 2, css_class: "blue"},
// {text: "ut ultrices", weight: 2, css_class: "green"},
// {text: "justo", weight: 1, css_class: "blue"},
// {text: "dictum", weight: 1, css_class: "red"},
// {text: "Ut et leo", weight: 1, css_class: "blue"},
// {text: "metus", weight: 1, css_class: "blue"},
// {text: "at molestie", weight: 1, css_class: "blue"},
// {text: "purus", weight: 1, css_class: "blue"},
// {text: "Curabitur", weight: 1, css_class: "blue"},
// {text: "diam", weight: 1, css_class: "red"},
// {text: "dui", weight: 1, css_class: "blue"},
// {text: "ullamcorper", weight: 1, css_class: "green"},
// {text: "id vuluptate ut", weight: 1, css_class: "blue"},
// {text: "mattis", weight: 1, css_class: "blue"},
// {text: "et nulla", weight: 1, css_class: "green"},
// {text: "Sed", weight: 1}
// ];
<%
s = "var word_list = [\n"
colors.each do |c|
4.times do |t|
s+= "{text: \"#{c[:label]}\", weight: #{t}, css_class: \"#{c[:label]}\"},"
end
end
s.chop!
s += "\n];"
%>
<%= s %>
$(document).ready(function() {
$("#my_favorite_latin_words").jQCloud(word_list);
});
</script>
</head>
<body>
<h1>jQCloud Example</h1>
<div id="my_favorite_latin_words" style="width: 550px; height: 350px; border: 1px solid #ccc;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment