Matej

Hi im building something like draggable map(using imag for this example) here http://jsfiddle.net/Trolstover/seqpj89L/1/.

But i just cant figure out how to build something like "movement restriction" , so it wont move so much that i will see background of parent element (if you know what i mean)

Any ideas? thanks for answers

Hi , i have this piece of code

<div><div class="lol" style="transform:translate3d(100px,0,0) scale3d(1, 1, 1);opacity:1"></div></div> 

css

div {    -webkit-perspective:200px;    -webkit-transform-style:preserve-3d;}.lol {    width:100px;    height:100px;    background-color:blue;    -webkit-transition:1s ease all;    border:1px solid black;}.lol:hover {    -webkit-transform:scale3d(0, 0, 0);    opacity:0;}

but i found that translate3d , is somehow blocking/bugging scale3d , is there any trick to fix it?

Yes propably toDataURL() is the solution , i downloaded the picuture and tried to open it via deskop html file , but it aint working nor throwing any error

Hello , im trying to shatter image to pieces using canvas here http://jsfiddle.net/Trolstover/qy5kcsmp/4/ , but as you can see the piece of shattered image isnt loaded why is that? there aint any error in console , i even tried using

Hola , im trying to do drag and drop Ordered list here http://jsfiddle.net/Trolstover/m1uwrzz1/

But i would like to ask you , how can i invoke ondrop/ondragover with mouseover? (mouse being on the element) , i tried to do it with ondragenter but didnt work. Basicly i want it to show , where it will be placed/moved

One more question i fixed it here http://jsfiddle.net/Trolstover/qxd32hkk/13/, works fine , but there whenever you click on element while its still changing opacity something strange happen , it shows .hidden and .bodky at the same time even tho i specifed that function interval which change opacity should be invoked only when the .bodky opacity is equal = 0 or 1 , strange is that i had to if(decko.style.opacity="") even tho i have defined opacty of both .hidden and .bodky in the css.

e.target is already pointing to the element with class .bodky at least some of the time, so there is no element .bodky inside it.

 

Perhaps e.currentTarget, if not, then check the className of e.target and choose e.target.parentNode instead if the class if bodky.

e.currentTarget is working , thank you very much , but shouldnt e.target point to TD element all the time? i mean i used event.target just for querySelector = to get some element from element which triggered event = event.target , or am i wrong?

//

nevermind realized that

Cannot read property of "null" , it works fine when first click on last TD and go to the last one (clicking each one) ,i guess when error show up content ain't loaded yet or the variable are overwritting themselves (as i click on more of Td elements in a row in a random order) //which is strange , i guess i gotta use closures right? but i use em on "onclicK" function it doesnt change a thing

Hello , i have this little thing hre http://jsfiddle.net/Trolstover/qxd32hkk/4/ , it works fine , but the problem is , when i click on the TD element first time , it works , but on other TD elements i have to click twice to make it work , can anyone help me with this

Seems like problem is "solved" , thanks for effort

I found only this.

The targetOrigin argument for a message sent to a window located at a chrome: URL is currently misinterpreted such that the only value which will result in a message being sent is "*". Since this value is unsafe when the target window can be navigated elsewhere by a malicious site, it is recommended that postMessage not be used to communicate with chrome: pages for now; use a different method (such as a query string when the window is opened) to communicate with chrome windows. Lastly, posting a message to a page at a file: URL currently requires that the targetOrigin argument be "*". cannot be used as a security restriction; this restriction may be modified in the future.

Which means it should works with local html files but target.origin has to be "*" , dunno why it aint workin

Try this:

x=window.open("torek.html");x.onload = function() {    x.postMessage("Hello world!","*");}

In the second window, be sure you create the event variable:

window.addEventListener("message",function(event){

 

The theory behind it is that the moment you open the new window, the Javascript inside it has not yet started running, so it's not there to listen to the message you sent to it.

Still not working :/ and still without error , also i tried to simple

x.onload=function(){alert("loaded");}

which didnt work either

Show the code you have on both of your pages.

var x;function kolko(){ x=window.open("torek.html");x.postMessage("Hello world!","*");}

window.addEventListener("message",function(){alert("success");alert(event.data);},false);

Thanks, wasnt sure about that , thats why i tried to use both , with but "*" didnt work nor throw error

If they say on StackOverflow that it can be done on the filesystem then it probably is true. I assume that if it can work on the local filesystem at all it probably only does with "*" as the target origin.

 

When you pass "*" to the function, what error message do you get?

Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin ' * ' in a call to 'postMessage'. also when i use "*" it says nothing (i used " * " )

Thanks for answers , yes thought too it would be problem that my "sites" are just local html files , but i found on stackoverflow that it works with local files (maybe the persons were wrong)

Im quite confused now , so what should be "target origin"? , it didnt work with " * " either ,

Right , i tried to do simply

window.addEventListener("message",function(){alert("working")},false)

and nothing happens = event aint firing at all , why is that?

//

but now , it did throw error on parent site

:Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'torek.html' in a call to 'postMessage'.: it says invalid target origin , whats with that? Both of thise sites are in the same foled and window.postMessage works on local files

Hola , im trying to communicate with two windows (both local html files) using window.postMessage() , here are my scripts :

first site

 function kolko(){ var x=window.open("torek.html");             //this opens new windowx.postMessage("hello","torek.html");}  <button onclick="kolko()">click</button>  

second site

var g;window.addEventListener("message",function(){if(event.origin==="fasd.html"){g=event.data;alert(g);}},false)  

The second one doesnt work , it didnt even thrown error in consoleany solutions ?

pass it like this?

var parent="Im a parent site";var newSite=window.open("blabla.org");newSite.parentsite=parent;newSite.addEventListener("load",function(){alert(newsite.parentsite)},ture)  

If this is right way , what is right way to use passed variable/function on the opened site its like i used it (newsite.parentsite) or just simply using alert(parentsite)?

//

or you mean like this

 window.foo="im a parent site";window.open(" web.com/areyousure");

and just use "window.opener.foo" in newly opened window?

Hello , lets say i have two sites 1) web.com 2) web.com/areyousure

. Both have own stylesheets and js files.

On first site (web.com) i use window.open("web.com/areyousure"). Is there any way to pass variables/functions to the second site from the parent site?

Well you can do something like this;

<input type="radio" name="gender"  value="Male" /><input type="radio" name="gender"  value="Female" />    function () {    var gender = document.getElementsByName("gender");    var answer;    for (var i = 0; i < gender.length; i++) {        if (gender[i].checked === true) {            answer = gender[i].value;            break        }     }    if (answer == "Male") {        alert("true")    } else {        alert("false")    } };

Sorry, didnt realize those two links were the same , here is code for second link

window.URL = window.URL || window.webkitURL;var fileSelect = document.getElementById("fileSelect"),fileElem = document.getElementById("fileElem"),fileList = document.getElementById("fileList");fileSelect.addEventListener("click", function (e) {if (fileElem) {fileElem.click();}e.preventDefault(); // prevent navigation to "#"}, false);function handleFiles(files) {if (!files.length) {fileList.innerHTML = "<p>No files selected!</p>";} else {var list = document.createElement("ul");for (var i = 0; i < files.length; i++) {var li = document.createElement("li");list.appendChild(li);var img = document.createElement("img");img.src = window.URL.createObjectURL(files[i]);img.height = 60;img.onload = function(e) {window.URL.revokeObjectURL(this.src);}li.appendChild(img);var info = document.createElement("span");info.innerHTML = files[i].name + ": " + files[i].size + " bytes";li.appendChild(info);}fileList.appendChild(list);}}

Hello , what is the difference in manipulating with files with and without using new fileReader()?

Here are two examples from mozilla developers

using new fileReader() http://jsfiddle.net/4g65xq3f/

and without it and using window.URL.createObjectURL() http://jsfiddle.net/4g65xq3f/

what is the difference? (yes the second one is with hidden input but im not talking about it)

Thank you for answers and Merry Christmas and happy New Year

thanks:)