-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathproj_index.html
128 lines (112 loc) · 3.14 KB
/
proj_index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
<title>LEarn jQuery</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery-color.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap.js"></script>
<script>
css_background = 'blue';
css_width = '100px;'
css_height = '30px';
css_border_radius = '0px';
function css_func(){
css_tag = ".result{background: "+css_background+"; width: "+css_width+"; height: "+css_height+"; border: brown solid 2px; border-radius: "+css_border_radius+"}";
$('style').replaceWith('<style>'+css_tag+'</style>');
$('#css_coding').text(css_tag);
}
$(document).ready(function(){
css_func();
$('select').change(function(){
css_background = $(this).val();
css_func();
});
//Width Changer
$('#width_changer').slider({
range: 'min',
value: 100, // this value should be equal to the css_width
min: 50,
max: 200,
slide: function(event, ui){
//This function are for the real time or for the dynamical values
css_width = ui.value+"px";
css_func();
}
});
//Height Changer
$('#height_changer').slider({
range: 'min',
value: 30,
min: 10,
max: 50,
slide: function(event, ui){
//This function are for the real time or for the dynamical values
css_height = ui.value+"px";
// ui.value is for modifing the value.
css_func();
}
});
// Border Radius Changer
$('#radius_changer').slider({
ranger: 'min',
value: 0,
min: 0,
max: 20,
slide: function(event, ui){
css_border_radius = ui.value+"px";
css_func();
}
});
//Getting CSS in the dialog Box
$('#get_css').click(function(){
$('#css_coding').dialog({
"title": "The Style"
});
});
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 blocks" style="background-color: gray;">
<div class="form-group">
<label>Select Any Color: </label>
<select class="form-control">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
<option value="gray">Gray</option>
<option value="yellow">Yellow</option>
<option value="purple">Purple</option>
</select>
</div>
<div class="form-group">
<label>Width Changer</label>
<div id="width_changer"></div>
</div>
<div class="form-group">
<label>Height Changer</label>
<div id="height_changer"></div>
</div>
<div>
<label>Border Radius Changer</label>
<div id="radius_changer"></div>
</div>
</div>
<div class="col-md-6 blocks">
<div class="result"></div>
<div id="css_coding"></div>
<br><br><br><br>
<button class="btn btn-danger" id="get_css">Get CSS</button>
</div>
</div>
</div>
</body>
</html>