I made a cool "Enter" page! Well, its not really a page, it is JavaScript!

  • 1
  • Praise
  • Updated 6 years ago
Hello everyone! I made a cool "Enter' page where you have to click Enter to access it! It actually isn't a page, it just a div overlayed over the whole page and I use JavaScript to close it and it looks like it is a page! It is cool, check it out! http://tester3.yolasite.com/funzone-l...

Sincerely,
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
  • happy

Posted 7 years ago

  • 1
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
It's great! Just one thing, could you please make the text and button in the middle? it's displaying on the right on my side.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Sure, on my screen it is in the middle...



It is because I am using the CSS positioning. I will make the text's div the whole width of the page and use the CSS text-align:center; to make it center the text. I'll let you know when it is done and if you want the code let me know! :)
Photo of Daniel HeleneSin Tøndevold

Daniel HeleneSin Tøndevold

  • 4 Posts
  • 0 Reply Likes
Uhm.. I messed my home page up..

Fix pls? ^^
http://www.edenapocalypse.net/
Photo of Marije

Marije, Official Rep

  • 4636 Posts
  • 237 Reply Likes
Hello Daniel - could you let us know what has gone wrong and what you would like us to fix?
Photo of Daniel HeleneSin Tøndevold

Daniel HeleneSin Tøndevold

  • 4 Posts
  • 0 Reply Likes
Well firstly, i added nathans code, and it worked as it should.
but then i tried kevins cookie code, which messed my Home, index up.
so i deleted the home,index. and added it a new.. and now i cant seem to get nathans code to work, the site just goes all black.
so, i removed the black backround, that seems to show the text.. But why doesnt it work with the backround?
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Hi, Nathan,

That is pretty cool! I like the way it drops down. It's displaying on the right for me too.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks :)
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Yeah this is awesome Nathan, The text is displaying on the right for me to but I would love to have the code from you. Also on you site can you tell me where to get those addthis buttons from?
Kind Regards,
FrodoTraveller
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks :)
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
Yes I totally agree with Frodo I have been trying to add something like this for months... Also I would like to know where you got the addthis buttons
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I got the AddThis social networking buttons from www.AddThis.com

Hope this helps.

Nathan
Photo of Varga Attila

Varga Attila

  • 23 Posts
  • 0 Reply Likes
wow.....that's really nice......how can I get the code of that? :D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello everyone! I am glad all of you like it! I made it from scratch on an HTML widget.

I use jQuery to make it drop down and fade in and I use CSS to position it over the whole screen.

Thanks for letting me know it is on the right! I will fix that.

I am happy to give the code to all of you!

I will post the code here when I get that positioning issue fixed.

Thanks again everyone!
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Nathan, I think I know why it is displaying on the right. When I first viewed it, I was using a computer that had a screen res of 1366X720. Now, viewing it with a 1920X1080 full hd screen, it is in the middle. I'm guessing that you have a full hd screen. So when you look at it with a 1366X720 screen, it will be on the right.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, I do. It is a 21 inch screen. But i will fix it so it is on the middle of all screens.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Thanks!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Ok everyone, you can go see if it is centered now! :)

http://tester3.yolasite.com/funzone-l...

Sincerely,
Nathan
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Centered in every resolution that I tried Nathan...

The thing that makes yours far better than simply having a splash index page with an image of "Enter here" is that your index page can still have content and text which is indexed by a web crawler.

Those who choose to have a splash index page are literally stabbing themselves in the foot and killing their pagerank because a site's index is quite literally their most important page.

Good job and it looks great...
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Ed! :) If you see any problems, please let me know.

Thanks!
Nathan
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Also you're right. The index page is where the search engines go first to get the pages indexed!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey everyone! So you want the code? Here it is! Remember don't copy <!-- and --> only the code in between them:

<!--

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs...>
<script type="text/javascript">
$(document).ready(function() {
//$('#enter-site').animate({'width' : '80px', 'height' : '40px'}, 1000);
$('#enter-site').delay(1000).fadeIn(1000);
$('#welcome-to-site').animate({'top' : '60px'}, 900);
$('#enter-site').click(function() {
$('#welcome-to-site').animate({'top' : '-400px'}, 900);
$('#welcome-screen').delay(900).fadeOut(500)
});

});

</script>
<style type="text/css">
#welcome-screen {
position:fixed;
top:0;
left:0;
width:99%;
height:99%;
background:black;
z-index:40000;
padding:10px;
text-align:center;
}

#welcome-to-site {
position:fixed;
top:-400px;
left:0px;
width:100%;
color:white;
font-weight:bold;
font-size:100px;
font-family:arial;
}

#enter-site {

display:none;
padding:10px;
text-align:center;
cursor:pointer;
}

body {
overflow-x:hidden;

}

</style>

<div id="welcome-screen">
<div id="welcome-to-site">Welcome to Funzone!<br><br>
<button id="enter-site">Click here to Enter!</button>
</div>
</div>

-->

Tip: Although I know it works, you should try it on a test page first!

Note: In the site builder this nice welcome screen will appear. Click the button right inside the site builder to make it close.

I hope this helps! You can change the text and hat he button says if you want. But be careful about the JavaScript if you don't know jQuery or if you don't know what you're doing.

Sincerely,
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
color:thecolor; is for the text colors. Just change the value to a color.
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
When I put it on my test page it just shows up as a black screen and there is no enter button. This only happens in the sitebuilder but not on the preview. Does anyone know why this might happen?
Kind Regards
FrodoTraveller
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi FrodoTraveller

The button might be under a widget, click on "preferences" at the top of Yola and uncheck "Show widget borders" and then see if you can see the button. If not, did you edit the code in any way? Did you change anything by accident? Also, did you wait for a couple of minutes for the button to fade in?

Nathan
Photo of Amar

Amar

  • 201 Posts
  • 14 Reply Likes
Thanks Nathan I used your suggestions and it worked! You can view it at www.frodotraveller.com/reviews
Thanks again,
FrodoTraveller
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Awesome FrodoTraveller! It looks great! I am so glad I posted this code for everyone! Also if you want ever want it to be a different animation let me know and I will make it however you want!

Sincerely,
Nathan
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Nice Nathan!!!. I like how you code you stuff.

I would have done:
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hello support, could you wrap your code in <!-- and -->? Thanks!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks! :)
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
I have lost the code. Also nathan its me shawn
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Shawn, I posted the code above. I'm glad you like it.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@FrodoTraveller: It is all in the CSS. With in the <style></style> tags.

For example, the "#welcome-screen" is the whole black background. You can change the background color by changing the value, but keeping the semi-colon ; after each command, and all of that with the { brackets } for the #welcome-screen, applies to the black background.

For that text that slides down, you can change the color of that also. That is the "#welcome-to-site" just change the "white" in color:white; to whatever you like and it will change the color of the text.

If you want to change the text, it is all in the <div></div>'s tags. Like it says right in it "Welcome to Funzone!" and "Click here to enter"

But do not change the "<button type="button" id="enter-site">Click here to Enter!</button>

You can change all of the text in it, but don't take out the id="enter-site" because with out that, the jQuery JavaScript can't tell that button to close the whole screen when you click it! :)

Also, if you want to apply CSS tot eh button, again in the &ltstyle></style> tags, just change everything with in the { brackets } on the #enter-site

I hope this helps!

If you need any assistance with this or if you want to change the animation, please let me know and I will assist you!

Sincerely,
Nathan
Photo of Eat_A_Peach_5

Eat_A_Peach_5

  • 57 Posts
  • 7 Reply Likes
Wonderful job, Nathan! I've copied the code and set it aside, as I don't usually like to use a splash/landing page, but the simplicity of this one may just change my mind ;) You're definitely one of the peeps to keep an eye on - you're well versed and have great ideas! And you like to share - that's the best part! Keep inventing and sharing with us other users. We really appreciate you and your work.
Peach :o)~
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Peach! :) I am also currently building (and putting lots of work into it) a "Free Scripts & HTML Codes" website and it has Tutorials, HTML Codes, JS Scripts, and much more and they are all made to work with all Yola user's site because they are all tested in Yola to make sure they wont break your page! (unless you have a custom code on the page that will interfere with it)

This site right now that I'm building has lots of cool loading effects and it has "Facebox", a jQuery Facebook-style lightbox and it is really neat. I also have a "Request a code" system and it is in the navigation and when you click on "Request something" a Mac-style alert pops down from the top of the site and says "What would you like to do?" and it has "Request a code" "Request a Tutorial" and then another button that says Cancel. It is really cool and now that Yola Silver has the CSS it will make it much better so I can apply my CSS to the whole site. I shared lots of the stuff thats on this site with you, but there it still lots more of features too! I will be sure to share the URL with everyone once I am done!

Sincerely,
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Everyone. If you're in the site builder and the enter site button is not showing, to close it type this into the browser address bar and press enter:
javascript:$('#enter-site').click();
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks Kevin! I forgot to tell people to put that in! Thanks so much! :)
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Kevin, I just tried this though, and it wouldn't work. I have Google Chrome.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
It works for me on chrome. What this code pretty much does is that it clicks it virtually, running everything that would happen if it were clicked.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah, but for some reason for me it wont work. I copy and paste it into the address bar and push enter. It wont work, do you have the lastest version of Chrome like I do?

Sincerely,
Nathan
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
I use the latest beta version
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
Hey maybe somebody can help me with this maybe you cant... But for some reason the code is broken on my page.. I've found out watch the problem is, and its I have the meebo chat on the home page. If somebody could please help me I would really apreciate it. thank you
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Daniel

Are you needing someone to remove the Meebo chat from your site? If so, please share your URL and the page where this can be found.
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
No I dont need it removed, thanks Sanja... What I was saying is meebo is causing the enter page I added to my site act in ways its not suppose to.. Somehow meebo is causing the coding to be broken.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hi Daniel, whats happening on it? Like is the code not functioning or something? Also, what JavaScript library does Meebo use? Does it use MooTools or jQuery? If it uses MooTools then there is why it wont work. You can't use jQuery and MooTools on the same page. Unless you use the jQuery.noconflict() method. Can you post your site's URL so I can take a look at the source code? Thanks!
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
http://myplaysite.yolasite.com/
This is pretty much the exact replica of my site, I use this as a tester before adding or removing anything from my actual site. Also I wanted to tell you I never changed any of the color or text. The only things I changed was what it says. "welcome to chatshox"
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
OK, thanks. I see it still slides down but did you mean to link it? It looks like you put this code in the middle of a link or something. Also that whole chat is FLASH and that is why it goes over the screen and there isn't a way to fix that. If you take the chat out it will work. I suggest you take the chat out and then see what happens.

Sincerely,
Nathan
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
No I didn't mean to link it... And yes when I take the meebo chat out I have no problems... I really didn't understand how it effected the color of the enter page.. Anyway thanks for taking a look at it I really appreciate that. Also I really liked how you did the enter page. I could deff learn a lot from you, so hopefully I'll be seeing more post! I'll be sure to watch out for ya.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
I'm glad you like the enter page that I made! :) I'll be sure to be posting more codes for everyone, and in less than a month I will be releasing my Free HTML Codes website! It has lots of cool stuff for your Yola website and for other sites too! I can't wait to release it, and I am using lots of jQuery animation effects on the site too! I think you guys will like my cool little "Mac-style alertbox" that I made and it is just like the Mac alert box and it slides down from the top of the page and it is cool, I can't wait to show everyone this huge project that I have been working on!

Cheers!
Nathan
Photo of Daniel Kivett-v

Daniel Kivett-v

  • 17 Posts
  • 1 Reply Like
Nice Nathan! I'll definitely be watching out for ya
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
Yeah he is a good coder. Look at what I made. http://forum.yola.com/yola/topics/awe...

This is not as good as nathan's stuff but it is pretty cool
Photo of Varga Attila

Varga Attila

  • 23 Posts
  • 0 Reply Likes
can we add a picture to your stuff? :D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Varga, what do you mean by adding a picture to my stuff? Or are you talking about Shawn's stuff?

Thanks,
Nathan
Photo of Varga Attila

Varga Attila

  • 23 Posts
  • 0 Reply Likes
i mean adding a picture under the "Welcome to funzone" text :D
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Oh yeah, you are free to do whatever you want with the code! And, I am sure you've already done so, but you can change that "Welcome to Funzone!" to whatever you want to! The reason why it says "Funzone" is because I made it for someone and their site's name is "Funzone"

Sincerely,
Nathan
Photo of Varga Attila

Varga Attila

  • 23 Posts
  • 0 Reply Likes
but HOW can I add a picture to it? (sry for my bad english) :D
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
Nice agian
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Thanks :) LOL
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@Varga: You will need to use some HTML to add an image, but don't worry I will give you all of the HTML codes! So right after the <button type="button" id="enter-site">Click here to enter</button> just put this code on a new line just under that:

<br>
<img src="resources/image.jpg" style="border:none;" border="0">


Now remember to change the src to the actual URL of the image. If you upload it to you File Manager, then just get the name of the image (i.e. image.jpg) and put it in, but KEEP the resources/ in front so it will work.

If you are having any problems with this, please let me know.

Hope this helps!

Nathan
Photo of tom.duncan.360

tom.duncan.360

  • 6 Posts
  • 0 Reply Likes
No, still no luck. But thanks for your help :)
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi tom.duncan.360,

Do you have a URL so that we can see how this works on your page? Then, hopefully we can assist further.
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
@tom.duncan.360: Please do post the URL to your site, as it would be very helpful in helping you fix it. Thanks.
Photo of tom.duncan.360

tom.duncan.360

  • 6 Posts
  • 0 Reply Likes
No, sorry I'm working on it locally, however I can give you the files if you wish.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi tom.duncan,

I don't think we are able to assist further unless we have access to your URL. Perhaps, can you create a test site with the code? You can publish this and then we can assist?
Photo of 212nath

212nath

  • 8 Posts
  • 1 Reply Like
nice code but is there a way to make the enter page only display once during the browser session, for example if someone goes to the website, and whenever the person presses the home button it displays the enter page, which would probably be annoying??
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Yeah there is a way, but sadly I don't know JS cookies yet :( I am trying to learn cookies but got lots of other stuff to do right now. You're right, that is annoying!

But it can be done with a cookie. Kevin, the creator of Campatet.com, knows cookies because his whole site uses cookies to save the settings on his site which is really cool!

When you first visit the page, the script can set a cookie int he browser session and when you go back it wont show the welcome page anymore. But if you close your browser and then open the browser again then the cookie will be deleted and the next time you go back it will be set again only for the browser session. Cookies are a great tool, it's how many many sites use their login and "remember me" feature. (Including Yola)

I will see what I can do and then I will post a code to add right before the rest of the code to make this happen. :)

Thanks for asking this!

Sincerely,
Nathan
Photo of 212nath

212nath

  • 8 Posts
  • 1 Reply Like
Thank you very much, also thanks for the fast reply!
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem :)
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Nathan, thanks for the praise!
212nath, I've made the code that will open it only on the first time.

<!--

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs...;
<script type="text/javascript">
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+&/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}

function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}

function checkCookie()
{
var seenent=getCookie("seenenter");
if (seenent!=null && seenent!="" && seenent=="yes")
{
&(document).ready(function() {
&('#enter-site').remove();
&('#welcome-to-site').remove();
&('#welcome-screen').remove();
});
}
else
{
setCookie('seenenter','yes',365)
&(document).ready(function() {
&('#enter-site').delay(1000).fadeIn(1000);
&('#welcome-to-site').animate({'top' : '60px'}, 900);
&('#enter-site').click(function() {
&('#welcome-to-site').animate({'top' : '-400px'}, 900);
&('#welcome-screen').delay(900).fadeOut(500);
});
});
}
}
checkCookie();
</script>
<style type="text/css">
#welcome-screen {
position:fixed;
top:0;
left:0;
width:99%;
height:99%;
background:black;
z-index:40000;
padding:10px;
text-align:center;
}

#welcome-to-site {
position:fixed;
top:-400px;
left:0px;
width:100%;
color:white;
font-weight:bold;
font-size:100px;
font-family:arial;
}

#enter-site {

display:none;
padding:10px;
text-align:center;
cursor:pointer;
}

</style>
<div id="welcome-screen">
<div id="welcome-to-site">Welcome to Funzone!<br><br>
<button id="enter-site">Click here to Enter!</button>
</div>
</div>

-->


Have fun coding!

By the way, if you would like to remove the cookie and see the enter screen again, copy this into the address bar of your browser and press enter:
javascript:setCookie("seenenter","",365");
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
Hey Kevin, thanks so much for posting this!! This will come in really useful! :) Thanks!
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Your welcome Nathan!
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
Kevin you are awesome at Cookies. Could I ask you if you could make me a checkbox that allows me to keep me Notice box closed for like 7 days onclick. my notice box is a feature on my site and the code if private so you i get your email.

I would Really like a check box in the bottom left corner of the notice saying:

Would you like to keep notice box closes for 7 days (Note if you Check this box notice box will automatically close.



Thanks,
Shawn Holman
Photo of Nathan

Nathan, Champion

  • 3739 Posts
  • 307 Reply Likes
No problem, Kevin! :)
Photo of Shawn Holman

Shawn Holman

  • 13 Posts
  • 1 Reply Like
Code has been Emailed. So how long will this take to get done.
Photo of Kevin

Kevin

  • 475 Posts
  • 29 Reply Likes
Shawn, the cookie enabled code has been sent to you.
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Aweomse, Works Great. Just needed some style
Photo of Shawn Holman

Shawn Holman

  • 486 Posts
  • 26 Reply Likes
Aweomse, Works Great. Just needed some style