Skip to content

Commit 12c683f

Browse files
piyushmadanpiyushmadan
committed
first commit
1 parent 93f1c30 commit 12c683f

19 files changed

+5770
-1
lines changed

‎README.md

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,13 @@
11
DonTheDOM
22
=========
3+
=This piece of code helps you change the CSS (like firebug, chrome inspector,etc) on the fly, you need to use contents of id=DonTheDOM inside your html file along with library and css file
34

4-
Fun Project to manipulate CSS Dynamically (uses jQuery,selector.js
5+
This app uses CSS3Utilities.js, selector.js and jquery
6+
7+
**If you wish to see how it works, visit [here](http://madanpiyush.github.com/DonTheDOM/)**
8+
9+
Screencast [here](http://madanpiyush.github.com/DonTheDOM/screencast/screencast.ogv)
10+
11+
I have made this file out of one of the demos of CSSUtility and added some of my code
12+
13+
*This is a fun project. Just use the code if you wish to*

‎css/DonTheDOM.css

+240
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
html, body
2+
{
3+
font:normal normal normal 1em/1.4 arial,sans-serif;
4+
background:#fff;
5+
color:#444;
6+
background-image:url("../images/background.jpg");
7+
background-size: cover;
8+
}
9+
10+
body
11+
{
12+
padding:20px;
13+
font-size:100%;
14+
}
15+
16+
p, h1
17+
{
18+
margin:0;
19+
}
20+
21+
h1
22+
{
23+
font-size:1.88em;
24+
letter-spacing:-1px;
25+
font-weight:normal;
26+
}
27+
28+
p
29+
{
30+
font-size:1em;
31+
}
32+
33+
#intro-column
34+
{
35+
float:left;
36+
}
37+
38+
abbr
39+
{
40+
font-style:normal;
41+
font-variant:normal;
42+
border:none;
43+
cursor:default;
44+
}
45+
46+
.cssutilities-demo
47+
{
48+
width:90%;
49+
margin:40 0 2em 0;
50+
float:bottom;
51+
}
52+
53+
54+
.cssutilities-demo button
55+
{
56+
display:inline-block;
57+
font:normal normal normal 0.83em/1.4 arial,sans-serif;
58+
padding:4px;
59+
color:#444;
60+
text-decoration: none;
61+
-moz-border-radius: 5px;
62+
-webkit-border-radius: 5px;
63+
border-radius: 5px;
64+
-moz-box-shadow:0 1px 1px rgba(50,50,50,0.3);
65+
-webkit-box-shadow:0 1px 1px rgba(50,50,50,0.3);
66+
box-shadow:0 1px 1px rgba(50,50,50,0.3);
67+
border:1px solid;
68+
border-color:rgba(180,180,180,0.45)
69+
rgba(100,100,100,0.35)
70+
rgba(50,50,50,0.3)
71+
rgba(180,180,180,0.45);
72+
position:relative;
73+
cursor:pointer;
74+
margin:0 0 3px 0;
75+
background:#eee;
76+
width:15em;
77+
float:left;
78+
}
79+
.cssutilities-demo button::-moz-focus-inner
80+
{
81+
padding:0;
82+
}
83+
.cssutilities-demo button:active
84+
{
85+
top:1px;
86+
width:15em;
87+
}
88+
.cssutilities-demo button.off
89+
{
90+
width:15em;
91+
background:#fcc;
92+
}
93+
.cssutilities-demo button.on
94+
{
95+
width:15em;
96+
background:#cfc;
97+
}
98+
99+
.cssutilities-demo button em
100+
{
101+
font-style:normal;
102+
font-size:0.83em;
103+
}
104+
105+
106+
.cssutilities-demo div
107+
{
108+
background:#fff;
109+
color:#000;
110+
float: left;
111+
112+
border:1px solid;
113+
border-color:#888 #aaa #aaa #888;
114+
font-size:0.83em;
115+
width: 300px;
116+
}
117+
118+
119+
.cssutilities-demo div p
120+
{
121+
width:66px;
122+
margin:21px;
123+
}
124+
125+
126+
.cssutilities-demo dl
127+
{
128+
border:none;
129+
padding:0;
130+
margin:0;
131+
font-size:1em;
132+
}
133+
134+
.cssutilities-demo dl dt
135+
{
136+
margin:0;
137+
background:#898;
138+
border-top:1px solid #888;
139+
border-bottom:1px solid #888;
140+
color:#fff;
141+
font-weight:normal;
142+
line-height:1.2;
143+
padding:4px 6px;
144+
margin:0;
145+
}
146+
.cssutilities-demo dl dt:first-child
147+
{
148+
border-top:none;
149+
}
150+
151+
.cssutilities-demo dl dt code
152+
{
153+
white-space:nowrap;
154+
font:normal normal normal 1em monaco,"courier new",monospace;
155+
}
156+
157+
.cssutilities-demo dl dd
158+
{
159+
margin:0;
160+
padding:0;
161+
}
162+
163+
.cssutilities-demo dl dd pre
164+
{
165+
white-space:pre;
166+
font:normal normal normal 12px/1.3 monaco,"courier new",monospace;
167+
display:block;
168+
border:none;
169+
padding:0;
170+
background:#fff;
171+
color:#000;
172+
margin:0;
173+
padding:8px;
174+
height:auto;
175+
overflow:visible;
176+
}
177+
178+
.cssutilities-demo dl dd pre del
179+
{
180+
color:#666;
181+
text-decoration:line-through;
182+
}
183+
.cssutilities-demo dl dd pre span.cssselector
184+
{
185+
color:#006;
186+
}
187+
.cssutilities-demo dl dd pre span.cssproperty
188+
{
189+
color:#900;
190+
border: solid 1px;
191+
}
192+
.cssutilities-demo dl dd pre span.cssvalue
193+
{
194+
color:#060;
195+
border: solid 1px;
196+
197+
}
198+
199+
.home
200+
{
201+
list-style-image : url("../images/home.png");
202+
}
203+
204+
.work
205+
{
206+
list-style-image : url("../images/work.png");
207+
}
208+
209+
.code
210+
{
211+
list-style-image : url("../images/javascript.png");
212+
}
213+
214+
#links
215+
{
216+
margin-top: 50px;
217+
}
218+
219+
img:hover
220+
{
221+
opacity:0.4;
222+
}
223+
224+
#DonTheDOM
225+
{
226+
float:left;
227+
width:90%;
228+
padding:100 10 100 10;
229+
position:absolute;
230+
bottom:10px;
231+
232+
}
233+
234+
.footer-link
235+
{
236+
position:absolute;
237+
bottom: 10px;
238+
color:grey ;
239+
right: 0px
240+
}

‎images/.directory

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
[Dolphin]
2+
PreviewsShown=true
3+
Timestamp=2013,2,17,0,59,24
4+
Version=3

‎images/background.jpg

205 KB
Loading

‎images/facebook.png

1.19 KB
Loading

‎images/github.png

2.42 KB
Loading

‎images/home.png

484 Bytes
Loading

‎images/javascript.png

710 Bytes
Loading

‎images/tumblr.png

1.16 KB
Loading

‎images/twitter.png

1.74 KB
Loading

‎images/waiting.gif

6.66 KB
Loading

‎images/work.png

714 Bytes
Loading

‎index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
3+
4+
<head>
5+
<title>About Piyush Madan</title>
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<!--Some of the CSS was reused from Selector.js demo html page -->
8+
<link rel="stylesheet" type="text/css" href="css/DonTheDOM.css" />
9+
<!-- CSSUtilities + Selector.js + jQuery.js-->
10+
<script type="text/javascript" src="lib/CSSUtilities.js"></script>
11+
<script type="text/javascript" src="lib/Selector.js"></script>
12+
<script type="text/javascript" src="lib/jquery-1.9.1.min.js"></script>
13+
</head>
14+
15+
<body>
16+
<div id="intro-column">
17+
<h1>Piyush Madan</h1>
18+
19+
<p>OpenSource Supporter/Contributor, Bigtime Foodie, Passionate Music Lover and proud Delhiite</p>
20+
<ol>
21+
<li class="home">Lives in New Delhi,India</li>
22+
<li class="work">Works at Raxa</li>
23+
<li class="code">Loves to play with JavaScript</li>
24+
</ol>
25+
<div id="Links">
26+
<a href="https://github.com/madanpiyush">
27+
<img src="images/github.png">
28+
</a>
29+
<a href="http://twitter.com/madanpiyush">
30+
<img src="images/twitter.png">
31+
</a>
32+
<a href="http://facebook.com/madanpiyush">
33+
<img src="images/facebook.png">
34+
</a>
35+
<a href="http://piyushmadan.tumblr.com">
36+
<img src="images/tumblr.png">
37+
</a>
38+
</div>
39+
</div>
40+
<div id="DonTheDOM">
41+
<div class="cssutilities-demo">
42+
<button type="button" id="cssutilities-demotrigger" style: "">INSPECT</button>
43+
<div id="content-demo" style="width: 90%;height:200px ; overflow:scroll;" hidden></div>
44+
</div>
45+
<textarea id="targetStyle" style="width:80%; height: 150px; " value="">
46+
1. Start inspecting by Pressing Inspect button
47+
2. Hover over the elements and select the element to load its properties</textarea>
48+
</div>
49+
<p class="footer-link">View Code on
50+
<a style=" color:grey; font-weight: bold; " href="https://github.com/madanpiyush/DonTheDOM">GitHub
51+
</a>
52+
</p>
53+
<div>
54+
<!-- demo script -->
55+
<script type="text/javascript" src="js/DonTheDOM.js"></script>
56+
</body>
57+
58+
</html>

0 commit comments

Comments
 (0)