for some very hard reason i get inserted additional ... before the beggining of my page, before my real <head> starts. This comes from another app i cant remove it.
So the code looks like this:
<html><head><title>Object moved</title></head><body>
<h2>Object moved to here.</h2>
</body></html>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
... normal content from here on...
So im asking how on earth can i remove the additional head on the begginig of my page. i can edit css, add javascript, jquery, php... but i just dont know the solution to this problem.
Is this possible at all?
Take the body tags out of the head.
Should be
<head>
stuff
<title>Object moved</title>
</head>
<body>
stuff
<h2>Object moved to here.</h2>
</body>
Remove the first <title> and <h2> tags by putting the code below in your <head>. This will make the extra <html> tag at the beginning have no effect on your page.
<script type="text/javascript">
var e = document.getElementsByTagName( 'title' );
e[0].parentNode.removeChild( e[0] );
e = document.getElementsByTagName( 'h2' );
e[0].parentNode.removeChild( e[0] );
</script>
Works in FireFox, didn't test in other browsers.
Related
I would like to have many HTML pages of one type, the only difference being the page title and some data stored in different .json files. Everything else should be stored in two centralized files, a .js and an .html file. In pseudocode the pages should look like this:
<html>
<head>
include global_script.js
include specific_data_n.json
</head>
<body>
include global_body.html
</body>
</html>
where the n-th page includes the data file specific_data_n.json but everything else is always the same.
I know how to include .js and .json files in the header. However, I don't really know how to include the .html file in the body. I searched on the net and, in particular, found this question: Server side includes alternative I tried different ways of including the body proposed in the answers but whatever I tried, I got a JS error.
Here is a minimal example of the problem. First, the working file where the body is in the main file and not in an extra file:
function init(){document.getElementById('demo').innerHTML = '2+2=4';}
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><head>
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>
<body onload="init();">
<div id="demo">
2+2=5
</div>
</body>
</html>
Now I tried to put the body in an external file following one of the answers of the question linked above.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="minimal.js"></script>
</head>
<body onload="init();">
<!-- Content, inclusion from https://stackoverflow.com/questions/35249827/can-you-link-to-an-html-file -->
<div w3-include-html="body_minimal.html"></div>
<script>
(function () {
myHTMLInclude();
function myHTMLInclude() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
myHTMLInclude();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
})();
</script>
</body>
</html>
and the body_minimal.html which is included:
<div id="demo">
2+2=5
</div>
I also tried different further approaches for embedding the body_minimal.html file (which I can present if needed) but none of them works, so I assume that it is some fundamental problem. I always get the error in the JS debugger:
TypeError: document.getElementById(...) is null
I need to add that I have no experience neither in HTML nor in CSS and am mostly copy&pasting stuff from different tutorials, forums and Q&A sites so I do not really understand what this code for the embedding of the HTML file is doing. :)
Thanks for any hint on what the problem might be and a happy new year!
This really belongs as a comment but unfortunately my account is new so I'm not allowed...An answer will have to do.
If your webhost runs PHP I'd suggest looking into PHP includes, they're much simpler.
Basically, you would save your central html file as a .php file instead and include the HTML file you want using
<?php
include 'global_body.html';
?>
Found a solution which looks stupid, but as you know, if something looks stupid but works, it isn't stupid. :) I just made another .js file which writes the body contents via document.write():
<!DOCTYPE html>
<html>
<head>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="body.js"></script>
</body>
</html>
And the included .js files:
//body.js
document.write('<div id="demo"->2+2=5</div>');
and
//script.js
document.getElementById('demo').innerHTML = '2+2=4';
The only problem is that in a real world scenario the contents of the body are many lines and JS needs a backslash on each line break. Also, the syntax highlighting only shows all the HTML code in one colour as from JS's point of view it is just a string. Therefore I'm still interested in better/cleaner solutions!
( Answered: dont use <script type="text/javascript" src="jquery-1.8.0.min.js"></script> in html)
I am learning Jquery from this tutorial :
http://www.littlewebhut.com/javascript/getting_started/
I created One Html , 1 js file . put them on same physical folder ,put "jquery-1.8.0.min.js" in same folder , put a link of js file in html page
But it is not working .
my HTML:
<!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" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>Heading one</h1>
<p>This is just some text for heading 1</p>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="my_code.js"></script>
</body>
</html>
My Jquery Page (my_code.js) :
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
there is some minor mistake that is happening ,
I tried to search , but could not found relevant link .PLease suggest if I am missing something
Your code is working fine.There must be some problem with your jquery file path. Try including CDN hosted jquery library as follows or check your path:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
I have tried this on js fiddle and it's working fine I guess this is what you want ,right when on clicking the h1 tag you need that p to hide if I am not wrong ,
This is the js fiddle http://jsfiddle.net/Saranshshrma/7rzLW/1/
If this script is, small you can always put in, this
<script></script>
Tags before body content but remember put your Jquery before anything else any script or code you want to execute and you can post the chrome inspect element errors while executing this code
What error are you getting ? See the console/dev tools (f12) and notice you have to click the header text to trigger the effect:
http://jsfiddle.net/m5LL4/
$(document).ready(function(){
$("p").hide();
$("h1").click(function(){
$(this).next().slideToggle(300);
});
});
I did paste your code, just take a part of the html with the same jquery version and it works.
Is javascript enabled in your browser?
If you are using chrome Go Ctrl+H click on Setting in left side->show advanced Setting->Privacy->Content Settings->Allow all sites to run Javascript.
If already checked check for your jquery path file name.
how would I do if I wanted to have an div on my site that contained a text and I wanted to replace that text every 5sec with a new text string that It got from an list from an external text file.
So something like this but in the "textlist" div it puts the first sting from the text file then 5 sec after it replaces that with the text from the second row, and so on.
CODE:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function run() {
document.getElementById("textlist").innerHTML = "The sting from the text file";
}
window.setInterval(run,5000);
</script>
</head>
<body>
<div id="textlist">the text</div>
</body>
</html>
and the text file would be like this for example:
/mytextfile.txt
(content in the file)
01: The tips 1
02: The tips 2
03: The tips 3
04: The tips 4
05: The tips 5
06: The tips 6
Thanks in advance hopes it make sense.
I'd do that a little differently:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
</head>
<body>
<div id="textlist">the text</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var ajax = $.ajax({
url: 'the url to the text list',
type: 'GET'
});
ajax.done(function (data) {
var list = $.trim(data).split(/\n+/), index = 0;
function run() {
if (index >= list.length) {
index = 0;
}
$('#textlist').html(list[index]);
index ++;
}
window.setInterval(run, 5000);
});
});
</script>
</body>
</html>
So in this example, we first move all of the scripts to the bottom of the body. That way we can be sure that our html has been rendered before the scripts run.
Secondly, we put our custom JavaScript into a jQuery docready. This way we are being extra safe that the page is fully interactive before our scripts try to run.
The next thing we do is use ajax to fetch the text file. Due to same-origin policy, this will only work if that file resides on the same server that is serving the web page.
After that, we attach a handler to the ajax promise. In other words, when the ajax request is "done", it will run a function and pass in the data that was retrieved. We turn the data into a list by trimming white space off the string and splitting it wherever there are new lines. We also set up a variable to track our place in the list.
The run function will check to see what place we are at in the list. If we've gone farther than the amount of items in the list, we'll reset it to 0. Then we'll replace the html of our element with the current list item. Finally we move up one place in the list.
Lastly we call setInterval so that run will run once every 5 seconds.
Caveat: I haven't tested this but conceptually it will work. There may be a typo or perhaps some specific ajax requirements I'm not aware of having to do with your server but the process I've described should work.
you can use ajax for that.with jquery (that is already attached to your document) you can easily do that as follow:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test_text</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var lines="";
$.get( "your_text_file_path", function( data ) {
lines=data.split("\n");
});
var i=0;
window.setInterval(function (){
if(i<=lines.length){
$("#textlist").html(lines[i]);
i++;
}else{
i=0;
}
},5000);
</script>
</head>
<body>
<div id="textlist">the text</div>
</body>
</html>
here you are a demo does that
Within my scenario, I have a button within an iframe section of my page that performs some database processing.
What I need is a means of performing a page refresh of the main page, when this button within the iframe is pressed.
I am seeking some JavaScript code that I can trigger within the iframe, that will reload the main window holding the iframe.
window.top.location.reload();
If the parent's and child iframe domains will be different you will get cross-window security error, in that case you can try to use following:
window.parent.location = document.referrer;
window.parent.location.reload();
We can easily achieve the facing goal by set target="_parent" to the Links which inside the iframe.
Just like the following demo shows:
<!--ParentPage.htm-->
<!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>
<title></title>
</head>
<body>
Parent Page
<iframe src="FramePage.htm"></iframe>
</body>
</html>
<!--FramePage.htm-->
<!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>
<title></title>
</head>
<body>
hello
</body>
</html>
define allFrame variable on your top frame:
var allFrame=1
and on all your frames check this function
if(top.allFrame === undefined)
{
window.parent.location = "your website top frame";
}
window.opener.top.location.reload();
If you code Page with aspx C# you can view code:
ClientScript.RegisterStartupScript(this.GetType(), "LoadParent", "<script language=javascript>window.parent.location.reload();</script>");
I have one html page with links of chart whenever i refresh HTML paget the chart refreshs.
I heard from my friend that with the help of AJAX that chart will refresh automatically with given time interval without refreshing that html page.
please help me with the html code for the same.
Regards,
Raj
You could use the setInterval() method in javascript, along with a simple framework like jQuery for the AJAX.
It would look something like this:
<!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" xml:lang="en-us" lang="en-us">
<head>
<title>My AJAX Chart</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setInterval("refreshChart", 5000); // Refresh every 5 seconds
});
function refreshChart() {
$.get("myChart.php", function(data) {
$("div.chartHolder").html(data);
});
}
</script>
</head>
<body>
<h1>My Chart</h1>
<div class="chartHolder"></div>
</body>
</html>
Since it sounds like you are new to JavaScript, I would recommend you take a look at the jQuery libraries, it can do what you want with a minimal of complication:
Something like this would work:
function updateChart() {
$('#someTable tbody').load('updateChart.html');
}
$(function() {
setInterval(updateChart, 20000);
});
If you combine something like e.g. this; http://ra-ajax.org/Docs.aspx?class=Ra.Extensions.Widgets.Timer with this; http://ra-ajax.org/samples/Chart-Sample.aspx you'll easy get there.
Above samples are for .Net, but there exists similar constructs (and frameworks) also for other other platforms...