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>
Related
I am a first grade CS student in university.After learning some of the basics of React.js. I am trying to understand a resume project. Can anyone tell me why the app.js and index.js are empty here. I wonder how the styling is accomplished...I spotted classname attributs inside jsx elements of the components but i can't find related css file in the src folder, could it be inside public folder then? Besides answering me questions, feel free to point out what kind of React topics/techniques I need to learn about in order to understand better how the styling works here.
The project repository by nordicgiant2: https://github.com/nordicgiant2/react-nice-resume
I have checked topic like how the styling working for component in React.js and the direct anwser haven't been found.
The styling turns to be inside the public folder, and when check the index.html file inside the public folder I realize the link tag points toward to the css file inside the public folder. My original assumption was that, the styling sheet should be place inside the src folder as the TUTORIAL said.
Below is a snippet of the inde.html of this project which reveal the answer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="%PUBLIC_URL%/css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%/css/magnific-popup.css">
<title>Nordic Giant Development</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
this is my code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EVENTI</title>
<link rel="stylesheet" type="text/css" href="../CSS/stile.css">
<link href='http://fonts.googleapis.com/css?family=Squada+One' rel='stylesheet' type='text/css'> <!--importare google font-->
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
</head>
in my "ridimesionapagina.js" i've some JS code that debunk some of my elements declared in my css code , but in this page it doesen't works why?
Well making the assumption that you're using jQuery in your ridimensionapagina.js file, one would assume you'd fix the issue by reversing the order you load the scripts so that jQuery is in fact available when your ridimensionapagina.js script loads and runs.
<script src="../JS/jquery-1.11.1.js.js"></script>
<script src="../JS/ridimensionapagina.js"></script>
instead of
<script src="../JS/ridimensionapagina.js"></script>
<script src="../JS/jquery-1.11.1.js.js"></script>
If you use jQuery in ridimensionapagina.js, you should put .. include jQuery path to above to load jQuery before loading ridimensionapagina.js file
This is my .cshtml code
<!DOCTYPE Html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>welcome</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.0.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>...</body>
</html>
Whenever I execute my code it gives the bootstrap requires jquery error. Please suggest what should I do to remove this error.
Make sure that the path is correct and points to jQuery version greater than 1.9
You are using 1.8 which is not compatible with bootstrap
Source:
https://github.com/twbs/bootstrap/blob/v3.1.1/bower.json
Just as Amit Joki said, make sure you link points directly to the jquery file and
the file name is spelt accordingly.
Also ensure that you link jquery js script before you link to the bootstrap js script
<script src="path_to_script/jquery-1.8.0.min.js"></script>
<script src="path_to_script/bootstrap.js"></script>
<link href="path_to_script/bootstrap.css" rel="stylesheet" />
i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.