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

Fixed 1.4 example page, broke out example page CSS into separate file, remove #iToggle namespace from css, updated docs #2

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fixed 1.4 example page, broke out example page CSS into separate file, remove #iToggle namespace from css, updated docs #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
783ed4e
comment out overlay close on 1.4 example page as it was halting js ex…
Apr 30, 2013
dbfa652
update docs
Apr 30, 2013
fd8ca5e
break out example page specific css to a new file to keep the lib cle…
Apr 30, 2013
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,4 @@ Tested on:

Requirements
=============
* jQuery v1.7+
* jQuery v1.4 or jQuery v1.7+
38 changes: 38 additions & 0 deletions example/css/example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
div#itoggle {
background:#FFF;
padding:20px 20px 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color:#333;
}

div#itoggle h3 {
margin-bottom:4px;
font-size: 14px;
font-weight:bold;
}

div#itoggle p {
color:#666;
margin-bottom:10px;
}

div#console {
display:none;
position:absolute;
top:8px;
right:8px;
width:160px;
padding:6px 8px 8px 8px;
text-align:right;
background:#000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:url(../img/console.gif);
}

div#console p {
margin:0;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}
13 changes: 7 additions & 6 deletions example/iToggle.1.4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
<!--
@import url("css/reset.css");
@import url("css/global.css");
@import url("css/example.css");
-->
</style>
<link href="../src/engage.itoggle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/chili.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="../src/engage.itoggle.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Expand Down Expand Up @@ -50,7 +51,7 @@
statusUpdate('Slide off '+$(this).attr('for'));
}
});

$('#itoggle #example_3').iToggle({
easing: 'easeOutExpo',
type: 'radio',
Expand All @@ -67,7 +68,7 @@
statusUpdate('Slide off '+$(this).attr('for'));
}
});

function statusUpdate(text){
$('#console').prepend('<p>'+text+'</p>');
$('#console p:nth-child(1)').css({color:'#0F0'});
Expand All @@ -78,7 +79,7 @@
$('#console p:nth-child(6)').css({color:'#030'});
$('#console p:nth-child(7)').remove();
}

// End jQuery goodness
});
</script>
Expand Down Expand Up @@ -217,14 +218,14 @@ <h2><em>.04</em> Customise the CSS</h2>
left:-9999px;
}

/*
/*
If you want the corners to be
transparent, add these two lines
to the main block above. Only
works on webkit and mozilla browsers
For more reliable results, make your
own png using the supplied .psd

-moz-border-radius:6px;
-webkit-border-radius:6px;
*/</code></pre>
Expand Down
13 changes: 7 additions & 6 deletions example/iToggle.1.7.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
<!--
@import url("css/reset.css");
@import url("css/global.css");
@import url("css/example.css");
-->
</style>
<link href="../src/engage.itoggle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/chili.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="../src/engage.itoggle.1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Expand Down Expand Up @@ -50,7 +51,7 @@
statusUpdate('Slide off '+$(this).attr('for'));
}
});

$('#itoggle #example_3').iToggle({
easing: 'easeOutExpo',
type: 'radio',
Expand All @@ -67,7 +68,7 @@
statusUpdate('Slide off '+$(this).attr('for'));
}
});

function statusUpdate(text){
$('#console').prepend('<p>'+text+'</p>');
$('#console p:nth-child(1)').css({color:'#0F0'});
Expand All @@ -78,7 +79,7 @@
$('#console p:nth-child(6)').css({color:'#030'});
$('#console p:nth-child(7)').remove();
}

// End jQuery goodness
});
</script>
Expand Down Expand Up @@ -217,14 +218,14 @@ <h2><em>.04</em> Customise the CSS</h2>
left:-9999px;
}

/*
/*
If you want the corners to be
transparent, add these two lines
to the main block above. Only
works on webkit and mozilla browsers
For more reliable results, make your
own png using the supplied .psd

-moz-border-radius:6px;
-webkit-border-radius:6px;
*/</code></pre>
Expand Down
13 changes: 7 additions & 6 deletions example/js/global.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,21 @@ $(document).ready(function(){
code('show', $(this).next('div.code'));
return false;
});

// ONE CLICK THAT WILL ONLY WORK ONCE
$('a.show_code').one('click', function(){
$(this).next('div.code').children('pre').children('code').chili(); //Load chili on click
});

// CLOSE THE VIEWER
$('div#overlay').click(function(){
code('hide');
});
$(document).on("click", 'div.options a.close', function() {
code('hide');
return false;
});

// $(document).on("click", 'div.options a.close', function() {
// code('hide');
// return false;
// });

// SHOW OR HIDE FUNCTION
function code(action, object){
Expand Down
107 changes: 33 additions & 74 deletions src/engage.itoggle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,94 +1,53 @@
/* ---------------------------------------------
TOGGLE.CSS
-----------------------------------------------*/
input.iT_checkbox_on {
display: block !important;
float: left;
position: relative !important;
top: -43px !important;
left: 100px !important;
margin-bottom: -43px;
}

div#itoggle{
background:#FFF;
padding:20px 20px 0;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color:#333;
}
div#itoggle h3{
margin-bottom:4px;
font-size: 14px;
font-weight:bold;
}
div#itoggle p{
color:#666;
margin-bottom:10px;
}

div#console{
display:none;
position:absolute;
top:8px;
right:8px;
width:160px;
padding:6px 8px 8px 8px;
text-align:right;
background:#000;
-moz-border-radius:6px;
-webkit-border-radius:6px;
background:url(../example/img/console.gif);
}
div#console p{
margin:0;
font-size:11px;
font-family:"Courier New", Courier, monospace;
}

div#itoggle input.iT_checkbox_on{
display:block !important;
float:left;
position:relative !important;
top:-43px !important;
left:100px !important;
margin-bottom:-43px;
}

/* -----------------------------
This is the important bit
-------------------------------*/

div#itoggle label.ilabel{
display:block;
font-size:12px;
padding-bottom:10px;
cursor:pointer;
}
label.ilabel {
display: block;
font-size: 12px;
padding-bottom: 10px;
cursor: pointer;
}

div#itoggle label.itoggle,
div#itoggle label.itoggle span{
label.itoggle,
label.itoggle span {
display: block;
width: 93px;
height: 27px;
margin-bottom: 20px;
background: url(itoggle.png) left bottom no-repeat;
cursor:pointer;
text-indent:-5000px;
}
div#itoggle label.itoggle.iToff{
background-position:right bottom;
}
div#itoggle label.itoggle span{
}

label.itoggle.iToff {
background-position: right bottom;
}

label.itoggle span {
background-position: left top;
margin: 0;
}
div#itoggle input.iT_checkbox{
position:absolute;
top:-9999px;
left:-9999px;
}
}

input.iT_checkbox {
position: absolute;
top: -9999px;
left: -9999px;
}

/*
/*
If you want the corners to be
transparent, add these two lines
to the main block above. Only
works on webkit and mozilla browsers
For more reliable results, make your
own png using the supplied .psd

-moz-border-radius:6px;
-webkit-border-radius:6px;
*/
*/