I'm using asp.net web forms. I have DynamicDataField with some jquery.mobile widjets:
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script>
function go() {
////some code
};
</script>
</head>
<div>
<div data-role="rangeslider" class="searchBlock">
<label for="range-1a">Комнат:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" class="seearchSlider" />
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
</div>
///etc, several same divs
this DynamicDataField(Search.ascx) I place on my Main.Master padge:
<%# Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</head>
<body>
<div id="left">
<div style="background: #fff">
<search:search id="menu2" runat="server"/>
</div>
</div>
</body>
The problem is: after adding
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
all my project starts behave strange. All fonts etc are like as in jquery.mobile widjet, some javascript methods don't work. So. How can I isolate jquery.mobile-1.3.2.min.js? I want it to be used ONLY in Search.ascx.
Any suggestions? sry, i'm new in jquery:)
By default, jQuery Mobile enhances everything on the page. You can use data-enhance="false on the page body, and just use data-enhance="true" on the control that you want to enhance.
See the docs for more info.
In this case, you need to tell JQM not to to auto-initialize pages. You should do that once mobileinit fires to apply global changes, after loading jQuery and before loading jQuery mobile JS libraries.
Nevertheless, bu doing so, you will need to manually enhance JQM elements (widgets).
<head>
<!-- jQuery.js here -->
<script>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
</script>
<!-- jQuery Mobile.js here -->
</head>
Related
I am trying to implement bootstrap file input form GitHub in asp.net.
Below is my .aspc file code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="bootstrap-fileinput/js/fileinput.js"></script>
<link href="bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<title></title>
<script>
$("#input-id").fileinput({
'showUpload': false,
'maxFileCount': 5,
'showPreview': false,
'mainClass': "input-group-lg"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
</body>
</html>
It works. But I need to customize it.
I do not want preview of files ('showPreview': false)
I do not want to show Upload button ('showUpload': false)
I want to limit number of files ('maxFileCount': 5)
I have used required plugins for customization.
But Still I get default preview/output.
Can someone help with this?
Thanks for your help.
Your code has minor errors. You need to add "multiple" directive to your input tag and change class to: "file-loading".
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
And here is a working demo: https://jsfiddle.net/16jut54d/
The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
It basically works (slider shows up) when I run this file directly. But when i run index.html and call it by angular ui route, the slider doesnt show up anymore. it also works when using href tag to link to this file. Please help, i have been fixing this all day.
Ps. if i have to show more codes ( eg., controller or service ), you can tell me.
Thanks
<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script type="text/javascript">
$(function() {
$('#slider1').slider({
value:12,
min: 10,
max: 20,
step: 1,
slide: function( event, ui ) {
$('#font_size').val(ui.value + ' px');
$('.box').css('font-size', ui.value);
}
});
});
</script>
<div class="examples">
<h2>Text animation with jQuery and UI slider</h2>
<div class="column">
<p>
<label for="font_size">Font size:</label>
<input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider1"></div>
</div>
<div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
<div style="clear:both"></div>
</div>
I'm currently creating an app using the Cordova library from PhoneGap. Now while testing the code out on Chrome, everything works but when I deploy it to Android, all the onclick events on everything except for buttons cease to work.
In the code below you'll see the on which I add an eventlistenener using Jquery.
I have no clue as to why it doesn't fire the onclick events on my Nexus. I've searched similar questions thoroughly and yet none offered a working answer.
Similar questions: onClick not working on mobile (touch) --
jQuery onclick not working on mobile --Android/ Phonegap - onClick() not working
This is just a section from the index.html
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="script/jquery/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="script/jquery/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="script/jquery/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="theme/MakeMyOutfit.css">
<link rel="stylesheet" href="theme/MakeMyOutfit.min.css">
<script type="text/javascript" src="script/Datebox/DateBox.js"></script>
<link rel="stylesheet" href="script/DateBox/jqm-datebox-1.4.5.css">
<link rel="stylesheet" href="theme/theme.css">
<script type="text/javascript" src="script/menu.js"></script>
<script type="text/javascript" src="script/lockscreen.js"></script>
<script type="text/javascript" src="script/wardrobe.js"></script>
<script type="text/javascript" src="script/clothing.js"></script>
<script type="text/javascript" src="script/addUser.js"></script>
<script type="text/javascript" src="script/JsonDb.js"></script>
<script type="text/javascript" src="script/takePicture.js"></script>
<title>Make My Outfit</title>
</head>
<body>
<div data-role="page" id="lockscreen">
<header>
Make My Outfit
</header>
<section id="lockscreen-content" data-role="content" >
<div class="lockscreen-profile">
<div class="lockscreen-profile-top">
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">X</div>
</div>
<div class="lockscreen-profile-login">
<input type="password" name="password" class="txt password" value="" />
Aanmelden
</div>
</div>
<div class="lockscreen-profile" >
**<div class="lockscreen-profile-top">**
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">Y</div>
</div>
<div class="lockscreen-profile-login">
<input type="password" name="password" class="txt password" value="" />
Aanmelden
</div>
</div>
<a href="#addUser" id="btnAddUser" class="lockscreen-profile">
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">Gebruiker toevoegen</div>
</a>
</section>
</div>
</body>
</html>
This is the code I use for the lockscreen page: (lockscreen.js)
var selectedUserId;
$( document ).on( "pageinit", "#lockscreen" ,function() {
$(".lockscreen-profile-top").on('touchstart click', function(){
var e = $( this ).parent();
if (!e.hasClass("open"))
{
e.addClass("open");
//$( this ).next().children(".password:first").focus();
}
else
{e.removeClass("open");}
});
/*
BUG: dit event wordt 2 keer gefired
GEVOLG: de selectedUserId wordt onmiddelijk terug op null gezet.
OPLOSSING: event unbinden (.off()) en daarna terug binden
FIXED
*/
$(".lockscreen-profile-login-button").on('touchstart click', function(){
selectedUserId = $(this).attr("data-user-id");
console.log(selectedUserId);
$.mobile.navigate( "#home", {transition: "flow"});
});});
The problem lies with android 4.3 and lower.
When testing on Android 4.4+, I do not have this issue.
Further investigating why it happens.
Try this
$(document).on('click', ".lockscreen-profile-login-button",function () {
selectedUserId = $(this).attr("data-user-id");
console.log(selectedUserId);
$.mobile.navigate( "#home", {transition: "flow"});
});
Maybe the DOM is not ready when you attach the events. Have you tried loading the scripts at the bottom of the page? This might fix the issue and also improve your application's performance.
I don't know much about Phonegap, but about touch events on mobile i know you have to take care of a couple of things:
Check the z-index property of your elements, when you have elements one inside another it could be that the touch event is intercepted by the container element.
You can just set, in your css, the z-index property of the element to be touched higher than other ones.
Prevent default touch action by "touch-action: none;" in your css.
If you're using Chrome you can simply debug your mobile webapp by Chrome for Desktop with tools>inspect devices and the android adb running.
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)