I try to use prismjs http://prismjs.com/download.html for code highlighting, but it is not working see this fiddle http://jsfiddle.net/939u16ac/ I am getting the rendered HTML instead of the markup PFA markup and Screenshot
HTML File:
<!doctype html>
<html lang="en">
<head>
<title> Demo</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="lib/prism.css">
<script src="lib/prism.js"></script>
</head>
<body onload="">
<pre class="line-numbers language-markup">
<code class="">
<ol type="1">
<li>
href atribute is must and id, class, title attribute are optional
</li>
<li>
In angular application or you are not having any navigation link, use <b>javascript:void(0)</b> in href attribute value
</li>
</ol>
<a id="optionalID" class="optionalClass" title="optionalTitle" href="Product.html" >Product Page</a>
</code>
</pre>
</body>
</html>
Could any one spot me where i went wrong in implementing it?
Thanks in advance for any help.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have been trying to figure out why my href links are not working no matter what i do. The pages i am trying to connect them to are named like in the code so i am highly confused.
You're missing a body tag and then closing tags .. browsers will behave badly ;)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<body>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</body>
</html>
Please check like Home.html and other Html page that you are using for href are located at same folder where your main Html page is located.
I have created a sample.html page from above code and replaced Home.html page with my page
it is working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Information</title>
<meta charset="utf-8"/>
</head>
<h3>See our Directions!</h3>
<p>We open at <time>12:00</time> Monday to Thursday.</p>
<hr/>
<address>Email us at<br/>
cscreamery#gmail.com<br/>
or call us at<br/>
(719)-555-0987</address>
Directions
Home
Menu
<button type="button">C's Creamery</button>
</html>
I have used chrome for it.I have put all the Html page like this webapp/app/view/sample.html and others also are available at view/
<html>
<body>
<a href="mailto:cscreamery#gmail.com"></i>Email us at
cscreamery#gmail.com</a>
or
<a href="tel:(719)-555-0987"></i>call us at
(719)-555-0987</a>
</body>
</html>
I am creating a simple static website using AngularJS.
I am routing ng-view on my template to different html pages, like this one:
home.html:
<script type="text/ng-template" id="views/home.html">
You are in home
</script>
Here is my Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>My Website</title>
<base href="/">
<meta name="author" content="Me">
</head>
<body ng-controller="ContentController">
<h1>My Website</h1>
<ul class="main-nav" id="main-nav">
<li><a href="home"><i class="fa fa-home"></i>Home</li>
<li><a href="portfolio"><i class="fa fa-comment"></i>Portfolio</li>
<li><a href="articles"><i class="fa fa-comment"></i>Articles</li>
<li><a href="books"><i class="fa fa-comment"></i>Books</li>
<li><a href="about"><i class="fa fa-shield"></i>About Me</li>
</ul>
<ng-view></ng-view>
</body>
</html>
My routing works just after the second time I click on each one of the links (portfolio, articles, ...).
The first time I click on a link, the controller is executed, but the view does not show me the html content (i.e. "You are in home" does not appear on my initial click, just after the second one).
If I write the content of home.html on the index.html file, then it works correctly also on my initial click.
However, I would like to understand why it is not loading correctly on the first time I click on each one of these links.
Could you guys help me?
Is there a proper way to use ng-template on a separate file? Or should I use a work around in order to reload my ng-template after the first click?
Thank you
If I remove the ng-template, the issue is solved.
I will study more to understand how to use ng-template on separate files and will write it here.
I have a set of "li". On clicking each of those "li", I'd like to load a "div" with contents from a html page. I've read some answers on stackoverflow & tried them but they aren't helping me get this working.
Here's the code am trying now
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#page1").click(function(){
$('#result').load('dst.html');
//alert("Thanks for visiting!");
});
$("#page2").click(function(){
$('#result').load('incf.html');
//alert("Thanks for visiting!");
});
});
</script>
</head>
<body>
<header class="site-header-wrap">
<div class="site-header">
<h1>MY TOOL</h1>
</div>
</header>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>HOME</span></a></li>
<li><a id="page1" href="#"><span>OPTION 1</span></a></li>
<li><a id="page2" href="#"><span>OPTION 2</span></a></li>
<li><a id="page3" href="#"><span>OPTION 3</span></a></li>
</ul>
</div>
<div id="result"></div>
</body>
<html>
The code in dst.html is
<html lang=''>
<body>
<p> In page 1(dst page) </p>
</body>
<html>
Could I request help please spot what I'm doing wrong here?
Your code seems to be working for the most part for me the only thing i changed in your code is $('#dblock').load('dst.html'); to $('#result').load('dst.html'); since there is no div with the id #dblock
also make sure your file structure is setup properly and the html files are there with what you have setup now you should have three html files in the same folder
I am trying to build my first project for iOS using PhoneGap. I have picked up an example from this page:
http://www.codeproject.com/Articles/579532/Building-an-iPhone-App-using-jQuery-Mobile
And my code looks like this after changing reference to 1.4.1 ans 1.9:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Task Timer</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
</head>
<body>
<div id="tasksPage" data-role="page">
<div data-role="header" data-position="fixed">
Edit
<h1>Task Timer-1</h1>
Add
</div>
<div data-role="content">
<ul id="taskList" data-role="listview">
<li onclick="alert(1)">Task 1</li>
<li onclick="alert(2)">Task 2</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
About
</div>
</div>
</body>
</html>
This page, if you copy to an html file will display formatted text. However when I copy the App to iPhone it displays simple text.
Can someone please tell me what I am doing wrong?
I think I have just solved the issue.
I made a reference to cordova.js in main html file. And as a precaution copied cordova.js to www folder. And the text started appearing formatted the JQM way.
I have implemented Flexslider2 both locally and on a jsfiddle. Each uses the exact same code. However when view my page locally on (Firefox, Chrome and IE9) the Flexslide only resizes the images width.
The jsfiddle, http://jsfiddle.net/T64Gp/3/, produces the desired outcome where the image's aspect ratio is maintained
My local code (HTML) is as follows. There are no styles outside of the flexslider.css and no additional javascript outside of jQuery and flexslider.js.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="flexslider.css">
</head>
<body>
<div class="flexslider">
<ul class="slides">
<li>
<img src="1.jpg" alt="1" title="1">
</li>
<li>
<img src="2.jpg" alt="2" title="2">
</li>
<li>
<img src="3.jpg" alt="3" title="3">
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="flexslider.js"></script>
<script>
$('.flexslider').flexslider({});
</script>
</body>
</html>
Any insight on why this might be happening would be appreciated.
Two suggestions you could try:
Your code above and the jsFiddle are using different versions of jQuery. The flexslider example page uses jQuery 1.9.1 so maybe it's best to stick with this for now
The most likely cause though is that you should initialise flexslider with
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
This will ensure that the page content is loaded before flexslider initialises.
Good luck!