It seems Webkit moves all my head tags to the body, and adds a lot of whitespace before the body. When I look at the source, the tags are in the right place. When I inspect the elements using the Chrome browser, the tags have been moved. I suspect it's Webkit because the same happened in Safari, but not in Opera or Firefox. I use the latest of all browsers.
Here is my source code start, as appears when I press "Show Source":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="(Snip)" />
<title>(Snip)</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style/qtip.css" />
<link rel="stylesheet" type="text/css" href="style/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="style/new.css" />
<script type="text/javascript" src="javascript/ckfinder/ckfinder.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery_easing.js"></script>
<script type="text/javascript" src="javascript/jquery_custom.js"></script>
<script type="text/javascript" src="javascript/typewatch.js"></script>
<script type="text/javascript" src="javascript/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="javascript/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="javascript/slider.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/qtip.js"></script>
<script type="text/javascript" src="javascript/swfobject.js"></script>
</head>
<body>
<div id="wrapper_ext">
<a id="wallpaper_toggle"></a>
...
And here is a screenshot of the DOM analyser:
I suspected Javascript at first, but I disabled all Javascript and the same thing occurs. Yet, this only occurs on some of my pages, so I don't know the actual cause. I'm looking for possible causes of such a problem.
I removed the Byte-Order Mask (BOM) from my file, and it worked.
Should I report this as a bug to webkit?
Related
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="../scripts/angular.min.js"></script>
<script type="text/javascript" src="../scripts/jquery-3.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="../css/home.css">
<title>Hello</title>
</head>
<body>
<div id="d1">
asfsdg
</div>
</body>
</html>
I am trying to add styles to html elements in jsp page but when i add the style and run it on tomacat 9.0 nothing happens there and only plain text appears.
And when I moved to page source and click the links to css it shows me an error
HTTP Status 404 – Not Found
Type Status Report
Message /TutorNextDoor/css/home.css
Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
Apache Tomcat/9.0.0.M18
You can move your css and scripts folder inside Webcontent and give the path in the html/jsp file in the following manner :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Scripts -->
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/angular.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-3.2.0.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/home.css">
<title>Hello</title>
</head>
<body>
<div id="d1">
asfsdg
</div>
</body>
</html>
I'm curious problem linking my js files in my php webpage. First at all, I put it at the end of the file (just before closing body tag) and in local mode everything works ok. But when I upload my web to my server js files seems not linking, I have to put it in header to work it.
So that way could be important to say all my functions are in a separated file called "scripts".
It's not important trouble, but I'm concerned. Anybody could explain me?
Thanks in advance
Edited
Thank you #Pointy and #Jochen for your quickly answer. I tried using chrome inspector. No errors show, only not load files. This is my web structure (I don't copy complete code cause would be so extense)
<!Doctype html>
<html lang="en">
<head>
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--CSS starter-->
<link href="" rel="stylesheet" media="screen">
<!--CSS font-awesome-->
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<!--[if IE 7]>
<link href="font-awesome/css/font-awesome-ie7.min.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- javascript (here links working) -->
</head>
<body>
<!--sections-->
<!--/sections-->
<!-- javascript (here not working) -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script src="js/messages_es.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</body>
</html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I guess this path is wrong, try:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Firebug is giving me strange behavior and i don't know if there is something with my code or if it's a bug in firebug.
The problem i'm having is that firebug does not stop on a simple breakpoint. However, if i add a watch expression it does show me the value of that, so i know that my code is working and something other must be at play here.
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<title>DOM API</title>
<meta name="keywords" content="t.a.v. klant: plaats keywords gescheiden door een comma">
<meta name="description" content="t.a.v. klant: Wordt gebruikt door google als omschrijving in de zoekresultaten">
<meta name="author" content="klantnaam">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/nav-popup.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:700,400' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="http://www.site.nl/images/favicon.ico">
<link rel="apple-touch-icon" href="images/ios-icon.png"><!--ios web app icon 114x114-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<meta name="robots" content="all">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--pluginSyntax-->
<script type="text/javascript" src="js/pluginSyntax/scripts/shCore.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/pluginSyntax/scripts/shBrushJScript.js"></script>
<link type="text/css" rel="stylesheet" href="js/pluginSyntax/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!--pluginSyntax-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!--level1-->
<div class="level1">
<!--level1-->
<h1>DOM</h1>
<p>The Document Object Model (DOM) is a programming interface for HTML. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods.</p>
<p>In the DOM every part of a web page is represented as a <code>node</code>. There are 3 nodes:</p>
<ul id="jow">
<li><code>Element</code> nodes (h1 tag)</li>
<li><code>Attribute</code> nodes (class="heading")</li>
<li><code>Text</code> nodes (Title of this tutorial)</li>
</ul>
<!--level1-->
</div>
<!--level1-->
<script>
var ieps = document.getElementById("jow");
for (var member in ieps){
if(ieps.hasOwnProperty(member)){
alert(ieps[member]);
}
}
</script>
I have set a breakpoint on the declaration of the var ieps and offcourse firebug does not stop there and just reloads the page.
Any ideas?
Thx...
I have WHMCS script but my main problem is Java script not working, I have tried many solutions but no luck. I'm sure about files path and their work I have tested it in another script, but no luck.
header.tpl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} -
{$kbarticle.title}{/if}</title>
<link rel="stylesheet" type="text/css" href="templates/{$template}/kk.css" media="screen" />
<!-- slider0000000000 -->
<!-- Le styles -->
<link href="templates/{$template}/1st/assets/css/bootstrap-responsive.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.animations.css" rel="stylesheet" />
<link href="templates/{$template}/1st/css/lush.min.css" rel="stylesheet" />
<link href="templates/{$template}/1st/flexslider/flexslider.css" rel="stylesheet" />
<link href="templates/{$template}/1st/assets/css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- //slider00000000 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/js/jquery.lush.min.js"></script>
<script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script>
<!-- popup -->
<!-- /popup -->
<!-- slideshow -->
<script language="JavaScript" type="text/javascript"
src="templates/{$template}/scripts/jquery.cycle.all.2.74.js"></script>
<!-- slideshow/// -->
<!-- fade -->
<script type="text/javascript" src="templates/{$template}/scripts/55.js"></script>
<script type="text/javascript" src="templates/{$template}/scripts/66.js"></script>
<!-- /fade -->
</head>
<body>
Add {literal} before start of your js and {/literal} after js finish.
ex:
{literal}
$(document).ready(function(){
alert("here");
});
{/literal}
WHMCS use smarty templates you'll need to add {literal} before start of javascript and {/literal} at the end of javascript.
Which version are you using? based on the date of the submission I will say the latest or close to it, but I would have added to much code to the javascript link, I currently have mine setup as under the example as - <script src="templates/{$template}/js/jquery.easing.1.3.js"></script> which then registers and pulls the right location, so if your link is <script type="text/javascript" src="templates/{$template}/1st/flexslider/jquery.flexslider-min.js"></script> and the 1st is the name of the template then WHMCS you need to remove that and test it again, you don't need the folder name after linking to it as it register the folder name and will display it properly. Hopefully this helps a little bit better for you.
Refer to WHMCS documentation on bracelet
Everything within the {literal} {/literal} tags will not be parsed (such as the template variables). However, you would be able to accomplish adding the template variables by using multiple literal statements.
I'm getting the following error message in Chrome and firefox while trying to implement gorbachev's syntax highlighter.
The page at local host says:
SyntaxHighlighter
Can"t find brush for: php
It's all the more frustrating because i just got it working on a test page in the same folder, it still works. There is very little different between the two pages. Here's my code:
<??>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--JQUERY SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<!--PROCESSING SCRIPTS
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
-->
<!--syntax highlighter-->
<script type="text/javascript" src="shBrushPhp.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
SyntaxHighlighter.all();
});
</script>
</head>
<title>code</title>
<body>
<div id="content">
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<!--<script type="application/processing">
</script>
<canvas data-processing-sources="processing/lines.pde">
</canvas> -->
</div>
</body>
</html>
<??>
For me, the solution was making the brush style non-capital. So for me, I was adding a new brush to syntaxhighlighter (haskell), and I changed the markup:
<pre class="brush:Haskell">...</pre>
To
<pre class="brush:haskell">...</pre>
Alternatively, you could change the brush identifier:
Brush.aliases = ['Haskell'];
Hope this helps!
It cant find the js file for the php highlighter. Make sure you uploaded the right brush and have the correct path for the brush. I had a lot of trouble getting it work in an MVC 3 application. I ended up using the S3 hosted files that Alex has.
Trying calling the remoted files and see if it works. Also take the call SyntaxHighlighter.all() out of your jquery call. Mine is in its own set of script tags. See if that works.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
i just moved all the content from the page into the test page, renamed it and it works fine now. just one of those things i guess.