Collector's site organizer with user's sites as examples. Let me help with site construction!

MOFNY · Apr 30, 2014

Hey there everyone.
I know I've made multiple threads about this in the past.
However, I've continued to improve my system since my last thread.
If you have a site, player collector's especially, you should have an easy and fast way to update totals.
So I created some JS code that makes the process easy.
Detailed instructions for use and examples can be seen here: http://buttonnavigationsystem.weebly.com/.

I've also gone ahead and done examples for various collectors:
alwayson22 Justin Duchscherer collection: http://buttonnavigationsystem.weebly.com/justinduchscherer.html
BiggioBrooks755 Craig Biggio collection: http://buttonnavigationsystem.weebly.com/biggio.html
ch2423 Jose Cruz collection: http://buttonnavigationsystem.weebly.com/cruz.html

And of course I have it on my site: http://www.royoswalt44.com.
On my site I have nice organized lists.
On the base, inserts, parallels page I also have links to a lightbox.
Therefore, the user can stay on one page to quickly view content.
No more jumping around to several different pages.
Then I have made a second jQuery plugin to update the totals on my home page as well.
So all I have to do to update 3 different totals is add a new list item.

If anyone needs help implementing on their site, let me know.
If anyone would like to me to take their lists and add them to the examples, let me know.
Questions and ideas for improvement are always welcome.

MOFNY · May 1, 2014

Remember guys I love to help people redue or create a site.

IUjapander · May 1, 2014

I still very much want to know how you added that "jump to top" arrow on the right side of your page. I tried to inspect the elements of your page, but don't know enough about HTML to figure out what is doing what. I want one of those arrows badly!

MOFNY · May 1, 2014

IUjapander said:
I still very much want to know how you added that "jump to top" arrow on the right side of your page. I tried to inspect the elements of your page, but don't know enough about HTML to figure out what is doing what. I want one of those arrows badly!

Give me a few minutes and I'll give you detailed instructions. It's quite easy. If you want to do something exactly like mine then you need jQuery. There is a way to do it without any javascript, but it will immediately jump to the top without any easement.

MOFNY · May 1, 2014

Ok first I see you are using Weebly, so this will make things easier.
1. Go into "edit HTML/CSS" on the left panel.
2. Now we need to add the essential HTML components. If you don't already have the jQuery library, add this right after the <head>

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

3. Right after the {content} add:

Code:

<div class="arrow-up2"></div>

4. Right before the </body> closing tag we need to add the jQuery code:

Code:

<script>$( document ).ready( function (){$(".arrow-up2").click(function() {$('html, body').animate({scrollTop: 0}, 700, 'linear');});});</script>

This code can also be done in an external file, which is recommended:

Code:

<script src="/files/theme/NameTheFileWhateverYouWant.js"></script>

5. Ok so now we need the CSS. The first class is really all you need to style the arrow. I also did a hover and active (not needed, but adds a nice level of style). You can change the colors, sizes, etc. to whatever you want. You might need to change the position to your specifications. You do that by adjusting these: "right: 1%; top: 360px;".

Code:

.arrow-up2 {  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  display:block;
  border-bottom:20px solid #B22222;
  opacity:0.7;
  position: fixed;
  right: 1%;
  top: 360px;
  transition:all 0.5s ease-in-out;
  background:transparent;
}
.arrow-up2:hover {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  display:block;
  border-bottom:20px solid rgba(63,107,169,1);
  transition:all 0.5s ease-in-out;
  cursor:pointer;
  opacity:1;
  background:transparent;
  -webkit-transform:scale(1.5,1.5);
  transform:scale(1.5,1.5);
  -webkit-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.arrow-up2:active {
  width:0;
  height:0;
  border-left:20px solid transparent;
  border-right:20px solid transparent;
  display:block;
  border-bottom:20px solid rgba(63,107,169,1);
  transition:all 0.5s ease-in-out;
  cursor:pointer;
  opacity:1;
  background:transparent;
  transition:all 0.2s ease-in-out;
  -webkit-transform: scale(0.8) translateY(5px);
   -moz-transform: scale(0.8) translateY(5px);
                -o-transform: scale(0.8) translateY(5px);
                transform: scale(0.8) translateY(5px);
}

And that's all there is to it. Let me know if you aren't getting good results.

IUjapander · May 1, 2014

MOFNY said:
Ok first I see you are using Weebly, so this will make things easier.
1. Go into "edit HTML/CSS" on the left panel.
2. Now we need to add the essential HTML components. If you don't already have the jQuery library, add this right after the <head>

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

3. Right after the {content} add:

Code:

<div class="arrow-up2"></div>

4. Right before the </body> closing tag we need to add the jQuery code:

Code:

<script>$( document ).ready( function (){$(".arrow-up2").click(function() {$('html, body').animate({scrollTop: 0}, 700, 'linear');});});</script>

This code can also be done in an external file, which is recommended:

Code:

<script src="/files/theme/NameTheFileWhateverYouWant.js"></script>

5. Ok so now we need the CSS. The first class is really all you need to style the arrow. I also did a hover and active (not needed, but adds a nice level of style). You can change the colors, sizes, etc. to whatever you want. You might need to change the position to your specifications. You do that by adjusting these: "right: 1%; top: 360px;".

Code:

.arrow-up2 { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; display:block; border-bottom:20px solid #B22222; opacity:0.7; position: fixed; right: 1%; top: 360px; transition:all 0.5s ease-in-out; background:transparent; } .arrow-up2:hover { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; display:block; border-bottom:20px solid rgba(63,107,169,1); transition:all 0.5s ease-in-out; cursor:pointer; opacity:1; background:transparent; -webkit-transform:scale(1.5,1.5); transform:scale(1.5,1.5); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; } .arrow-up2:active { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; display:block; border-bottom:20px solid rgba(63,107,169,1); transition:all 0.5s ease-in-out; cursor:pointer; opacity:1; background:transparent; transition:all 0.2s ease-in-out; -webkit-transform: scale(0.8) translateY(5px); -moz-transform: scale(0.8) translateY(5px); -o-transform: scale(0.8) translateY(5px); transform: scale(0.8) translateY(5px); }

And that's all there is to it. Let me know if you aren't getting good results.

Thank you very much! I'll take a stab at it later tonight, but your instructions are very detailed. I appreciate it.

Welcome to our community

Be apart of something great, join today!

Collector's site organizer with user's sites as examples. Let me help with site construction!

MOFNY

Active member

MOFNY

Active member

IUjapander

New member

MOFNY

Active member

MOFNY

Active member

IUjapander

New member

Similar threads

Members online

Latest posts