|
JavaScript - Iphone Slider
I am trying to create a mobile safari compatible "slide to unlock" type deal, like the one on jailbreakme.com, i have found many that are compatible with google chrome, or firefox, but none with mobile safari, any help?
Similar TutorialsI am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! Hi Guys. Trying to pass variables from the javascript into my php script and into my SQL query so i can track the location of the iphone. So far i have... Code: <script type="text/javascript">
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
gpsText.innerText = "No GPS Functionality.";
}
}
long = position.coords.longitude;
lat = position.coords.latitude;
function gpsError(error) {
alert("GPS Error: "+error.code+", "+error.message);
}
function showGPS(position) {
gpsText.innerHTML = "<?php $long = "".$_GET['long'].""; $lat = "".$_GET['lat'].""; $sqldel = "INSERT INTO `location` (`id` ,`user_id` ,`long` ,`lat`) VALUES (NULL , '$user', '$long','$lat' );"; mysql_query($sqldel) or die(mysql_error()); echo "$long"; echo "$lat"; ?>";
}
</script>
This gets the coordinates in javascript and the php runs and i get a new record in the database but it doesnt pass the variables from java to php. Anyone know a workaround to get the variables from the iphone to sql on a single page? I want this to run in the background and refresh every now and then so i can track users location. thanks. Adam. I want to Create a simple scanner app for the iPhone so when someone scans a URL embedded in a QR code, it opens the browser and loads that URL.
This is for an iphone app using html5, css3 and javascript with phonegap to embed. The app runs on mobile safari. I have a list page [ list.html ] . Clicking on a list item takes the user to a specific page for that item [ e.g. item1.html ]. On item1.html page a question is answered in a form box. This is processed using a simple pasuser script which works fine. I need to add a script so that when a correct answer is given on item1.html a small graphic appears next to to the item listed on list.html. Even though item1.html can be accessed again later, the small graphic must always remain next to the listing. All help much appreciated. I am not a programmer but can understand the arguments. Thanks. hi, I am trying to redirect from my main site to my mobile site by detecting screen width using javascript. But everything time i try to test this via the iphone 4s,the browser keeps reloading without loading any content, like its on some sort of loop! Here are the scripts ive tried to used below, have i missed anything? [CODE] <script type="text/javascript" charset="utf-8"> if (navigator.userAgent.match(/(operamini|ipad|ipod|iphone|android|webOS|up.browser|up.link|mmp|symbian|smartphone|midp|wap|vodafon e|o2|pocket|kindle|mobile|hiptop|\bpda|psp|treo|nokia|blackberry)/i)) { location.replace("example.com"); } </script> [CODE END] [CODE] <script type="text/javascript"> if (screen.width <= 550) window.location = 'http://yoursite.com/mobile'; </script> [CODE END] Thanks in advance for any help! Jon I've put together a couple of scripts, in order that I can make an image move left or right on the x-axis, depending on the LR (left/right) read-out from the accelerometer of an iPhone. However, it's not working at the moment, so could anyone possibly see what I've missed out - I've worked on it that long, that I think I'm missing something obvious!! THANKS!! Code: <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onlywebpro.com</title>
</head>
<body>
<h2>Device Orientation with HTML5 | onlywebpro.com</h2>
<img src="Car4.png" id="car" style="position:relative;top:200px;left:200px; "><br>
<script type="text/javascript">
if (window.DeviceOrientationEvent) {
console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData) {
var LR = eventData.gamma;
deviceOrientationHandler(LR);
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("car");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",50); // 50 controls the speed
lft = lft+LR; // move by 50 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 439) { // left edge of image past the right edge of screen
pp.style.left = -400; // back to the left
clearTimeout(tim);
}
}
}, false);
} else {
alert("Not supported on your device or browser. Sorry.");
}
var userWidth = window.screen.width;
function moveRight() {
var pp = document.getElementById("car");
var lft = parseInt(pp.style.left);
var tim = setTimeout("moveRight()",50); // 50 controls the speed
lft = lft+LR; // move by 50 pixels
pp.style.left = lft+"px";
if (lft > userWidth + 439) { // left edge of image past the right edge of screen
pp.style.left = -878; // back to the left
clearTimeout(tim);
}
}
</script>
</body>
</html>
I'm working on this project: http://bit.ly/tkrFsP It already works more or less fine in: IE7, IE8, IE9, FF, Chrome, Safari and Opera. Problems start when we try that in iPhone or iPad. iPhone works almost fine (except lags and AJAX/jQuery problems) but in iPad it has broken left navigation, wrongly re-sized thumbnails and it displays in half of the viewport. Also, there are problems with smoothness of jQuery animations and with AJAX unlike in other browsers on other devices (like PC). Any ideas on how to fix that? I've flicked through this: 1. http://www.smashingmagazine.com/2010...tting-started/ 2. http://developer.apple.com/library/s...62/_index.html It seems like a good place to start but there's many information on iPad/iPhone development on apple.com and their solutions don't fix my problems. -------- Mo 1. Anyone could outline here some basic code principles for iPad/iPhone? 2. Why project sub-page displays 5 times as large as it should on iPhone? Adding this: <meta name="viewport" content="width=device-width" /> doesn't help much and it even makes website work worse. Adding this: <meta name="viewport" content="maximum-scale=1,user-scalable=yes,width=960" > seems like a better solution but it's not perfect either. 3. How iPad's fixed containers work? 4. Why there's horizontal scroll appearing even with overflow-x: hidden? Hi On the following URL on the iphone and Ipad the jqzoom script is showing the enlarged image on the left but works fine in IE, Chrome, Firefox etc. The script in use is jqzoom. http://tinyurl.com/bwcxf8c Any idea welcome. Thanks Roy Hi Guys, I've been searching the net for both examples and pluggins to create draggable divs and although I've found many, I cant find the effect I'm after. I want the div to slow down to a stop after it has been release like when you are scrolling on one of apples mobile devices. If anybody can point me in the right direction ill be very great full. hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
I have a simple play js button on my HTML page as well as embedded music. So when you are a computer the music autoplays then stops and you have the option to listen to it again with the js button. This "theoretically" will work fine for the iPhone and iPad because even though the embedded music isn't auto playing the user can still click the listen button and hear the music. It works on the iPhone perfectly but not the iPad. I'm at a loss. Here is my jscript: function FFFFSound(soundobj) { var thissound= eval("document."+soundobj); thissound.Play(); } My embedded music: <embed src="music/FFFFKids.mp3" autostart="true" loop="false" hidden="true"> <embed src="music/FFFFKids.mp3" autostart="false" loop="false" hidden="true" name="sound1"> And my button: <input type="button" value="Listen" onClick="FFFFSound('sound1')" class="listen_button"> You can view the page at feefifofun.com I am at a total loss..... thanks! I have a video on a page, which on a pc or mac, will play inside a standard flash player. On the iphone, I have setup javascript to detect iphone / ipod, and replace the flash player with an embedded m4v file: Code: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('div#vid').empty('');
$('div#vid').html('<div ontouchstart="incrementHitcount()"><embed src="http://www.gridcity.co.nz/uploaded/images/'+cid+'_bg.jpg" href="http://www.gridcity.co.nz/uploaded/videos/'+cid+'.m4v" type="video/x-m4v" rel="nofollow" target="myself" width="'+vidwidth+'" height="'+vidheight+'" scale="1" id="iphone"></embed><div>');
}
So far so good. I also want to trigger a simple onclick which makes an ajax call a remote PHP file. I have tried ontouchstart instead (see above code) but still no luck. If I add the onclick to a static image rather than an embed instance, it works fine. But with the embedded video, it's as if the video blocks the onclick event for javascript to pickup. Does anyone know a way around this? Hello I'm having problems with a very simple bit of Javascript not working with the latest version of Safari for ipads and iphones. The script in question is used as a 'previous image ' and 'next image' navigation facility, basically closing one pop-up window and opening up another, when viewing a photo gallery. It has worked perfectly for a number of years on all browsers. It is only the latest version of Safari for ipads and iphones where there's a problem. On an iphone, the new window unfortunately opens up in a new tab and the existing window fails to close. Mobile Safari soon reaches the maximum of 8 permissible tabs as a user moves through the photos gallery. On an ipad2, no new window opens and the existing window fails to close. the website is www.gethigh.co.uk Code:
}
function picPopup4(page,width,height){
//alert(scroll);
var a;
a = width / 2;
var b;
b = height / 2;
var LeftPosition = (screen.width/2) - a;
var TopPosition = (screen.height/2) - b;
window.open(page, "", "width="+width+",height="+height+",toolbar=no,header=no,location=no,resizable=yes,"+"left="+LeftPosition +",top="+TopPosition+",scrollbars=yes");
window.close();
}
and this is an example of the code creating the navigation within each pop-up window Code:
<tr>
<td align="center"><a class="link8" href="javascript:picPopup4('legslip1.html','560','770');" target="_self">
previous image</a> <a class="link8" href="javascript:window.close()">close
window</a> <a class="link8" href="javascript:picPopup4('breaking2.html','505','800');" target="_self">next
image</a></td>
</tr>
I'll come clean and admit I'm not a programmer and have a very basic and ancient understanding of HTML coding. My website must be approaching double digit years old (which will be immediately apparent if you view its structure). I can usually resolve most things, and maintain its functioanality when needs be, but this particular problem has got me stumped. I've come onto this forum to see if anyone could provide a simple work-around ? Or if anyone would know if this is a bug within Safari which may be rectified soon (a search through the Apple forums gave no clues). I'm loathed to make any major updates/changes to my site, as despite its age it renders beautifully on all browsers except the latest ipad/iphone Safari. Cheers and hopefully thanks in advance Garry .... ANy programmer can help me to insert this slider script into my website? http://sorgalla.com/projects/jcarous..._vertical.html im using interspire shopping cart. advance thanks I am looking for a slider. Can anybody help me? This is the design of the slider. Hi there, There appears to be some sort of distortion issue with the slider on my client's website. The website is www.tranzaura.com and for some reason some of the slides on the home page appear distorted when viewed in some browsers. See attached image. Can you please check the website on your computer and please let me know if there is distortion. I'd appreciate if you could vote in the poll. Note that there are 9 slides. You can scroll through them if you wish. I have no idea why this is happening. Any thoughts or advice would be appreciated. Thank you I use offshore coding service, which failed with superior PSD to WP conversion with basic JS Slider. I know the task is complex, but do not want to hire superficial coders any more. What software can completely replace freelancers to create excellent JS Slider on WordPress engine?
HI every one I'm looking for a numeric slider , some thing that I define the min and max numbers . the attached file is something that I want . Any suggest ? thanks I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa) Here's what I got so far. (Don't need to use) Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>
Hello, Need some help with a slider, In our website we are to display a list of places in a city and show them on the home page using a slider so that users can scroll through the list of places using right or left button in a bunch of 5 places at a time something like this ----Prev Place1 Place2 Place3 Place4 Place5 Next --- when the user clicks on Next it should go to the next set of 5 places. this sounds simple and i have coded it myself using ajax with php and also implemented this with many of the online js scripts available for scrollers. but somehow either the code is too heavy due to jquery js inclusion or not able to retain the selected place in the home page. Another requirement that i coded was that if a place is selected in the second bunch of 5 places then when i come back to the home page the slider must display the second bunch of 5 places with the selected place no basically using the $_GET /$_SESSION(which resets every time a new place is selcted) need some help guys!. as i am fairly good at use of php and ajax, but js burns my fingers Thanks a tonne for stopping by... Jay |
|||||||