<head>
<script language="javascript" type="text/javascript">
function openMe()
{
var win = window.open("about:blank");
var str="";
for(var a in win){
str+=a+"<br/>";
}
document.getElementById("data").innerHTML = str;
win.document.write("Karandeep Singh");
}
</script>
</head>
<body>
<div>
<input type="button" value="OK" onclick="openMe()"/>
</div>
<div id="data">
</div>
The above code is open a document and write on it. but it is not working in safari.
you need proper html...
do it like this,
demo
function openMe()
{
var win = window.open();
var str="";
for(var a in win){
str+=a+"<br/>";
}
document.getElementById("data").innerHTML = str;
var windowHTML =
"<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>\n" +
"<html>\n" +
"<head></head>\n" +
"<body>Hello World</body>\n" +
"</html>";
win.document.write(windowHTML);
win.document.close();
}
Related
Why should I link an external script write after an internal script as following example
Can anyone tell me why I should use it like this and why it doesn't display anything before the call to the external script ?
<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
<script>
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i<arr.length; i++) {
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
</script>
<script src="myTutorials.js"></script>
</body>
</html>
I'm trying to open a popup and I'd like to send data using the post method when it opens.
Can anyone help me.
I am getting "Uncaught syntax error. Unexpected token }"
function MapIt(){
var ListIds = selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://www.dev.theabc.com/bingmaps/Map ";
$('<form action=' + urlStr + ' ' + ' target="submission" onsubmit="window.open("", "Map",' + opts + ' "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes");return true;" method="post"><input type="hidden" name="listid" value="' + ListIds + '"></form>').submit();
}
After knowing that you don't realy wanted a post.
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
$('#myHidden').val(ListIds);
window.open('opener.html','Map', opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no');
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
<input type="hidden" id="myHidden">
</body>
</html>
An then in your opener.html
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
var listIds = window.opener.document.getElementById('myHidden').value;
$('#valuesRead').text(listIds);
});
</script>
</head>
<body>
<span id="valuesRead"></span>
</body>
</html>
BEWARE This has in some browsers (Chrome for one) security objections if you run it locally
Actually... your syntax is wrong in the form
It should look like this
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
You have to escape the " inside the string... oh and a coma is missing after the opts...
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
MapIt = function() {
ListIds = '1234';//selected_Listings.join();
if (navigator.appName == "Microsoft Internet Explorer") {
var opts = "screenX=0,screenY=0,width=" + screen.width + ",height=" + screen.height;
} else {
var opts = "outerWidth=" + screen.availWidth + ",outerHeight=" + screen.availHeight + ",screenX=0,screenY=0";
}
var urlStr = "http://wwwd.dev.theabc.com/bingmaps/Map";
$('<form action="'+urlStr+' target="submission" onsubmit="window.open(\'http://www.google.com\',\'Map\',\''+opts+',toolbar=no,location=no,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no\');return true;" method="post"><input type="hidden" value="'+ListIds+'"></form>').submit();
}
});
</script>
</head>
<body>
<button id="run" onclick="MapIt()">run</button>
</body>
</html>
The example below writes tag [code] and [/code] to selected text in textarea but only applied to begin and at the end of the string... I'd like to have [code] and [/code]
applied to every part of the strings considerating newline as new string...
example posted performs:
[code]test
test
test[/code]
I'd like to apply instead:
blablabla...
[code]test[/code]
[code]miao miao[/code]
[code]this is teh 3rd string[/code]
etcetera, some extra string
as you can see I'd like to apply code only selected string considerating a new string with newline... it's possible in pure javascript? No jquery or mootools, please only standalone script...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>[javascript code]</title>
<script language="JavaScript" type="text/javascript">
var myValueBefore = "[code]";
var myValueAfter = "[/code]";
function applyCode(myField, myValueBefore, myValueAfter) {
if (document.selection) {
myField.focus();
document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter;
} else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)+ myValueBefore+ myField.value.substring(startPos, endPos)+ myValueAfter+ myField.value.substring(endPos, myField.value.length);
}
}
</script>
</head>
<body>
<br><br><br>
<table align="center" border="0" cellpadding="15" cellspacing="0" width="70%">
<tr>
<td>
<form action="#" method="post">
<input type="button" value="Apply Code" onclick="javascript:applyCode(test, myValueBefore, myValueAfter);"><br>
<textarea rows="5" cols="130" name="test"></textarea>
</form>
</td>
</tr>
</table>
</body>
</html>
You can develope this codesnippet further:
var myValueBefore = '[code]',
myValueAfter = '[/code]';
function applyCode(myField, myValueBefore, myValueAfter) {
var newLine = new RegExp('\n|\r\n', 'g'), range, selectedText, beforeSelectedText, afterSelectedText;
if (document.selection) {
range = document.selection.createRange();
range.text = myValueBefore + range.text.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter;
return;
} else {
beforeSelectedText = myField.value.substring(0, myField.selectionStart);
afterSelectedText = myField.value.substr(myField.selectionEnd);
selectedText = myField.value.substring(myField.selectionStart, myField.selectionEnd);
myField.value = beforeSelectedText + myValueBefore + selectedText.replace(newLine, myValueAfter + '\n' + myValueBefore) + myValueAfter + afterSelectedText;
}
return;
}
A live demo at jsFddle.
I'm very new to both JQuery and Javascript. I have an feed, I would like to display these feed inside a collapsible div AS a collapsible div. I have the following Javascript file:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
google.setOnLoadCallback(showFeed);
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
di.innerHTML = '<h3>' + entry.title + '</h3>';
di.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(di);
}
} else {
var container = document.getElementById("headlines");
container.innerHTML = '<li>Get your geek news fix at site</li>';
}
});
}
</script>
<body>
<div data-role="collapsible-set" id="headlines"></div>
</body>
This should fetch all my feed names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div.
#AML, that is more a comment than an answer because a don't analyse your entire code, but I will put here for formatting purposes.
In the line:
var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
You don't take a pointer(di) to the new created element, you take a result of the setAttributeNode(...), You need to split the code in two lines like that:
var di = document.createElement("div");
di.setAttribute("data-role", "collapsible");
There are a problem with setAttributeNode actually is setAttribute.
Now is working, see at http://pannonicaquartet.com/test/feeds.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.collapsible{
display : none;
}
h3{
background-color : lightgray;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");
function showFeed() {
var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("headlines");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.onclick = function(evt){
var elP = this.children[1];
if(elP.style.display == 'inline'){
elP.style.display = 'none';
}else{
elP.style.display = 'inline';
}
};
div.innerHTML = '<h3>' + entry.title + '</h3>';
div.innerHTML += '<p class="collapsible">' + entry.contentSnippet + '</p>';
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(showFeed);
</script>
I want to highlight the first 10 characters of text and also color occurrences of the word "paragraph".
<html>
<body>
This is a heading
This is a paragraph.This is another paragraph.
</body>
</html>
Considering this as your HTML content:
<div id="contents">
This is a heading
This is a paragraph.This is another paragraph.
</div>
This jQuery code will do what you desired:
$(document).ready(function() {
var data = $('#contents').text().trim();
var str = "";
for(var i = 0; i < 10; i++) {
str += data[i];
}
data = data.replace( /paragraph/g, '<span style="font-weight: bold;">paragraph</span>' );
data = data.replace( str, '<span style="background-color: yellow;">' + str + '</span>' );
$('#contents').html( data );
});
Try this code in JS.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to highlight.</p>
<p id="demo">This is a heading. This is a paragraph. This is another paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript">
function myFunction()
{
var str= document.getElementById("demo").innerHTML;
var str1 = "";
for(var i = 0; i < 10; i++) {
str1 += str[i];
}
var n=str.replace(str1,'<span style="font-weight: bold;">' + str1 + '</span>');
document.getElementById("demo").innerHTML=n;
}
</script>
</body>
</html>