i'm working on an application for iOS7 (SinglePage Application, Cordova, Xcode5).
So, now i needed a slider which will allow the user to select a value between 0 and 20. For that i implented the nestoria slider (nstslider) into my project.
This is what my head area now looks like:
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi">
<link href="http://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/jqm-struc-1.4.3.css">
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" type="text/css" href="css/jquery.nstSlider.css">
<script type="text/javascript" src="js/jq-1.11.1.js"></script>
<script type="text/javascript" src="js/jqm-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery.nstSlider.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
$(function() {
$.mobile.defaultHomeScroll = 0;
});
</script>
</head>
Now i have a registration script where the users can register an account on a server and for that i need the slider:
<div class="nstSlider" data-range_min="0" data-range_max="20" data-cur_min="5" data-cur_max="0">
<div class="bar"></div>
<div class="leftGrip"></div>
</div>
<div class="leftLabel"></div>
<script>
$('.nstSlider').nstSlider({
"left_grip_selector": ".leftGrip",
"value_bar_selector": ".bar",
"value_changed_callback": function(cause, leftValue, rightValue) {
var $container = $(this).parent(),
g = 150,
r = 94,
b = 33;
$container.find('.leftLabel').text(leftValue);
$(this).find('.bar').css('background', 'rgb(' + [r, g, b].join(',') + ')');
}
});
</script>
If i comment out the .js file for the slider, my textfields still work fine. But if i use it, i'm not able to click into the fields. Only if i click and hol my finger on my screen, after a short time (i have to take away my finger after 4 sek) the Keyboard opens and i'm able to enter Text into the textfield.
Is it my mistake, or is there sth wrong with the slider?
Thanks in advance!
PS: This is one of my textfields:
<input type="text" class="text" placeholder="Ihr Name" name="name" required></br>
E-Mail Adresse*:</br>
Maybe it has sth to do with the onclick event (300ms delay)? If i just hold down the mouse shorter than a second, but longer than 500ms it opens up the keyboard
Okay, but i'm still not able to enter text into the text-fields
This problem happens because the element that contains the slider works as a "panel" that is used to catch touch events to improve the "grabbability" of the sliders handles.
I've managed to reproduce your issue in the demo page, which looks like this: https://gist.github.com/darksmo/e13daceadb1c7905c285
To work around this, you can simply enclose the slider and your label markup (or even just the slider) with a div as shown here: https://gist.github.com/darksmo/da79b2d4f9b54a23e542
Related
Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc
I assume this is a CSS error. I downloaded the jqueryui dialog example code, (which displays as advertised in the jquery site) store it in notepad and point to it with various browsers, but the styling is wrong. There is no title bar, there is no X button, however the title text does appear and a button labeled "close" appears. There is no surrounding box either. Looks like the text and close button are sitting on top of the existing content. Is is draggable,close button works, so functionality is ok.
Here is the code take from the jqueryui site.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog();
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
The X button is showing fine here, if you'r using jquery ui locally you must add images folder
I have been having a hard time getting Bootstraps popover's to show on click and not on hover. I looked at the example on this page.
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h
I have copied over the exact script src links from the example as well as the meta and link lines. I also initialize the popover to no avail. Here is a simplified version of what I'm working with.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type ="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div id="container">
Toggle popover
</div>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
I don't know if this is a normal thing to do or not but i tried opening up the page, right clicking the a element and clicking inspect(in chrome.) In the bottom right it shows me two errors.
Uncaught Error: Bootstrap's JavaScript requires jQuery
Uncaught TypeError: $(...).popover is not a function
It cant find JQuery? Its certainly there. The element shows and the text reads when I hover over it and nothing happens when I click it.
Include the jQuery script first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
This error is logged to the console on page load:
Uncaught Error: Bootstrap's JavaScript requires jQuery
Meaning the bootstrap js is looking for the jquery object.
Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});
My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>