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.
Related
I want to use bootstrap on my website. First, I put CDN in the head, and everything is fine. Then I don't want to apply bootstrap by CDN, so I download the bootstrap file, and put the CSS part in the <style>, and put the js part in the <script>. But it didn't work, why?
This is the CDN code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
Follow this step:
Go to https://getbootstrap.com/ and then click a big "Download" button.
Scroll down to "Compiled CSS and JS" section, click "Download" button.
You'll have a file named like bootstrap-4.0.0-beta-dist.zip downloaded (according to current version).
Extract it. It'll have 2 folders inside: css & js.
Include them on your web project directory e.g. in assets/bootstrap.
Include them inside your html <head> script:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<script src='assets/bootstrap/js/bootstrap.min.js'></script>
Good luck & keep learning!
In your <head> section you can Link your CSS stylesheet
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
And Link Js files on
<body>
<!-- html code -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js">
</body>
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
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.
I'm building a course site for my students, with different 'chapters' accessed from different links. I would like to be able to have two or more popups of the same page so I can view different parts of the same chapter side by side. Is this possible in highslide (I don't think it is...). Any solution, using highslide or not, would be appreciated!
Here's a jsfiddle demo that lets you open multiple HTML popups. In this case, both links are opening the same page of stuff, but that's just to keep the demo setup simple - normally you would have each link opening a different iframed page, but for your specific requirement, I guess you'd be opening the same page twice, just like this demo. Open the first link, then drag it by the header to one side, and open the second link.
http://jsfiddle.net/MisterNeutron/Qk6U6/1/
The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo by MisterNeutron</title>
<script type='text/javascript' src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<script type='text/javascript'>
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
</head>
<body>
<div>
<a id="thumb1" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">First iframe</a>
<br><br>
<a id="thumb2" href="http://highslide.com/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">Second iframe</a>
</div>
</body>
</html>
I have used Dreamweavers menues to do give my site a dropdown list that I can then edit. Perhaps "open in new window" when you click the link will work. I have found that most clicks will default to open in the same window.
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