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
Sincerely,
Nathan
Nathan, Champion
Posted 8 years ago
Hi, Nathan,
That is pretty cool! I like the way it drops down. It's displaying on the right for me too.
That is pretty cool! I like the way it drops down. It's displaying on the right for me too.
Nathan, Champion
Thanks :)
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
Kind Regards,
FrodoTraveller
Nathan, Champion
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.
Nathan, Champion
Ok everyone, you can go see if it is centered now! :)
http://tester3.yolasite.com/funzone-l...
Sincerely,
Nathan
http://tester3.yolasite.com/funzone-l...
Sincerely,
Nathan
Ed-a-Torials @ Honey Bear Playhomes, Champion
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...
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...
Nathan, Champion
Thanks Ed! :) If you see any problems, please let me know.
Thanks!
Nathan
Thanks!
Nathan
Nathan, Champion
Also you're right. The index page is where the search engines go first to get the pages indexed!
Nathan, Champion
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
<!--
<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
Hi Nathan
This is a great page but I am not sure how to edit the text? Can you please tell me where to edit the text and colours on the page.
Kind Regards
FrodoTraveller
This is a great page but I am not sure how to edit the text? Can you please tell me where to edit the text and colours on the page.
Kind Regards
FrodoTraveller
color:thecolor; is for the text colors. Just change the value to a color.
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
Kind Regards
FrodoTraveller
Nathan, Champion
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
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
Thanks Nathan I used your suggestions and it worked! You can view it at www.frodotraveller.com/reviews
Thanks again,
FrodoTraveller
Thanks again,
FrodoTraveller
Nathan, Champion
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
Sincerely,
Nathan
Nathan, Champion
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)~
Peach :o)~
Nathan, Champion
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
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
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();
javascript:$('#enter-site').click();
Nathan, Champion
Thanks Kevin! I forgot to tell people to put that in! Thanks so much! :)
Nathan, Champion
Kevin, I just tried this though, and it wouldn't work. I have Google Chrome.
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.
Nathan, Champion
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
Sincerely,
Nathan
I use the latest beta version
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
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.
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.
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.
Nathan, Champion
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!
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"
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"
Nathan, Champion
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
Sincerely,
Nathan
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.
Nathan, Champion
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
Cheers!
Nathan
Nice Nathan! I'll definitely be watching out for ya
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
This is not as good as nathan's stuff but it is pretty cool
can we add a picture to your stuff? :D
Nathan, Champion
Hey Varga, what do you mean by adding a picture to my stuff? Or are you talking about Shawn's stuff?
Thanks,
Nathan
Thanks,
Nathan
i mean adding a picture under the "Welcome to funzone" text :D
Nathan, Champion
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
Sincerely,
Nathan
but HOW can I add a picture to it? (sry for my bad english) :D
Nathan, Champion
@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
<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
Hi Nathan, thanks for the code. I'm having some trouble setting an image as the button. I have the image in place and all is working, except the image still has a white border around it. I have tried a few different variations of the code, but no luck.
Nathan, Champion
Hello tom.duncan.360,
The image you're using may already have a border in it. Could you post the URL to the image? (e.g. yoursite.yolasite.com/resources/image.jpg) That way, I'll be able to take a look at it.
Thanks,
Nathan
The image you're using may already have a border in it. Could you post the URL to the image? (e.g. yoursite.yolasite.com/resources/image.jpg) That way, I'll be able to take a look at it.
Thanks,
Nathan
Thanks for the reply. I'm certain the image does not have a border as I made it myself, and I'm unable to give you a link however I can paste the code I am using for the page -
#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;
border:0px;
}
body {
overflow-x:hidden;
}
#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;
border:0px;
}
body {
overflow-x:hidden;
}
<!--
<div id="welcome-screen">
<div id="welcome-to-site"><img src="images/banner.jpg"<br><br>
<button id="enter-site"><img src="images/enter_button.jpg"
<style="border:none;" border="0"></button>
</div>
-->
<div id="welcome-screen">
<div id="welcome-to-site"><img src="images/banner.jpg"<br><br>
<button id="enter-site"><img src="images/enter_button.jpg"
<style="border:none;" border="0"></button>
</div>
-->
Hi Tom,
Please try this:
Please try this:
<div id="welcome-screen">
<div id="welcome-to-site"><img style="border: 0px"; src="images/banner.jpg"><br><br>
<button id="enter-site"><img style="border:0px"; src="images/enter_button.jpg">
</button>
</div>
No, still no luck. But thanks for your help :)
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.
Do you have a URL so that we can see how this works on your page? Then, hopefully we can assist further.
Nathan, Champion
@tom.duncan.360: Please do post the URL to your site, as it would be very helpful in helping you fix it. Thanks.
No, sorry I'm working on it locally, however I can give you the files if you wish.
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?
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?
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??
Nathan, Champion
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
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
Nathan, thanks for the praise!
212nath, I've made the code that will open it only on the first time.
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:
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");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
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
Sorry, i'm not sure I understand. If you check it, does it mean it will keep showing for the next 7 days then stop or does it mean it will not show for 7 days and then start showing again?
Also, my email is support@campatet.com
Thanks,
Kevin
Also, my email is support@campatet.com
Thanks,
Kevin
Nathan, Champion
Hi Kevin, he means when you check it, for it to not open the notice lightbox up again for 7 days and after 7 days then clear the cookie and let it open again. This notice box is a little lightbox that pops up when the page loads but Shawn wants it to stay closed using JS Cookies if you check the check box.
Sincerely,
Nathan
Sincerely,
Nathan
Thanks for the clarification Nathan! Doing that would be quite easy. Shawn, could you please email me your code at support@campatet.com?
Nathan, Champion
No problem, Kevin! :)
Code has been Emailed. So how long will this take to get done.
Shawn, the cookie enabled code has been sent to you.
Aweomse, Works Great. Just needed some style
Aweomse, Works Great. Just needed some style
Nathan, Champion
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! :)
Daniel HeleneSin Tøndevold
Fix pls? ^^
http://www.edenapocalypse.net/
Marije, Official Rep
Daniel HeleneSin Tøndevold
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?