I'm starting a Wordpress Blog that will have adult content on it, so I'll need a first-time-only splash page in Wordpress. The first-time-only issue, I can fix with a cookie (although I am aware that not everyone has cookies enabled)
What I could do is, create a script that loads another page if a cookie isn't present. Or I could make the splash page be my home page, and if the cookie is present, redirect.
But that's not really what I'm looking for. I don't want to hassle with pages. In stead I'm looking for a lightbox-y solution, that darkens the background (the home page) and shows a panel with the choice to stay or leave.
I haven't got a clue on how to start this. I am familiar with PHP, Javascript and CSS, so I'm not even asking for code. I just want a web programmer's view on this, and some help on how to create the splash-page the way I would like it. Or is it a stupid idea?
I would just create the CSS for it, get it all ready to go, then stick it into the header with your condition. This way, you know that everypage will display it, and you can;t be "caught with your pants down" if you get linked to.
My only concern would be to make sure that the lightbox effect covers anything graphic, as I'm sure you don't want it displayed before the user agrees to seeing it.
I'd use a lightbox solution.
e.g.
http://leandrovieira.com/projects/jquery/lightbox/
This includes examples of how to use it.
There shouldn't be any problems with creating a little bit of JavaScript code that checks a cookie and displays a lightbox if the cookie is not set. The JavaScript can simple display a div with the panel with the choice to stay or leave. And perhaps an other div to dim out the background, but you can do that in any way you see fit.
I used the proposed JQuery ColorBox solution, but inline didn't work, display: none was not changed by the jQuery, so I used
$.colorbox({html:"<div id=\"splash-wrapper\"><h1>it works</h1></div>"});
and it worked like a charm
Use Colorbox and call it onload
http://jacklmoore.com/colorbox/example1/
I'm using this to create a popup on load. It sets a cookie to expire every 30 days. Create a div called #inline_content with all your content in it and set it to display: none;
Hope this helps.
<script>
$(document).ready(function() {
if (document.cookie.indexOf('visited=true') === -1) {
var expires = new Date();
expires.setDate(expires.getDate()+30);
document.cookie = "visited=true; expires="+expires.toUTCString();
$.colorbox({inline:true, width:"40%", height:"450px", href:"#inline_content"});
}
});
</script>
Related
What has been known for a while, is that a "fast navigation" works easily for http://example.com/#1 --> http://example.com/#2.
However, there is a new technique out there. It enables fast navigation between http://example.com/1 --> http://example.com/2.
EXAMPLE: http://rageslide.com/
As you can see in the example, the navigation between http://rageslide.com/1 and http://rageslide.com/2 etc. via swiping apparantly DOES NOT FORCE THE ENTIRE SITE TO RELOAD.
I'd like to do the same for my site, but I have no idea how to do this. All pages served by my site are dynamic (via PHP and MYSQL).
I have this idea:
Cache the generated output of a page (http://example.com/2) for 60 seconds.
When the user is on http://example.com/1 preload (http://example.com/2) via Javascript.
The user navigates from http://example.com/1 to http://example.com/2. Since the content is preloaded and cached, the content will be served to the user instantly.
Different idea:
Somehow, http://example.com/1 is being interpreted as http://example.com/content.php#1 through a .htaccess. But I have no idea if this is possible or not.
Will this work? Or what would be the best way to solve this problem?
No, the url you see there is not used to load another page. There are AJAX requests in the javascript code contained in the website, that load the new content to display and update the URL bar.
You can read more about it in this article and in the following questions asked in the past:
Modify the URL without reloading the page
Updating address bar with new URL without hash or reloading the page
i can think of two possible thing you can try out.
first is simply use iframes to load the next and previous page of each page, and when someone swipes to the next page load the next page to a new iframe or a div with ajax or any other html element for that matter.
the other is to use the rel attribute, here is an explanation about it.
hope this helps you out
you can get pretty close without scripting anything or degrading the site by letting the browser cache the expected navigation point resources
for caching images, put dummies at the end of the body
<img .... height="0" width="0">
and for pages
<link rel=”prefetch” href=”url” /> there is also a rel attribute for next and previous for slide viewer type pages
Note: the url can be a javascript resource
Note2: the transition may be slightly less clean than dynamically populating from javascript especially on larger complex pages, but will still work with noscript or javascript turned off, so maybe a good fallback
I have this problem to solve.
I gonna make an email campaign to my clients with some affiliate promotions.
The email will have some direct links to the promotions that goes through a php script in my site. (ex: http://mysite.com/promo.php?promoId=x)
In this script I will manage my database queries and cookie.
In cases that I detect through the cookie that this user has not made any click in the last x days I would like to present him with two html pages: my main website page and the external site referring to the promo.
How can I do this? I currently use header( "Location: $promo_url" ) to redirect to the promo url... but in same cases stated before I would need two urls to open.
Thanks in advance for all your answers
GS
You can either use frames (ugh), an iframe within the main page to display the second page (somewhat less ugh), or use popup windows (truly ugh, and probably not possible due to everyone having popup blockers these days).
You could have the script output JavaScript with window.open instead.
<script type="text/javascript">
window.open("link1"); // open link1 in a separate window
window.location.href = "link2"; // point this window to link2
</script>
If you can, however, it would be much better to explicitly show the user a link to the second location somewhere on the page instead of forcefully opening another window / tab for them.
Show them your site, and in your site have a hidden a link tag, which will link to the affiliate site with the attribute _blank. Using jQuery, once the DOM is ready trigger a click event to the hidden link tag.
E.x.
HTML
<a id="affiliateLink" href="http://www.affiliatesite.com/asdad" target="_blank" style="display:none;">Visit Affiliate</a>
JavaScript
$(document).ready(function(){
$('#affiliateLink').trigger('click');
});
There's really no good way to do what you want without using iframes (ugh) or popups (double ugh). The other answers are how to use those techniques, but a possible 'better' solution would be to display a banner on your page when you detect the user hasn't been to your site in a while. The banner could say something along the lines of Click here for information about our awesome promotion, and it'd be easy to make it stand out. That way, you're not forcing popups (which no one will ever see), and while iframes aren't terrible from a user perspective, they don't really scream "modern web design".
I would like to force my page to load all data before anything is shown...
This is my site:
http://vinarakar.si/sl/
I would like do this in php, but I'm open to other suggestion :)
Thanks for helping me
You need to do this using Javascript, not PHP.
PHP is a serverside language so it cannot change what the user experience is once output has been sent to the browser.
Try something like this, use visibility: hidden of the body to hide it from the start. Then onload() will be fired once the page is loaded (I think) and then set it to visibility: visible
<body style="visibility:hidden" onload="this.style.visibility = 'visible' ">
A bigger issue here is why oh why! This just means the user has to wait longer to start using your site? It is not a big site, it does not have loads of Js libs that needed to be loaded before the user can start using the site either.
Can I give a suggestion you won't like?
If you seriously want your Page to display faster, then cut down on the JavaScript gimmicks. You are including 13 JavaScript files and most time in loading is lost for them to initialize.
More importantly your page is completely broken for users without JavaScript.
Be aware, that using javascript in any manner may not work for every visiter exactly the same. You should use a cross-browser JS engine like jQuery or MooTools.
That way, you can at least try to be cross-browser valid.
Secondly, and because of what I already said, I would not advise you to use the solution jakenoble gave you. If a user has disabled JS for whatsoever reasons, he will never be able to see your page at all.
If you want user that have disabled JS to see your site, you will have to both hide and show your page using JS. Using a full page overlay may be a good approach, but be sure to check your page still works without activated JS.
e.g. you could write a CSS code into a tag that will hide the overlay and display the page if the user has disabled JS.
Some code examples
<body class="body">
<div class="overlay">
<!-- Your page content -->
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$(".overlay").css("visibility", "hidden");
$(".body").css("visibility", "visible");
});
</script>
<noscript>
<style type="text/css">
.body { visibility: visible; }
.overlay { visibility: hidden; }
</style>
</noscript>
Short Answer, DON'T DELAY IT
First, I would advise against it. We live in a very fast paced community on the internet. If you take to long to display the website (or the user feels like nothing is happening) they may leave. That would be an adverse affect to what you are trying to accomplish.
Better to ask: How do I speed up page loading for my website?
The better question is How do I speed up my website? Here is some advice that will help you. Follow these guidelines for improved performance. http://developer.yahoo.com/yslow/help/
You actually need CSS, you have to put a full page overlay that hides content (maybe it wil show "loading" to make user aware that the page is loading), then hide that onload so it shoes content beneath. take a look at the solution here
You can do this actually by using Ajax actually.
Consider if you have to load index.php just write body tag and call Ajax function on body load and get the Ajax response inside body tag .Using this practice will take twice the time for you page to load .
Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).
Many web pages load all of their content to change very little information.
Now I would like to know why shouldn't the developers just use ajax for the main page requests?
On my own webpage, I would like to develop the main requests on my webpage with just ajax but I don't know any specific cons with this approach.
Does anybody have an idea why someone shouldn't use ajax so much?
Search engines, crawlers/spiders, browsers with no javascript, screen readers and other consumers of the content will not be very happy with it.
You can provide tons of ajax behavior on top of you website if you already support standard server side navigation for the full content. Have a look at progressive enhancement (SO) and progressive enhancement (wiki).
The whole premise really is that with AJAX you don't need to reload the whole page to update a small percentage of that webpage. This saves bandwidth and is usually much quicker than reloading the whole page.
But if you are using AJAX to load the whole page this is in fact counterproductive. You have to write customised routines to deal with the callback of the AJAX data. Its a whole lot of extra work for little to no increase in performance.
General rule for where to use AJAX: If your updating >50% of your page, just reload, else use AJAX.
I'll give you one very good reason.
If you turn off javascript in the browser it won't work.
The biggest con are users who have JavaScript disabled. Your website simply won't work for them.
Aside from the answers already posted, using AJAX can have ugly side effects on browser control, such as the stop button not working.
One thing is that you want content to have a static url, you want people to be able to link to your pages, bookmark them, etc.
If everything is ajaxified, this could be tricky and/or tedious.
Well if you want to AJAX load new pages, such as the same way Gmail works, I suggest your links are normal A HREF links that point to a true full rendering page URL and alos use an onclick event that stop the attempt at normal link loading and make your AJAX calls. The problem here is you'll be doing almost double coding unless you architecture this all very well.
This way the normal non JS links load the full page, and the JS calls only load the new parts or page. This means spider indexing works again too.
Well, you can always add the onclick event unobtrusively using jquery and stop the normal URL handling.
Eg:
HTML
<a id="ajaxify-this" href="my-working-url">Click me to do AJAXy stuff if you have javascript</a>
then Javascript
$(document).ready(function() {
$("#ajaxify-this").click( function(e) {
updateContent(); // do something ajaxy with the page
return false; // stop the click from causing navigation
})
}
I use only JavaScript and EJS as template Engine for my own webside. One step closer to SOFEA/SOUI.
Search engines, crawlers/spiders, browsers with no javascript, screen readers dislike it, right. But I follow the mainstream ;)