Guest Access
Administrator
Administrator
Administrator
profile
G@MeF@Ce
profile
It just dawned on me how I've been doing all this research and development for the website and haven't been sharing what I've learned... (where's the 101 in that?)
so I'm going to start off with one of my favorite gadgets
~ the G101 - Page Scroller v.1
This script will create a fixed field with four buttons:
1 - click on to go to the top of the page
2 - hover to scroll to the top of the page
3 - hover to scroll to the bottom of the page
4 - click on to go to the bottom of the page
To see this script in action, simply look for it on the top right of your screen if you are in the G101 forums.
G101 Page Scroller V.1
*will add instructions if needed for anyone who plans to use this for their site.
so I'm going to start off with one of my favorite gadgets
~ the G101 - Page Scroller v.1
This script will create a fixed field with four buttons:
1 - click on to go to the top of the page
2 - hover to scroll to the top of the page
3 - hover to scroll to the bottom of the page
4 - click on to go to the bottom of the page
To see this script in action, simply look for it on the top right of your screen if you are in the G101 forums.
G101 Page Scroller V.1
- Code:
<!--Page Scroller by G@MeF@Ce 5/15/2012-->
<div id="pagescroller" style="position: fixed; z-index: 10000; top: 70pt; right: 4pt;" >
<a href="#top"; TITLE="top of page" >
<img src="GRAPHIC LINK FOR TOP PAGE" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" ></a>
<br />
<br />
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">
<img src="GRAPHIC LINK FOR SCROLL UP" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
<br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">
<img src="GRAPHIC LINK FOR SCROLL DOWN" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
<br />
<br />
<a href="#bottom"; TITLE="bottom of page">
<img src="GRAPHIC LINK FOR BOTTOM PAGE" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
</div>
<script>
var thespeed=40
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.pagescroller : document.getElementById? document.getElementById("pagescroller") : document.pagescroller
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",0)
</script>
- graphics:
top page
top scroll
bottom scroll
bottom page
*will add instructions if needed for anyone who plans to use this for their site.
Administrator
Show Signature
C.O.R.N.
C.O.R.N.
C.O.R.N.
profile
BluE
profile
How very thoughtful, G2meface! +1
I'm sure Neo or M could use this for their websites.
I'm sure Neo or M could use this for their websites.
C.O.R.N.
Show Signature
Poster Mcposty
Poster Mcposty
Poster Mcposty
profile
MotionM
profile
@GF This is cool!
I'm trying to put it in my blog now but where do I put the script? In the CSS? I keep getting an error on the preview when I do and don't put in both places. It could be just Blogspot's fault, they always want a perfect code.
I'm trying to put it in my blog now but where do I put the script? In the CSS? I keep getting an error on the preview when I do and don't put in both places. It could be just Blogspot's fault, they always want a perfect code.
Poster Mcposty
Show Signature
Administrator
Administrator
Administrator
profile
@ - if it's just an HTML page, add the "script" portion in the HEAD section after the
< head > and before the < / head >
then add the div portion into the BODY section after the
< body > and before the < / body > tags
I may have to open a blogger just to see how the back end works...
G@MeF@Ce
profile
MotionM wrote:@GF This is cool!
I'm trying to put it in my blog now but where do I put the script? In the CSS? I keep getting an error on the preview when I do and don't put in both places. It could be just Blogspot's fault, they always want a perfect code.
@ - if it's just an HTML page, add the "script" portion in the HEAD section after the
< head > and before the < / head >
- Code:
<script>
var thespeed=40
var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0
var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.pagescroller : document.getElementById? document.getElementById("pagescroller") : document.pagescroller
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function scrollwindow(){
window.scrollBy(0,myspeed)
}
function initializeIT(){
if (myspeed!=0){
scrollwindow()
}
}
if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",0)
</script>
then add the div portion into the BODY section after the
< body > and before the < / body > tags
- Code:
<div id="pagescroller" style="position: fixed; z-index: 10000; top: 70pt; right: 4pt;" >
<a href="#top"; TITLE="top of page" >
<img src="GRAPHIC LINK FOR TOP PAGE" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" ></a>
<br />
<br />
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">
<img src="GRAPHIC LINK FOR SCROLL UP" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
<br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">
<img src="GRAPHIC LINK FOR SCROLL DOWN" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
<br />
<br />
<a href="#bottom"; TITLE="bottom of page">
<img src="GRAPHIC LINK FOR BOTTOM PAGE" style="opacity:0.5;filter:alpha(opacity=50)" filter:alpha(opacity=50); -moz-opacity: 0.5;
opacity:0.5;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" border="0" >
</a>
</div>
I may have to open a blogger just to see how the back end works...
Administrator
Show Signature
Poster Mcposty
Poster Mcposty
Poster Mcposty
profile
MotionM
profile
"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference.
Error 500"
There are the "BR" tags inside the "div" I tried to remove the space and then the / and it's still the same error.
XML error message: The entity name must immediately follow the '&' in the entity reference.
Error 500"
There are the "BR" tags inside the "div" I tried to remove the space and then the / and it's still the same error.
Poster Mcposty
Show Signature