I have a cakePHP admin with theme on it.
When I navigate and then press the browser back button in Chrome, the page breaks and looks like that:
and the first few lines of HTML are as follows:
<header>
<section class="container_12">
<div class="upper clearfix">
There is no HTML defined, no header closing tag, no css defined...
When I hit refresh, the page loads normally:
And the HTML includes the <!doctype html>, the header, all the meta tags and so on.
What is the problem?
<!doctype html>
<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>johns | Admin</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/backend/css/style.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/colors/color4/color.css" /> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/backend/css/grid.css" /> <link rel="stylesheet" type="text/css" href="/backend/css/fixed.css" />
<link rel="stylesheet" type="text/css" href="/backend/css/print.css" media="print" />
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/selectivizr-min.js"></script> <![endif]-->
<script type="text/javascript" src="/backend/js/libs/modernizr-2.0.6.min.js"></script>
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.ui.spinner.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.collapsible.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.cookie.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.tipsy.js"></script> <script type="text/javascript" src="/backend/js/plugins/autoresize.jquery.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.autotab-1.1b.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.uniform.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/ui.multiselect.js"></script> <script type="text/javascript" src="/backend/js/plugins/fullcalendar/fullcalendar.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.jBreadCrumb.1.1.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.dataTables.js"></script>
<!--[if lte IE 8]>
<script type="text/javascript" src="/backend/js/plugins/excanvas.js"></script> </script><![endif]-->
<script type="text/javascript" src="/backend/js/plugins/jquery.flot.js"></script> <script type="text/javascript" src="/backend/js/plugins/jquery.flot.pie.min.js"></script> <script type="text/javascript" src="/backend/js/plugins/jflot.scripts.js"></script>
<script type="text/javascript" src="/backend/js/plugins/validation/languages/jquery.validationEngine-en.js"></script> <script type="text/javascript" src="/backend/js/plugins/validation/jquery.validationEngine.js"></script>
<script type="text/javascript" src="/backend/blueimp/tmpl.min.js"></script> <script type="text/javascript" src="/backend/blueimp/load-image.min.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.iframe-transport.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.fileupload-ui.js"></script> <script type="text/javascript" src="/backend/blueimp/application.js"></script> <script type="text/javascript" src="/backend/blueimp/jquery.xdr-transport.js"></script>
<script type="text/javascript" src="/backend/js/plugins/jquery.wysiwyg.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.table.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.image.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.link.js"></script> <script type="text/javascript" src="/backend/js/plugins/controls/wysiwyg.cssWrap.js"></script>
<script type="text/javascript" src="/backend/js/plugins/hoverIntent.js"></script> <script type="text/javascript" src="/backend/js/plugins/superfish.js"></script> <script type="text/javascript" src="/backend/js/plugins.js"></script> <script type="text/javascript" src="/backend/js/script.js"></script> <script type="text/javascript" src="/backend/js/mylibs/helper.js"></script>
<!--[if (lt IE 9) & (!IEMobile)]>
<script type="text/javascript" src="/backend/js/libs/imgsizer.js"></script> <![endif]-->
<script type="text/javascript" src="js/init.js"></script>
<script>
MBP.scaleFix();
</script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script><script>window.attachEvent("onload",function(){CFInstall.check({mode:"overlay"})})</script>
<![endif]-->
</head>
<body class="clearfix">
<header class="mobile">
<section class="container_12">
<div class="upper clearfix">
<img src="/backend/img/johns_logo.png" title="Dashboard" alt="" /> <div class="clear"> </div>
<div class="r usermenu">
<ul class="sf_menu clearfix">
<li>
<div class="sf-with-ul" style="width:160px;">
kjhgfd
Log out
<nav class="mainnav l">
<ul id="mainnav" class="sf_menu clearfix">
<li><img src="/backend/img/icons/helloadmin/dashboard.png" alt="Sessions" /><span>Sessions</span> <ul>
<li class="last">Add</li>
<li class="last">View</li>
</ul>
</li>
</ul>
</nav>
</div>
</section>
</header>
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
});
</script>
<div id="main" class="container_12 clearfix" role="main">
<div class="box twothirds">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/page_copy.png" title="Schools" alt="" />Sessions</h3><a class="move"></a></div>
<section>
<table class="display" id="tabled">
<thead>
<tr>
<th>Name</th>
<th>Starts</th>
<th>Track</th>
<th class="tview" style="padding-left:10px;">View</th>
<th class="tedit">Edit</th>
<th class="tdelete">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Something</strong> </td>
<td style="padding-left:10px;">8:00 am </td>
<td style="padding-left:10px;">MC </td>
<td style="padding-left:15px;"><img src="/backend/authake/img/icons/information.png" title="View" alt="" /></td>
<td><img src="/backend/authake/img/icons/pencil.png" title="Edit" alt="" /></td>
<td><img src="/backend/authake/img/icons/cross.png" title="Delete" alt="" /></td>
</tr>
</tbody>
</table>
<div class="clear"> </div>
</section>
</div>
<div class="box onethird menu">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/setting_tools.png" title="Actions" alt="" />Actions</h3><a class="move"></a></div>
<ul class="clearfix">
<li class="last"><img src="/backend/img/icons/add.png" title="Add" alt="" />Add</li>
</ul>
</div>
<div class="box onethird">
<div class="boxheading clearfix"><h3><img src="/backend/img/icons/fatcow-hosting-icons/32x32/alarm_bell.png" title="Notifications" alt="" />Notifications</h3><a class="move"></a></div>
<section class="clearfix">
<div class="login_notification_container"></div>
<div class="clear"> </div>
</section>
</div>
</div>
<footer role="contentinfo" class="clearfix">
<section class="container_12">
<div class="lower clearfix">
top
</div>
<div class="smallest">
<div class="l">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
<div class="r">
<span class="footer_copyright">© Copyright 2012 johns</span>
</div>
</div>
</section>
</footer>
</body>
Any AJAX happening here? Sounds like something is "capturing" the back button in relation to an AJAX call and then somehow messing it up. What happens if you go back twice?
Maybe you're having a problem at your own browser. Can you link us to the website so someone can say if it's working or not? (Probably), it's a problem with your browser's settings. Posting a link would quite help anyway.
Related
I have added bootstrap using nuget package . Added link to the bootstrap stylesheet but glyphicons are not loading .Please help.
`
<!DOCTYPE html> <html> <head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="../scripts/jquery-3.3.1.js"></script>
<script src="../scripts/bootstrap.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" /> <meta charset="utf-8" /> </head> <body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view>
</div> </body> </html>
`
Try to load your css in header and js in footer section
And use maxcdn links for bootstrap
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta charset="utf-8" />
</head>
<body ng-app="moviesList">
<h1>Movie List Application</h1>
<span class="glyphicon glyphicon-star"></span>
<div ng-view></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.3/angular-route.js"></script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
it's my today's work... that css :nth-child(odd){background-color:red;} doesn't work in lte ie8
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style/selectivizr.css" type="text/css" />
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript>
<style> p.odd {background-color:red;}</style>
</noscript>
<![endif]-->
</head>
<body>
<div id="container">
<h1> title </h1>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
</div>
</body>
I am learning on how to make a canvas menu with Foundation & I made this example but it does not work at all!
Here's the code:
<!DOCTYPE html>
<!--[if IE 9]>
<html class="lt-ie10" lang="en">
<![endif]-->
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>thenewboston</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="main.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- Toggle button -->
<a class="left-off-canvas-toggle" href="#">Toggle Menu</a>
<!-- Offcanvas menu -->
<aside class="left-off-canvas-menu">
<ul class="no-bullet">
<li>Home</li>
<li>Profile</li>
<li>Logout</li>
</ul>
</aside>
<!-- Main content -->
<div class="row">
<div class="medium-6 columns bg-2">Hey now dude</div>
<div class="medium-6 columns bg-3">This is some sample content</div>
</div>
<!-- Exit overlay -->
<a class="exit-off-canvas"></a>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Everything looks perfect and my css & js folders are correctly placed at the same directory. I also test if foundation works or not with another simple example and it worked fine. I really don't know why it's not working. Please if you know how to solve it ,please let me know.. Thanks!
I am just porting some code over from backbone.marionette into react.js and I notice the browser doesn't seem to be able to pick up the formatting for buttons, though it always used to when working with backbone.marionette.
Relevant HTML/Javascript code:
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Order of the Mouse</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/jpg" href="./ico/favicon.jpg">
<meta name="description" content="Psychological horror/detective/spiritual RPG set the medieval, magical future world of 2079; Web-Based">
<meta name="keywords" content="RPG, Horror, Detective, Order of the Mouse, Rabbit-Cat, Dragon-Bear, Clown-Fox, Deer-Wolf">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="./js/vendor/jquery-1.11.3.min.js"></script>
<script src="./js/vendor/bootstrap.min.js"></script>
<script src="./js/vendor/underscore-min.js"></script>
<script src="./js/vendor/backbone-min.js"></script>
<script src="./js/vendor/backbone.marionette.min.js"></script>
<script src="./js/vendor/react.min.js"></script>
<script src="./js/vendor/react-dom.min.js"></script>
<script src="./js/vendor/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:500,300,700,200' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<div class="main" ng-controller="MainController">
<!-- Main Header -->
<div class="jumbotron" id="top-bar">
<div class="container" id="header"><h1 id="title-text1"><span class="brand">ORDER of the MOUSE: Alpha</span></h1>
<img id="deer-wolf" height="128" width="128" src="./img/alphaDeer-Wolf_small.png" alt="deer-wolf">
<img id="tiger-humming" height="92" width="128" src="./img/alphaTiger-Humming_small.png" alt="tiger-hummingbird">
<h4 id="main-sub">Rabbit-Cat, Dragon-Bear and Clown-Fox experience horror in the Castle of Cages and Revolving Walls.</h4>
</div>
</div>
</div>
<!-- MVC starts here-->
<div id="content"></div>
<script type="text/babel">
var StoryBox = React.createClass({
render: function() {
return (
<div className="storybox">
<p><em>You are Drogon Barre, aka Dragon-Bear.</em></p>
<p>The date is October 3rd. You are sitting quietly at your father's house when a letter arrives through the door with details of a rape and murder. The letter says that the murder was committed by a member of the infamous cult <strong>The Order of the Mouse</strong>. The writer claims the victim was her sister and that she looked on powerless as the assailant took her sister's life. She claims that the perpetrator currently resides in a hotel just outside Plymouth. The letter gives the address but no further details.</p>
<p>Do you choose to investigate?</p><button type="button" class="btn btn-success" id="yesbtn">Yes</button><button type="button" class="btn btn-danger" id="nobtn">No</button>
</div>
);
}
});
ReactDOM.render(
<StoryBox />,
document.getElementById('content')
);
</script>
<!-- Modules -->
<script src="js/app.js"></script>
<script src="js/page-move.js"></script>
<script src="js/audioset.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/controllers/StoryController.js"></script>
<script>
</body>
</html>
Why isn't bootstrap auto-styling the buttons? Bootstrap is definitely being loaded, and the debugger in Firefox throws no errors.
To set class attribute you should use className instead of class,
<button type="button" className="btn btn-success" id="yesbtn">Yes</button>
<button type="button" className="btn btn-danger" id="nobtn">No</button>
Example
I'm using Material Design and Angularjs, but the display is random.
It seems sometime that the material-lite.css is loaded at time, sometimes not.
Index.html :
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<!-- META TAG -->
<link rel="stylesheet" href="styles/material.indigo-deep_purple.min.css"/>
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/autocomplete.css">
<link rel="stylesheet" href="styles/ngDialog.min.css"/>
<link rel="stylesheet" href="styles/ngDialog-theme-default.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="tdcWebappApp">
<div ng-view=""></div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/ngDialog/js/ngDialog.min.js"></script>
<script src="scripts/material.min.js"></script>
<script src="scripts/autocomplete.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
singin.html :
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" >
<main class=" mdl-layout__content mdl-color--grey-100 ">
<form>
<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
<div class="mdl-tabs__tab-bar">
Identité
<a href="#registration" class="mdl-tabs__tab" >Adhésion</a>
Activités
Règlement
</div>
<div class="mdl-tabs__panel is-active" id="identity">
...
</div>
...
</div>
</form>
</main>
</div>
Please, can you explain to me what is the mecanism ?
Thanks
If you add an Element after windows.load you have to upgrade the dom manually because material-design-lite does not know that there are new elements. material-lite adds a global object named componentHandler. Simply do this after you added a new material-lite element.
componentHandler.upgradeDom();
//OR
componentHandler.upgradeElement(element);
material-design-lite code