Skip to content

Commit

Permalink
demo area walktrough
Browse files Browse the repository at this point in the history
  • Loading branch information
Tero Piirainen committed Mar 25, 2010
1 parent d46ff88 commit 00e27f9
Show file tree
Hide file tree
Showing 30 changed files with 190 additions and 95 deletions.
17 changes: 17 additions & 0 deletions demos/combine/overlay-slideshow/template.htm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<%-- :mode=jsp: --%>
<%@ include file="../standalone.jsf" %>
</head>

<body>



<script>
// What is $(document).ready ? See: http://flowplayer.org/tools/documentation/basics.html#document_ready
$(document).ready(function() {
<c:set var="js">

</c:set>
${js}
});
</script>
48 changes: 48 additions & 0 deletions demos/combine/overlay-slideshow/template.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<%-- :mode=jsp: --%>
<%@ include file="../header.jsf" %>

<p>

</p>

<%@ include file="" %>

<h3>HTML coding</h3>

<p>

</p>

<pii:code lang="html">
${html}
</pii:code>

<h3>CSS coding</h3>

<p>

</p>

<pii:code lang="css">
${css}
</pii:code>

<h3>JavaScript coding</h3>

<p>

</p>

<pii:code>
${js}
</pii:code>

<p>
You need to place the <samp>script</samp> block <em>after</em> the HTML code or you can alternatively use jQuery's <samp>$(document).ready</samp> to execute the script as soon as the webpage's Document Object Model (DOM) has been loaded. Read more about that from the <a href="${jqt}/documentation/basics.html#document_ready">User's Manual</a>.
</p>

<br />
<div class="box petrol">
Here is the <a href="">standalone version</a> of this demo. You can freely study and copy its source code.
</div>

39 changes: 19 additions & 20 deletions demos/combine/portfolio/boxed-01.css → demos/combine/portfolio/boxed-02.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@
}

/* general settings for both scrollables */
div.items {
.items {
width:20000em;
position:absolute;
clear:both;
}

/* next/prev buttons */
div.navi {
.navi {
background-image:url(/tools/img/scrollable/arrow/hori_large.png);
width:30px;
height:30px;
float:left;
margin-top:55px;
}

div.navi:hover { background-position:-30px 0; }
div.navi:active { background-position:-60px 0; }
div.nextPage { background-position: 0 -30px; clear:right; }
div.nextPage:hover { background-position:-30px -30px; }
div.nextPage:active { background-position:-60px -30px; }
.navi:hover { background-position:-30px 0; }
.navi:active { background-position:-60px 0; }
.next { background-position: 0 -30px; clear:right; }
.next:hover { background-position:-30px -30px; }
.next:active { background-position:-60px -30px; }


div.navi.disabled {
.navi.disabled {
visibility:hidden;
}

Expand All @@ -39,21 +39,20 @@ div.navi.disabled {
overflow:hidden;
float:left;
width: 602px;
height:140px;
background:#222 url(/img/global/gradient/h150.png) repeat-x;
height:130px;
background:#666 url(/img/global/gradient/h150.png) repeat-x;
margin:15px;
border:2px solid #fff;
outline:1px solid #333;
-moz-outline-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}

#thumbnails div.items div {
#thumbnails .items div {
padding:5px;
float:left;
}


/* box styling */
/* overlay styling */
#box {
background-image:url(/tools/img/overlay/black.png);
width:656px;
Expand Down Expand Up @@ -86,15 +85,15 @@ div.navi.disabled {
}

/* single image */
#images div.items div {
#images .items div {
float:left;
width:557px;
height:400px;
margin-right:30px;
}

/* the tooltip */
#images div.items div.info {
#images .items .info {
float:none;
background:#333;
color:#fff;
Expand All @@ -106,19 +105,19 @@ div.navi.disabled {
width:490px;
}

#images div.items div.info h3 {
#images .items .info h3 {
color:#cde;
margin-top:10px;
}


/* override button style on the overlay */
#box div.navi {
#box .navi {
position:absolute;
bottom:33px;
left:50px;
}

#box div.nextPage {
#box .next {
left:580px;
}
33 changes: 14 additions & 19 deletions demos/combine/portfolio/index.htm
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
<%-- :mode=jsp: --%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="${jqt}/demos/standalone.jsf" %>
<%@ include file="../../../demos/standalone.jsf" %>
<c:set var="preload" value="${empty param.preload ? preload : param.preload}"/>
<c:set var="images" value="02, 03, 04, 06, 07, 09, 11, 12, 15, 16, 17, 19, 20, 22, 23, 59"/>

<!-- include reflection plugin -->
<script src="reflection.min.js"></script>

<!-- styling -->
<link rel="stylesheet" type="text/css" href="${cdn}${jqt}/demos/combine/portfolio/${skin}-01.css"/>
<link rel="stylesheet" type="text/css" href="boxed-02.css"/>
</head>

<body>
<%-- programming variables --%>
<c:set var="skin" value="${empty param.skin ? 'boxed' : param.skin}"/>
<c:set var="preload" value="${empty param.preload ? preload : param.preload}"/>
<c:set var="images" value="02, 03, 04, 06, 07, 09, 11, 12, 15, 16, 17, 19, 20, 22, 23, 59"/>

<!-- thumbnail scrollable -->
<div class="navi prevPage"></div>
<div class="navi prev"></div>

<div id="thumbnails">

Expand All @@ -28,7 +26,7 @@

</div>

<div class="navi nextPage"></div>
<div class="navi next"></div>

<br clear="all" />

Expand Down Expand Up @@ -61,8 +59,8 @@ <h3>A Blue Flower</h3>
</div>

<!-- prev/next buttons -->
<div class="navi prevPage"></div>
<div class="navi nextPage"></div>
<div class="navi prev"></div>
<div class="navi next"></div>
<a class="close" href="#"> &nbsp; &nbsp; &nbsp; </a>
</div>

Expand All @@ -80,14 +78,11 @@ <h3>A Blue Flower</h3>

effect: 'apple',
target: '#box',
mask: {maskId: 'mask'},
mask: { maskId: 'mask' },

/*
when box is opened, scroll to correct position (in 0 seconds)
the "images" variable is defined below
*/
// when box is opened, scroll to correct position (in 0 seconds)
onLoad: function() {
images.seekTo(index, 0);
$("#images").data("scrollable").seekTo(index, 0);
}
});
});
Expand All @@ -96,8 +91,8 @@ <h3>A Blue Flower</h3>
${js1}

<c:set var="js2">
// scrollable inside the box. Its API is assigned to the "images" variable
var images = $("#images").scrollable({size: 1, api:true});
// scrollable inside the box.
$("#images").scrollable();

<c:if test="${!preload}">
// enable tooltips for the images
Expand Down Expand Up @@ -125,7 +120,7 @@ <h3>A Blue Flower</h3>
<c:if test="${preload}">
<c:set var="js4">
// when scrollable moves ...
images.onSeek(function() {
$("#images").data("scrollable").onBeforeSeek(function() {

var i = this.getIndex();

Expand Down
18 changes: 9 additions & 9 deletions demos/combine/portfolio/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@

<%-- :mode=jsp: --%>
<%@ include file="../../demos/header.jsf" %>
<%@ include file="../../../demos/header.jsf" %>

<p>
This demo shows you some of the possibilities you have when you start combining the jQuery Tools. This demo uses the scrollable, overlay, tooltip and Mask tools together. Click on the thumbnails to see larger versions of the flower images.
This demo shows you some of the possibilities you have when you start combining the jQuery Tools. This demo uses the scrollable, overlay, tooltip and expose tools together. Click on the thumbnails to see larger versions of the flower images.
</p>

<%@ include file="index.htm" %>

<p>
All tools are "skin free" and they only provide the necessary functionality. For that reason you have full control over their appearance. You'll also be surprised how little JavaScript coding this setup requires. <strong>The possibilities are endless</strong>. Get creative!
All tools are "skin free" and they only provide the necessary functionality. For that reason you have full control over their appearance. You'll also be surprised how little JavaScript coding this setup requires. The possibilities are endless.
</p>

<h3>HTML for the thumbnail scrollable</h3>
Expand All @@ -20,7 +20,7 @@ <h3>HTML for the thumbnail scrollable</h3>

<pii:code lang="html">
<!-- "prev page" button -->
<div class="navi prevPage"></div>
<div class="navi prev"></div>

<!-- root element for scrollable -->
<div id="thumbnails">
Expand All @@ -36,7 +36,7 @@ <h3>HTML for the thumbnail scrollable</h3>
</div>

<!-- "next page" button -->
<div class="navi nextPage"></div>
<div class="navi next"></div>

<br clear="all" />
</pii:code>
Expand Down Expand Up @@ -82,23 +82,23 @@ <h3>A Blue Flower</h3>
</div>

<!-- prev/next buttons -->
<div class="navi prevPage"></div>
<div class="navi nextPage"></div>
<div class="navi prev"></div>
<div class="navi next"></div>

</div>
</pii:code>

<h3>CSS coding</h3>

<p>
As always, the CSS coding may be the hardest part of the job. We are using an external CSS file called <a href="boxed.css">boxed.css</a>.
As always, the CSS coding may be the hardest part of the job. We are using an external CSS file called <a href="boxed-02.css">boxed.css</a>.
</p>


<h3>Setting up the thumbnail <em>scrollable</em></h3>

<p>
Here is the JavaScript configuration for the thumbnail scrollable. When the scrollable is initialized, a jQuery object is returned. We continue using that and find the actual images inside the scrollable. For those images we assign a <samp>click</samp> event which launches the overlay. The overlay constructor uses our "box" HTML element as the actual overlay. We enable the exposing effect and use a custom mask <samp>ID</samp> "mask" so that we can tweak the look of the mask with our <a href="boxed.css">CSS file</a>.
Here is the JavaScript configuration for the thumbnail scrollable. When the scrollable is initialized, a jQuery object is returned. We continue using that and find the actual images inside the scrollable. For those images we assign a <samp>click</samp> event which launches the overlay. The overlay constructor uses our "box" HTML element as the actual overlay. We enable the exposing effect and use a custom mask <samp>ID</samp> "mask" so that we can tweak the look of the mask with our <a href="boxed-02.css">CSS file</a>.
</p>

<p>
Expand Down
2 changes: 1 addition & 1 deletion demos/combine/portfolio/preload.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@

<%-- :mode=jsp: --%>
<%@ include file="../../demos/header.jsf" %>
<%@ include file="../../../demos/header.jsf" %>

<p>
Many times portfolio images are so large that it does not make sense to load them all on the page before they are being viewed. This demo continues from the <a href="index.html">previous demo</a> so that a large image is loaded only when it's being viewed. In addition, the next and previous images are <em>preloaded</em> so that they can also be viewed quickly.
Expand Down
31 changes: 27 additions & 4 deletions demos/dateinput/css/large.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@

#calroot {
margin-top:-10px;
margin-top:-22px;
}

#calbody {
clear:both;
font-family:sans-serif;
width:364px;
font-size:13px;
Expand All @@ -14,13 +15,31 @@
-webkit-box-shadow:0 0 10px 0px #ccc;
}

#calhead {
padding-left:200px;
}

#caltitle {
font-family:sans-serif;
text-align:right;
font-size:18px;
padding-bottom:5px;
text-align:center;
font-size:14px;
float:left;
width:130px;
}

#calnext, #calprev {
display:block;
width:20px;
height:20px;
background:transparent url(prev.gif) no-repeat scroll center center;
float:left;
cursor:pointer;
}

#calnext {
background-image:url(next.gif);
float:right;
}

#caldays span {
display:block;
Expand Down Expand Up @@ -81,6 +100,10 @@ a.caloff {
background:#eee url(../../rangeinput/img/h80.png) repeat-x;
}

a.caloff.calfocus {
background-color:#ddd;
}

.caldisabled {
background-color:#efefef !important;
color:#ccc !important;
Expand Down
Loading

0 comments on commit 00e27f9

Please sign in to comment.