|
|
Post by Tumble on Aug 3, 2015 5:58:10 GMT -5
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="first_wrapper" style="width:700px;margin:auto;">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
$[participated_threads_link]
<div id="back-top" style="display:none;margin-top:20px;"><img title="CCK1" src="http://i657.photobucket.com/albums/uu300/EliteList/Crazicons/CCK/CCK1.png"></div>
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
</div>
<div id="wrapper">
<header>
</header>
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
<script>
$(document).ready(function(){
// hide image first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<script>
var scrollTimer = null;
$(window).scroll(function() {
var top = $(document).scrollTop();
clearTimeout(scrollTimer);
scrollTimer = setTimeout(
function()
{
console.log(top);
if(top == 100)
{
$("#navigation-tree").animate({width:'80%'});
}
else
{
$("#navigation-tree").animate({width:'80%'});
}
}, 100);
});
</script>
jsfiddle.net/jzsxjw7o/1/ |
|
|
|
Post by Tumble on Aug 3, 2015 6:53:48 GMT -5
|
|
|
|
Post by Tumble on Aug 4, 2015 3:22:56 GMT -5
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<style>
#back-top{position:absolute;top:200px; left:20px;z-index:3000;background-color: rgb(55,55,55,0.4);
}
</style>
<!--<img src="http://i657.photobucket.com/albums/uu300/EliteList/Crazicons/CCK/CCK1.png">-->
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<img id="back-top" style="display:none;" src="http://storage.proboards.com/2955945/i/PPLfTdq7IWaaDtC7Opn5.png ">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</header>
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
<!--<script>
var scrollTimer = null;
$(window).scroll(function() {
var top = $(document).scrollTop();
clearTimeout(scrollTimer);
scrollTimer = setTimeout(
function()
{
console.log(top);
if(top == 0)
{
$("#navigation-menu ul").animate({width:'98%', marginLeft:'0px', marginRight:'0px'});
}
else
{
$("#navigation-menu ul").animate({width:'80%', marginLeft:'100px'});
}
}, 100);
});
</script>-->
<script>
var scrollTimer = null;
$(window).scroll(function() {
var top = $(document).scrollTop();
clearTimeout(scrollTimer);
scrollTimer = setTimeout(
function()
{
console.log(top);
if(top == 0)
{
$("#navigation-menu ul").animate({marginLeft:'0px', marginRight:'0px'});
}
else
{
$("#navigation-menu ul").animate({marginLeft:'170px'});
}
}, 100);
});
</script>
<script>
$(document).ready(function(){
// hide image first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 110) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
|
|
|
|
Post by Tumble on Aug 4, 2015 3:32:03 GMT -5
This is the one that works from PA3:
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div style="height:142px;">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<div class="nav1">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
<!---don't forget to change these to the members site id-->
{if !$[current_user.is_member]}
<li><a href="https://login.proboards.com/login/307880732/">Login</a></li>
<li><a href="https://login.proboards.com/register/307880732/">Register</a></li>
{else}
<li><a href="https://login.proboards.com/logout/307880732/">Logout</a></li>
{/if}
</ul>
</div></div> </div> <div style="clear:both;"></div>
<div id="wrapper">
<header>
</header>
$[header]
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#navigation-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 104) {
nav.addClass("f-nav1");
} else {
nav.removeClass("f-nav1");
}
});
});
</script>
|
|
|
|
Post by Tumble on Aug 4, 2015 7:22:05 GMT -5
|
|
|
|
Post by Tumble on Aug 4, 2015 7:23:57 GMT -5
This is the code I have on here that is working.
<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<style>
#navigation-menu{width:99%;
}
.f-nav1{ z-index: 9999; position: fixed; left:0; top: 0; width: 100%;}
.nav1 { height: 46px; width:94%;
}
.f-nav1 ul{ margin-left:170px; transition-duration: 1s;
}
.f-nav1 ul li{ padding-top:6px;padding-bottom:4px;
}
#logo-fade{position:absolute;top:4px; left:20px;z-index:3000;background-color: rgb(55,55,55,0.4);transition-duration: 1s;
}
</style>
<div style="height:142px;"><!--this added-->
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<!--added the logo here can be made into a clickable link-->
<img id="logo-fade" style="display:none;" src="http://storage.proboards.com/2955945/i/PPLfTdq7IWaaDtC7Opn5.png ">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a {if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</div> <!--this added-->
<div style="clear:both;"></div> <!--this added-->
<div id="wrapper"><!--moved wrapper and header here-->
<header>
</header>
$[participated_threads_link]
{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}
$[header]
<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>
$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('#navigation-menu');
$(window).scroll(function () {
if ($(this).scrollTop() > 104) {
nav.addClass("f-nav1");
} else {
nav.removeClass("f-nav1");
}
});
});
</script>
<script>
$(document).ready(function(){
// hide image first
$("#logo-fade").hide();
// fade in #logo-fade
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 110) {
$('#logo-fade').fadeIn();
} else {
$('#logo-fade').fadeOut();
}
});
// scroll body to 0px on click
$('#logo-fade a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
|
|
|
|
Post by Tumble on Aug 4, 2015 8:11:50 GMT -5
<!--<script>
var divs = $('#logo-fade');
$(window).scroll(function(){
if($(window).scrollTop() <110 ){
divs.fadeOut("fast");
} else {
divs.fadeIn("fast");
}
});
</script>-->
|
|
|
|
Post by Tumble on Aug 5, 2015 22:15:30 GMT -5
<style>
#navigation-menu{width:100%;
}
/*don't touch this*/
.f-nav1{ z-index: 9999; position: fixed; left:0; top: 0; width: 100%;
}
/*the margin move the menu over and the 1s is the transition speed*/
.f-nav1 ul{ margin-left:30px;transition-duration: 1s;
}
/*this was added to keep the tips in view*/
.f-nav1 ul li{ padding-top:6px;padding-bottom:4px;
}
/*positioning the logo*/
#logo-fade{position:relative;float:left;top:6px; left:10px;z-index:3000;background-color: rgb(55,55,55,0.4); display:none;transition-duration: 2s;
}
</style>
<style>
#navigation-menu{ width:94.7%;
}
/*don't touch this*/
.f-nav1{ z-index: 9999; position: fixed; left:0; top: 0; width: 100%;
}
/*the margin moves the menu over and the 1s is the transition speed*/
.f-nav1 ul{ margin-left:13px; transition-duration: 1s;
}
/*this was added to keep the tips in view*/
.f-nav1 ul li{ padding-top:0px;padding-bottom:0px;
}
/*positioning the logo*/
#logo-fade{position:relative;float:left;top:8px; left:-15px;z-index:1000;background-color: rgb(55,55,55,0.4); display:none;
}
#social img { float: left; padding: 0 10px 0 0; }
</style>
|
|
