I have created a simple mobile web page, I don't no why but the button I have created doesn't stylized like in this link. Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content = "width=device-width , user-scalable=no">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link type="text/css" href="jquery.mobile/jquery.mobile-1.1.0.css"/>
<link type="text/css" href="themes/theme.min.css"/>
<link type="text/css" href="CSS/main.css"/>
<script type="text/javascript" src="cordova/cordova-2.2.0.js"></script>
<script type="text/javascript" src="jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<title>page</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
Where I am wrong?
Thanks in advance!
make sure, your local libraries are available and the paths are correct...
see working example with the newest libraries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="content">
Delete
</div>
</div>
</body>
</html>
I believe that the problem is with your stylesheet links. You need to include rel="stylesheet" instead of setting type.
E.g.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
Related
I just uploaded my website on a free host server but it doesn't work properly. I don't know why...
can you help me please ?
see the link :
https://electrophotonique.000webhostapp.com/
Your code is fine but you just need to put your scripts at the end of your code before the </body> tag Like this :
<html>
<head>
<link rel="stylesheet" href="CSS/style2.css">
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png">
<meta charset="utf-8">
<title>Electrophotonique Ingenierie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- YOUR CODE - START -->
.....
<!-- YOUR CODE - END -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src="js/button.js"></script>
<script src="js/index.js"></script>
</body>
</html>
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
Was just wondering if someone could be able to help me out. I've come across a strange issue that i've never encountered and I have no idea how to solve it :
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="global.js"></script>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
my javascript file and my jquery file is imported here. Which "should" to the external jquery file. But it doesn't, i have to run the code from there with script tags. Any possible solution?
If it helps the code in the Global.js is this :
$(document).ready(function(){
$("#txtbox").keyup(function(){
var name = $('#txtbox').val();
$('#display').html((name));
});
});
global.js should be loaded after jQuery
Add your script tag after the jquery script references.
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
<head>
<title>Welcome to Edge Hill Computing</title>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="index.css"/>
<script type = "text/javascript" src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="global.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
</head>
You need to process your code after jquery has loaded. I imagine when you were inserting it directly in the page it was below where you loaded jquery in the head tag.
I've just created this theme with the jquery mobile theme rooler, and included it in my page like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
But the default theme is displayed:
The chrome console isn't reporting any errors.
What could be the problem?
Move your theme which I'm presuming is themename.min.css below jquery.mobile-1.4.5.min.css. The way themes work in CSS is usually by overriding selectors, such as class names. If two stylesheets apply styles to the same selector, the last defined instance is the one that's used. Currently, you're defining your theme and overriding it with the main jQuery theme. Reverse the order and your problem should be fixed. Below would be an optimal loading scenario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
For CSS:
Load the default jQuery Mobile Theme
Load the jQuery Mobile Icon overrides
Load your custom theme `thememain.min.css`
In addition, it's wise to move the JavaScript below the CSS files. CSS Files are downloaded in parallel whereas JavaScript files are usually downloaded and parsed one at a time.
I'm trying to get a mobiscroll scroller in my web app. I tried following their most basic tutorial found here: http://docs.mobiscroll.com/25 and I don't get anything to show up. I'm a super huge noob when it comes to javascript and feel dumb that I can't get through a three line tutorial. Here is some code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<style>
...
</style>
...
<input id="scroller" name="scroller" />
...
</body>
<script type="text/javascript">
...
//google analytics stuff
...
$(function(){
// create a datetimepicker with default settings
$("#scroller").mobiscroll().datetime(); // Shorthand for: $("#scroller").mobiscroll({ preset: 'datetime' });
});
</script>
</html>
You have to inlcude the downloaded mobiscroll js and css files in the head section (after jquery). Also, move your initialization code before the closing </body> tag
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<!-- Bootstrap -->
<link href="http://universitylunchbox.com/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://universitylunchbox.com/static/css/bootstrap-responsive.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://universitylunchbox.com/static/js/bootstrap.min.js"></script>
<!--Mobiscroll-->
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<script src="js/mobiscroll.custom-2.5.0.min.js" type="text/javascript"></script>
</head>