I'm trying to open a blank window with Javascript, write text to it, and then select the text that I wrote, all automatically.
I have:
var myWindow=window.open('');
myWindow.document.write("hey");
myWindow.select();
which opens the window and writes the text, but does not select it.
This should do it:
var myWindow=window.open('');
myWindow.document.write("<div id='hello'>hey<div>");
var range = myWindow.document.createRange();
range.selectNode(myWindow.document.getElementById('hello'));
myWindow.getSelection().addRange(range);
myWindow.select();
var popup = window.open('message.html',"'" + name + "'",'height=300,width=300,location=no,resizable=yes,scrollbars=yes');
var element = document.createElement('div');
element.setAttribute('id', 'mydiv');
element.appendChild(document.createTextNode('blah blah'));
popup.window.onload = function() {
var win = popup.document.body;
win.appendChild(element);
var el = popup.window.document.getElementById('mydiv').innerHTML;
alert(el); //tested - ouputs 'blah blah'
};
Related
I have a problem with a script for Indesign 2020.
I am not a programmer and don't know javascript (I just created some simple script).
I want to create a simple panel with a button that add a textframe, but doesn't seems to work.
Here's the code
var document = app.activeDocument;
document.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.MILLIMETERS;
document.viewPreferences.verticalMeasurementUnits = MeasurementUnits.MILLIMETERS;
app.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.zeroPoint = [0,0];
var Labelpanel = new Window("dialog");
Labelpanel.text = "Printer";
Labelpanel.orientation = "column";
Labelpanel.alignChildren = ["center","top"];
Labelpanel.spacing = 10;
Labelpanel.margins = 16;
var Button1 = Labelpanel.add("button", undefined, undefined, {name: "Button 1"});
Button1.text = "Magenta 1";
Button1.onClick = function() {
var Label = document.pages[0].textFrames.add();
Label.properties = {
geometricBounds : [ 25,284.5,15,226.5 ],
contents : "1234_Mag1"
}
Label.paragraphs[0].appliedFont = app.fonts.item("Arial");
Label.paragraphs[0].pointSize = "30";
Label.paragraphs[0].justification = Justification.RIGHT_ALIGN;
Labelpanel.close();
}
Labelpanel.show();
The code in the button normally works, but in ScriptUI it does nothing.
Can someone tell me what am I doing wrong?
In your case the script will work (I'm not sure about your goal, though) if you add this line:
#targetengine session
at the start of the code.
And change "dialog" with "palette" here:
var Labelpanel = new Window("palette");
The problem is a dialog window can't change a document until the dialog will be closed.
Not like a palette that has access to documents always.
Your script can be rewritten in order to use a dialog window instead of palette. But it will need to change more than just two lines.
Update
Here is the example how it can be done with a dialog window:
// set the dialog window
var labelDialog = new Window("dialog");
labelDialog.text = "Printer";
labelDialog.orientation = "column";
labelDialog.alignChildren = ["center","top"];
labelDialog.spacing = 10;
labelDialog.margins = 16;
// set a variable that we will convey to the main function
var contents = '';
// a couple buttons
var button1 = labelDialog.add("button", undefined, undefined, {name: "Button 1"});
button1.text = "Magenta 1";
var button2 = labelDialog.add("button", undefined, undefined, {name: "Button 2"});
button2.text = "Magenta 2";
// if click --> change the variable an close the dialog
button1.onClick = function() {contents = '1234_Mag1'; labelDialog.close()};
button2.onClick = function() {contents = '5678_Mag2'; labelDialog.close()};
labelDialog.show(); // show the dialog
// if the variable is not empty --> run the main function
if (contents != '') main(contents);
// the main function, get the variable and does the work
function main(contents) {
app.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.viewPreferences.rulerOrigin = RulerOrigin.SPREAD_ORIGIN;
app.activeDocument.zeroPoint = [0,0];
var document = app.activeDocument;
document.viewPreferences.horizontalMeasurementUnits = MeasurementUnits.MILLIMETERS;
document.viewPreferences.verticalMeasurementUnits = MeasurementUnits.MILLIMETERS;
var label = document.pages[0].textFrames.add();
label.properties = {
geometricBounds: [ 25,284.5,15,226.5 ],
contents: contents // <-- our variable goes here
}
label.paragraphs[0].appliedFont = app.fonts.item("Arial");
label.paragraphs[0].pointSize = "30";
label.paragraphs[0].justification = Justification.RIGHT_ALIGN;
}
I've made two buttons. I suspect it would be your next question: "How to add more buttons?"
The main point: A dialog window should be closed before you try to change a document. A palette should not. This 'subtle difference' changes the algorithm significantly.
$window.open('<span>request processed successfully</span>', '_blank');
I would like the $window service to show the simple text request processed successfully in a new tab.
But instead of it, it treats the html text as location url and tries to open the page http://domain-addr#request processed successfully
How can i pass html text argument to angular's $window service?
You can do something like this in standard JavaScript...
function newWindow() {
// create some html elements
var para = document.createElement('p');
var title = document.createElement('title');
// define some window attributes
var features = 'width=400, height=400, status=1, menubar=1, location=0, left=100, top=100';
var winName = 'New_Window';
// populate the html elements
para.textContent = 'Some example text.';
title.textContent = 'New Window Title';
// define a reference to the new window
// and open it with defined attributes
var winRef = window.open('', winName, features);
// append the html elements to the head
// and body of the new window
winRef.document.head.appendChild(title);
winRef.document.body.appendChild(para);
}
you can use pure javascript,
var w = window.open("www.mydomain.com/test.php", "_blank");
w.document.write('<span>request processed successfully</span>');
you could just create a simple html document with called success.htm or similar with "request processed successfully" and include that in the function.
so $window.open('success.html','_blank', 'size blah blah');
Try this:
HTML:
<button id="newWindow">
Click
</button>
JavaScript:
//call the function right away
(function() {
//grab button by id
var newWindow = document.getElementById("newWindow");
//add an event listener
newWindow.addEventListener("click", function() {
//create a new p element
var p = document.createElement('p');
// change the styles of your paragraph
// optional
p.style.color = "red";
p.style.fontSize = "4em";
//Insert the text you want
p.textContent = "request processed successfully";
//open the window
var windRed = window.open('', '_blank');
//append the p element to the new window's body
windRed.document.body.appendChild(p);
}, false);
})();
I am trying to create a Bootstrap Modal dialog using JavaScript. The reason I am doing it with JavaScript is because I want to be able to render it later using custom elements (i.e. title, error message). I am fairly new to JavaScript so I do not understand why the code is not executed when I call the function errorMessage(). Can anyone please help out by letting me know what the mistake is and how I can correct it? Is there a more efficient way of doing it? Thank you very much.
By the way I did link the modal.js file to the HTML doc and I am aware of bootboxjs, but I don't want to use it for now.
// Creation of the alert message box.
function errorMessage() {
var Modal = document.createElement('div');
Modal.id = 'myModal';
Modal.className = 'modal fade show';
// To set up the attributes.
Modal.setAttribute("data-backdrop", "static");
Modal.setAttribute("data-keyboard", false);
document.body.appendChild(Modal);
var dialog = document.createElement('div');
dialog.className = 'modal-dialog';
Modal.appendChild(dialog);
var content = document.createElement('div');
content.className = 'modal-content';
dialog.appendChild(content);
var header = document.createElement('div');
header.className = 'modal-header';
content.appendChild(header);
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(header);
var body = document.createElement('div');
body.className = 'modal-body';
dialog.appendChild(body);
var message = document.createElement('p');
message.createTextNode("Oh... snap. We can't find any items in your list. Please make sure your entry is structured as following:");
body.appendChild(message);
var representation = document.createElement('div');
representation.className = 'well';
body.appendChild(representation);
var representationTxt = document.createElement('p');
representationTxt.style.fontStyle = 'italic';
representationTxt.createTextNode('> Subheader , tag1 , tag2, tag3');
representation.appendChild(representationTxt);
var footer = document.createElement('div');
footer.className = 'modal-footer';
dialog.appendChild(footer);
var closeBtn = document.createElement('button');
closeBtn.setAttribute("data-dismiss", "modal");
closeBtn.setAttribute("type", "button");
closeBtn.className = 'btn btn-primary btn-inverse';
closeBtn.value = 'I got it. Thanks.';
footer.appendChild(closeBtn);
// Show modal dialog box
$("#myModal").modal('show');
}
It is failing on this line: header.appendChild(header); because it cannot append header to itself. Did you mean this?
var title = document.createElement('h4');
title.className = 'modal-title';
title.createTextNode = 'Data Error';
header.appendChild(title);
A debugging tool is invaluable in javascript development (Firebug add-on for Firefox or the built-in tools in Chrome, for example). You would have seen this error right away :)
I am creating html page which needs to create a list of links dynamically on a click of button. I know how to create this list when number of links to be created is known before like this:
//For 4 tags:
var mydiv = document.getElementById("myDiv");
var aTag = document.createElement('a');
aTag.innerHTML = "link1 text";
aTag.setAttribute('onclick',"func()");
mydiv.appendChild(aTag);
var bTag = document.createElement('b');
bTag.innerHTML = "link2 text";
bTag.setAttribute('onclick',"func()");
mydiv.appendChild(bTag);
var cTag = document.createElement('c');
cTag.innerHTML = "link3 text";
cTag.setAttribute('onclick',"func()");
mydiv.appendChild(cTag);
var dTag = document.createElement('d');
dTag.setAttribute('onclick',"func()");
dTag.innerHTML = "link4 text";
mydiv.appendChild(dTag);
But the problem is that the count will be known at run time and also on function call i need to identify the id of link that invoked function.. Can anybody help?
I don't know weather you receive or not the HTML to be shown in the anchor, but anyway, this should do the work:
function createAnchor(id, somethingElse) {
var anchor = document.createElement('a');
anchor.innerHTML = "link" + id + " text";
anchor.setAttribute("onclick", "func()");
return anchor;
}
Then you call the function like this:
function main(num_anchors) {
var mydiv = document.getElementById("myDiv");
for (var i = 0; i < num_anchors; i += 1) {
mydiv.appendChild(createAnchor(i));
}
}
Of course this code can be improved, but this is just for show how can this be possible.
Yes it is possible to do this at runtime .
JQuery provides very useful dom manipulation . So you can traverse the dom , filter what you need ..
you can find a lot of useful functions here .
http://api.jquery.com/category/traversing/
It would look something like this.
$( document ).ready(function() {
$( "a" ).each(function( index ) {
// enter code here..
}
});
document.ready gets invoked once the DOM has loaded.
I am trying to setup a new "a" component using JS function which is called , using following :
function add_div(data){
mydiv = document.getElementById("new_twt");
var link =document.createElement("a");
var text = "you have new conversations";
link.setAttribute("name",text);
link.onclick=function(){new_tweet(data);};
mydiv.appendChild(link);
}
Changes are not reflecting on the webpage , however if I use some other element such as button or new div it gets created instantly, am I missing something?
This works for me:
function add_div(data){
var mydiv = document.getElementById("new_twt");
var link = document.createElement("a");
var text = "you have new conversations";
link.name = text;
link.href = '#';
link.innerHTML = 'link';
link.onclick=function(){ new_tweet(data); return false; };
mydiv.appendChild(link);
}
I've added link text (innerHTML) so you can actually see the link
I've also added "href" so the link behaves as a link (with this you need to prevent default link action, like "return false" in the event listener, to prevent browser from jumping to the top)
Try this:
var mydiv = document.getElementById("new_twt");
var aTag = document.createElement('a');
aTag.setAttribute('href',"yourlink.htm"); //or #
aTag.innerHTML = "you have new conversations";
aTag.onclick=function(){new_tweet(data);};
mydiv.appendChild(aTag);
Here is working JS Fiddle.