| Current File : /home/k/a/r/karenpetzb/www/items/category/index.html.tar |
home/karenpetzb/www/business/light/js/jScrollPane/index.html 0000604 00000035276 15071137263 0020272 0 ustar 00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</title>
<!-- styles specific to demo site -->
<link type="text/css" href="style/demo.css" rel="stylesheet" media="all" />
<!-- styles needed by jScrollPane - include in your own sites -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- the mousewheel plugin -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#themes">Themes</a></li>
<li><a href="#usage">How to use</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="known_issues.html">Known issues</a></li>
<li><a href="#support">Support</a></li>
<li><a href="#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - cross browser styleable scrollbars with jQuery and CSS</h1>
<p class="intro">
jScrollPane is a cross-browser <a href="http://jquery.com">jQuery</a> plugin by
<a href="http://www.kelvinluck.com">Kelvin Luck</a> which converts a browser's default scrollbars (on
elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.
</p>
<p>
jScrollPane is designed to be flexible but very easy to use. After you have <a href="#download">
downloaded</a> and <a href="#usage">included</a> the relevant files
in the head of your document all you need to to is call one javascript function to initialise the
scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing
<a href="#themes">themes</a>. There are a number of different <a href="#examples">examples</a> showcasing
different features of jScrollPane and a number of ways for you to get <a href="#support">support</a>.
</p>
<h2 id="usage">How to use</h2>
<p>
It is very simple to use jScrollPane. You will need to <a href="#download">download</a> the necessary
files and place them on your server. Then you just need to include the relevant files in the <head>
of your document:
</p>
<pre><!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script></pre>
<p>
Then you just need to initialise jScrollPane on document.ready (using a selector which will find the
content you want to apply jScrollPane to):
</p>
<pre>$(function()
{
$('.scroll-pane').jScrollPane();
});</pre>
<p>
There are plenty of different ways to use jScrollPane - either passing in different <a href="settings.html">
settings</a> when you initialise it or by using the <a href="api.html">API</a>. Each of these different
use cases is covered by an <a href="#examples">example</a> linked to from below.
</p>
<h2 id="download">Download</h2>
<p>
You can always find the latest code for jScrollPane on its <a href="http://github.com/vitch/jScrollPane">
github</a> page. You can either check out this entire website (including all examples) via git, or you
can use the handy github functionality to <a href="http://github.com/vitch/jScrollPane/archives/master">
download a zip</a> of the repository.
</p>
<p>
The particular files that you need are:
</p>
<ul class="link-list">
<li>
<a href="style/jquery.jscrollpane.css">jquery.jscrollpane.css</a> - the basic CSS styles that are
needed for jScrollPane to work.
</li>
<li>
<a href="http://www.jquery.com">The jQuery library</a> - although I recommend including this
directly from a CDN like I do above and in all of the examples.
</li>
<li>
<a href="script/jquery.mousewheel.js">jquery.mousewheel.js</a> - The
<a href="http://github.com/brandonaaron/jquery-mousewheel/">jQuery mouseweel</a> plugin. This is
optional but recommended, include it to allow people to scroll your content using their mouse wheel.
</li>
<li>
<a href="script/mwheelIntent.js">mwheelIntent.js</a> - The
<a href="http://www.protofunc.com/scripts/jquery/mwheelIntent/">mwheelIntent</a> plugin. This is
totally optional but can increase the usability of the mousewheel in nested scroll areas.
<a href="mwheel_intent.html">See demo</a>.
</li>
<li>
<a href="script/jquery.jscrollpane.min.js">jquery.jscrollpane.min.js</a> - the actual javascript file
for jScrollPane (you can also get the <a href="script/jquery.jscrollpane.js">unminified</a> version
if yu want to see the sourcecode and read the comments).
</li>
</ul>
<h2 id="examples">Simple examples/ tests</h2>
<p>
These examples show very basic functionality and exist so that I can test that any changes to
jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant
to look pretty, they merely highlight different bits of functionaity which are available. If you want
examples of jScrollPane looking good then check out the <a href="#themes">themes</a>.
</p>
<ul class="link-list">
<li>
<a href="basic.html">Demo</a> showing basic scrolling (horizontal, vertical and combined)
</li>
<li>
<a href="arrows.html">Demo</a> showing basic scrolling (horizontal, vertical and combined) with
arrow buttons
</li>
<li>
<a href="focus.html">Demo</a> showing how the contents of the scrollpane is focused as you tab to it
</li>
<li>
<a href="caps.html">Demo</a> showing how you can set "caps" and "gutters" to change the size and
positioning of the scrollbar relative to the content it is scrolling
</li>
<li>
<a href="drag_size.html">Demo</a> showing how you can restrict the minimum and maxium size of the
drag part of the scrollbar
</li>
<li>
<a href="arrow_hover.html">Demo</a> showing how the <a href="settings.html#arrowScrollOnHover">
arrowScrollOnHover</a> option makes the arrow buttons automatically scroll the content when you
hover over them
</li>
<li>
<a href="arrow_positions.html">Demo</a> showing how the <a href="settings.html#verticalArrowPositions">
verticalArrowPositions</a> and <a href="settings.html#horizontalArrowPositions">
horizontalArrowPositions</a> options can change the position of the arrow buttons
</li>
<li>
<a href="scroll_to.html">Demo</a> showing how you can use the <a href="api.html#scrollTo">scrollTo
</a> and <a href="api.html#scrollBy">scrollBy</a> methods of the API
</li>
<li>
<a href="scroll_to_animate.html">Demo</a> showing how you can use the <a href="api.html#scrollTo">
scrollTo</a> and <a href="api.html#scrollBy">scrollBy</a> methods of the API along with the
<a href="settings.html#animateScroll">animateScroll</a> which enables animation when scrolling
</li>
<li>
<a href="anchors.html">Demo</a> showing how you can make internal links automatically scroll the
scrollpane (and how <a href="anchors.html#para4">external links</a> can link directly into content
within a jScrollPane)
</li>
<li>
<a href="invisibles.html">Demo</a> showing that jScrollPane can work correctly on elements which are
initially set to be invisible via CSS
</li>
<li>
<a href="less_basic.html">Demo</a> showing vertical scrolling with multiple panes on the same page
and adding dynamic content and then reinitialising one of the panes
</li>
<li>
<a href="dynamic_content.html">Demo</a> showing how you can manually <a href="api.html#reinitialise">
reinitialise</a> the scrollpane if you add dynamic content to it
</li>
<li>
<a href="ajax.html">Demo</a> showing how you can change the content of your jScrollPane via an ajax
call and can reinitialise the scrollpane once the new content has loaded
</li>
<li>
<a href="auto_reinitialise.html">Demo</a> showing how jScrollPane can be set to automatically
reinitialise itself on a timer via the <a href="settings.html#autoReinitialise">autoReinitialise</a>
parameter
</li>
<li>
<a href="image.html">Demo</a> showing how <a href="settings.html#autoReinitialise">autoReinitialise
</a> can also be used so that content with images in it displays correctly in jScrollPane
</li>
<li>
<a href="dynamic_width.html">Demo</a> showing how jScrollPane can be reinitialised when the width of
it's container changes and will update to fill the available space
</li>
<li>
<a href="dynamic_height.html">Demo</a> showing how jScrollPane can be reinitialised when the height
of it's container changes and will update to fill the available space
</li>
<li>
<a href="fullpage_scroll.html">Demo</a> showing how jScrollPane can be applied to an entire page
so that the browser's default scrollbars for the page are replaced. This demo also shows that you
can nest jScrollPanes and everything will still work correctly.
</li>
<li>
<a href="iframe.html">Demo</a> showing how jScrollPane can be used to style the scrollbars in an
iframe.
</li>
<li>
<a href="scroll_on_left.html">Demo</a> showing how vertical scrollbars can also appear on the left
hand side of content
</li>
<li>
<a href="short.html">Demo</a> showing that no scrollbars are created when the content is too short
to scroll
</li>
<li>
<a href="events.html">Demo</a> showing the events that are dispatched by an element you apply
jScrollPane to.
</li>
</ul>
<h2 id="themes">Themes</h2>
<p>
You can style jScrollPane however you like using simple CSS. To give you some ideas, here are a variety
of different themes which you are free to <a href="#download">download</a> and use or modify:
</p>
<ul>
<li><a href="themes/lozenge/">Lozenge</a> - lozenge shaped sliders and small arrow buttons</li>
</ul>
<h2 id="support">Support</h2>
<p>
Before trying to get support please check if your problem is a <a href="known_issues.html">known
issue</a> or if it is mentioned in the <a href="faqs.html">FAQs</a>. If your issue is a new one and
you can't find any information about it then you can try one of the following two options:
</p>
<ul>
<li>
<p>
Using the <a href="http://stackoverflow.com">StackOverflow</a> site. This is probably the
place you are most likely to get a quick answer as many Javascript experts spend time on
the site. It also provides niceties like pretty formatting of posted sourcecode.
</p>
<p>
If you ask a question on the site make sure you add the tags "jquery" and "jscrollpane" as
I will be monitoring these tags to try to provide support.
</p>
</li>
<li>
<p>
Through the <a href="http://groups.google.com/group/jscrollpane/">jScrollPane google group
</a> - sign up and then you can start a discussion (either by email or through the web
interface).
</p>
<p>
Please remember to use the search field at the top of the group's homepage to search the
archive to find out if your question has been answered before.
</p>
</li>
</ul>
<p>
If you have contacted support and established that your problem is definitely a bug then you can
<a href="http://github.com/vitch/jScrollPane/issues">raise an issue</a> on the project's github
site.
</p>
<h2 id="history">History</h2>
<p>
jScrollPane was originally developed in December 2006. Since then it has been constantly updated to
fix bugs and add new features. The change history since November 2008 is available in the jScrollPane
<a href="http://github.com/vitch/jScrollPane">git repository</a>. In August 2010 a major rewrite was
undertaken, starting from a blank canvas and adding long awaited features like horizontal scrolling
and automatic reinitialisation. If you want to find old versions of jScrollPane then you can check out
the <a href="changelog.html">changelog</a>.
</p>
<h2 id="credits">Credits</h2>
<p>
Thanks to <a href="http://www.hoppermagic.com">Hoppermagic</a> for creating the jScrollPane logo! And
thanks to Mark Reed, Philip Leff and <a href="http://www.erwinodendaal.com">Erwin Odendaal</a> for
sponsoring the development of v2 of this plugin (particularly to enable horizontal scrolling).
</p>
<h2 id="donate">Donate</h2>
<p>
jScrollPane is a personal project that is open source for anybody to use as they want to. If you (and
your clients!) like jScrollPane then please consider donating to it's ongoing development. You can do
so via Pledgie or Paypal using the images below:
</p>
<p style="margin-top: 0; float: left;">
<a href='http://www.pledgie.com/campaigns/12524'>
<img alt='Click here to lend your support to: jScrollPane and make a donation at www.pledgie.com !'
src='http://www.pledgie.com/campaigns/12524.png?skin_name=chrome' border='0'
/>
</a>
</p>
<form method="post" action="https://www.paypal.com/cgi-bin/webscr" style="margin: 15px 0 0 20px;">
<input type="hidden" value="_donations" name="cmd">
<input type="hidden" value="V2UG6D75CZ4SS" name="business">
<input type="hidden" value="GB" name="lc">
<input type="hidden" value="jScrollPane" name="item_name">
<input type="hidden" value="GBP" name="currency_code">
<input type="hidden" value="PP-DonationsBF:btn_donate_SM.gif:NonHosted" name="bn">
<input type="image" alt="" name="submit" style="border: 0pt none;" src="https://www.paypal.com/en_GB/i/btn/btn_donate_SM.gif">
<img height="1" border="0" width="1" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" style="padding: 0pt;" alt="">
</form>
</div>
</body>
</html> home/karenpetzb/www/business/light/js/fancybox/index.html 0000604 00000014204 15071153235 0017650 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
$("a#example1").fancybox();
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
$("a#example5").fancybox();
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
/*
* Examples - various
*/
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
$("#various2").fancybox();
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
</head>
<body>
<div id="content">
<h1>fancybox <span>v1.3.4</span></h1>
<p>This is a demonstration. <a href="http://fancybox.net">Home page</a></p>
<hr />
<p>
Different animations<br />
<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>
<a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>
<a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>
<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</p>
<p>
Different title positions<br />
<a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>
<a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>
<a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>
<a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>
</p>
<p>
Image gallery (ps, try using mouse scroll wheel)<br />
<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
<a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
<a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
</p>
<p>
Various examples
</p>
<ul>
<li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a></li>
<li><a id="various2" href="ajax.txt">Ajax</a></li>
<li><a id="various3" href="http://google.ca">Iframe</a></li>
<li><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a></li>
</ul>
<div style="display: none;">
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
</div>
</div>
<p>
Ajax example will not run from your local computer and requires a server to run.
</p>
<p>
Photo Credit: <a href="http://www.flickr.com/people/kharied/">Katie Harris</a>
</p>
</div>
</body>
</html> home/karenpetzb/www/business/light/js/carouFredSel/index.html 0000604 00000010326 15071155101 0020410 0 ustar 00 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="caroufredsel.frebsite.nl" />
<meta name="robots" content="index,follow" />
<meta name="description" content="carouFredSel: an infinite, circular jQuery carousel" />
<meta name="keywords" content="caroufredsel, infinite, circular, jquery, carousel" />
<title>carouFredSel: an infinite, circular jQuery carousel</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-3.2.1-packed.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('ul#basic_config').carouFredSel();
$('ul#user_interaction').carouFredSel({
auto: false,
prev: "#prev1",
next: "#next1"
});
$('#vnoviwvw').carouFredSel({
items: 'variable',
next: '#next2',
prev: '#prev2'
});
});
</script>
<style type="text/css" media="all">
html, body {
padding: 0;
margin: 0;
height: 100%;
}
body, div, p {
font-family: Arial, Helvetica, Verdana;
color: white;
}
h1 {
font-size: 60px;
}
a, a:link, a:active, a:visited {
color: white;
text-decoration: underline;
}
a:hover {
color: #999;
}
#wrapper {
background-color: black;
width: 600px;
margin: auto;
min-height: 100%;
}
#content {
padding: 50px;
}
.list_carousel {
margin: 0 0 30px 60px;
width: 360px;
}
.list_carousel ul {
background-color: #333;
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #666;
text-align: center;
background-color: #f0f0f0;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
#prev1, #prev2 {
margin-left: 10px;
}
#next1, #next2 {
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<h1><a href="http://caroufredsel.frebsite.nl">carouFredSel</a></h1>
<p>This is a demo page, for more examples, the complete documentation, tips & tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.frebsite.nl">caroufredsel.frebsite.nl</a></p>
<br />
<p>Basic carousel.</p>
<div class="list_carousel">
<ul id="basic_config">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
</div>
<br />
<p>Carousel scrolled by user interaction</p>
<div class="list_carousel">
<ul id="user_interaction">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev1" href="#"><</a>
<a id="next1" href="#">></a>
</div>
<br />
<p>Carousel with a variable number of visible items with variable widths.</p>
<div class="list_carousel">
<ul id="vnoviwvw">
<li style="width: 200px;">c</li>
<li style="width: 100px;">a</li>
<li style="width: 50px;">r</li>
<li style="width: 100px;">o</li>
<li style="width: 100px;">u</li>
<li style="width: 50px;" id="f">F</li>
<li style="width: 50px;">r</li>
<li style="width: 50px;">e</li>
<li style="width: 50px;">d</li>
<li style="width: 50px;">S</li>
<li style="width: 50px;">e</li>
<li style="width: 100px;">l</li>
<li style="width: 50px;"> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" href="#"><</a>
<a id="next2" href="#">></a>
</div>
</div>
</div>
</body>
</html> home/karenpetzb/www/business/light/js/tweetie/index.html 0000604 00000022727 15071215262 0017515 0 ustar 00 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tweetie Demo</title>
<style type="text/css">
body {
background: #ECF1F2;
color: #8e8e8e;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin-top: 20px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
color: #76949F;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.source, .source2 {
width: 350px;
margin: 0 auto;
border: 1px solid #e0e0e0;
background: white;
display: block;
white-space: pre;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.source2 {
width: 450px;
}
.example1 {
width: 350px;
margin: 50px auto;
}
.example1 .tweet {
padding: 15px;
position: relative;
background: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.example1 .tweet:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: white transparent transparent transparent;
bottom: -20px;
left: 50%;
margin-left: -10px;
}
.example1 .tweet .date {
margin-top: 5px;
font-weight: bold;
font-size: 11px;
}
.example1 .button {
background-color: rgb(105, 210, 231);
background-repeat: no-repeat;
background-position: center;
background-image: url(data:image/png;base64,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);
width: 50px;
height: 50px;
margin: 20px auto 0;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(87, 169, 185, 0.9) 0px 3px 0px 0px, transparent 0 0 0;
-moz-box-shadow: rgba(87, 169, 185, 0.9) 0px 3px 0px 0px, transparent 0 0 0;
box-shadow: rgba(87, 169, 185, 0.9) 0px 3px 0px 0px, transparent 0 0 0;
}
.example1 .button:hover {
-webkit-box-shadow: rgb(105, 210, 231) 0px 3px 0px 0px, transparent 0 0 0;
-moz-box-shadow: rgb(105, 210, 231) 0px 3px 0px 0px, transparent 0 0 0;
box-shadow: rgb(105, 210, 231) 0px 3px 0px 0px, transparent 0 0 0;
}
.example2 {
width: 600px;
padding: 15px;
margin: 50px auto;
background: white;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.example2 .tweet {
overflow: hidden;
}
.example2 ul {
width: 99999px;
height: 100px;
}
.example2 ul li {
width: 200px;
height: 100px;
float: left;
border-right: 1px solid #eee;
padding: 0 10px 0 0;
margin: 0 10px 0 0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../css/css.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="tweetie.js"></script>
</head>
<body>
<div class="example1">
<div class="tweet"></div>
<div class="button"></div>
</div>
<script class="source" type="text/javascript">
$('.example1 .tweet').twittie({
dateFormat: '%b. %d, %Y',
template: '{{tweet}} <div class="date">{{date}}</div>',
count: 1
});
</script>
<div class="example2">
<div class="tweet"></div>
</div>
<div class="one-third classicblog">
<div id="tweets"></div>
</div>
<script class="source2" type="text/javascript">
$('.example2 .tweet').twittie({
username: 'envato',
list: 'c-oo-l-e-s-t-nerds-i-know',
dateFormat: '%b. %d, %Y',
template: '<strong class="date">{{date}}</strong> - {{screen_name}} {{tweet}}',
count: 10
}, function () {
setInterval(function() {
var item = $('.example2 .tweet ul').find('li:first');
item.animate( {marginLeft: '-220px', 'opacity': '0'}, 500, function() {
$(this).detach().appendTo('.example2 .tweet ul').removeAttr('style');
});
}, 5000);
});
</script>
<script class="source2" type="text/javascript">
$('#tweets').twittie({
username: 'envato',
dateFormat: '%b. %d, %Y',
template: '<strong class="date">{{date}}</strong> - {{screen_name}} {{tweet}}',
count: 5
} );
</script>
</body>
</html> home/karenpetzb/www/business/light/js/jScrollPane/issues/11/index.html 0000604 00000004015 15071235221 0022002 0 ustar 00 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jScrollPane - issue 11</title>
<!-- styles specific to demo site -->
<link type="text/css" href="../../style/demo.css" rel="stylesheet" media="all" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- scripts specific to this demo site -->
<script type="text/javascript" src="../../script/demo.js"></script>
</head>
<body>
<div id="top-nav">
<img src="../../image/logo.png" width="196" height="69" alt="jScrollPane">
<ul>
<li><a href="../../index.html">Home</a></li>
<li><a href="../../index.html#examples">Examples</a></li>
<li><a href="../../index.html#themes">Themes</a></li>
<li><a href="../../index.html#usage">How to use</a></li>
<li><a href="../../faqs.html">FAQs</a></li>
<li><a href="../../known_issues.html">Known issues</a></li>
<li><a href="../../index.html#support">Support</a></li>
<li><a href="../../index.html#download">Download</a></li>
</ul>
</div>
<div id="container">
<h1>jScrollPane - issue 11</h1>
<p>
This page demonstrates the bug described in <a href="http://github.com/vitch/jScrollPane/issues#issue/11">
issue 11</a> as reported (with nice striped down test cases) by
<a href="http://groups.google.com/group/jscrollpane/browse_thread/thread/09d5097b536d7064">TinyFish</a>.
</p>
<ul class="link-list">
<li>
<a href="before.html">Before</a> - showing the bug as it appears in the version of jScrollPane which
was current when it was reported.
</li>
<li>
<a href="native.html">Native</a> - showing how the page looks with native scrollbars (i.e. if
jScrollPane isn't initialised).
</li>
<li>
<a href="after.html">After</a> - showing the page which was displaying the bug with the latest
version of jScrollPane.
</li>
</ul>
</div>
</body>
</html> home/karenpetzb/www/business/light/js/simplemodal/index.html 0000604 00000004770 15071367241 0020360 0 ustar 00 <!DOCTYPE html>
<html>
<head>
<title> SimpleModal Basic Modal Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2010 - Eric Martin' />
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<!-- IE6 "fix" for the close png image -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='basic-modal'>
<h3>Basic Modal Dialog</h3>
<p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p>
<input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a>
</div>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
<p>Examples:</p>
<p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p>
<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
<p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p>
<p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p>
<p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
© 2010 Eric Martin | <a href='http://www.ericmmartin.com/'>ericmmartin.com</a> | <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a>
</div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
</body>
</html>