LOGIN
SEARCH
PROFILE
keys: ↑ ↓
LOGOUT
INDEX
MEMBERS
keys: ↑ ↓
HOME
PORTAL
PLAY ALONG
PLAY with WORDS
PLAY with GRAPHICS
PLAY with SOUNDS
PLAY with CODES
PLAY with PROJECTS
keys: ← →
Guest Access
Register:
Members:



View previous topic View next topic Go down Message [Page 1 of 1]

Administrator
Administrator
#1 G101 - Page Scroller v.1 Empty G101 - Page Scroller v.1
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
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
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:

*will add instructions if needed for anyone who plans to use this for their site.
Administrator
Show Signature
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
C.O.R.N.
C.O.R.N.
#2 G101 - Page Scroller v.1 Empty Re: G101 - Page Scroller v.1
Loading

BluE

BluE
C.O.R.N.
C.O.R.N.
C.O.R.N.
profile
How very thoughtful, G2meface! +1
I'm sure Neo or M could use this for their websites.
C.O.R.N.
Show Signature
C.O.R.N.
http://51s-seedy-masteroogway.blogspot.com
Poster Mcposty
Poster Mcposty
#3 G101 - Page Scroller v.1 Empty Re: G101 - Page Scroller v.1
Loading

MotionM

MotionM
Poster Mcposty
Poster Mcposty
Poster Mcposty
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.
Poster Mcposty
Show Signature
Poster Mcposty
https://www.dropbox.com/sh/l3s9sn0nmkaxmy7/Lrut_zZyWd http://motionmreview.blogspot.com/ https://twitter.com/_motionm
Administrator
Administrator
#4 G101 - Page Scroller v.1 Empty Re: G101 - Page Scroller v.1
Loading

G@MeF@Ce

G@MeF@Ce
Administrator
Administrator
Administrator
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.

@M\'s trade mark - 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
Administrator
https://www.dropbox.com/sh/i47rig99qhrvn8s/4m5HvsM2fD http://g4m3f4c3.deviantart.com https://www.facebook.com//pages/Gameface101/332331300127008 https://twitter.com//mr_gameface101 https://soundcloud.com/schurr https://www.youtube.com/user/MrGameface101?feature=watch
Poster Mcposty
Poster Mcposty
#5 G101 - Page Scroller v.1 Empty Re: G101 - Page Scroller v.1
Loading

MotionM

MotionM
Poster Mcposty
Poster Mcposty
Poster Mcposty
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.
Poster Mcposty
Show Signature
Poster Mcposty
https://www.dropbox.com/sh/l3s9sn0nmkaxmy7/Lrut_zZyWd http://motionmreview.blogspot.com/ https://twitter.com/_motionm

Sponsored content

profile

View previous topic View next topic Back to top Message [Page 1 of 1]

 

Chatbox system disabled
Personal messaging disabled