Instance Mode Error: Failed to load resource: net::ERR_FILE_NOT_FOUND Auto:1

destinyschilde

This is embarrassing...So here's the problem: I created this very nice nav button for my site; its a p5 sketch. I wanted to add another canvas to that same page and realized that i couldn't. I realized that i needed to use instance mode, so read all about it and after a lot of tinkering i got my button to display. The problem is that i cant click on it and it displays this error:

Failed to load resource: net::ERR_FILE_NOT_FOUND Auto:1

i know its a little bit very messy, but its really simple and im not sure where the issue is. I suspect it has something to do with how im referencing DOM elements, but i cant find any examples of this being done in instance mode.

all this really is is a little div that when clicked, enlarges to fit the screen.

var sketch = function (p) { var link1; var link2; var link3; var canva; var cnv; open=false; p.setup=function() { link1 = p.createA('index.html', 'Who?'); link1.position(0,0); link2 = p.createA('http://p5js.org', 'Projects'); link2.position(0,100); link3 = p.createA('http://p5js.org', 'Games'); link3.position(0,200); link4 = p.createA('http://p5js.org', 'Experiments'); link4.position(0,300); canva = p.select('#navo'); bod = p.select('body'); canva.style('width',"0%"); cnv = p.createCanvas(110,110); /this is just to nest it in a div/ cnv.parent("navo"); link1.parent("inner"); link2.parent("inner"); link3.parent("inner"); link4.parent("inner"); p.colorMode(p.HSB); x=110; speed=0; segmentx=29; segmenty=13; open=false; }; p.draw=function() { p.clear() x=x+speed; if (x>p.windowWidth+1000){ speed=0; } if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)){ p.cursor(p.HAND); }else { p.cursor(p.AUTO); } if (x<p.windowWidth/2){ link1.hide(); } else { link1.show(); } if (x<p.windowWidth){ link2.hide(); } else { link2.show(); } if (x<p.windowWidth+200){ link3.hide(); } else { link3.show(); } if (x<p.windowWidth+350){ link4.hide(); } else { link4.show(); } if (x>110){ segmentx=-10; segmenty=-10; open==true; } if (x<110){ x=110; speed=0; segmentx=29; segmenty=13; open=false; desizeit(); } p.noStroke(); p.fill(p.frameCount % 360, 255, 255); p.triangle(0, 0, 0,x, x, 0); p.textAlign(p.CENTER); p.fill(0); p.fill(255); p.rect(segmentx,segmenty, 8,40); p.rect(13,29,40,8); }; p.mouseReleased=function() { if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)&&(p.open==false)){ speed=70; resizeit(); open=true; } if ((p.mouseX>0)&&(p.mouseX<70)&&(p.mouseY>0)&&(p.mouseY<70)&&(x>p.windowWidth+1000)){ speed=-100; } }; p.resizeit=function() { p.resizeCanvas(p.windowWidth, p.windowHeight); canva.style('width',"100%"); bod.style('overflow-y',"hidden"); }; p.desizeit=function() { p.resizeCanvas(110, 110); canva.style('width',"0%"); bod.style('overflow-y',"visible"); }; }; new p5(sketch);

GoToLoop

https://forum.Processing.org/two/discussion/15473/readme-how-to-format-code-and-text

Failed to load resource: net::ERR_FILE_NOT_FOUND Auto:1

Got no idea what that error message got anything to do w/ your instance mode sketch, sorry. :-/

You should try hosting it at https://CodePen.io/pen/
Where you have a place for the HTML, CSS & JS files. *-:)