I have following code in index.html:
<a data-ajax="false" rel="external" href="../Info/BasicDefinition.pdf"
data-theme="c" data-iconpos="top" data-icon="arrow-d" data-role="button">Structure</a>
But i get 404 error - file not found after click on structure link. What i must change? I want to open .pdf file from browser.
My file structure (MPSR - root folder of my web site)
-MPSR
-----index.html
-Info
-----BasicDefinition.pdf
Linking without Ajax
Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition. Both attributes (rel="external" and data-ajax="false") have the same effect, but a different semantic meaning: rel="external" should be used when linking to another site or domain, while data-ajax="false" is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
Source: http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html
So, you can remove the rel="external" from your tag and it should work.
I can't post this on jsFiddle, as it wouldn't work, but I've tested here and it worked fine:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>
<a data-ajax="false" href="../info/test.txt" data-iconpos="top" data-icon="arrow-d" data-role="button">Link</a>
</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
Folder structure:
\test
\info
\test.txt
\root
\index.html
Related
I have a website, norway-yv.epizy.com. I use InfinityFree to host (I just want to use the website for practise and as a fun hobby project). They use filemanager.ai to manage my files. I have a vast system of files and folders (see below), and instead of having to upload every file and every folder I have made it so that everything is in the website folder. This way, I do not need to upload everything every time I change something in my local copy of the website. I want norway-yv.epizy.com to redirect to norway-yv.epizy.com/website/home.html, and have done this trough an index.html file. However, it only gives error 404.
My files
.htaccess
DirectoryIndex index.php index.html index.htm index2.html
ErrorDocument 403 https://infinityfree.net/errors/403/
ErrorDocument 404 https://infinityfree.net/errors/404/
ErrorDocument 500 https://infinityfree.net/errors/500/
I have configured http://norway-yv.epizy.com/website/myerrorpages/[errornum].html as error page path in InfinityFree control panel
htdocs (folder, automatically created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=website/home.html">
</body>
</html>
website (folder, manually created)
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>norway-yv</title>
</head>
<body>
<meta http-equiv="refresh" content="0; url=home.html">
</body>
</html>
home.html
<html lang="en">
<head>
<title>norway-yv | home</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>This is the website of norway-yv</h1>
<p>I'm sorry for the horrible look of my website, but it is the best I can do</p>
<h2>About me</h2>
<p>I am a hobby developer who likes programming in Python. I am a student in Norwegian upper secondary school, year 1.<br>
Some of my best projects can be found <a href="projects.html" >here.</a><br>
Feel free to contact me trough GitHub.</p>
<h2>Contact</h2>
<p>
<a href="https://stackoverflow.com/users/17496608/norway-yv" >StackOverflow</a><br>
GitHub (via GitHub e-mail)<br>
</p>
</body>
</html>
projects.html
<html lang="en">
<head>
<title>norway-yv | projects</title>
<link rel="icon" type="image/png" href="../files/icons/favicon.png">
<link rel="stylesheet" href="style/normal.css">
</head>
<body>
<header>
<a href="home.html">
<img class="logoTop" src="files/icons/favicon.png" alt="Logo" />
</a>
</header>
<h1>My projects</h1>
<p>I have made tons more than this, mainly for scientific and mathematic purposes, but these are some of the projects I am most proud of:</p>
<h2>kode24-calculator</h2>
<p>An ongoing project, where I try to calculate expected wage for Norwegian developers using many different parametres.<br>
For more information, see here. </p>
<h2>binary-calculator</h2>
<p>A project that sort of is finished, but still has a long way to go. Currently, it can calculate the sum of two binary numbers up to 32 bit size and output it.<br>
For more information, see here. </p>
</body>
</html>
My comments in the end
I have much more than this in my website, with several other folders. I can add them to the question if that is necessary. But I hope not.The same problems do occur when previewing (using edge showing the local version). So it's more of a problem with my files than InfinityFree.
Maybe it's not working because you are missing the <base> tag in your <head>.
The base tag defines the base URL, from where relative URLS are redirected.
For more
I am using Sublime text to write some HTML and CSS files. I've created my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>RainyDayBakes</title>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="text-align:center">RainyDayBakes</h1>
<nav style="text-align:center">
<a href=”C:\Users\sarah\Documents\Simmons\CS-321\page1.html”> About </a>
<a href=”page2.html”> Menu </a>
<a href=”page3.html”> Gallery </a>
<a href=”page4.html”> Order </a>
<a href=”page5.html”> Contact Us </a>
</nav>
<img src="cake.png" alt="oreo crumble cake" class="center">
<h3>Welcome to RainyDayBakes!</h3>
<p>We are a local bakery specializing in creative cakes, cupcakes and cookies!</p>
<p>In addition to being open daily we also offer custom ordered confections.</p>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
<footer>
</footer>
</html>
my page1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>This is Page One </title>
</head>
<body>
</body>
<footer>
</footer>
</html>
and my style.css:
<style>
h1 {
color:red;
}
</style>
When I try to run index.html in Chrome, the link to page1.html says it doesn't exist, and the CSS won't show up. They're all in the same folder, I've saved all the files, and I'm running on Chrome. Every other solution I've found refers to making a typo, the directories being different, etc. but as said, they're all in the same folder, and I haven't noticed a typo (but it's entirely possible when you're too close to your code).
First off, you're not even using the tag anywhere in your code, so that's why the style isn't showing up. Secondly, if they are in the same folder, just link your about page to page1.html; not the full directory listings.
You are using typographical quotes in your links' href attributes, which won't work. Change those to regular quotes.
Let the link be this way instead href=”page1.html”
You might want to put a link to your CSS file on all your pages, I don't see it on your page1.html You probably already know about this resource but I mention it just in case you don't: W3 Schools is very handy for a quick reference to a lot of HTML/CSS questions.
So you have two issues:
For page1.html, would suggest adding file:// or file:/// to the beginning of the href element, or maybe retyping the line since the other links worked
For your CSS, remove the tag, it's for when you put the style inside the HTML file(embedded)
This isn't an issue with your code. I was having the same exact problem too and i recently discovered that the problem likely lies in the IDE that you're using. I was using stackblitz and recived the same output. But when i switched to an online compiler and litteraly copy & pasted the code with the same file names, the code started working correctly. Try using an online compiler and see how that works out for you. It worked for me.
The compiler I used is:
https://www.onlinegdb.com/
make sure to switch the languate to HTML using the language dropdown on the top right corner.
I've been struggling for hours to include the Bootstrap CSS file into my file. My code snippet is as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1">
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css"> <!--Works fine now, but not with local path -->
<title>Welcome</title>
</head>
<body>
<section>
<div class="jumbotron">
<div class="container">
<h1> Hello </h1>
<p> world </p>
</div>
</div>
</section>
</body>
</html>
This works perfectly and the Bootstrap shows up just fine. However, I wish to include the localized files. The moment I change the link in the head of the code to <link rel="stylesheet" href="resources/bootstrap.css" type="text/css">, The bootstrap disappears.
Just to make sure and convince you that the bootstrap.css is indeed there at resources/bootstrap.css I included <%# include file="/resources/bootstrap.css"%> at the top of the code and it actually showed me the entire content of the file.
What am I missing? How do I resolve this?
If you have this project structure (I suggest trying this,because resource folder content is not used for static web contentnt ):
|_webapp
|_css
|_bootstrap.css
you can load the css by
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.css" type="text/css">
I’m just trying to insert an html absolute link to my texteditor on Mac and I get this on the browser url:
file:///Users/yasser/Desktop/211Website/Labs/https://delicious.com/jodi.reed/browsers...
and file not found in Firefox or Chrome or Safari. When I delete the path before the http the page opens fine...
The code is below-
<!DOCTYPE html>
<html>
<!-- Lab2 Yasser Abdelhalim -->
<head> <meta charset="UTF-8">
<title> Lab2 Yasser Abdelhalim </title>
</head>
<body>
<h1> Yasser’s Web Development resources </h1> this is description for heading number one
<div>
<h2> Background </h2>
<ul>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
<li><a href=“delicious.com/jodi.reed/browsers”>link</a></li>
</ul>
<h2> Web programing </h2>
<ul>
</div>
</body>
</html>
I think (without seeing anything else) you just need to add the initial part of your URLs, as your ocmputer is thinking they're local, relative files (in the same directory as the file with this code in).
Try using this code:
<!DOCTYPE html>
<html> <!-- Lab2 Yasser Abdelhalim -->
<head>
<meta charset="UTF-8">
<title>Lab2 Yasser Abdelhalim</title>
</head>
<body>
<h1>Yasser’s Web Development resources</h1> this is description for heading number one
<div>
<h2>Background</h2>
<ul>
<li>
link
</li>
<li>
link
</li>
<li>
link
</li>
</ul>
</div>
</body>
</html>
Try typing the full address in here, including speech marks (double quotes).. sometimes when copying and pasting URLs it copies the formatted speech marks from some fontstyles.
Apache is the webserver that runs on Linux, it pretty much is a foundation or base of every website around (with some exceptions).
Are you using Windows or Mac? You would be better to be working in a proper web server environment (I can explain)
I'm probably thinking about this 'oldschool' but what am I missing?
I am writing an HTML5 app and using JQuery mobile. In the top left I have a menu button that slides out the menu panel. Great. Now I want multiple pages in the app... Ideally, I'd like to use a multipage HTML file, but I can't make the menu common, and if I update the menu, I have to edit it in every 'page' - not good.
I then found a couple links about $.mobile.loadPage(), for example this one and this one, but I can't get anything to work. The manual page doesn't help me either, although it looks like there is an iframe in their example - which I don't really want either.
In the example below, I get the alert so the load should have taken place, but the content has not updated and there are no updates in the java console.
My main page is below, but the 2nd page I'm trying to load has been various combinations of a full page with html tags, to just the raw content to get replaced, then I found some place that said it has to be wrapped in a page div, so this is where I stopped:
<div data-role="page">
<div data-role="header">
<h1>MyApp</h1>
</div>
<div data-role="content">
<center>
<p>This is page 2. Click me</p>
</center>
</div>
</div>
Here is my demo code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
function handlePageLoaded() {
$('#loadPage2').on("click",function(){
$.mobile.loadPage("pages/page2.php", {pageContainer: $('#main_content')});
// Tried these as well:
//$.mobile.loadPage("pages/page2.php");
//$('#main_content').load("pages/page2.php");
alert ("#loadPage2.onClick()");
return false;
});
};
$(document).ready(handlePageLoaded);
</script>
<title>MyApp</title>
</head>
<body>
<div data-role="page" id="application">
<div data-role="panel" id="menu" data-display="overlay">
<center>
Close<br />
<a id="loadPage2" href="pages/page2.php" data-role="button" data-inline="true">Page 2</a><br />
</center>
</div><!-- /panel -->
<div data-role="header">
<h1>MyApp</h1>
Me
</div>
<div id="main_content" data-role="content">
<center>
<p>This is the landing page.</p>
</center>
</div>
<div data-role="footer"><span class="ui-title" /></div>
</div>
</body>
</html>
I have also looked at using a standard HTML5 multipage jquery mobile app and extracting out the menu components writing the outlines of the menu in each page then incuding the common menu components in PHP, and this is pretty much as close as I got, but I'd rather not trasition the whole page if I can help it, but that's no biggy, the main problem with this approach is that I need PHP to do the include, and I'd rather have a native HTML5 app that can be served on any web server.
So my question again, is what am I missing? or how can I change my thinking to adapt to this new-fangled stuff?
you can use $.get to get common header
$.get('header.html', {}, function(response){
$('div#nav').append(response);
});
it will load common header in this div
<div id="nav" class="navcontain">
</div