I know there is similar problem in the website but I can't find a proper solution for this.
I am using a jquery-ui dialog to display modal form in IE10.
But things are not working when I switched to Browswer Mode: IE8 + Document Mode: IE8 Standard and added the jquery.jqGrid.src.js to the html file (Even though i do not add a jqgrid to the html).
The problem : The dialog is behind its overlay. And that makes user unable to click anything on the dialog.
Below is my simplified code..
<!doctype html>
<html>
<head>
<script language='javascript' src='jquery-1.9.1.js'></script>
<script language='javascript' src='jquery-ui.js'></script>
<script language='javascript' src='jquery.jqGrid.src.js'></script>
<link rel='stylesheet' type='text/css' media='screen' href='themes/base/jquery.ui.all.css' />
<link rel='stylesheet' type='text/css' media='screen' href='ui.jqgrid.css' />
<script>
$(document).ready(function () {
$("#dialog-message").dialog({
modal: true
});
});
</script>
</head>
<body>
<div id='dialog-message'>
Dummy Message
</div>
Dummy Message
</body>
</html>
If I remove this line <script language='javascript' src='jquery.jqGrid.src.js'></script> the dialog shows perfectly. But in my project i need to use both jqGrid and jquery-ui dialog in the same page in IE-8.
I have tried to view the DOM elements using IE10 developer tools (F12) and find that if I include jqGrid js , the overlay div somehow has been moved to the end (the order of dialog div and overlay is swapped) maybe that gives some hints.
There is no problem with IE9, IE10, IE7 settings though.
Please help. Thank you!
Alex
Related
I am currently trying to figure out why my dialog boxes are not working. I took code directly from jQuery UI and put it into my own new file too see if I could troubleshoot the problem, but the code from the website doesn't even work correctly when I copy and paste it into a new HTML file. The code in question (directly from jQuery UI):
<!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.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.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>
It is supposed to be simple and straightforward but it is driving me crazy at the moment. Any help fixing this would be fantastic.
I just tried the code on codepen and it works fine
But when I tried it on my computer, the css format did not appear in front of me, due to a simple reason
Focus on the following code
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
As you can see, there is only // without https:, so to solve the problem, we just add this https: to the format, so the format becomes as follows:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
The problem is solved, of course, if this is your problem, but if it is not, please explain the problem more with an example of a picture
I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
I am creating download links to PDFs of Chinese articles I have written, but for some reason, the links are not working. I stopped at the first li because I could not figure it out. Even when I change it to a simple a href to my home page, it still does not work.
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="Chinese.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Yellowtail" />
<link rel="stylesheet" href="animate.css">
<script type="text/javascript" src="home.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.1.1.min.js"><\/script>')</script>
<script src="Chinese.js"></script>
<div class="samples">
<li><a href="XiJinPing.pdf" download>習近平反貪</a></li>
<li>伊波拉與伊斯蘭國：世界末日的徵兆</li>
<li>人類是否應探索太空?</li>
<li>社會的價值觀與同性戀</li>
<li>兩岸的未來</li>
</div>
Originally I thought you meant the links to the files were not working. (Which is why I suggested the following)
The download attribute is not supported in IE or Safari. Which browser are you using? Do you get an error message? Make sure your XiJinPing.pdf file is in the same directory as the HTML file.
Is the source actually being served or just opened in the browser?
http://www.w3schools.com/tags/att_a_download.asp
Now that I have re-read the question it appears that you mean the link tags are not working.
The first CSS (shift.css) only adds a font-face to know if it works you will need to add that font-face to an item through a style.
div {
font-family: Shift;
}
jsFiddle
The second thing you need to do is add the javascript for bootstrap.
Also if you run into Cross Scripting errors, you may need to use HTTPS versions of the links to your css files or vice versa. Chrome blocks traffic automatically but a shield will show up in the address bar and you can select it to allow the traffic anyway.
You should also close the link tags.
How can i navigate from one HTML page to other HTML page using Mobile jQuery?
I tried this one:
function temperature()
{
$.mobile.changePage("temperature.html",{reloadPage:true});
}
when i clicked on temperature button temperature function is called.
<button id="TempConvert" data-theme="b" onClick="temperature()">Temprature Converter</button>
i got error message Error while Loading Page.
I used below scripts tags to include .js files
`<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
`
You could use an anchor: Go temp! and style it so it looks like a button (that is what the data-role="button" part does).
The anchor will still behave like a regular anchor but it will look like a button.
i have followed some tutorials and books to work with html5 forms.I used modernizr to provide a fallback for non supporting browsers. Everything is good. Things are even working in IE6. I am facing problem with jquery datepicker ui. currently input type="date" is supported only by opera(i am using the most latest version of opera).
Though i used modernizr for detecting browser support for input type="date", somehow opera is still loading jquery datepicker. Am i doing anything wrong??... should i include scripts in specific order??...
This is the code i have written followed by screenshot of the problem.
html markup:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>date picker</title>
<link rel="stylesheet" href="jquery-ui/css/redmond/jquery-ui-1.8.20.custom.css"/>
</head>
<body>
<form>
<input type="date" name="date-picker" id="date-picker" value="2010-10-06" />
</form>
<script src="modernizr.js"></script>
<script src="webforms/webforms2.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.core.min.js"></script>
<script src="jquery.ui.datepicker.min.js"></script>
<script src="custom.js"></script>
</body>
</html>
jquery code :
$(document).ready(function(){
if(!Modernizr.inputtypes.date){
$('input[type=date]').each(function() {
var $input = $(this);
$input.datepicker({
minDate: $input.attr('min'),
maxDate: $input.attr('max'),
dateFormat: 'yy-mm-dd'
});
});
}
});
screenshot:
http://imageshack.us/photo/my-images/16/operadatepicker.jpg/
source code:media fire download link
Modernizr.inputtypes.date works as expected in Opera 11:
http://jsfiddle.net/feeela/tMUcw/
Maybe the error is, that you haven't included 'Input Types' in you build of Modernizr. GO and download the developer version or build a custom download, but make sure to include 'Input Types'.
http://modernizr.com/download/