Our site's links and buttons do not work when viewed on an iPad. In fact, even clicking (or touching) an input field doesn't bring the field in focus or bring up the iPad keyboard.
The site's been built in PHP (CodeIgniter framework) with nothing too fancy in terms of UI (HTML, CSS, some Javascript and JQuery). No flash.
Any reasons why the site won't work on an iPad properly?
EDIT: I'm sorry if this sounds like a publicity post, that wasn't the intention. The domain name was included in the post but it's in the comments for those that care to visit and give it a try. I still have the error though - visiting on both an iPhone and iPad, the page shows up but the links and input field are not clickable.
Finally I found it. This is the solution:
Somewhere you've defined on the element where you cannot write:
input,select,textarea{
-webkit-user-select: none;
}
Change it to:
input,select,textarea{
-webkit-user-select: text;
}
It can only be one of a few things.
You have code attached to the mousedown event and are returning false.
You have some other JavaScript/Markup errors.
As suggested by "mu is to short" validate your code, see here
Remove the script at the bottom, for one it doesn't do anything and two the script tag has no charset attribute. Fix all of the above mentioned errors then post back if it is still not working.
You need to make sure you're dealing with the native events such as "touchstart" and "touchend" and "touchmove". If you handle these events you don't get "click" events.
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
Click only fires if you don't handle the native events.
Related
Is it possible to take a screenshot of the visible part of the website directly as it is seen by user (rendered by by the browser), including any changes made by user (e.g. moved divs, text typed in forms etc.)?
So you open a website, where you can make changes to its content. And there's a button (on the website of course), when you click it, the actual visible part of the website with all the changes you made is saved as an image and for example there goes a popup window where you can type in an email to send this image to, or something like that. Javascript, php, html5 or anything else? Old browsers and ie doesn't matter.
I've searched a lot for the answer, read lots of related articles, but I couldn't find the solution, cause what I need is not the script that would re-render the page like html2canvas, but capture the actual content displayed on the screen.
Any ideas and comments are much appreciated!
This is something that can be extremely tricky.
Essentially your only option of doing this in browser with no extensions or such is to try rendering HTML into the <canvas> tag.
There are several projects which do that, most reliable choices are noted in this SO question's answers: Render HTML in Canvas/WebGL
Note that none of the projects are 100% accurate, but a canvas can be rendered into an image and thus could be saved or emailed by the user like you asked.
I am currently investigating a double request problem on my site. Not all the time, but sometimes, a requested page will in fact load twice...which is not a problem really until it is on a page with PHP that inserts stuff into my db on request (my tracking script).
I have read that an empty src in an image tag, and an empty url() in a css background could potentially cause the page to be requested twice.
However, I can't find any problems with those.
Is there anything else that could be causing something like this?
ANSWER FOR MY SITUATION
After some extensive research, it turns out that in my case specifically, the second request has been coming from the user agent "Mediapartner-Google". I began to notice that on pages that serve an Adsense ad, I could expect a secondary visit from this crawler within seconds after I visit the page myself.
This doesn't seem to be happening on pages without Adsense ads.
I am going to mark an answer below, because it seems like for most situations, those are the correct things to check.
I have sat beside people whom I would swear knew better than this, and watch aghast as they double-clicked on every hyperlink in our app.
Didn't take long to figure out why they were experiencing double the page load time of everyone else...
Things like this certainly tend to give one pause when implementing pages that change the backend state. A lot of people put sequence numbers in hidden form elements so the backend can detect a double-submit.
The causes I've seen before:
Missing stylesheet or image
Web developer addon for Chrome/Firefox sometimes requests things twice if you're validating HTML etc.
Browser inconsistency
Sometimes it's just too difficult to track down the root cause of a double request.
Either way, you should NOT be changing database state (or session state) through a GET request. The only SQL query you should be running without postdata is SELECT. All updates and inserts should be done using forms, even if the form consists only of a submit button.
src="" in certain elements on certain browsers (such as <img src="" />) can request the current page again.
404's are a prime source for a request seemingly being requested twice. Check your CSS, JS and image sources are all correct.
We had a very strange behaviour in our CMS where an iframe in a jQuery dialog lightbox made a doubled database insert.
After hours of debugging and loud WTFs we nailed it down. the dialog close method was setting the focus to the iframe of the dialog before destroying it and caused a reload of the iframe url!
I have seen this countless times. The internet is full of strange people who keep double-clicking on everything they come across.
You can stop this in you web site by attaching a global double-click event listener to every anchor tag ( tags).
For example, if you have jQuery installed, you can do the following:
jQuery('a').on('dblclick', function(e) { e.preventDefault(); });
This is just an example of course. You can achieve the same result using vanilla Javascript.
That should silently ignore the double click action.
In case they are fast clicking twice instead of double clicking, then you can use can throttle the click handle on all the links in the page to ensure that they cannot be clicked more than once within say ... 3 seconds.
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).
hi im using ajax to extract all the pages into the main page but am not being able to control the refresh , if somebody refreshes the page returns back to the main page can anybody give me any solutions , i would really appreciate the help...
you could add anchor (#something) to your URL and change it to something you can decode to some particular page state on every ajax event.
then in body.onload check the anchor and decode it to some state.
back button (at least in firefox) will be working alright too. if you want back button to work in ie6, you should add some iframe magic.
check various javascript libraries designed to support back button or history in ajax environment - this is probably what you really need. for example, jQuery history plugin
You can rewrite the current url so it gives pointers to where the user was - see Facebook for examples of this.
I always store the 'current' state in PHP session.
So, user can refresh at any time and page will still be the same.
if somebody refreshes the page returns back to the main page can anybody give me any solutions
This is a feature, not a bug in the browser. You need to change the URL for different pages. Nothing is worse then websites that use any kind of magic either on the client side or the server side which causes a bunch of completely different pages to use the same URL. Why? How the heck am I gonna link to a specific page? What if I like something and want to copy & paste the URL into an IM window?
In other words, consider the use cases. What constitutes a "page"? For example, if you have a website for stock quotes--should each stock have a unique URL? Yes. Should you have a unique URL for every variation you can make to the graph (i.e. logarithmic vs linear, etc)? Depends--if you dont, at least provide a "share this" like google maps does so you can have some kind of URL that you can share.
That all said, I agree with the suggestion to mess with the #anchor and parse it out. Probably the most elegant solution.
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>