There is an example in jQuery Mobile: Up and Running which shows an interactive list containing title, description, and a link
http://my.safaribooksonline.com/book/-/9781449331085/4dot-lists/id2712982
I can't find the code for this, and the only way I have so far been able to reproduce the same effect is to nest an <hX> element inside the <a>, which I understand is bad practice.
Can anyone suggest the correct way to achieve this? The example below works, but only by nesting the inside the .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>List Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="example">
<div data-role="header" data-theme="c">
<h2>List Example</h2>
</div>
<div data-role="content">
<ul data-role="listview" >
<li>
<a href="#">
<h3>Title1</h3>
<p>Description1</p>
</a>
</li>
<li>
<a href="#">
<h3>Title2</h3>
<p>Description2</p>
</a>
</li>
</ul>
</div>
</body>
</html>
From the JQM docs (under "Text formatting & counts")
To add text hierarchy, use headings to increase font emphasis and use
paragraphs to reduce emphasis.
So that seems to be the correct way to do it. That said you can nest whatever you want in the li and style it using `CSS'.
Related
im trying to simplify this problem.
I got 2 div Menu, one for desktop view and one for mobile view, i want put a var that containt link and put it in a href like that.
Using html or if is needed, js.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class='menuOne'>
<a href='/home'>home</a>
<a href='/service'>service</a>
<a href='/help'>help</a>
</div>
<div class='menuOne_Mobile'>
<a href='/home'>home</a>
<a href='/service'>service</a>
<a href='/help'>help</a>
</div>
</body>
</html>
I tried some ways but no one works well.
I am using the W3C validation service report on my code, and I keep getting an error saying "Stray end tag "head", but I can't see what the problem is? My head contains a title and an opening and closing tag? is there perhaps a self-closing child element that influences the parent container? Or something else that I am missing?
<!DOCTYPE html>
<html lang="en">
<head class="page-head">
<meta charset="utf-8">
<meta name="Tobias' Portfolio" content="This is the portfolio website that Tobias Rasmussen has developed during his first weeks as CareerFoundry.">
<title>Home</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <!-- This link goes to a CDN (Content dilivery network), downloading a file that resets/normalizes the client's CSS. THIS MUST COME BEFORE THE LINK TO OUR STYLESHEET! -->
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#0,400;0,700;1,400&display=swap" rel="stylesheet"> <!-- This tag embeds the roboto condensed font from Google Fonts onto my HTML file. Note: it is important to put BEFORE the link to the styles.css -->
<link rel="stylesheet" type="text/css" href="css/style.production.css"> <!-- The link to the external stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--viewport tag-->
<div>
<header class="page-header">
<img src="img/my_logo.png" alt="Logo with the name Tobias Rasmussen in a black font on a white background" class="page-header__item page-header__logo">
<nav class="main-navigation page-header__item">
<ul role="menubar" class="navigation-list">
<li role="presentation">
Home
</li>
<li role="presentation">
About
</li>
<li role="presentation">
Contact
</li>
<li role="presentation" >
My Work
</li>
</ul>
</nav>
</header>
</div>
</head>
Your head tag should not end at the bottom, as it should not contain the header and other tags, that should be contained in the body.
The element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
The following elements can go inside the element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
You can read more about it here: https://www.w3schools.com/tags/tag_head.asp
A basic html example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Im getting into my coding class and for for some reason my stylesheet wont connect to my HTML program. They are both in the same folder. Im using NotePad ++
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="stylesheet" type="text/css" href="styles/default.css/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Khira Kathleen Mcgregor</title>
</head>
<body>
<header>
<h1>Testing Header</h1>
<h2> Testing sub header</h2>
</header>
<nav>
<ul>
<li>Menu Option 1</li>
<li>Menu Option 2</li>
</ul>
</nav>
<footer>
Bazzom bazang... we do the bestest!
<br/>Designed by ©Icabad Enterprises
<br/>
<a href="http://validator.w3.org/check?uri=referer" style = "text-decoration: none">
<img src="images/validation_button_html-blue.png" alt="Validate HTML" />
</a>
<!-- you may need to change the name of your image link to match the one you
uploaded -->
<a href="http://jigsaw.w3.org/css-validator/check/referer" style = "text-decoration: none">
<img src="images/validation_button_css-blue.png" alt="Validate CSS" />
</a>
</footer>
</body>
</html>
And my stylesheet:
body
{
/* you better change this stuff */
margin: 300px;
font-family: papyrus;
color: red;
background-color: green;
font-size:600;
}
Mistake is in a 4th row in your html file, you need to end quotes in href.
<link rel="stylesheet" type="text/css" href="styles/default.css">
If your HTML and CSS file are in the same folder, then the problem lies in your <link>.
The first thing I see is that you missed a quotation mark.
href="styles/default.css/">
This href is also pointing to a folder called "styles" that would contain default.css. Since they are in the same folder, your <link> should look like this:
<link rel="stylesheet" type="text/css" href="default.css">
The mistake is in the 4th line . If you using Both in the same folder then you should write it this way :
`<link rel="stylesheet" type="text/css" href="./default.css" />`
If in case you have a different folder structure then
`<link rel="stylesheet" type="text/css" href="./foldername/default.css" />`
I am trying to make an unordered list with clickable links, but none of them appears like that.
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I was expecting a list of clickable links, but I get a list containing the set items but without their clickable links.
I am new to web developing so I am assuming I have overlooked something.
edit: I am using a plugin named Emmet whivh I used to make the block/section.
you should write words into link content
like:
sampletest1
The problem is that you are closing the anchor tag before the content.
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
It gives nothing because there is no label for the anchor tag.
You should change like
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
This is because you must write your text inside the a-tag,
like this:
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
<!doctype html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<header>
<nav>
<h1>My Page</h1>
<ul>
<li>sampletest1</li>
<li>sampletest2</li>
<li>sampletest3</li>
<li>sampletest4</li>
<li>sampletest5</li>
</ul>
</nav>
</header>
</body>
</html>
I am working on an application in Electron, on this page I have put a button however the script does not run when clicked. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far")
}
</script>
</div>
</body>
Add some cdn for .js to work with javascript library functions as i see theres no library imported to work with javascript like
<script src="your_js/cdn"....></script>
Console.log will display text in a terminal window. If you are trying to display something in a browser you have to change the DOM.
<!DOCTYPE html>
<html>
<head>
<link class="menu-bar" rel="stylesheet" href="../css/index.css">
<link class="main" rel="stylesheet" href="../css/ceaser.css">
<meta charset="utf-8">
<title>Cipher Program</title>
</head>
<body>
<!-- Navigation Bar -->
<ul class = "menu-bar">
<li> Menu </li>
<li><a class="active" href="ceaser.html">Ceaser Cipher</a></li>
<li>Vernam Cipher </li>
<li>Frequency Analysis</li>
</ul>
<div class="main">
<h1>Ceaser Cipher</h1>
<div id="message"></div>
<button type="button" onclick="test()">Click me </button>
<script type="text/javascript">
function test() {
console.log("got this far");
document.getElementById("message").appendChild(document.createTextNode("You see me now"));
}
</script>
</div>
</body>
Simplest way is to create an empty "div" with id of your choosing. Then in javascript use the document object "document" and it's functions like ".write" or ".appendChild" to change the DOM.
You should be able to run the above code in the stack overflow sandbox and see that the output to terminal (console.log) is different than the browser rendered DOM (getElementById("message").appendChild)
your Code should output something in the Browserconsole.
You can open the Developertools afaik with Ctrl+Alt+i.
To output / connect with the Mainapplication you should use IPC.
See: https://electronjs.org/docs/api/ipc-main
Greets