Sincerely,
Nathan
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- happy
Posted 9 years ago
- 475 Posts
- 29 Reply Likes
- 1238 Posts
- 121 Reply Likes
That is pretty cool! I like the way it drops down. It's displaying on the right for me too.
- 201 Posts
- 14 Reply Likes
Kind Regards,
FrodoTraveller
- 17 Posts
- 1 Reply Like
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- 23 Posts
- 0 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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
- 475 Posts
- 29 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
http://tester3.yolasite.com/funzone-l...
Sincerely,
Nathan
Ed-a-Torials @ Honey Bear Playhomes, Champion
- 2582 Posts
- 279 Reply Likes
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
- 3739 Posts
- 307 Reply Likes
Thanks!
Nathan
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
<!--
<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
- 201 Posts
- 14 Reply Likes
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
- 475 Posts
- 29 Reply Likes
- 201 Posts
- 14 Reply Likes
Kind Regards
FrodoTraveller
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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
- 201 Posts
- 14 Reply Likes
Thanks again,
FrodoTraveller
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Sincerely,
Nathan
- 486 Posts
- 26 Reply Likes
I would have done:
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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 <style></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
- 57 Posts
- 7 Reply Likes
Peach :o)~
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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
- 475 Posts
- 29 Reply Likes
javascript:$('#enter-site').click();
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- 475 Posts
- 29 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Sincerely,
Nathan
- 17 Posts
- 1 Reply Like
- 10698 Posts
- 495 Reply Likes
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.
- 17 Posts
- 1 Reply Like
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- 17 Posts
- 1 Reply Like
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
- 3739 Posts
- 307 Reply Likes
Sincerely,
Nathan
- 17 Posts
- 1 Reply Like
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Cheers!
Nathan
- 17 Posts
- 1 Reply Like
- 13 Posts
- 1 Reply Like
This is not as good as nathan's stuff but it is pretty cool
- 23 Posts
- 0 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Thanks,
Nathan
- 23 Posts
- 0 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Sincerely,
Nathan
- 23 Posts
- 0 Reply Likes
- 13 Posts
- 1 Reply Like
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
<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
- 6 Posts
- 0 Reply Likes
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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
- 6 Posts
- 0 Reply Likes
#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;
}
- 6 Posts
- 0 Reply Likes
<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>
-->
- 6 Posts
- 0 Reply Likes
- 10698 Posts
- 495 Reply Likes
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>
- 6 Posts
- 0 Reply Likes
- 10698 Posts
- 495 Reply Likes
Do you have a URL so that we can see how this works on your page? Then, hopefully we can assist further.
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- 6 Posts
- 0 Reply Likes
- 10698 Posts
- 495 Reply Likes
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?
- 8 Posts
- 1 Reply Like
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
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
- 8 Posts
- 1 Reply Like
- 475 Posts
- 29 Reply Likes
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");
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
- 13 Posts
- 1 Reply Like
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
- 475 Posts
- 29 Reply Likes
Also, my email is support@campatet.com
Thanks,
Kevin
Nathan, Champion
- 3739 Posts
- 307 Reply Likes
Sincerely,
Nathan
- 475 Posts
- 29 Reply Likes
- 13 Posts
- 1 Reply Like
- 475 Posts
- 29 Reply Likes
- 486 Posts
- 26 Reply Likes
- 486 Posts
- 26 Reply Likes
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?