Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Proposes solution to prevent FOUC + Refactoring code #202

Merged
merged 4 commits into from
May 11, 2014
Merged

Proposes solution to prevent FOUC + Refactoring code #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dec95a1
Proposes solution to prevent FOUC + Refactoring code
acemir May 9, 2014
88c42ca
FOUC adjusts
acemir May 9, 2014
e93d09c
FOUC adjusts for IE
acemir May 9, 2014
daa61c9
FOUC adjusts for Win7
acemir May 9, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 76 additions & 0 deletions dropkick.css
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,3 +191,79 @@
appearance: none;
-moz-appearance: none;
-webkit-appearance: none; }

/* Here we reflect some of the styles from .dk_container to achieve the same visual also when without javascript */
.dk_wrap {
position: relative;
display: inline-block;
min-width: 173px;
float: left;
margin-right: 10px;
margin-bottom: 18px;
background-color: #f5f5f5;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-transition: border-color .5s;
-moz-transition: border-color .5s;
-o-transition: border-color .5s;
transition: border-color .5s; }
.dk_wrap:after {
position: absolute;
display: block;
top: 45%;
right: 10px;
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #4B4B4B;
pointer-events:none; }
.dk_wrap select {
position: relative;
display: block;
width: 110%;
height: 32px;
padding: 6px 49px 8px 6px;
border: 0;
font-family: 'Helvetica', Arial, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 18px;
color: #333;
text-indent: 0.01px;
text-overflow: '';
text-shadow: #fff 1px 1px 0;
background: transparent;
background: rgba(255,255,255,0);
cursor: pointer;
border-radius: 0;
box-shadow: none;
appearance: none;
-moz-appearance: none
-webkit-appearance: none; }
.dk_wrap select:focus {
text-shadow: none; }
.dk_wrap select::-ms-expand {
display: none;
}

/* Firefox only */
@-moz-document url-prefix() {
.dk_wrap select {
padding: 7px 49px 7px 6px;
}
}

/* IE 10 + IE 11 only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.dk_wrap select {
padding: 7px 47px 7px 8px;
}
}

/* Opera 12 only
_:-o-prefocus, body:last-child .dk_wrap select {
padding: 7px 45px 7px 10px;
}
5 changes: 2 additions & 3 deletions example/example.css
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,9 +106,8 @@ ul {
}
.example .gist-wrap {
clear: both;
}
.example .gist-data {
font-size: 12px!important;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
font-size: 12px;
}

.example label {
Expand Down
49 changes: 48 additions & 1 deletion example/examples.html
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jquery.dropkick-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$(function() {
$('.default').dropkick();

$('.black').dropkick({
Expand Down Expand Up @@ -72,6 +72,51 @@ <h1>DropKick.js <span>Examples you can use.</span></h1>
</div>
<div class="content">
<form action="#" method="post" accept-charset="utf-8" class="examples part">
<fieldset class="example">
<h2>FOUC Solution Comparision:</h2>
<div class="fields">
<span class="dk_wrap">
<select name="country-wrap" class="nojs">
<option value="">Try Me!</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="DE">Germany</option>
<option value="JP">Japan</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
</select>
</span>
<span class="dk_wrap">
<select name="country-nofake" class="default">
<option value="">Try Me!</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="DE">Germany</option>
<option value="JP">Japan</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
</select>
</span>
<select name="country-nofake" class="default">
<option value="">Try Me!</option>
<option value="AU">Australia</option>
<option value="CA">Canada</option>
<option value="DE">Germany</option>
<option value="JP">Japan</option>
<option value="GB">United Kingdom</option>
<option value="US">United States</option>
</select>
</div>
<div class="gist-wrap">
<ul>
<li>The 1st select is wrapped with '.dk_wrap' but WITHOUT dropkick applied.</li>
<li>The 2nd select starts wrapped with .dk_wrap' and then dropkick is APPLIED.</li>
<li>The 3rd select doen NOT starts wrapped, but dropkick is APPLIED.</li>
<li>Reload the page to see the FOUC (Flash of Unstyled Content) again.</li>
</ul>
</div>
</fieldset>

<fieldset class="example">
<h2>Default Options</h2>
<div class="fields">
Expand Down Expand Up @@ -247,6 +292,8 @@ <h2>With &lt;optgroup&gt;</h2>
</div>
</fieldset>



</form>
</div>
</body>
Expand Down
Loading