I have a strange problem with slider. It does not render correctly. See the picture:
as you can see, I don't have "slider" in my slider :). Just a up/down arrows.
This is my cod:
<head>
...
<!-- General Style -->
<link href='css/style.css' id='styles-css' media='all' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<!-- Scripts -->
<script src='js/jquery-2.1.1.min.js'></script>
<script src='js/jquery-migrate-1.2.1.min.js'></script>
<script src='js/bootstrap.min.js' type='text/javascript'></script>
<script src='js/jquery.mobile-1.4.5.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
...
</head>
and simple slider from jqm page
<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100">
What's wrong?
Related
I'm integrating summernote-bs5 in my software. I include it from cdn:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" integrity="sha512-ngQ4IGzHQ3s/Hh8kMyG4FC74wzitukRMIcTOoKT3EyzFZCILOPF0twiXOQn75eDINUfKBYmzYn2AA8DkAk8veQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js" integrity="sha512-6F1RVfnxCprKJmfulcxxym1Dar5FsT/V2jiEUvABiaEiFWoQ8yHvqRM/Slf0qJKiwin6IDQucjXuolCfCKnaJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I initialize summernote area using default. Html:
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.
</textarea>
</div>
js:
$('.summernote').summernote();
It doesn't work. I tried also with jsfiddle with bootstrap last version and it seems not work. jsfiddle
I just did this as a basic test and it worked for me. Are you adding everything in the correct order and are you waiting for the document to be loaded to initialise your summernote div?
$(document).ready(function() {
$('.summernote').summernote();
});
<!DOCTYPE html>
<html lang="en">
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
<div class="mt-2">
<label class="control-label" for="textarea">Descrizione breve:</label>
<textarea class="summernote" name="content_abstract"><?=$content->content_abstract?>.</textarea>
</div>
</html>
How to make this snippet working?
jQuery(function($) {
jQuery("#date-from").datepicker();
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input class="from hasDatepicker" id="date-from" type="text" />
Add this line on top: <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> and remove the class hasDatepicker from input tag so your input tag will be <input class="from" id="date-from" type="text" />
$("#date-from").datepicker();
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<input class="from" id="date-from" type="text" />
can you please tell me how to show date box above the pop up screen .Actually I am try to implement date box but it is showing below the pop up screen .Here is fiddle.
http://jsfiddle.net/ravi1989/3yG9E/
- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
<link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
<link rel="stylesheet" href="css/base.css">
<!-- Extra Codiqa features -->
<!-- jQuery and jQuery Mobile -->
<script src="js/jquery-1.9.1.min.js"></script>
<script src="cordova-2.7.0.js"></script>
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
<script src="lib/jquery.textselect.min.js" type="text/javascript"></script>
<script src="lib/jquery.scrollTo.min.js" type="text/javascript"></script>
<script src="js/jquery.search.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js"></script>
<script src="js/index.js"></script>
<script src="js/PopupScript.js"></script>
<script src="js/CasePadDatabase.js"></script>
<script type="text/javascript" src="js/websocket.js"></script>
<script src="js/BackButtonImplentation.js"></script>
<script src="js/fontSizeFunctionality.js"></script>
<script src="js/CreateFolder.js"></script>
<script type="text/javascript" charset="utf-8" src="js/WebSocketPlugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/highlight.js"></script>
<script src="js/EmailComposer.js"></script>
<!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /-->
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" />
<!--script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script-->
<script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
</head>
<body>
<!--**********************************Home page Star******************************-->
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
<div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" id="folderData" >
</ul>
<!-- **************Case Information Pop up Start*******************-->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="content">
<div><img src="img/Documents.png"/></div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text" class="caseName_h" >
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;" >Case Date:</label>
<!--input name="text-12" id="text-12" value="" type="date" class="caseDate_h" -->
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}'/>
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h"></textarea>
</div>
</div>
</div>
Actually i have header having button .on click it show pop up screen on click date field it is showing below the pop up screen .How to show date box above the pop up screen may i change z index?
A quick fix is to add "zindex":1200 to your data-options object in your date-box input
This is from jquery mobile.
Note: Chaining of popups not allowed
The framework does not currently support chaining of popups so it's not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.
This also means that custom select menus will not work inside popups, because they are themselves implemented using popups. If you place a select menu inside a popup, it will be rendered as a native select menu, even if you specify data-native-menu="false".
A workaround to get chained popups working is the use of a timeout for example in the popupafterclose event bound to the invoking popup. In the following example, when the first popup is closed, the second will be opened by a delayed call to the open method:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
I'm trying to open a jquery mobile panel through code but the method is not recognized.
the error I'm getting is: "Object[object Object} has no method 'panel' "
I have a html page consists of several jquery-mobile div pages and an external javascript file.
this is the js function:
function open_panel() {
var selected_child=$('#kids_select').val();
alert(selected_child);
$("#mypanel").panel("open");
// $("#mypanel").panel().panel("open");
}
$('#mypanel').live('pageinit', function () {
alert("works");
});
I'ts a project started by another student, and he included duplicate js files in the html head section. I guess it's because the old jquery mobile is loaded insted of the 1.3, but when I try to remove some of the references the design gets all messy or some other code isn't recognized.
here's the head section:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title></title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="js/js_functions.js" type="text/javascript"></script>
finnaly I added a href attribute to the 'a' tag pointing the panel and it gets loaded after the function fires up, but the panel's pageinit function won't fire.
I tried:
$('#mypanel').live('pageinit', function () {
alert("works");
});
and:
$('#mypanel').live('pageshow', function () {
alert("works");
});
but that doesn't work
here's the relevant part of the html body: (with the panel)
<div data-role="page" id="mainpage">
<div data-theme="b" data-role="header">
<h3>
Iallow
</h3>
</div>
<div data-role="content" style="text-align: center;">
<div>
<div style="width: 50%; float: left">
<label for="NewkidBTN">
Click to add new kid</label>
<a id="NewkidBTN" data-role="button" data-theme="b" href="#RegisterChild" data-icon="plus"
data-iconpos="right">Add Kid</a>
</div>
<div id="kids_div">
</div>
</div>
<a onclick="open_panel()" href="#mypanel" data-role="button" data-inline="true" data-icon="bars">Add transaction</a>
</div>
<div data-role="panel" id="mypanel">
<h3>enter action</h3>
<select name="select-type" id="select-type" onclick="return select-type_onclick()">
<option value="deposit">deposit</option>
<option value="withdrawal">withdrawal</option>
</select>
<label for="ammount">Write the ammount</label>
<input type="number" data-clear-btn="false" name="ammount" id="ammount" value="">
<label for="desc" class="ui-hidden-accessible">
description:</label>
<input type="text" name="desc" id="descTB" value="" placeholder="description" runat="server" />
<button id="Button1" type="submit" data-theme="b" data-icon="check" runat="server" onclick="transaction">
submit</button>
</div>
edit:
I changed the head section by removing old jquery mobile and jquery.
now the panel loads but the pageinit function I added to the panel won't fire up.
I tried every syntax, such as:
$('#mypanel').live('pageshow', function () {
alert("works");
});
$('#mypanel').live('pageinit', function () {
alert("works");
$('#mypanel').on('pageshow', function () {
alert("works");
});
$('#mypanel').on('pageinit', function () {
alert("works");
});
maybe panels don't work like pages in jquery mobile..
the head now looks like this:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />-->
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
<!--<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>-->
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title></title>
<!--<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>-->
<!--<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>-->
<script src="js/js_functions.js" type="text/javascript"></script>
My goal is to include a FullCalendar into JQueryMobile.
I have followed this guide but when I run it with the Android Emulator, it loads the event dialog page with input text "title" and "color" like the image below.
click my image
How can I make it load a full calendar view first instead of an event dialog?
click my image
I have copied all js & css. Here is my index.html code
<html>
<head>
<link rel='stylesheet' type='text/css' href='resources/css/jquery-ui-1.8.13.custom.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/fullcalendar.css'/>
<link rel='stylesheet' type='text/css' href='resources/css/application.css'/>
<script type='text/javascript' src='resources/js/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='resources/js/jquery-ui-1.8.13.custom.min.js'></script>
<script type='text/javascript' src='resources/js/fullcalendar.min.js'></script>
<script type='text/javascript' src='resources/js/underscore.js'></script>
<script type='text/javascript' src='resources/js/backbone.js'></script>
<script type='text/javascript' src='resources/js/application.js'></script>
</head>
<body>
<div id='calendar'></div>
<div id='eventDialog' class='dialog ui-helper-hidden'>
<form>
<div>
<label>Title:</label>
<input id='title' class="field" type="text"></input>
</div>
<div>
<label>Color:</label>
<input id='color' class="field" type="text"></input>
</div>
</form>
</div>
</body>
</html>
Please advise how to load full calendar view instead of the event dialog coming first.
http://arshaw.com/fullcalendar/docs/views/Available_Views/
http://arshaw.com/fullcalendar/docs/views/defaultView/
It's covered in the documentation. Is your defaultView set to 'month'?