I'm working on a chrome extension to automate some work of mine. Currently it enters a value into a input, then clicks the button.
I want to get a new div element when it gets to the next page (once loaded). But it always looking a div before click event.
I hope that you understanded my problem.
Here is a code:
bSzukaj.onclick = function()
{
var url = "/game.php?screen=place";
var coords = [];
var loaded = false;
var n = inputZakres.value;
var x = parseInt(inputPobierz.value.split("|")[0] - parseInt(n/2+1));
var y = parseInt(inputPobierz.value.split("|")[1] - parseInt(n/2+1));
var newWindow = window.open(url);
var currentX = x;
var currentY = y;
var coord = currentX+"|"+currentY;
var sender = newWindow.addEventListener('load', function(){
var spearInput = newWindow.document.getElementById("unit_input_spear");
spearInput.value = 10;
var coordClass = newWindow.document.getElementsByClassName("target-input-field target-input-autocomplete")[0];
coordClass.value = coord;
var send = newWindow.document.getElementById("target_attack").click();
// NOW SCRIPT RELOAD PAGE AND CREATING SOME COMUNICATS
// AND I WANT TO GET THIS COMUNICATS TO VARIABLE
// BUT EVEN THIS ALERT BELOW DOESN'T WORK :/
newWindow.addEventListener('load', function() {
alert("now");
});
}, false);
//}
//}
}
}
Related
have problem with script.
need open a window with some information, which will automatically disappear after 3 seconds.
my code:
#targetengine "session"
var windowX = new Window("dialog"); // v2 palette
windowX.orientation = "row";
windowX.preferredSize.width = 200;
windowX.preferredSize.height = 200;
windowX.alignChildren = ["center","center"];
windowX.spacing = 15;
windowX.margins = 16;
var image1_imgString = "%C2%89PNG%0D%0A%1A..."
var image1 = windowX.add("image", undefined, File.decode(image1_imgString), {name: "image1"});
windowX.show();
dialog show, palette not
if I add ...
var timerBreak = new Date().getTime() + 3000;
var now = new Date().getTime();
while(now<timerBreak){
now = new Date().getTime()
}
windowX.close();
nothing happend (happend: first: loop, next: window show and close at the same time) - why?
if i add ...
windowX.addEventListener('show',function(){
...
}
same ...
but if i add alert("dhgkjsd") ... for check ... dialog (or palette) show and wait for click on messagaebox
how to make a timer that will close the displayed window 3 seconds after opening?
Unfortunately, I do not have a copy of InDesign to test this, but the code below works in AfterEffects.
#targetengine "session"
// To be called later
function closeMe() {
windowX.close();
}
// Timer as a variable
var delay = 3000;
// a pallette, and not a modal, like in your
// original code, because the modal is UI blocking
var windowX = new Window("palette");
windowX.orientation = "row";
windowX.preferredSize.width = 200;
windowX.preferredSize.height = 200;
windowX.alignChildren = ["center","center"];
windowX.spacing = 15;
windowX.margins = 16;
windowX.show();
// This is the key part
app.setTimeout(closeMe,delay);
app.setTimeout() has been suggested as a way of delaying code execution, which is what you need in this case (delaying of windowX.close()). Please note the author's comments (check the link) - app.setTimeout() has been made available from AE version CC 2015.
It can be done this way:
var windowX = new Window("palette");
windowX.orientation = "row";
windowX.preferredSize.width = 200;
windowX.preferredSize.height = 200;
windowX.alignChildren = ["center","center"];
windowX.spacing = 15;
windowX.margins = 16;
// var image1_imgString = "%C2%89PNG%0D%0A%1A..."
// var image1 = windowX.add("image", undefined, File.decode(image1_imgString), {name: "image1"});
windowX.show();
// here is the magic
windowX.update();
$.sleep(3000); // 3 seconds
windowX.hide();
windowX = null;
Based on the example from here: https://community.adobe.com/t5/illustrator-discussions/auto-close-alert-message/td-p/9398258
#Yuri ... windowX don't show before $.sleep (use instead var timerBreak...) - but only my Mac. Another Mac - your code works.
I write something like this:
//create windowX
var oneIdleTask = app.idleTasks.add({
name: "one_idle_task",
sleep: 1
}); // sleep not working here - write 3000 and nothing change
var onIdleEventListener = oneIdleTask.addEventListener(IdleEvent.ON_IDLE,
function() {
var oneIdleTaskName = "one_idle_task";
var oneIdleTask = app.idleTasks.itemByName(oneIdleTaskName);
if (oneIdleTask != null) {
oneIdleTask.remove();
$.sleep(3000) //<- write sleep here ... but deley is ok (for me) without this
windowX.hide();
}
}
);
windowX.show();
I probably should not be attempting this, but I have gotten so far and I don't want to give up now. I want to create my own Lightbox type script. I can create an absolute div with the class ligthbox and it covers the page. Then I create a img that is fixed and it animates when loading. The I also have nav arrows to move through the photos. All works accept when I click on the arrows it creates new close X and arrows. I don't understand because the is done through the animation function which is not attached to the arrow function.
I have added event.stopPropagation(); to the arrow function and the animate function but that did not work.
The function that initiates everything.
jQuery(".marks-lightbox img").click( function() {
var Img = jQuery(this),
cImg = Img.attr("src"),
allImg = jQuery(".marks-lightbox img");
//finding the current img from the available images
for(i=0; i < allImg.length; i++) {
if( jQuery(allImg[i]).attr("src") == Img.attr("src") ) {
lbImgCurrent = i;
}
}
makeLightBox()
});
function makeLightBox() {
var bodyHeight = jQuery("body").height(),
lightbox = jQuery("<div>").addClass("lightbox").css({"width":"100vw","height":bodyHeight}),
scrollTop = 72,
lbContainer = jQuery("<div>").addClass("lbContainer"),
lbImg = jQuery(".marks-lightbox img"),
imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src"),
lbClose = jQuery("<span>").addClass("lb-close").text("X");
jQuery("body").prepend(lightbox);
lbContainer.appendTo(".lightbox");
jQuery('<img src="'+ imgSRC +'">').load(function() {
jQuery(this).appendTo(".lbContainer").css("display","none").addClass("lb-image");
var w = jQuery(".lb-image").width(),
h = jQuery(".lb-image").height(),
lbw = lightbox.width(),
margin = (lbw - w) /2;
jQuery(this).appendTo(".lightbox").css({"position":"fixed","display":"block","width":0,"height": 0}).animate({"top":scrollTop,"width":w,"height":h,"margin-left":margin, "margin-right":margin},1000,function(event){
var lbimg = jQuery(this),
lbH = lbimg.height() + 63,
lbLeft = lbimg.offset().left,
lbW = lbimg.width(),
larrow = jQuery("<div><</div>").addClass("left-arrow-lb lb-arrow"),
rarrow = jQuery("<div>></div>").addClass("right-arrow-lb lb-arrow");
larrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+18});
rarrow.appendTo("body").css({"position":"fixed","top":lbH/2,"left":lbLeft+lbW-90});;
lbClose.appendTo(".lightbox").css({"position":"fixed","top": lbH,"left": lbLeft+lbW - 18});
});
});
}
Here is the click function
jQuery("body").on("click",".left-arrow-lb", function() {
console.log(jQuery(this));
var lbImgLength = jQuery(".marks-lightbox img").length,
lbImg = jQuery(".marks-lightbox img");
lbImgCurrent = (lbImgCurrent < 1 ) ? lbImgLength : lbImgCurrent -1;
var imgSRC = jQuery(lbImg[lbImgCurrent]).attr("src");
console.log(imgSRC);
jQuery(".lb-image").attr("src",imgSRC);
});
Every click creates a load new img scr and animates the photo (unexpectedly) and creates new arrows and close x.
I found it was the on("load"... working every time an image was being loaded. So I created a var reload and set it to true. The in the on(load... function I said if not true return false. In the arrow functions set the reload to false. This prevented the on(load... working reloading.
I am working with the check boxes in three js.I have created a user control panel in which I have added check boxes.What I want to do is when I click on any check box when the other check box is already checked the previous one should be unchecked.So can anyone please tell me how to that.
This is the code that I have written for check boxes.
function addDatGui(){
var gui = new dat.GUI();
parameters = {
a:false,
b:false,
c:false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters,'a').name('Possitive Charge');
var neg1 = first.add(parameters,'b').name('Negative Charge');
var neu1 = first.add(parameters,'c').name('Neutral');
var second = gui.addFolder("Glass");
var pos2 = second.add(parameters,'a').name('Possitive Charge');
var neg2 = second.add(parameters,'b').name('Negative Charge');
var neu2 = second.add(parameters,'c').name('Neutral');
pos1.onChange(PCharge);
neg1.onChange(Ncharge);
neu1.onChange(NeCharge);
var show = gui.add(parameters,'a').name('Show Charge');
}
You can set .listen() to each controller and .onChange() with a function which will set all parameters to false and then the parameter you need to true:
var gui = new dat.GUI();
parameters = {
a: false,
b: false,
c: false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters, 'a').name('Possitive Charge').listen().onChange(function(){setChecked("a")});
var neg1 = first.add(parameters, 'b').name('Negative Charge').listen().onChange(function(){setChecked("b")});
var neu1 = first.add(parameters, 'c').name('Neutral').listen().onChange(function(){setChecked("c")});
function setChecked( prop ){
for (let param in parameters){
parameters[param] = false;
}
parameters[prop] = true;
}
jsfiddle example
PS I just didn't get the moment, when you want to use the same object of parameters in two different folders, but it's up to you anyway.
I am loading in a js file to build a form (I know this isn't standard; this is just for my learning). The contents of that file look like this:
window.captor = (function () {
function Captor () {
}
var captor = {
create: function () {
return new Captor();
}
};
Captor.prototype.build = function (json) {
//CREATE BACKDROP WITH CLOSE FUNCTION
var interstitial = this.backdrop();
//CREATE DIV CONTAINER
var container = this.container();
//CREATE TITLE
var title = this.setTitle();
//CREATE CALL TO ACTION
var cta = this.callToAction();
//CREATE FORM WITH INPUTS
var form = this.capture(json);
interstitial.appendChild(container);
container.appendChild(title);
container.appendChild(cta);
container.appendChild(form);
document.body.parentNode.appendChild(interstitial);
};
Captor.prototype.backdrop = function(){
var b = document.createElement("div");
b.setAttribute('style',"position:fixed;width:100%;height:100%;background: rgba(0,0,0,.6);z-index: 100;");
return b;
};
Captor.prototype.container = function(){
var c = document.createElement("div");
c.setAttribute('style',"position:relative;background:#dedede;min-height:100px;width: 480px;margin: auto;top: 45%;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;");
return c;
};
Captor.prototype.setTitle = function(){
var t = document.createElement("h1");
var inside = document.createTextNode("Join Our Newsletter");
t.appendChild(inside);
return t;
};
Captor.prototype.callToAction = function(){
var cta = document.createElement("p");
var inside = document.createTextNode("Would you like to find out more about stuff? Join our newsletter!");
cta.appendChild(inside);
return cta;
};
Captor.prototype.capture = function(json){
var f = document.createElement("form");
var hidden = document.createElement("input");
hidden.setAttribute('type',"hidden");
f.appendChild(hidden);
return f;
};
return captor;
}());
Then after including that file, I call:
var n = captor.create();
n.build(window.builder.getj);
Where window.builder.getj returns a json object (I haven't done anything with that obj, just yet).
So far, the form doesn't build. I'm not sure if anything is getting called. When I look at the console, nothing is output. If I call var c = captor.create(); it returns undefined. If I run c = captor.create(); it returns Captor {build: function, backdrop: function, container: function, setTitle: function, callToAction: function…}.
I feel like I must be missing something, but for the life of me I can't see what it is. How do I get this form to render in the correct way?
I'm trying to make a slideshow of pictures and send them to an another window. But after selecting images and pressing the button for showing slideshows, nothing happens. I'm using firebug to detect bugs and when I'm going wrong. But I'm not getting any error from firebug so I gotta ask you guys. This is my code.
var infoBox;
var formTag;
var imgUrlList;
var imgTextList;
var windVar;
var urlList;
var textList;
function init() {
var i;
infoBox = document.getElementsByClassName("outerBox");
for (i=0; i<infoBox.length; i++) {
infoBox[i].onmouseover = showInfoBox;
infoBox[i].onmouseout = hideInfoBox;
}
formTag = document.getElementsByTagName("input");
for (i=0; i<formTag.length; i++) {
formTag[i].onclick = checkedBox;
}
windVar = null;
imgTextList = [];
imgUrlList = [];
}
window.onload = init;
function showInfoBox() {
var showInfo;
showInfo = this.getElementsByClassName("innerBox")[0];
showInfo.style.visibility = "visible";
}
function hideInfoBox() {
var hideInfo;
hideInfo = this.getElementsByClassName("innerBox")[0];
hideInfo.style.visibility = "hidden";
}
function checkedBox() {
var ImgNode, ImgTag;
for (i=0; i<formTag.length; i++) {
imgNode = this.parentNode.parentNode.firstChild;
imgTag = imgNode.nextSibling
if (this.checked) {
imgTag.className = "markedImg";
}
else {
imgTag.className = "unmarkedImg";
}
}
}
function slideShowBtn() {
var url, i, filename;
imgUrlList.length = 0;
imgTextList.length = 0;
for (i=0; i<formTag.length; i++) {
if (formTag.checked) {
url = infoBox.firstChild.getElementsByTagName("img")[i].src;
filename = infoBox.firstChild.getElementsByTagName("span")[i].src;
imgUrlList.push(url);
imgTextList.push(filename);
}
else break;
}
newWindow(700,600,"slideshow.htm");
}
function newWindow(width,height,fileName) {
var windProporties;
windProporties = "top=100, left=100,toolbar=no,status=no,menubar=no,scrollbars=no,resizable=no,width=" + width + ",height=" + height;
if (windVar != null) if (windVar.closed == false) windVar.close();
windVar = window.open(fileName,"bildspel",windProporties);
}
The formTag variabel is from a checkbox-input-tag. And it's from that I decide which pictures are selected and will be moved to the new page. ImgTextList and imgUrlList are global variables that'll also be in the next window. infoBox is a reference to a div class which is called OuterBox and inside it is an another div-class named innerBox, it's in the innerBox classdiv which the img and span-tags are. The code for the slideshow is already written and I'm just writing code for sending the variables to it.
Edit: I should have been a little more informative. But here's the code for the slideshow part where window.opener is present. And I've added all the remaining code that's above. How do you embed files?
// JavaScript for the slideshow page
// ----- Global variables -----
var imgUrlList = window.opener.imgUrlList; // Array with filenames of selected images. Initialized to an empty array.
var imgTextList = window.opener.imgTextList; // Array with image texts of selected images. Initialized to an empty array.
var slideshowMenu = null; // Reference to the image menu.
var slideshowImg = null; // Reference to the slideshow img tag.
var slideshowText = null; // Reference to the tag for the image text.
// ---- Create the image menu and show the first image. Also attach event handlers. ----
function initSlideshow() {
// Create a image list from the content of the variable imgUrlList
var HTMLcode = "<select id='imgMenu'>";
for (var i=0; i<imgTextList.length; i++) {
HTMLcode += "<option>" + imgTextList[i] + "</option>";
} // End for
HTMLcode += "</select>";
document.getElementById("iMenu").innerHTML = HTMLcode; // Add the select and option tags to the HTML code
slideshowMenu = document.getElementById("imgMenu"); // Save a reference to the menu's select tag
slideshowMenu.selectedIndex = 0; // Select the first option in the menu
slideshowImg = document.getElementById("slideshowBox").getElementsByTagName("img")[0];
slideshowText = document.getElementById("slideshowBox").getElementsByTagName("div")[0];
// Show the first image
slideshowImg.src = imgUrlList[0];
slideshowText.innerHTML = imgTextList[0];
// Attach event handlers
var slideshowButtons = document.getElementById("slideshowForm").getElementsByTagName("input");
slideshowButtons[0].onclick = showPrevImage;
slideshowButtons[1].onclick = showNextImage;
slideshowMenu.onchange = showSelectedImage;
} // End initSlideshow
window.onload = initSlideshow;
// ---- Show previous image in the list (menu) ----
function showPrevImage() {
var ix = slideshowMenu.selectedIndex; // Index for the current image
if (ix > 0) { // If it's not already the first image
slideshowMenu.selectedIndex = ix-1;
slideshowImg.src = imgUrlList[ix-1];
slideshowText.innerHTML = imgTextList[ix-1];
}
} // End showPrevImage
// ---- Show next image in the list (menu) ----
function showNextImage() {
var ix = slideshowMenu.selectedIndex; // Index for the current image
if (ix < slideshowMenu.length-1) { // If it's not already the last image
slideshowMenu.selectedIndex = ix+1;
slideshowImg.src = imgUrlList[ix+1];
slideshowText.innerHTML = imgTextList[ix+1];
}
} // End showNextImage
// ---- Show selected image in the list (menu) ----
function showSelectedImage() {
var ix = slideshowMenu.selectedIndex; // Index for the selected image
slideshowImg.src = imgUrlList[ix];
slideshowText.innerHTML = imgTextList[ix];
} // End showSelectedImage
Um, you never do anything to send it. Either pass it as a querystring parameter or have the child reference a global variable in the opener.
var foo = window.opener.imgUrlList;