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
Related
Hello I want to know how to create a modal that doesn't overlay, it means that the user can still navigate with that container still showing there, it can be moved , minimized or keep it still there, and also it won't close even if the user clicks the background. I tried to do some research but I can't seem to find the right answer because it is always bootstrap that I see.
This is what I want.
thanks in advance for helping!.
You can use JQuery UI Dialog, for example:
.ui-dialog{
bottom: 0px;
top: auto !important;
left: auto !important;
right:0px;
position: fixed !important;
}
body{
background: red;
height: 200vh;
}
<!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>
To close the Modal, you have to use the method close; see the documentation here: http://api.jqueryui.com/dialog/
I have a Microsoft Sharepoint 2010 installation and when I search items with the integrated search, I see that the results have the following javascript call:
<a id="SRB_g_b60c4a68_5348_49ec_846c_b9d069d6774d_1_Title" href="javascript:openDialogSearch('https://example.com/xyz/DispForm.aspx?ID=1');" title="This is just a test"><strong>Test</strong></a>
Now I need to call the same call js function (openDialogSearch) from an external site in the same intranet.
I've seen that this funcion is defined in a inpage script which calls the following function passing the url of the resource:
SP.UI.ModalDialog.showModalDialog(url)
How could I call the same function from an external HTML page not inside Sharepoint?
I don't recommend trying to recreate the dialog infrastructure from SP:
Instead, use a dialog like jQuery dialog:
https://jqueryui.com/dialog/
You'll need to change this code to access your SP URL.
You'll also have a configuration change. You'll need to allow access to SP from your URL, otherwise, you'll get Access-Control-Allow-Origin errors. That's an update to the SP web.config file for the given site collection.
<!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="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/dialog/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").load("PUT YOUR URL HERE").dialog({modal:true});
//$("#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>
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.
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
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 ("*****************");
});