Skip to content

Commit 20f5ecb

Browse files
craftpipcraftpip
committed
somechanges
1 parent a466dd8 commit 20f5ecb

17 files changed

+350
-7002
lines changed

‎css/bootstrap-theme.css

-442
This file was deleted.

‎css/bootstrap-theme.css.map

-1
This file was deleted.

‎css/bootstrap-theme.min.css

-5
This file was deleted.

‎css/bootstrap.css

-6,203
This file was deleted.

‎css/bootstrap.css.map

-1
This file was deleted.

‎css/bootstrap.min.css

-5
This file was deleted.

‎demo.css

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.craftpip-logo{
2+
background-image: url('logo-name.svg');
3+
background-size: contain;
4+
/*background-color: black;*/
5+
background-position: center;
6+
width: 130px;
7+
display:block;
8+
height:20px;
9+
}
10+
.spacer15{
11+
height: 15px;
12+
}
13+
pre{
14+
padding: 0 !important;
15+
}

‎demo.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
$(window).resize(function () {
2+
adjustWidth();
3+
});
4+
function adjustWidth() {
5+
$('.sticky-alt').css('width', $('.sticky-alt').parent().width() + 'px');
6+
}
7+
$(document).ready(function () {
8+
adjustWidth();
9+
hljs.initHighlightingOnLoad();
10+
});
11+
$(window).scroll(function(){
12+
var sti = $('.sticky-alt').parent().offset().top-30
13+
console.log(sti);
14+
var scr = $(window).scrollTop()
15+
console.log(scr);
16+
17+
if(scr > sti){
18+
$('.sticky-alt').css({
19+
'position':'fixed',
20+
'top':'15px',
21+
});
22+
}else{
23+
$('.sticky-alt').css({
24+
'position':'relative',
25+
'top':'0px',
26+
});
27+
}
28+
29+
});

‎fonts/glyphicons-halflings-regular.eot

-19.9 KB
Binary file not shown.

‎fonts/glyphicons-halflings-regular.svg

-229
This file was deleted.

‎fonts/glyphicons-halflings-regular.ttf

-40.3 KB
Binary file not shown.

‎fonts/glyphicons-halflings-regular.woff

-22.8 KB
Binary file not shown.

‎index.html

+124-112
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,144 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
6-
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
7-
<link rel="stylesheet" type="text/css" href="css/bootstrap-mobile-select.css" />
8-
<title>bootstrap select mobile</title>
9-
</head>
10-
<body>
11-
<style type="text/css">
12-
body{
13-
background-color: #eee;
14-
}
15-
.col-lg-8{
16-
background-color: #fff;
17-
}
18-
</style>
193

20-
<div class="container">
21-
<div class="row">
22-
<div class="col-md-12">
23-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
24-
<div class="container-fluid">
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="chrome=1">
7+
<title>Bootstrap-fullscreen-select by craftpip</title>
8+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
9+
<!--[if lt IE 9]>
10+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11+
<![endif]-->
12+
<!-- Latest compiled and minified CSS -->
13+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
14+
15+
<!-- Optional theme -->
16+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
17+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
18+
<link href="mystyles.css" rel="stylesheet">
19+
<!-- Latest compiled and minified JavaScript -->
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
21+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
22+
<!-- hilight -->
23+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/default.min.css">
24+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
25+
</head>
26+
<body>
27+
<div style="height: 15px"></div>
28+
<div class="container">
29+
<div class="row">
30+
<div class="col-lg-12">
31+
<div class="logo-wrapper-project">
32+
<div class="logo-wrapper-project"></div>
33+
</div>
34+
<nav class="navbar navbar-default" role="navigation">
35+
<div class="container-fluid">
2536
<!-- Brand and toggle get grouped for better mobile display -->
2637
<div class="navbar-header">
27-
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
28-
<span class="sr-only">Toggle navigation</span>
29-
<span class="icon-bar"></span>
30-
<span class="icon-bar"></span>
31-
<span class="icon-bar"></span>
32-
</button>
33-
<a class="navbar-brand" href="#">Brand</a>
38+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
39+
<span class="sr-only">Toggle navigation</span>
40+
<span class="icon-bar"></span>
41+
<span class="icon-bar"></span>
42+
<span class="icon-bar"></span>
43+
</button>
44+
<a class="navbar-brand" href="#"><span class="craftpip-logo"></span></a>
3445
</div>
3546

3647
<!-- Collect the nav links, forms, and other content for toggling -->
3748
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
38-
<ul class="nav navbar-nav">
39-
<li class="active"><a href="#">Link</a></li>
40-
<li><a href="#">Link</a></li>
41-
<li class="dropdown">
42-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
43-
<ul class="dropdown-menu" role="menu">
44-
<li><a href="#">Action</a></li>
45-
<li><a href="#">Another action</a></li>
46-
<li><a href="#">Something else here</a></li>
47-
<li class="divider"></li>
48-
<li><a href="#">Separated link</a></li>
49-
<li class="divider"></li>
50-
<li><a href="#">One more separated link</a></li>
51-
</ul>
52-
</li>
53-
</ul>
54-
<form class="navbar-form navbar-left" role="search">
55-
<div class="form-group">
56-
<input type="text" class="form-control" placeholder="Search">
57-
</div>
58-
<button type="submit" class="btn btn-default">Submit</button>
59-
</form>
60-
<ul class="nav navbar-nav navbar-right">
61-
<li><a href="#">Link</a></li>
62-
<li class="dropdown">
63-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
64-
<ul class="dropdown-menu" role="menu">
65-
<li><a href="#">Action</a></li>
66-
<li><a href="#">Another action</a></li>
67-
<li><a href="#">Something else here</a></li>
68-
<li class="divider"></li>
69-
<li><a href="#">Separated link</a></li>
70-
</ul>
71-
</li>
72-
</ul>
49+
<ul class="nav navbar-nav">
50+
<li class=""><a href="#"><i class="fa fa-github"></i> Github home</a></li>
51+
<li class=""><a href="#">Project page</a></li>
52+
<li class=""><a href="#">Contact</a></li>
53+
</ul>
54+
<!-- <ul class="nav navbar-nav navbar-right">
55+
<li><a href="#">Link</a></li>
56+
</ul> -->
7357
</div><!-- /.navbar-collapse -->
74-
</div><!-- /.container-fluid -->
75-
</nav>
76-
</div>
58+
</div><!-- /.container-fluid -->
59+
</nav>
7760
</div>
7861
</div>
62+
</div>
63+
<div class="container">
64+
<div class="row">
65+
<div class="col-md-3">
66+
<div class="sticky-alt">
67+
<p>
68+
<strong>bootstrap-fullscreen-select</strong><br>
69+
<a href="https://github.com/craftpip/bootstrap-fullscreen-select">
70+
view on <i class="fa fa-github"></i> Github
71+
</a>
72+
</p>
73+
<div class="btn-group btn-group-justified">
74+
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/zipball/master" class="btn btn-default btn-lg">
75+
<i class="fa fa-download"></i> ZIP File
76+
</a>
77+
<a href="https://github.com/craftpip/bootstrap-fullscreen-select/tarball/master" class="btn btn-default btn-lg"> TAR Ball</a>
78+
</div>
79+
<div class="spacer15"></div>
80+
<div class="panel panel-default">
81+
<div class="list-group">
82+
<a class="list-group-item" href="#introduction"><i class="fa fa-circle-o fa-fw"></i> Introduction / Download</a>
83+
<a class="list-group-item" href="#usage"><i class="fa fa-circle-o fa-fw"></i> Usage</a>
84+
<a class="list-group-item" href="#examples"><i class="fa fa-circle-o fa-fw"></i> Examples</a>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<div class="col-md-9">
90+
<section id="introduction">
91+
<header>
92+
<h1 style="margin-top:0px;">bootstrap-fullscreen-select</h1>
93+
<p>
94+
A custom select for @twitter bootstrap. <br>
95+
unlike others, this plugin provides a fullscreen select feature, that is trigger via a custom defined element.<br>
96+
</p>
97+
<p>
98+
<i class="fa fa-circle-o"></i> Designed for Mobile UI, when it is not practical to use a dropdown select on a small display.
99+
</p>
100+
</header>
101+
</section>
102+
<section id="usage">
103+
<h1>usage</h1>
104+
<h4>html: </h4>
105+
<pre><code class="html">&lt;select class="form-control" id="mySelectElement"&gt; //your select element
106+
&lt;option value="0"&gt;Something&lt;/option&gt;
107+
&lt;option value="1"&gt;Something else&lt;/option&gt;
108+
&lt;option value="2"&gt;Something even else&lt;/option&gt;
109+
&lt;option value="3"&gt;Enough&lt;/option&gt;
110+
&lt;/select&gt;
79111

80-
<div class="container">
81-
<div class="row">
82-
<div class="col-lg-8 col-lg-offset-2">
83-
<h1>Basic usage</h1>
84-
<p></p>
112+
&lt;button class="btn btn-default" id="myTriggerBtn"&gt;Show&lt;/button&gt; //the element on which user will interact.</code></pre>
85113

86-
<button class="btn btn-primary" id="triggerBy">example id="triggerBy"</button>
87-
<select id="selectElem" style="" >
88-
<option value="1">idea</option>
89-
<option value="2">vodafone</option>
90-
<option value="3">aircel</option>
91-
<option value="4">tata docomo</option>
92-
<option value="5">that</option>
93-
</select>
114+
<!--
115+
<select class="form-control" id="mySelectElement" style="width:300px;display:inline">
116+
<option value="0">Something</option>
117+
<option value="1">Something else</option>
118+
<option value="2">Something even else</option>
119+
<option value="3">Enough</option>
120+
</select>
94121
95-
<code>$('asdasd')</code>
122+
<button class="btn btn-default" id="myTriggerBtn">Show</button> -->
96123

97-
<h1>2nd</h1>
98-
<p></p>
124+
<h4>javascript: </h4>
125+
<pre><code class="js">
99126

100-
<button class="btn btn-primary" id="asdasd">example id="triggerBy"</button>
101-
<select id="dasdas" style="" multiple>
102-
<option value="1">idea</option>
103-
<option value="2">vodafone</option>
104-
<option value="3">aircel</option>
105-
<option value="4">tata docomo</option>
106-
<option value="5">that</option>
107-
</select>
127+
</code></pre>
108128

109-
<code>$('asdasd')</code>
110-
</div>
111-
</div>
129+
</section>
130+
<section id="examples">
131+
<h1>examples</h1>
132+
<p>
133+
134+
</p>
135+
</section>
136+
</div>
112137
</div>
113-
<script type="text/javascript" src="js/libs/jquery.js"></script>
114-
<script type="text/javascript" src="js/bootstrap-mobile-select.js"></script>
115-
<script type="text/javascript">
116-
$(document).ready(function(){
138+
</div>
139+
140+
<script type="text/javascript" src="javascript.js"></script>
141+
142+
</body>
117143

118-
bootSelect.init({
119-
selectControl: '#selectElem',
120-
on: '#triggerBy',
121-
title: 'Order by'
122-
});
123-
124-
bootSelect.init({
125-
selectControl: '#dasdas',
126-
on: '#asdasd',
127-
title: 'this by'
128-
});
129-
});
130-
</script>
131-
</body>
132144
</html>

0 commit comments

Comments
 (0)