nitrolinux722 Posted September 28, 2014 Share Posted September 28, 2014 I have been developing a site that works. It works good. That is on desktop computers. When I try to use it on a touch screen device like a tablet or phone, it doesn't work. This is how it works. When you go to the site, it has three forms that change on each selection. For instances, when you select the first form, you pick the item you interested in, like the make of a vehicle. These selections are in embedded into the body of the website, then you choose the "model", then the year. Once all your selections are completed, a small window appears with other info. The selection codes looks like this (the first one): <select id="make"><option value="base">---</option><option value="ford">Ford</option><option value="chevy">Cheverlot</option><option value="honda">Honda</option></select> This triggers some script code between the <head> tags that looks like this: $(function() {$("#make").change(function() {$("#model").load("textdata/" + $(this).val() + ".txt");$("#model").change(function() {$("#year").load("textdata/" + $(this).val() + ".txt");});}); It reads into some text files that are in a folder in the root of the website called "textdata". As you see, the "#make" selection changes the "#model" form, and the "#model" form finally changes the "#year" form. The text file that fires up the new browser window looks like this: <option value="base">---</option><option value="javascript:void(0);" onclick="window.open('vehicle_id_115.html','newwindow','height=320, width=670,toolbar=no,scrollbars=no')">1999</option><option value="javascript:void(0);" onclick="window.open('vehicle_id_116.html','newwindow','height=320, width=670,toolbar=no,scrollbars=no')">2000</option> Obviously, "onclick" doesn't work on touch screens. I like what I have, but what would be the work around to get this compatiable with touch screen devices, but yet allow regular desktop systems to work also. Any help would be appreciated. I have tried different things to no avail. Thank you for viewing. Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2014 Share Posted September 28, 2014 The problem isn't that onclick doesn't work on mobile devices. It does. When you tap a touch screen it's registered as a click. The problem is that <option> element don't necessarily fire a click event. Options are bound to the select element they're inside, most of the time events are fired from the <select> element and not the <option>. Browsers, of course, don't always behave the same way; some will allow click events on options while others won't. Also, setting the value attribute to "javascript:void(0)" in an option is completely useless. The "javascript:void(0)" originated because the href attribute of a link allows Javascript to be executed by preceding it with "javascript:". This only works for attributes that take URLs as a value What will work is any of the following: <!-- Links always react to the onclick event --><!-- "return false" stops the link from actually going to the URL in the href attribute --><a href="#" onclick="window.open('vehicle_id_115.html','newwindow','height=320, width=670,toolbar=no,scrollbars=no'); return false;">1999</a><a href="#" onclick="window.open('vehicle_id_116.html','newwindow','height=320, width=670,toolbar=no,scrollbars=no'); return false;">2000</a><!-- Putting the event listener on the select element --><select onchange="window.open(this.options[this.selectedIndex].value,'newwindow','height=320, width=670,toolbar=no,scrollbars=no');"> <option value="vehicle_id_115.html">1999</option> <option value="vehicle_id_116.html">2000</option></select> Link to comment Share on other sites More sharing options...
nitrolinux722 Posted September 29, 2014 Author Share Posted September 29, 2014 Foxy mod, you are a great help! I used the second option (Putting the event listener on the select element). Although with modifications. What I did, as you suggested, to put the: onchange="window.open(this.options[this.selectedIndex].value,'newwindow','height=320, width=670,toolbar=no,scrollbars=no');" between the <select></select> tags on the index.html page. Then I moved the: value="vehicle_id_115.html"value="vehicle_id_116.html" to the txt file between the <option></option> elements. Now the page opens on mobile devices, of course, as a new window. It makes the mobile browser throw up a popup block warning. Any way to suppress that? Thank you so much. You were a big help! -nitrolinux722 Link to comment Share on other sites More sharing options...
nitrolinux722 Posted September 29, 2014 Author Share Posted September 29, 2014 (edited) Let me do an upddate. I saId: What I did, as you suggested, to put the: onchange="window.open(this.options[this.selectedIndex].value,'newwindow','height=320, width=670,toolbar=no,scrollbars=no');" between the <select></select> tags on the index.html page. I was meaning to say is that I put that inside the first <select> tag. INSIDE. Like: <select id="year" onchange="window.open(this.options[this.selectedIndex].value,'newwindow','height=320, width=670,toolbar=no,scrollbars=no');"> Thank you Edited September 29, 2014 by nitrolinux722 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now