Search the Community

Showing results for tags 'mobile'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 31 results

  1. One of the pages I've got for a mobile application is "shorter" than most phone screens. Since I've taken pains to use a color schema that does not use white backgrounds, is there any way to tell the browser what color to paint the otherwise undefined space? I'm using w3.css color tags in the body and want to match the background to the last container in the stack, so that any remaining whitespace is tinted. My first thought was to use the background-color property. I'm not sure if it plays well with w3.css tagging, and even if I color-code around that, it seems to conflict with the max-width property I'm using to force my browser to render a mobile-phone screen sized output. I realize that I can go forward on the production version without the max-width field set and that will likely be the end of the issue, but I'd like to 'see it' during testing. Any thoughts?
  2. Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body>
  3. Dear all, Since bootstrap has container and container-fluid classes, does a heavy lifting, and is easy to use, I am inclined to think that css's media query has no advantage. I'd appreciate sharing any opposite opinion that sees usefulness/advantage in media queries.
  4. Hello & Thanks , I am having trouble with my phone version of BenghaziGame . My viewport : <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> Also , I changed the camvas dimensions from this: <canvas id="canvas" width="800" height="550" style="background-color:#992D2D"></canvas> to this: <canvas id="canvas" width="360" height="400" style="background-color:#992D2D"></canvas> And it looks like I'll need to adjust a bunch of other stuff to make it visually acceptable . Running the program on desktop , it all runs fine . But running same code on phone , the collision detection doesn't work , and the prog runs very , very slow . I could use some recommendations on what can I tweak to improve phone I am running it on my Lumia 640 windows phone . gives options to run on phone or desktop . Thanks
  5. Hello everyone, I'm very much a novice in this arena, so apologies in advance, but hopefully someone will be able to help. I'm in the process of creating a new website using the Weebly sitebuilding system, which gives you fairly extensive access to the HTML and CSS elements of the site. Generally the build is going relatively well, but I'm running into a few problems with the mobile version of the site. Because the theme I'm using is responsive, there isn't direct access to edit the mobile site in the same way as I have been building the rest of the site. What I am hoping is to work out HTML/CSS fixes for the following two issues: 1) Site banner is cut off at left and right and inexplicably scrolls right into some dead space. 2) Hide home page navigation buttons, which are useful for desktop, but fill up a lot of screen space on mobile/tablet and so are not needed (as there is a hamburger menu in any case). I've attached some screenshots of the elements I'm talking about and can copy and paste any elements of code which I have access to. I suspect that a combination of HTML and CSS adjustments will be needed. The site itself is located at You can access the home page directly (which should demonstrate both issues) at
  6. When will you add Swift 2 to w3schools so that people at least learn the basics of making ios applications?
  7. HI: I have a responsive web design with links to pages at another website, which is a site that is NOT mine. However, the pages at the other site have 2 different URLs. For example: ( or, as a reference to a mobile page) . In other words, one link at the other site is for desktop viewers and the other link is for mobile users, but all links meant for desktop users are redirected and go directly to their home page (not to the mobile equivalent page). If a user at my website clicks on a link to their website from a mobile device, they are clicking on a link meant for desktop users. But if the user is at my website on a mobile device, the other website redirects them to their mobile "HOME PAGE", thus requiring the user to navigate to the specific page FROM THE HOME PAGE OF THAT SITE. [NOTE: I have the direct links to the specific mobile pages at the other site, but just don’t know how to give my mobile users the option to access them from a single click.] I want my mobile users to be able to go directly to the specific page of the other site without having to navigate to it from the home page of the other site. In short, if my user is on a desktop, they will go to the correct page. But if on a mobile device, they will go to the home page (not the specific page) of the other site and have to navigate to the specific page from there, which can be a real hassle. Here is my question: Is there an inline html or javascript code I can add to each outgoing link that will take the user directly to the specific page I want them to land on if they are using a mobile device instead of a desktop? For example: href = (but if less than 800px) go to Please keep in mind, my site is already responsive, so I do not need a redirect for my pages, as they are mobile ready. I just need to create redirect links to the pages of the other website if my user is on a mobile device. Please help. Thank you.
  8. Hello, I was unable to find a solution for this problem. I'm hoping someone knows the answer. I have a mobile website and a phone number you can click to call. I even made it a hyperlink tel:###-###-####. This works correctly. I have a hidden form with a comment field only that basically says "Someone from your website placed a call to you." What I want to do is when the user clicks to call the number on the website call my number and send a quick Email letting me know by submitting the form I just mentioned along with the time and date. I have a php file working that sends the email to me when I hit the submit button. I have the hyperlink opening the box to allow the call to be placed. What I can't seem to figure out is how to get both things done on that one click of the phone number. ANY HELP would be appreciated. I understand that php is server side and the click to call is client side. But I'm still lost.
  9. I Am Creating A iOS WebApp [ StandAlone] Which Looks Like A iOS Application The Only Difference That It Written In HtmlAnd JavascriptWhen You Go To A Website and click on add to home screen it creates an icon with the site content [webclip] i have created a website and i need help with one little detail i found that script in my site it permit all links to open in the webapp i was trying to make the links open in safari but when i manage to do that, the navigation menu doesn't work could any one help me please ?heres the code Detect if iOS WebApp Engaged and permit navigation without deploying Safari (function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(,e.href=d.href)},!1)}})(document,window.navigator,"standalone") i need to open the links in safari rather than the webapp thats it
  10. Linked is my website that I have been working on and off for awhile. As you can see the image is not inline with the title, I realise this is probably a jquery issue that I am just not getting. Can anyone advise me on the correct tag or class I should be applying to have it inline with the title. Thank you
  11. On home page [Website link] there is sliding celebrity Images : on click of any celebrity it takes to it resp. pages which is working on Desktop / laptop browser , i mean click - link working , but same if i open in Any Cell Phones then `sliding images` is shown but `images` is `not click able` and it not going to resp. page of celebrity.I am using `wp-roundabout-pro` ( ) plugin in my website ( `WordPress 3.8.4` )i know the plugin is not support to current version of my word-press... but In Desktop / laptop browser all working prefect.any idea what is the issue. please help me out... as if this issue is not short-out then my whole work will be wasted Below is plugin code : <?php $anims = array('lazySusan', 'waterWheel', 'figure8', 'square', 'conveyorBeltLeft', 'conveyorBeltRight', 'diagonalRingLeft', 'diagonalRingRight', 'rollerCoaster', 'tearDrop', 'theJuggler', 'goodbyeCruelWorld'); if(!in_array($animation, $anims)){ $animation='conveyorBeltLeft'; $asclass = ''; } else { $asclass = 'class="hideflow"'; } $sid = 'rbt-'.uniqid(); $out = '<ul '.$asclass.' id="'.$sid.'">'; $fwidth = intval($data[opt1]); $fheight = intval($data[opt2]); while($row = mysql_fetch_assoc($res)){ if($row[url]!='' && trim($row[url])!=' '){ $img = '<img src="'.get_image_thumb($row[url], 'w='.$fwidth.'&h='.$fheight).'" />'; } else { $img = ''; } if($row[title]!='' && trim($row[title])!=' '){ //$ttlxz='<span class="rbt-title"><span>'.$row[title].'</span></span>'; $ttlxz=''; } else { $ttlxz=''; } if($row[desc]!='' && trim($row[desc])!=' '){ //$descxz='<span class="rbt-content"><span>'.$row[desc].'</span></span>'; $descxz=''; } else { $descxz=''; } $out = $out.'<li style="background-color:'.$row[color].'">'.$ttlxz.''.$descxz.'<a href='.$row[desc].'>'.$img.'</a></li>'; } $out = $out.'</ul> <style type="text/css"> #'.$sid.' { list-style: none; padding: 0; margin: 0 auto; width: '.$data[opt5].'px; height: '.$data[opt6].'px; } #'.$sid.' .roundabout-moveable-item { height: '.$fheight.'px; width: '.$fwidth.'px; background-color: '.$data[opt4].'; text-align: left; cursor: pointer; overflow:hidden; } </style> <script> jQuery(document).ready(function() { jQuery("#'.$sid.'").roundabout({ autoplay: '.$data[opt7].', autoplayDuration: '.$data[opt9].'000, minOpacity: '.$data[opt10].', maxOpacity: '.$data[opt11].', reflect: '.$data[opt12].', enableDrag: '.$data[opt13].', dragAxis:"'.$data[opt3].'", shape: "'.$animation.'", autoplayPauseOnHover: '.$data[opt8].' }); }); </script> '; ?> Sample of HTML code generated : <div class="slider"> <ul id="rbt-5428f4c10c934" class="hideflow roundabout-holder" style="padding: 0px; position: relative;"> <li style="background-color: rgb(238, 238, 238); position: absolute; left: 684px; top: 58px; width: 137.19px; height: 82.314px; opacity: 0.19; z-index: 117; font-size: 6.4px;" class="roundabout-moveable-item"> <a href=""> <img src=""> </a> </li> </ul> </div> I taught my a link have some issue but my anchor link is seem to be perfect then why its not working in mobile phones. Also one user told me that on his/her mobile phone its working but i have checked in Samsung , Nokia , Sony ,Tabs all phones ..but its not working -- means image is not clickable ,where on desktop / laptop its working fine
  12. I am a computer science student in my senior year at my local university. I recently was hired on as an intern to create a mobile web application. The mobile web application is very simple; it needs to interface with a data base to both give a full data base view for an administrator and for end users to fill out a simple survey. I have never done anything in web development before, so I did a little research and the tools that kept coming up where html, css, java script, and php. However, I also ran into other tools with different applications, like AJAX with Jquery, HTML5, and micrsofts I have a basic understanding of html and css, but I haven't committed to a development platform yet. I wanted some advice on which one to choose, based on the following criteria: 1) I want to develop a website that is device neutral. So I want it to work well on both desktops and mobile devices. 2) No one knows the future, but I would like to use the development platform that is likely to become or remain the standard in the future. 3) It needs to be available as a part of a standard server platform for a typical web host 4) It needs to be able to dynamically generate web content and interface with an SQL data base. I would really appreciate some advice, input, ect. I don't know if I will pursue a career in web development, but sense I already have to learn at least one development platform, I figure I might as well learn the right one. Thank you for any advice and input.
  13. Hi! My site's navigation looks and works pretty clean for computer use and viewing but when I pull it up on my iphone it's pretty sloppy.. I am looking for a way to code it for mobile devices so its a clean responsive look and user functionality isn't difficult to figure out.. Here is the site.. Thanks!!
  14. Hi, I have been asked to turn an existing Joomla 2.5.16 website into a responsive one. I created a media-queries.css file and adjusted all the styles using Firefox's Responsive Design Tool to test the results. All was fine until tested on real devices - both iPhone and Xperia - on both the website is totally unaffected by the media-queries.css file. I've tested the site with online simulators and although they show a less than desired outcome - they do show that the media-queries.css file is making a difference. I hope this is the right forum to post this issue as I realize it's not strictly a css problem that I'm facing. I would be grateful for any advice - are there scripts that could be blocking it or anything else I have to check? Thank you
  15. Star Defender: Spawned of toxic waste and forged by fallen electrical wires, no one has ever laid eyes on the face of Star Defender - because he doesn't have one.... Star Defender is on a mission to save his planet and he needs your help. Link to game : Thank you in advance if you give feedback
  16. ...really ought to mention that according to the inch, millimeter and centimeter units are only going to work as you'd expect on desktop devices. On mobile platforms, the spec says that the browser should consider the typical viewing distance of these devices (ie much closer than a desktop display) and scale the display accordingly. Since there is no standard for what that typical viewing distance might be - device and browser manufacturers are at liberty to pick just about any number they feel all bets are off. So even though you go to all the trouble to say "I WANT THIS TO BE TWO INCHES WIDE!!!" - you'll basically be ignored. Using all of the non-standard <meta> stuff to turn off zooming and to prevent the user from manually zooming - you still get results that are between maybe a half and a third of the size you asked for. Basically, these units are useless. Argh! -- Steve
  17. Hi! It's my first post on the forum, and I have a question: My Website works fine on the desktop version, but when I use it on a Smartphone I have problems with Session Expired. Do someone knows if I have to threat mobile and desktop session by a different way?
  18. So I am working on a flexible template and I have 3 break points. When I resize the browser all works well but when I view it on my phone it isn't using narrow.css, what am I doing wrong? URL: - General style sheet - min width 901px wide (regular browser) - min width 701px medium (smaller screens/tablet) - max width 700px narrow (tablet/phone/smaller devices) <link rel="stylesheet" type="text/css" media="all" href="/wp-content/themes/test-set/style.css" /> <link rel='stylesheet' media='screen and (max-width: 700px)' href='/wp-content/themes/test-set/narrow.css' /> <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='/wp-content/themes/test-set/medium.css' /> <link rel='stylesheet' media='screen and (min-width: 901px)' href='/wp-content/themes/test-set/wide.css' />
  19. I know i can use display:none, but the page has a lot of pics. The mobile page has less content and few pics. To load quicker and waste less bandwith i want to pics not to load on a mobile phone.How can I do that?
  20. I have 2 issues with a site I am working on. All form text fields when clicked on won't allow any text to be typed into them also, the search field can't be submitted by pressing the "go" or "enter" button on a mobile keyboard only clicking the submit button, which in this case is the magnifying glass icon in the field. Any help would be appreciated. Thanks! Edit: This seems to only be a problem on the iPad
  21. I am building a new responsive designed website (my first one) and I seem to be having some issues with the mobile detection for CSS. My site will re-size and displays great on all my mobile devices, Phone, iPad, desktop etc. If I re-size the desktop browser it changes to the correct version based on size etc.. The problem i am having is when I run it through tthe W3C mobileOK validator. I get a score of zero because it seems to be loading all parts of my style sheet. So this brings up the help I need. What should I change in my current CSS? Should I create two separate CSS files and try to do some type of browser detect and serve up the correct version based on browser? I was under impression I should only use one CSS file. My current CSS File: My website (NSFW): W3C Validator score of ZERO 8(: Thank You for any help.
  22. Back again with same task but moved on half a step.Trying to redirect to mobile page using php.I assumed the code here would redirect if the match was true, or continue to load the page (index.php) if not. <?php $agent = $_SERVER['HTTP_USER_AGENT']; if(preg_match('/iPhone|Android|Blackberry/i', $agent)){ header("Location: mobile.html"); exit; } ?>But is there some boolean weirdness? I'm getting this error - Warning: Cannot modify header information - headers already sent by (output started at /mysite/index.php:1) in /mysite/index.php on line 4index.php on line 4?(If the match isn't true (not a mobile device) the page (index.php) loads ok.)
  23. I want to make a site that automatically redirects to subdomain ?I mean, i want to make a site that has two versions, one for desktop (without subdomain m. ) and one for mobile phones (with subdomain m.)When the user goes to using his mobile phone, he will be directed to (like facebook) Can you tell me how to do that?
  24. I have put a few amazon banner links on my website, but I am noticing that they are not clickable when viewing on a smart phone. I am assuming this is because they are wrapped in an Iframe.Is there a way to make this work on mobile devices? I am thinking I could try wrapping the iframe in an <a> tag that points to the same page but with its own link. So the banner link will show like a picture, but it wont be the actual link. Would this work? And would it affect the banner link itself when clicked on in a normal browser. <iframe src="" width="100%" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
  25. So I'm new here and have been trying to solve this problem for over a month and can not seem to figure out of its CSS or js related... Maybe it could be that I use page templates rather then directly imputing into the Wordpress page content area via the dashboard?The theme was a template and defiantly did not do this as the demo theme works just fine on mobile browsers.The problem is my short codes, nav, widgets overflow off the right side of the page ONLY in mobile browsers. The site works fine on all desktop scenarios..In the screen shot you'll notice that it seems as if the body does not span 100% and leaves a margin on the right (notice the white vertical space on the right)Has anyone run into this issue or have a clue to what the deal is?Im lost and very frustrated at this point..The site is:http://gadget-fix.comALL of the pages do this.