when I'm printing my page using window.print ,Its automatically adding some data's in header and footer
for ex: In top of the page its adding - page tittle and localhost url . In bottom of the page adding - page number and time . How can I get rid of these information from my page
My Html Page:
<title>GM Shop Click Drive Tracker Tool - Reports</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/>
<style>
body {
padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/gmpt.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="ico/favicon.png">
<style type="text/css">
#media print {
input {
display:none !important;
}
.ui-helper-hidden-accessible {
display:none !important;
}
#headRow {
display:none;
}
.sidebar-nav {
display:none !important;
}
select {
display:none !important;
}
.dataList {
width:90% !important;
}
}
table.dataList {
border-collapse: separate;
border-spacing: 0;
}
table.dataList th {
background-color: #f0f0f0;
}
table.dataList tr th,
table.dataList tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table.dataList tr th:first-child,
table.dataList tr td:first-child {
border-left: 1px solid #bbb;
}
table.dataList tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table.dataList tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table.dataList tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table.dataList tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table.dataList tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
tr.alternate {
background-color: #f0f0f0;
}
.highlight {
background-color:#FFFFE0 !important;
}
</style>
<div class="container-fluid">
<div class="row-fluid" id="headRow">
<div class="span2" style="text-align: center">
<img src="images/shop_click_drive_logo.jpg" style="width:100px"/>
</div>
<div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px">
<ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs">
<li class="active" id="dealerTab">Dealer Report</li>
<li id="statusTab">Dealer by Status</li>
<li id="stepTab">Dealer by Step</li>
<li id="userTab">Dealer by User</li>
<li id="userTab">"In Process" Report</li>
<li id="userTab">RouteOne Report</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span2">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li>Dashboard</li>
<li>Tracker</li>
<li class="active">Reports</li>
<li>BroadCast</li>
<li>Calendar</li>
<li>Documents</li>
<li>Admin</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</div><!--/.well -->
</div><!--/span-->
<div class="span10" id="mainContent" style="padding-left:20px">
<!-- Begin Content -->
<div class="row">
<div class="span12">
<input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/>
</div>
</div><!-- /container -->
You will not be able to remove these headers and footers, as it is the browser that puts them there. On some browsers, the user may be able to remove the header and footer, but since this requires intervention from a (savvy) user, it's probably not the solution you are looking for.
If you really must remove the header/footer yourself, your only option seems to be producing PDF output which the user can then print, or save to disk. Some CMSs will offer this functionality automatically (e.g. Joomla). If you're rolling your own, have a look at the following libraries:
http://www.fpdf.org/
http://www.tcpdf.org/
These classes are able to convert an HTML document (or part thereof) into PDF. They allow you to pass in a CSS file so you can determine the layout and style of the resulting PDF. In my experience, it works well as long as you steer clear of (complex) tables.
You can also turn to JS to print specific DIV. Here is Example
JS
function printPage(id) {
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin=window.open('','','left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
You can call above function on click event.
Related
I've got a strange problem.
The following page is a custom form based on Google Forms (from: https://blog.webjeda.com/google-form-customize/).
I've also added the code to create a custom "Thank you"-page and this is the part where I think something is going wrong.
Sometimes (and not always) after I submit the form, Chrome crashes completely (the proces chrome.exe is gone in taskmanager).
I used Sawbuck to view the log, but saw no fatal errors.
My chrome browser version: 73.0.3683.75
In the console I don't see any errors.
I tried a few times in Internet Explorer but it didn't crash until now.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Template</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.solodev.com/assets/pagination/jquery.twbsPagination.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script type="text/javascript">var submitted=false;</script>
<script type="text/javascript" >
window.onload=function(){
$('#pagination').twbsPagination({
totalPages: 2,
// the current page that show on start
startPage: 1,
// maximum visible pages
visiblePages: 2,
initiateStartPageClick: true,
// template for pagination links
href: false,
// variable name in href template for page number
hrefVariable: '{{number}}',
// Text labels
first: 'First',
prev: 'Prev',
next: 'Next',
last: 'Last',
// carousel-style pagination
loop: false,
// callback function
onPageClick: function (event, page) {
$('.page-active').removeClass('page-active');
$('#page'+page).addClass('page-active');
},
// pagination Classes
paginationClass: 'pagination',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first',
pageClass: 'page',
activeClass: 'active',
disabledClass: 'disabled'
});
}
</script>
<style>
.answer {
margin: 15px 0 15px 0px;
}
label {
color: #4ca950;
}
h1 {
font-size: 28px;
border-bottom: 1px solid #4ca950;
padding-bottom: 6px;
}
.container {
margin-top: 20px;
}
.page {
display: none;
}
.page-active {
display: block;
}
.pagination li {
width: auto;
height: auto;
padding: 1px 1px;
}
.pagination li a {
border: 1px solid #4ca950;
border-radius: 4px;
}
.pagination li:hover {
background-color: #4ca950;
}
.pagination li a:hover {
color: #FFF;
}
.pagination li.next, .pagination li.prev {
width: auto;
}
.pagination li.active {
background-color: #4ca950;
border-radius: 4px;
}
.btn {
background-color: #4ca950;
}
#media all and (max-width: 1024px) {
body {
font-size: 18px;
}
.pagination li a {
font-size: 20px;
}
}
</style>
</head>
<body>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) { window.location='thankyou.php'; }"></iframe>
<div class="container">
<form action="https://docs.google.com/forms/d/e/xxxxx/formResponse" class="form" target="hidden_iframe" onsubmit="submitted=true;">
<div class="title col s12"><h1>Form</h1></div>
<div class="page" id="page1">
Hi, this is a test.
</div>
<div class="page" id="page2">
<div class="col s12">
Yes or no?
<div class="answer col s12">
<label><input type="radio" name="entry.1276429181" value="Yes" class="with-gap"/><span>Yes</span></label><br>
<label><input type="radio" name="entry.1276429181" value="No" class="with-gap"/><span>No</span></label>
</div>
</div>
<div class="col s12">
Input text
<div class="answer col s12">
<textarea id="textarea1" class="materialize-textarea" name="entry.47775240" placeholder="Text.."></textarea>
</div>
</div>
<div class="col s12">
<button class="btn waves-effect waves-light" type="submit" name="action">Send
<i class="material-icons right">send</i>
</button>
</div>
</div>
<div class="col s12">
<ul id="pagination" class="pagination-lg pull-right"></ul>
</div>
</form>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
The thankyou.php contains only this:
<html>
<head>
<meta charset="UTF-8">
<title>Template</title>
</head>
<body>Thank you!</body>
</html>
Afaik script-tags should be placed in the head or body, but yours is inbetween those two. might be just a guess, but this could lead to wrong interpretations by the browser.
How to make column height shrink when it is displayed on smaller screen? I used bootstrap 3.3.7 . I made 3 columns inside a row and sat them to col-md-2, col-md-9, col-md-1. They are displayed correctly on md screen and bigger. On small screen they are still displayed fine. However, on small and extra small screen, I want to make first and third columns height shrink to the height of their contents.
Here is a part the HTML code and css I used:
HTML:
<!DOCTYPE html>
<html lang="en">
<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" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-
dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="second_page.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" id="first_left_column_box">
<div class="left_content" id="first_left_column">
<a class="salehslist" id ="category" href="#"
style="text-decoration:none;"> <center> content
</center> </a>
</div>
<div>
<h1> another content </h1>
</div>
</div>
<div class="col-md-9">
<div class="breadcrumb">
<a id ="category" href="#" > <center> content </center>
</a>
</div>
<div>
<h1> many contents" nested rows and columns" are here</h1>
</div>
</div>
<div class="col-md-1" id="last_right_column_box">
<div class="right_content" id="last_right_column">
<div>
<h1> many contents </h1>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"
</script>
</body>
</html>
CSS file:
body { padding-top: 70px; }
/* all a tags colors */
a { color: #4285F4; }
/* first left column */
#first_left_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
height:200vh;
margin-bottom: 20px;
}
#first_left_column{
text-align:center;
line-height:50px;
}
/* middle column */
.breadcrumb {
background-color: #eee;
border-top: 1px #ccc solid;
border-bottom: 1px #ccc solid;
margin-bottom: 20px;
}
/* last right column */
#last_right_column_box{
background-color: #eee;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
padding: 10px;
height:200vh;
}
#last_right_column{
text-align:center;
line-height:50px;
}
you can use with col- with col-md:
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
try use col-2 and col-md-2 like example:
<div class="col-2 col-md-2" id="first_left_column_box">
Read this... can help you. https://www.w3schools.com/bootstrap4/bootstrap_grid_examples.asp
Bootstrap currently doesn't support anything for automatic resizing of height of columns , we are bounded to use media queries so just use it !!
You will need to use media queries for the separate screens. You can write media queries like so
#media not|only mediatype and (expressions) {
CSS-Code;
}
but it is better to separate the rules which are applicable for the given rules, by creating separate CSS files for the separate sizes:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
An example for your case:
<link rel="stylesheet" media="screen and (max-width: 699px)" href="small-screen.css">
And put here the rules for small screen. You can create separate CSS files for separate screen size categories.
I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
I'm a newbie to web development. And so, I've just created a sample webpage. It contains an html page, a css file and a JavaScript file. But whenever this JavaScript is linked to the html page, the css formattings are removed. This happens only after linking the JS file. If the same link is removed, css works fine. could u tell me the problem. i'm using windows xp sp3 and google chrome latest. is it the problem with the browser.
Here are my codes
HTML
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body
<div>
<ul id="nav">
<li id="click" Contact</li>
<li Blog</li>
<li Work</li>
<li About</li>
<li Home</li>
</ul>
</div>
</body>
</html>
JS
var list = document.getElementById("nav")
list.addEventListener("click", function(event) {
switch(event.target.id) {
case "click":
document.title="I changed the document title";
break;
}, false);
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: left;
text-align: center;
display: inline;
}
#nav li a {
line-height: 40px;
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
First of all you are not closing your link tag, it should be:
<link rel="stylesheet" type="text/css" href="Style.css" media="all" />
Now regarding your issue. I think you have a problem with the your JavaScript source. Ensure in development tools that your <script type="text/javascript" src="JavaScript.js"></script> actually returns a script - ensure that srs points to the correct location of the script
Made this an answer, since after testing in JSFiddle and comparing it to a fixed version, I suspect it's the source of your problems:
I'd recommend fixing your <body> and <li> opening tags - currently they are being shown as <body and <li respectively, missing their ending braces (>).
This is what your HTML should look like after you fix the problem:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="JavaScript.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css" media="all">
</head>
<body>
<div>
<ul id="nav">
<li id="click">Contact</li>
<li>Blog</li>
<li>Work</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
I have been playing around with dropping some code from a html bootmetro page into a cshtml page.
When I run the original html page in the cshtml project it works fine; however, when I run the same code within a cshtml page a jquery feature to change the background colour to dark which is triggered by a settings icon returns this error:
Timestamp: 05/06/2013 13:46:56
Error: TypeError: $(...).charms is not a function
Source File: http://*l*o*c*a*l*h*o*s*t*:24349/assets/js/demo.js
Line: 29
I have tried the following answers that I researched with no joy:
• Put the code in #section scripts within the cshtml page:
#section scripts {
<script>
</script>
}
• Never hardcode urls in an ASP.NET MVC application. Always use helpers (or bundles which are recommended):
• Make sure that at the end of your _Layout.cshtml you don't have a
#Scripts.Render("~/bundles/jquery") call because this would include jQuery twice.
• If at the end of your _Layout.cshtml you have a dedicated section for custom scripts like #RenderSection("scripts", required: false), make sure that you have placed your custom script in that section (notice that since this RenderSection is at the end of the DOM you don't need to be wrapping your script in a document.ready event because by the time it executes, the DOM will already be loaded):
• Put the script tags in the Partial View itself where the form is generated from, it now knows what control to bind it to.
Here is the cshtml page:
#{
}
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<title>bigint</title>
<!-- remove or comment this line if you want to use the local fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
<link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
<link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
<link rel="stylesheet" type="text/css" href="content/css/icomoon.css">
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="assets/js/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<script src="assets/js/modernizr-2.6.1.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3182578-6']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- bigInt favicon -->
<link href="../bigInt_fav.ico" rel="shortcut icon" type="image/x-icon" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Jumbotron button styling removed as it affects modal button size */
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
.logo{
position:absolute;
left:10px;
top:10px;
}
</style>
<!-- I had to move a.trigger and active from stylex to here as links to plus & minus png did not work -->
</head>
<body data-accent="blue">
<div id="top-info" class="pull-right">
<a href="#" class="pull-left">
</a>
<a id="settings" class="pull-left" href="#">
<b class="icon-settings"></b>
</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row-fluid">
<div class="metro span12">
<div class="metro-sections">
<div id="section1" class="metro-section tile-span-4">
<h2>bigint Pages</h2>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/metro-tiles.jpg" />
</div>
<div class="column-text">
<div class="text4">Finished looking at the Windows 8 Metro style theme - then return home</div>
</div>
<div class="app-label">bigint Home</div>
</a>
<a class="tile wide imagetext wideimage bg-color-orange" href="./Home_Slide.html">
<img src="content/img/appbar.png" alt=""/>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
<a class="tile app wide bg-color-greenDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-home"></b>
</div>
<div class="app-label">Contact</div>
</a>
<a class="tile app bg-color-purple" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-list"></b>
</div>
<span class="app-label">Services</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-share"></b>
</div>
<span class="app-label">Projects</span>
</a>
<a class="tile app bg-color-yellow" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<span class="app-label">Quality Improvement</span>
</a>
<a class="tile app bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<b class="icon-globe"></b>
</div>
<span class="app-label">Icons</span>
</a>
</div>
<div id="section2" class="metro-section tile-span-4">
<h2>Other bigint Sites </h2>
<a class="tile wide imagetext bg-color-blue" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/My Apps.png" />
</div>
<div class="column-text">
<div class="text">Grid system</div>
<div class="text">Layouts</div>
<div class="text">Responsive design</div>
</div>
<span class="app-label">bigint Blog</span>
</a>
<a class="tile wide imagetext bg-color-blueDark" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Coding app.png" />
</div>
<div class="column-text">
<div class="text">Typography</div>
<div class="text">Tables</div>
<div class="text">Forms</div>
<div class="text">Buttons</div>
</div>
<span class="app-label">bigint Jetstrap</span>
</a>
<a class="tile app bg-color-orange" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img//RegEdit.png" alt="" />
</div>
<span class="app-label">Parners</span>
</a>
<a class="tile app bg-color-red" href="./Home_Slide.html">
<div class="image-wrapper">
<img src="content/img/Devices.png" alt="" />
</div>
<span class="app-label">Portfolio</span>
</a>
<a class="tile wide imagetext wideimage bg-color-white" href="./Home_Slide.html">
<iframe src="http://www.bigint.biz" width="306" height="200"></iframe>
<div class="textover-wrapper bg-color-blue">
<div class="text2">About</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div id="charms" class="win-ui-dark">
<div id="theme-charms-section" class="charms-section">
<div class="charms-header">
<a href="#" class="close-charms win-command">
<span class="win-commandimage win-commandring"></span>
</a>
<h2>Settings</h2>
</div>
<div class="row-fluid">
<div class="span12">
<form class="">
<label for="win-theme-select">Change theme:</label>
<select id="win-theme-select" class="">
<option value="metro-ui-semilight">Semi-Light</option>
<option value="metro-ui-light">Light</option>
<option value="metro-ui-dark">Dark</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='assets/js/jquery-1.8.2.min.js'>\x3C/script>")</script>
<script type="text/javascript" src="assets/js/google-code-prettify/prettify.js"></script>
<script type="text/javascript" src="assets/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootmetro.js"></script>
<script type="text/javascript" src="assets/js/bootmetro-charms.js"></script>
<script type="text/javascript" src="assets/js/demo.js"></script>
<script type="text/javascript" src="assets/js/holder.js"></script>
<script type="text/javascript">
$(".metro").metro();
</script>
</body>
</html>
Here is the siteLayout.cshtml:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Page.Title</title>
<!-- Original <link href="~/Content/Site.css" rel="stylesheet" /> CSS -->
<link href="#Href("~/bigInt_fav.ico")" rel="shortcut icon" type="image/x-icon" />
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Slideout CSS -->
<link rel="stylesheet" href="stylex.css" type="text/css" media="screen" />
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
footer#site-footer {
padding-left: 20px;
}
.pageborder {width:800px;
margin:0 auto 0 auto;
padding:5px;
border:2px solid #eeeeee;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 40px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 100px;
line-height: 1;
}
.jumbotron .lead {
font-size: 24px;
line-height: 1.25;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
.twitter{ background:url('images/Facebook_Cracked-48x48.png'); }
.delicious{ background:url('images/Twitter_Cracked_48x48.png'); }
.spinning_icons a:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
.social{
float:right;
}
.like{
float:right;
}
</style>
<!-- Default Asp.net Script -->
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- Header section with social icons -->
<header id="banner">
<!-- Script for spinning icons -->
<div class="spinning_icons">
<div class="social">
<img src="../images/Facebook_Cracked-48x48.png" alt="Follow Us On Facebook">
<img src="../images/Twitter_Cracked_48x48.png" alt="Follow Us On Twitter">
<img src="../images/Linkedin_Cracked-48x48.png" alt=" photo Linkedin_Cracked.png">
</div></div>
</br></br></br>
<!-- Top navigation bar-->
<div class="container">
<div class="masthead">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>Services</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
</div>
<!-- End of top navigation bar-->
</header>
<!-- Asp.net body tag - no need to comment as in use -->
<div id="body">
#RenderBody()
</div>
#RenderSection("Scripts", required: false)
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/bootstrap-transition.js"></script>
<script src="../assets/js/bootstrap-alert.js"></script>
<script src="../assets/js/bootstrap-modal.js"></script>
<script src="../assets/js/bootstrap-dropdown.js"></script>
<script src="../assets/js/bootstrap-scrollspy.js"></script>
<script src="../assets/js/bootstrap-tab.js"></script>
<script src="../assets/js/bootstrap-tooltip.js"></script>
<script src="../assets/js/bootstrap-popover.js"></script>
<script src="../assets/js/bootstrap-button.js"></script>
<script src="../assets/js/bootstrap-collapse.js"></script>
<script src="../assets/js/bootstrap-carousel.js"></script>
<script src="../assets/js/bootstrap-typeahead.js"></script>
Finally, here is demo.js with the function problem on line 29:
$(function(){
// this is for the appbar-demo page
if ($("#appbar-theme-select").length){
$("#appbar-theme-select").change(function(){
var ui = $(this).val();
if (ui != '')
$("footer.win-commandlayout")
.removeClass("win-ui-light win-ui-dark")
.addClass(ui);
});
}
// style switcher
if ($("#win-theme-select").length){
$("#win-theme-select").change(function(){
var css = $(this).val();
if (css != '')
updateCSS(css);
});
}
$("#settings").click(function (e) {
e.preventDefault();
$('#charms').charms('showSection', 'theme-charms-section'); // LINE 29
});
// listview demo
$('#listview-grid-demo').on('click', '.mediumListIconTextItem', function(e){
e.preventDefault();
$(this).toggleClass('selected');
});
//$('#home-carousel').carousel({interval: 5000});
});
//function to append a new theme stylesheet with the new style changes
function updateCSS(css){
$("head").append('<link rel="stylesheet" type="text/css" href="content/css/' + css +'.css">');
if($("link[href*=metro-ui-]").size() > 1){
$("link[href*=metro-ui-]:first").remove();
}
};
// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
// IT'S ALL JUST JUNK FOR OUR DOCS!
// ++++++++++++++++++++++++++++++++++++++++++
!function ($) {
$(function(){
var $window = $(window)
// Disable certain links in docs
$('section [href^=#]').click(function (e) {
e.preventDefault()
})
// side bar
$('.bs-docs-sidenav').affix({
offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270
}
})
// make code pretty
window.prettyPrint && prettyPrint()
// add-ons
$('.add-on :checkbox').on('click', function () {
var $this = $(this)
**, method = $this.attr('checked') ? 'addClass' : 'removeClass'
$(this).parents('.add-on')[method]('active')
})
// add tipsies to grid for scaffolding
if ($('#gridSystem').length) {
$('#gridSystem').tooltip({
selector: '.show-grid > div'
, title: function () { return $(this).width() + 'px' }
})
}
// tooltip demo
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
$('.tooltip-test').tooltip()
$('.popover-test').popover()
// popover demo
$("a[rel=popover]")
.popover()
.click(function(e) {
e.preventDefault()
})
// button state demo
$('#fat-btn')
.click(function () {
var btn = $(this)
btn.button('loading')
setTimeout(function () {
btn.button('reset')
}, 3000)
})
// carousel demo
$('#myCarousel').carousel()
// javascript build logic
var inputsComponent = $("#components.download input")
, inputsPlugin = $("#plugins.download input")
, inputsVariables = $("#variables.download input")
// toggle all plugin checkboxes
$('#components.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsComponent.attr('checked', !inputsComponent.is(':checked'))
})
$('#plugins.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsPlugin.attr('checked', !inputsPlugin.is(':checked'))
})
$('#variables.download .toggle-all').on('click', function (e) {
e.preventDefault()
inputsVariables.val('')
})
// request built javascript
$('.download-btn').on('click', function () {
var css = $("#components.download input:checked")
.map(function () { return this.value })
.toArray()
, js = $("#plugins.download input:checked")
.map(function () { return this.value })
.toArray()
, vars = {}
, img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png']
$("#variables.download input")
.each(function () {
$(this).val() && (vars[ $(this).prev().text() ] = $(this).val())
})
$.ajax({
type: 'POST'
, url: /\?dev/.test(window.location) ? 'http://*l*o*c*a*l*h*o*s*t*:3000' : 'http://bootstrap.herokuapp.com'
, dataType: 'jsonpi'
, params: {
js: js
, css: css
, vars: vars
, img: img
}
})
})
})
// Modified from the original jsonpi https://github.com/benvinegar/jquery-jsonpi
$.ajaxTransport('jsonpi', function(opts, originalOptions, jqXHR) {
var url = opts.url;
return {
send: function(_, completeCallback) {
var name = 'jQuery_iframe_' + jQuery.now()
, iframe, form
iframe = $('<iframe>')
.attr('name', name)
.appendTo('head')
form = $('<form>')
.attr('method', opts.type) // GET or POST
.attr('action', url)
.attr('target', name)
$.each(opts.params, function(k, v) {
$('<input>')
.attr('type', 'hidden')
.attr('name', k)
.attr('value', typeof v == 'string' ? v : JSON.stringify(v))
.appendTo(form)
})
form.appendTo('body').submit()
}
}
})
}(window.jQuery)**
I have had to strip quite a bit out of the pages to meet the allowed character limit in the code sections; everything should be there for the metroui background colour switch though.
Thanks everyone for looking/ helping.
Where are you running the cshtml page from? What is the context?
Charms() seems like a metro function that isn't available from your current context. You probably have to explicitly add a reference to whatever library/script that holds that function/plugin.