Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by Matej

  1. as i mentioned, i tried to add width to .info and it still behaves the same
  2. The parent container of .info ineed has explicit ( 100% width ) , i set the width of .info to certain value also but the behavior is the same
  3. Using this when i have a multiple elements in centered DIV and i set positive value to a margin on any of them results in others elements recieve the same margin but negative. e.g <div class="info"> <h1>TeXT GoeSt here</h1> <p>bla bla bla bla bla bla</p> <button class="myButton">Leave a Button</button> </div> .info{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .info h1{ position: relative; font-family: Roboto Bold; font-size: 90px; margin-top: -130px; } this is fine cuz there is a negative value but .info .myButton{ position: relative; border: none; color: white; text-decoration: none; width: 200px; height: 50px; background: #FF0505; outline: none; cursor: pointer; margin-top: 200px; } does not just move the element. it moves all others elements the oposite way...
  4. What is the trick to center div horizontally and vertically at the same time? I have this demo and need to center the div with the text in the middle of its parent div. How can i do such a thing?
  5. I have updated css file for media queries , but there is a problem , it wont show its effect on site , i have made test with background color , @media screen and (max-width: 1200px) { body{background-color:blue;} } When i resize the browser , it actually shows media queries there but does not show result , how can i fixt it?
  6. thats it , its aint displaying in right order or somehing , the ordering script works i tested it , but somehow its broken or something , as i said i solved this exercisee first time with diferent script which aint working aymore , so ii dont know mistake is on my side or on their. Thats why i posted it . to find out if I did mistake.
  7. indeed , as i said i said i thought its printing just wrong order ,that why i sorted it based on urls array that mean result from url 0 is on 0 position but it still says i failed
  8. hi , im trying to solve said exercise in nodeschool LEARN YOU THE NODE.JS FOR MUCH WIN! ───────────────────────────────────── JUGGLING ASYNC Exercise 9 of 13This problem is the same as the previous problem (HTTP COLLECT) in that you need to use http.get(). However, this time you will be provided with three URLs as the first three command-line arguments.You must collect the complete content provided to you by each of the URLs and print it to the console (stdout). You don't need to print out the length, just the data as a String; one line per URL. The catch is that you must print them out in the same order as the URLs are provided to you as command-line arguments.-------------------------------------------------------------------------------## HINTSDon't expect these three servers to play nicely! They are not going to give youcomplete responses in the order you hope, so you can't naively just print the output as you get it because they will be out of order.You will need to queue the results and keep track of how many of the URLs have returned their entire contents. Only once you have them all, you can print the data to the console.Counting callbacks is one of the fundamental ways of managing async in Node. Rather than doing it yourself, you may find it more convenient to rely on a third-party library such as [async](http://npm.im/async) or [after](http://npm.im/after). But for this exercise, try and do it without any external helper library.------------------------------------------------------------------------------- first i solved it like this (first time it worked) var http=require("http");var urls=process.argv.slice(2,process.argv.length);var count=0;var junge=[];urls.map(function(url,index){http.get(url,function(response){var str="";response.setEncoding("utf-8");response.on("data",function(data){str=str+data})response.on("end",function(){junge.push(str);count++;if(index==urls.length-1) junge.map(function(v){console.log(v)})});});}) but second and so on time it threw that i failed , so i thought maybe its printing in the wrong order? So before i prined it i sorted it. and final code looks like this var http=require("http");var urls=process.argv.slice(2,process.argv.length);var junge=[];var finaly=[];urls.map(function(url,index){http.get(url,function(response){var str="";response.setEncoding("utf-8");response.on("data",function(data){str=str+data})response.on("end",function(){junge.push({text:str,url:url});if(index==urls.length-1) {urls.forEach(function(m){var is=false;junge=junge.filter(function(x){if(!is && x.url==m){finaly.push(x);is=true;return false;}elsereturn true;})})finaly.forEach(function(y){console.log(y.text)})}});});}) the error just says i failed , but the result looks differently every time , here is the recent one 1. ACTUAL: "Grab us a fly wire no worries she'll be right rego. Trent from punchy trackies with flat out like a parma. As stands out like two pot screamer and you little ripper waratah. "1. EXPECTED: "Flat out like a two pot screamer with he hasn't got a ya. You little ripper flanno piece of piss built like a trackie dacks. He's got a massivehottie with get a dog up ya cranky. Built like a franger mate lets throw a gonewalkabout. "2. ACTUAL: ""2. EXPECTED: "Get a dog up ya rapt my as stands out like ute. Stands out likea chuck a sickie and get a dog up ya cactus mate. Stands out like a bitzer heaps she'll be right cubby house. Watch out for the bushranger no worries as cunning as a bitzer. As stands out like bushranger also gutful of smoko. "3. ACTUAL:3. EXPECTED: ""────────────────────────────────────────────────────────────────────────────────? Submission results did not match expected!# FAILYour solution to JUGGLING ASYNC didn't pass. Try again! any help?
  9. Hola, have you taken a look at it yet? Ihave ordered that book for promises , but does it include fetch api which is based on promises?
  10. Matej

    facebook like

    Hi , im trying to impelement fb likes on site code <script> window.fbAsyncInit = function() { FB.init({ appId : 'id i recieved', xfbml : true, version : 'v2.3' }); }; (function(d, s, id){ var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div> but as i do what i do , the button just wont show up , it does not even throw any error. Does anyone have experience with stufflike this?
  11. Matej

    ajax and images

    So thats the way images are stored? Just store path in xml/json and getbthat path using ajax? Well makes sense ... This way i can dynamicli add pictures... Thanks
  12. Matej

    ajax and images

    How are images loaded from server if not via Ajax? im working on my site where i want to retrieve images from server + im planning to add more and more images to the server so i supposed it would be best with ajax which would result in automaticly updait content on website.
  13. Hi. Im trying to learn AJAX. In my WAMPSERVER www.directory i have a file called IMAGES. inside that file there is an image called logo.png. Im trying to retrieve this image from server using this code function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){var response = xmlhttp.responseText;var img=document.createElement("img");img.src=response;var myDiv=document.getElementById("one");myDiv.appendChild(img);}}xmlhttp.open("get","images/logo.png",true);xmlhttp.send();}window.onclick=loadXMLDoc In chrome it throws error about cross origin or something (restriction). But in firefox it does append image but without src and it throws error "not well formed". If i change code a bit to only innerHTMl to said div and using xmlhttp.open("get","images/change.txt",true); it works. So, what is the right way to retrieve image from server? Also , lets say i have more images in "images" folder , how could i retrieve them all? also when i change it to xmlhttp.open("get","images/brm.jpg",true); which is another image in the folder it throws error NS_ERROR_DOM_BAD_­URI: Access to restricted URI denied
  14. Matej

    position fixed trick

    Using position fixed , the element would be in the same position after scroll and so on. Im talking about achieving similar effect like .menu { background:url("") no-repeat fixed center } but with elements also and not just background.
  15. Matej

    position fixed trick

    Hello , how is possible to make similar trick as with background:url("")no-repeat fixed center? What i am trying to do is to let "text" do the same effect as with this background here is a demo. http://jsfiddle.net/Trolstover/2kvhgga0/ as you can see here , the images arent "Scrolling up" thanks to background fixed position but i want to achieve that the text will be the same. Nice example is on this site i've found http://www.loono.cz/ first image with button. Thanks for answers
  16. What is the magnitude in this case? deltaX would be g-raduzs (defined in fiddle) , and magnitude should be new position of X? a.k.a Asin(g-radius/new_client) cuz thats what i tried as first but seems like isnt working properly //sorry im not familiar with names of math expressions in english and translators are pain in this case :/
  17. Yo , im building time picked with javascript and i found interessting problem , demo = http://jsfiddle.net/afo7ky03/6/ whenever you move rotating div between 2 and 3 it stops there and it shouldnt happen , i havent found any problem in scripts , did i overlooked something? thanks for answers
  18. Matej


    Hello , here http://jsfiddle.net/Trolstover/x9fpv8pb/3/ i have list of divs. What im trying to do , is to set scale of div which is next to div i am hovering , the code is supposed to work only on the one certain element , but is seems , that its somehow affecting all elements and breaking the code , could anyone of you help me solve this little problem?
  19. Matej

    queries problem

    Hi , im building navigation menu , it has round shape , i would like t odo it responsive so whenever the width<420px it will become typical navigation menu (float: none and width 100% = hope you get me), but it doesnt behave just like i would like to . here is a code html <nav> <div class="holder"> <ul class="kek"> <li><a href="#"><i class="fa fa-bell"></i></a> </li> <li><a href="#"><i class="fa fa-anchor"></i></a> </li> <li><a href="#"><i class="fa fa-book"></i></a> </li> <li><a href="#"><i class="fa fa-eyedropper"></i></a> </li> <li><a href="#"><i class="fa fa-cloud"></i></a> </li> <li><a href="#"><i class="fa fa-coffee"></i></a> </li> <li><a href="#"><<i class="fa fa-fire "></i></a> </li> <li><a href="#"><i class="fa fa-folder-open"></i>></a> </li> </ul> </div><div id="menu"></div> </nav> css * { margin:0; padding:0; }nav { position:absolute; width:26em; height:26em;margin: auto;top: 0; left: 0; bottom: 0; right: 0; }.holder {font-size:1em; position:absolute; z-index: 10; overflow:hidden; width:26em; height:26em; border-radius:50%; -webkit-transform:scale(0) rotate(0) translateZ(0); -webkit-transition:1s ease all;}.holder.active { -webkit-transform:scale(1) rotate(360deg) translateZ(0);}.holder ul li { position:absolute; width:14em; height:13em; left: 50%; top: 50%; transform-origin: 100% 100%; overflow: hidden; font-size:2 em; ; margin-top:-13em; -webkit-transition:1s ease all;}.holder ul li:nth-child(1) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(2) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(3) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(4) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(5) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(6) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(7) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li:nth-child(8) { -webkit-transform:rotate(0deg) skew(45deg) translateZ(0)}.holder ul li a { display:block; position:absolute; -webkit-transform:skew(-45deg) rotate(-67.5deg) translateZ(0); width:15em; height:15em; -webkit-transition:1s ease all; bottom: -6.25em; right: -6.25em; text-decoration: none; text-align:center; font-size: 1.18em; padding-top:1.8em; color:black;}.holder ul li a:hover{color:white}.holder li:nth-child(odd) a { background-color: #00AAE4;}.holder li:nth-child(even) a { background-color: #00FF7F} #menu { width:5em; height:5em; background-color:black; border-radius:50%; position:relative; z-index:20; margin:10em auto; cursor:pointer;}.fa{text-align:center;display:inline-block;margin-top:3em;;nav { width:100%;height:100%;position:absolute;}.holder { width:100%; height:100%; border-radius:0; -webkit-transform:scale(0) rotate(0) translateZ(0); -webkit-transition:1s ease all;} .holder ul li { position:relative; width:100%; height:12.5%; left: 0%; top: 0%; float:none; margin:0; -webkit-transition:1s ease all;}.holder ul li a { display:block; position:relative; -webkit-transform:skew(0deg) rotate(0deg) translateZ(0); width:100%; height:100%; -webkit-transition:1s ease all; text-decoration: none; text-align:center;}#menu{display:none}} javascript var y = 0;var delay = 0;var spin = true;var intervals = [];var menu=document.getElementById("menu");var holder = document.getElementsByClassName("holder")[0];var x = document.querySelectorAll(".holder ul li");menu.addEventListener("click",function () { Array.prototype.forEach.call(intervals, function (element) { window.clearTimeout(element); }); delay = 0; if (spin) { if (!holder.className.match("active")) { holder.classList.add("active"); delay = 1000 } intervals.push(setTimeout(function () { for (var i = 0; i < x.length; i++) { x[i].style.transform = "rotate(" + y + "deg) skew(45deg) translateZ(0)"; y += 45; } y = 0; spin = false; }, delay)) } else { for (var j = 0; j < x.length; j++) { x[j].style.transform = "rotate(" + y + "deg) skew(45deg) translateZ(0)"; } spin = true; intervals.push(setTimeout(function () { if (holder.className.match("active")) { holder.classList.remove("active"); } }, 1000)); } },false); /*window.onresize=function(){if(window.innerWidth<420){for(var i =0;i<x.length;i++){x[i].style.transform = "rotate(0deg) skew(0deg) translateZ(0)";//x[i].firstChild.style.transform="skew(0deg) rotate(0deg) translateZ(0)"} }}*/files in attachment thanks for answers kokodrilo.html magic.css
  20. Matej

    margin auto

    fixd thanks
  21. Matej

    margin auto

    Hello i have html structure <article><nav> <ul> <li><a href="">Auto</a> </li> <li><a href="">Moto</a> </li> <li><a href="">Music</a> </li> <li><a href="">Brm</a> </li> </ul></nav></article> and css * { margin:0; padding:0; } body { background-color:lightblue;position:relative;}html,body{ width:100%;height:100%; }article{ width:100%;height:100%}nav { //margin-top:100px; //margin-left:28.125%; margin: 100px auto; max-width:500px; height:100px; position:absolute; } ul { width:100%; height:100px; position:relative; margin:auto; } ul li { text-decoration:none; list-style-type:none; float:left; height:100px; width:100px; position:relative; -webkit-transition: .7s ease all; border:1px solid black; border-radius:100%; text-align:center; line-height:6em; margin:8px; padding-left:7px; background-color:#FFFF99 } ul li a { display:block; text-decoration:none; width:100%; height:100% } what i want to do , is make nav being in the middle of article - viz. margin:auto , but it doesnt work. Im making a responsible menu. I tried to do it with media queris viz but it does not look that good viz. @media screen and (max-width: 960px) { nav {max-width:400px;height:75px; margin-left:26.08%; } ul li{height:75px;max-width:75px;line-height:4.5em;} }@media screen and (max-width: 760px) {nav{max-width:350px;height:50pxmargin-left:28%}ul li{height:50.5px;width:50.5px;line-height:2.5em;}} Any help please ?
  22. Matej


    Hi , lets say i have html code <div class="one" style="transform:translate3d(100px,0,0,) scale3d(0,0,0,)"></div><div id="two style="transform:translate3d(100px,0,0,) scale3d(1,1,1,)"></div> Is there any way to get value each argument separatedly? if i use var first=window.getComputedStyle(one).getPropertyValue("transform") // returns matrix3d;document.getElementById("two").style.transform=first // this just moves element ignoring transition(even tho translate values are the same) and ignores scale Any ideas how to deal with it?
  23. Matej


    Thanks , What are custom headers used for?
  24. Matej


    Yo , i just came to "Cross-origin-resource sharing" . I have read articles about in on MDN and html5rocks but im not sure i get it . "Cross-origin-resource sharing basicly means that i want to get some content from other site which aint ony my domain (for example site w3schools.com wants some data from codeadacemy.com) using ajax. But here comes the usage . I only found this way function createCORSRequest(method, url) {var xhr = new XMLHttpRequest();if ("withCredentials" in xhr) {// XHR for Chrome/Firefox/Opera/Safari.xhr.open(method, url, true);} else if (typeof XDomainRequest != "undefined") {// XDomainRequest for IE.xhr = new XDomainRequest();xhr.open(method, url);} else {// CORS not supported.xhr = null;}return xhr;}// Make the actual CORS request.function makeCorsRequest() {// All HTML5 Rocks properties support CORS.var url = 'http://updates.html5rocks.com';var xhr = createCORSRequest('GET', url);if (!xhr) {alert('CORS not supported');return;}// Response handlers.xhr.onload = function() {var text = xhr.responseText;var title = getTitle(text);alert('Response from CORS request to ' + url + ': ' + title);};xhr.onerror = function() {alert('Woops, there was an error making the request.');};xhr.send();} Is it really that simple or am i missing something? And, what does "handling not-so-simple request " mean?On html5 rocks there is an example var url = 'http://api.alice.com/cors';var xhr = createCORSRequest('PUT', url);xhr.setRequestHeader('X-Custom-Header', 'value');xhr.send(); What is this "handling" used for? I cant find any real life examples or nice explanationThanks for answers and have a nice day.
  25. Oh yea silly me ) , got it thanks
  • Create New...