Content management as it is meant to be
https://forum.cmsmadesimple.org/
Code: Select all
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><!-- the CSS for Smooth Div Scroll --><!-- jQuery library - I get it from Google API's -->
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[
// Initialize the plugin with no custom options
$(function() {
$("div#makeMeScrollable").smoothDivScroll({});
});
// ]]></__script>
<!-- Styles for my specific scrolling content --><!-- #makeMeScrollable { width:100%; height: 330px; position: relative; } #makeMeScrollable div.scrollableArea * { position: relative; float: left; margin: 0; padding: 0; } -->
<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>Code: Select all
{literal}
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
/* The hotspots have a minimum width of 75 pixels
and if there is room the will grow and occupy 10%
of the scrollable area (20% combined).
Adjust it to your own taste. */
min-width: 75px;
width: 10%;
height: 100%;
/* There is a big background image and it's used to
solve some problems I experienced in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first cursor url is for Firefox and other
browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
background-image: url(../images/arrow_left.gif);
background-color: #fff;
background-repeat: no-repeat;
/* Standard CSS3 opacity setting */
opacity: 0.35;
/* Opacity for really old versions of
Mozilla Firefox (0.9 or older) */
-moz-opacity: 0.35;
/* Opacity for Internet Explorer. */
filter: alpha(opacity = 35);
/* Use zoom to Trigger "hasLayout" in
Internet Explorer 6 or older versions */
zoom: 1;
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
background-image: url(../images/arrow_right.gif);
background-color: #fff;
background-repeat: no-repeat;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
}
/* The scroll wrapper is always the same width and
height as the containing element (div). Overflow
is hidden because you don't want to show all of
the scrollable area.
*/
div.scrollWrapper
{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
div.scrollableArea
{
position: relative;
width: auto;
height: 100%;
}
{/literal}Code: Select all
{process_pagedata}<!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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}
{* note: anything inside these are smarty comments, they will not show up in the page source *}
<head>
<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}
{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}
{stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}
{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#header {width:expression(P7_MinMaxW(720,950));}
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}
<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* The above JavaScript is required for CSSMenu to work in IE *}
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});
// ]]></__script>
</head>
</__body>
<div id="Fadingborder">
<div id="pagewrapper">
{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
<ul class="accessibility">
<li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
<li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
</ul>
{* end accessibility skip links *}
<hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}
{* Start Sidebar *}
<div id="sidebar">
<div id="logo">
</div>
<p><a href="uploads/images/Banner20SSR.gif" target="_blank"><img src="uploads/images/Banner20SSR.gif" alt="" width="196" height="46" /></a></p>
{content block='Sidebar'}
<p> </p>
<p> </p>
<p><a href="uploads/images/Inschrijvings formulier Goalie zomertraining 2011.pdf" target="_blank"><img src="uploads/images/Goalietraining.jpg" alt="" width="130" height="93" /></a></p>
<p> </p>
<p><a href="http://www.thillartshockey.nl/inschrijven.html" target="_blank"><img src="uploads/images/THAlogozomertraining.jpg" alt="" width="130" height="93" /></a></p>
</div>
{* End Sidebar *}
{* Start Content *}
<div id="content">
{* Start Navigation *}
<div id="menu_vert">
{* stylesheet "Navigation: CSSMenu - Horizontal" *}
<h2 class="accessibility">Navigation</h2>
{menu template='cssmenu.tpl' start_level='2' number_of_levels='4'}
{menu template='cssmenu.tpl' start_level='3' number_of_levels='4'}
<hr class="accessibility" />
</div>
{* End Navigation *}
{* Start Breadcrumbs *}
<div class="crbk">
{* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image *}
{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
<div id="search">
{search searchtext=" Voer zoekterm in.." submit="Zoeken"}
</div>
{* End Search *}
<div class="breadcrumbs">
{breadcrumbs starttext='U bevindt zich hier' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
</div>
{* End Breadcrumbs *}
{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
<div class="back1">
<div id="main">
<div style="float: right;">{print showbutton=true script=true}</div>
{content}
<br />{* to insure space below content *}
{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
{* End relational links *}
<hr class="accessibility" />
<div class="clear"></div>
</div>
</div>
{* End Content Area *}
</div>
{* End Content *}
</div>
{* end pagewrapper *}
</div>
{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
<div class="footback">
<div id="footer">
{* stylesheet "Navigation: FatFootMenu" *}
<div id="footrt">
{global_content name='footer'}
</div>
<div class="clear"></div>
</div>
</div>
{* End Footer *}
<__body>
</__html>Code: Select all
<!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--><!-- the CSS for Smooth Div Scroll --><!-- jQuery library - I get it from Google API's -->
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory --><!-- You can download it as a part of jQuery UI Core http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
<__script__ type="text/javascript">// <![CDATA[
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});
// ]]></__script>
<!-- Styles for my specific scrolling content --><!-- #makeMeScrollable { width:100%; height: 330px; position: relative; } #makeMeScrollable div.scrollableArea * { position: relative; float: left; margin: 0; padding: 0; } -->
<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>Code: Select all
<div id="makeMeScrollable">
<div class="scrollWrapper">
<div class="scrollableArea"><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /><img src="uploads/images/ExEagles.jpg" alt="Demo image" width="200" height="100" /> <img src="uploads/images/Sarislogo.jpg" alt="Demo image" width="200" height="100" /></div>
</div>
</div>Code: Select all
<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<__script__ src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></__script>
<!-- jQuery UI widget factory -->
<!-- You can download it as a part of jQuery UI Core
http://jqueryui.com/download -->
<__script__ src="js/jquery.ui.widget.js" type="text/javascript"></__script>
<!-- Smooth Div Scroll 1.1 - minified for faster loading-->
<__script__ src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></__script>
{literal}
<__script__ type="text/javascript">
$(function() {
$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart",
autoScrollDirection: "backandforth",
autoScrollStep: 1,
autoScrollInterval: 15,
startAtElementId: "startAtMe",
visibleHotSpots: "always" });
});
</__script>
<!-- Styles for my specific scrolling content -->
<style type="text/css">
#makeMeScrollable
{
width:100%;
height: 250px;
position: relative;
}
#makeMeScrollable div.scrollableArea *
{
position: relative;
float: left;
margin: 0;
padding: 0;
}
</style>
{/literal}