Search the Community
Showing results for tags 'js'.
-
I dont have cluw what im dowing rong here. Im try to get a canvas in html to match the screen size of the html screen. But it woont take the widht or the height. only when is pre programade in like "1080px" :/ is thare a wee to make it full the screen ? current code var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; console.log("width: "+height+" height: "+width); document.getElementById("MainFrame").style.border="1px solid black"; document.getElementById("MainFrame").style.width=width; document.getElementById("MainFrame").style.height="height";
-
How does this website use hover events to get the boxes to enlarge and shrink with the animation? http://blacknegative.com/#!/loader/
-
Well the title says it all really. I'm looking for ideas to practise web development (both front- and backend) and I'm hoping you guys can help me out ^^ Any and every idea is welcome!
-
I've been practicing a lot of html and javascript recently, and I came across this challenge question. I can't for the life of me figure out why it works and I feel like the answer is very simple. Here it is: What is the output of this code: <html> <head> <title>Test</title> </head> <body> <script type="text/javascript"> var arr = [1,2,3,4]; arr[arr[1]]=5; alert(arr); </script> </body> </html> The answer is 1,2,5,4 but I can't figure out why. arr[1] is the second spot in the array, so the output should be 1,5,3,4 but its not. Does anybody know how this works? It's been bugging me for hours. Thanks!
-
I am attempting to write a nested if statement in JavaScript and it is not working. I am not sure what I am doing wrong and would like some assistance. The if statements are long and will only get longer. I choose to use if statements simply because I do not know how to create a VLOOKUP type function in JS. I have researched a way to accomplish this and found various codes, the problem is I do not understand them thus I cannot edit them to fit my needs. Any help will be greatly appreciated! /* The following vars are used to get the proposed kWh */ var apropkWh1; var apropkWh2; var apropkWh3; var apropkWh4; var apropkWh5; /* The following vars are used to get the proposed kWh */ var propkWh1 = if (document.getElementById("RbR5.1").value = document.getElementById("RN1.1").value) {apropkWh1 = document.getElementById("RN5.1").value * document.getElementById("burnHrs1").value;} else if (document.getElementById("RbR5.1").value = document.getElementById("RN1.2").value) {apropkWh1 = document.getElementById("RN5.2").value * document.getElementById("burnHrs1").value;} else if (document.getElementById("RbR5.1").value = document.getElementById("RN1.3").value) {apropkWh1 = document.getElementById("RN5.3").value * document.getElementById("burnHrs1").value;} else if (document.getElementById("RbR5.1").value = document.getElementById("RN1.4").value) {apropkWh1 = document.getElementById("RN5.4").value * document.getElementById("burnHrs1").value;} else if (document.getElementById("RbR5.1").value = document.getElementById("RN1.5").value) {apropkWh1 = document.getElementById("RN5.5").value * document.getElementById("burnHrs1").value;} var propkWh2 = if (document.getElementById("RbR5.2").value = document.getElementById("RN1.1").value) {apropkWh2 = document.getElementById("RN5.1").value * document.getElementById("burnHrs2").value;} else if (document.getElementById("RbR5.2").value = document.getElementById("RN1.2").value) {apropkWh2 = document.getElementById("RN5.2").value * document.getElementById("burnHrs2").value;} else if (document.getElementById("RbR5.2").value = document.getElementById("RN1.3").value) {apropkWh2 = document.getElementById("RN5.3").value * document.getElementById("burnHrs2").value;} else if (document.getElementById("RbR5.2").value = document.getElementById("RN1.4").value) {apropkWh2 = document.getElementById("RN5.4").value * document.getElementById("burnHrs2").value;} else if (document.getElementById("RbR5.2").value = document.getElementById("RN1.5").value) {apropkWh2 = document.getElementById("RN5.5").value * document.getElementById("burnHrs2").value;} var propkWh3 = if (document.getElementById("RbR5.3").value = document.getElementById("RN1.1").value) {apropkWh3 = document.getElementById("RN5.1").value * document.getElementById("burnHrs3").value;} else if (document.getElementById("RbR5.3").value = document.getElementById("RN1.2").value) {apropkWh3 = document.getElementById("RN5.2").value * document.getElementById("burnHrs3").value;} else if (document.getElementById("RbR5.3").value = document.getElementById("RN1.3").value) {apropkWh3 = document.getElementById("RN5.3").value * document.getElementById("burnHrs3").value;} else if (document.getElementById("RbR5.3").value = document.getElementById("RN1.4").value) {apropkWh3 = document.getElementById("RN5.4").value * document.getElementById("burnHrs3").value;} else if (document.getElementById("RbR5.3").value = document.getElementById("RN1.5").value) {apropkWh3 = document.getElementById("RN5.5").value * document.getElementById("burnHrs3").value;} var propkWh4 = if (document.getElementById("RbR5.4").value = document.getElementById("RN1.1").value) {apropkWh4 = document.getElementById("RN5.1").value * document.getElementById("burnHrs4").value;} else if (document.getElementById("RbR5.4").value = document.getElementById("RN1.2").value) {apropkWh4 = document.getElementById("RN5.2").value * document.getElementById("burnHrs4").value;} else if (document.getElementById("RbR5.4").value = document.getElementById("RN1.3").value) {apropkWh4 = document.getElementById("RN5.3").value * document.getElementById("burnHrs4").value;} else if (document.getElementById("RbR5.4").value = document.getElementById("RN1.4").value) {apropkWh4 = document.getElementById("RN5.4").value * document.getElementById("burnHrs4").value;} else if (document.getElementById("RbR5.4").value = document.getElementById("RN1.5").value) {apropkWh4 = document.getElementById("RN5.5").value * document.getElementById("burnHrs4").value;} var propkWh5 = if (document.getElementById("RbR5.5").value = document.getElementById("RN1.1").value) {apropkWh5 = document.getElementById("RN5.1").value * document.getElementById("burnHrs5").value;} else if (document.getElementById("RbR5.5").value = document.getElementById("RN1.2").value) {apropkWh5 = document.getElementById("RN5.2").value * document.getElementById("burnHrs5").value;} else if (document.getElementById("RbR5.5").value = document.getElementById("RN1.3").value) {apropkWh5 = document.getElementById("RN5.3").value * document.getElementById("burnHrs5").value;} else if (document.getElementById("RbR5.5").value = document.getElementById("RN1.4").value) {apropkWh5 = document.getElementById("RN5.4").value * document.getElementById("burnHrs5").value;} else if (document.getElementById("RbR5.5").value = document.getElementById("RN1.5").value) {apropkWh5 = document.getElementById("RN5.5").value * document.getElementById("burnHrs5").value;}
-
Hiya, could someone create a simple slider and number input for example, like this page. http://bdcraft.net/cubik-pro. They choose the ammount of payment, or if not can someone find something that works. I either need it already working with paypal because that's really what I am trying to do or set a variable. So they choose the slider to "20" it sets the variable to "20". Thanks, Matt.
-
I want to set up this page: https://home-design-concepts-ctshudy.c9users.io/portfolio/ so that when you click on the images below it will dynamically change the content on the page. Any ideas? Thanks -
Hi there, I could use the help of someone who is more experienced in web dev than I am. The bigger picture: I want to enable users of a page to save parts of it as a pdf, simply using the print() method and some CSS styling in @media print. SInce there is a metric ton of CSS that I have no control over, I want to "start fresh", open a new window, insert the bits of html that I want, add a single stylesheet that formats that page for printing, print() and close it again. Not the prettiest way, but it works. Now for my problem. The page contains a more complex canvas element (utilizing ChartJS). Since I only want to print it, I simply want to insert it as an <img> into the 'print page' by doing something like this: [.....] var myCanvas = document.getElementById('myChart'); var source = myCanvas.toDataUrl(); var image = "<img src=' " + source + " '></img>" myWindow.document.write(image); However: this returns a "Uncaught TypeError: myCanvas.toDataUrl is not a function" and yeah, true, somehow document.getElementById('myChart').toDataUrl returns undefined. BUT: and this is, what I cannot get my head around: if I debug this in Chrome and access the myCanvas object in the console, it has and can execute the toDataUrl() just fine. So when I do something like the folliwing: [.....] var myCanvas = document.getElementById('myChart'); // var source = myCanvas.toDataUrl(); var source; // set a breakpoint here and simply assign 'source' in the chrome console via "source = myCanvas.toDataUrl()" // and continue executrion var image = "<img src=' " + source + " '></img>" myWindow.document.write(image); everything works just fine. This snipped was taken from the chrome console, just after the myCanvas variable is assigned: > myCanvas <canvas height="500" id="myChart" style="display: initial; width: 500px; height: 500px; background-color: rgba(255, 255, 255, 0.8);" width="500"> </canvas> > document.getElementById('myChart'); <canvas height="500" id="myChart" style="display: initial; width: 500px; height: 500px; background-color: rgba(255, 255, 255, 0.8);" width="500"> </canvas> > document.getElementById('myChart').toDataUrl; undefined > myCanvas.toDataURL toDataURL() { [native code] } Can anybody explain this? Best regards, Chris
-
So, I made a fun little game that allows you to find your reaction time! I know there are a few bugs here and there, but overall it should be ok. Try it here. https://lionwaffles.github.io/REACT/ My best time is 92ms! Source code: https://github.com/LionWaffles/REACT/tree/gh-pages If you look into the files, you can find some of the upcoming updates to the game! Stay tuned!! Please don't copy the code without clearly giving credit - it took me a few weeks to make this game!
-
Hi guys, I need someone with javascript experience to tell me how I can fill a <ol> or <ul> element with listitems which contain values from an object array. I would appreciate if this can be done with as little code as possible and little jquery. Thanks for anyone who wants to help. this is my array : (dutch translation: naam=name, prijs=price, personeel=employees) var behandeling={ knippen:{ naam:"knippen", prijs:15, personeel:["mark","kerim","niels","jan"] }, verven:{ naam:"kleuren", prijs: 20, personeel:["mark"] }, wassen:{ naam:"wassen", prijs: 5, personeel:["mark","kerim","niels","jan"] }, brushen:{ naam:"brushen", prijs: 10, personeel:["kerim","niels"] }, permanent:{ naam:"permanent", prijs: 15, personeel:["niels","jan"] } };
-
Hey guys, I am trying to program a gui interface under javascript, and in order to do this without the UI freezing whenever a large task is being processed, I need to use Cooperative multi-tasking techniques Does anyone have any experience or know where to guide me on how to do this effectively? If it helps I can share what I have so far
-
Hi, I am looking for a script that i can put into my HTML page that will allow it to smoothly scroll to the bottom and when the page auto refreshed goes back to the top and starts again. I have no experience with JavaScript and have found no useful links online that worked. Any help on this would be good. Thanks.
-
<!Doctype html><html><head><title>Help desk</title> <link rel="stylesheet" href="stylesheet.css"></head><body><script src="jquery-2.1.3.min.js"></script><script src="scripts.js"></script></h1>Help desk</h1><ul class="tabs"><li><a href="#my">Myself</a></li><li><a href="#tech">Technician</a></li><li><a href="#hour">Hours</a></li><li><a href="#feed">Feed back</a></li></ul><div class="tab-content"> <div class="tab" id="my"> <h2>myself</h2> <p>My name is Ishmael Born March 5, 1990</br> Currently live FDR drive</br>Older brother named Luis and my mother names Delia</br>My dream career is to be a help desk levels 2 technician.<h2>Education</h2> Attended aviation high school in queens</br> Transferred to Springfield High School of Science Technology in MA</br> Currently Attend<a href="https://www.monroecollege.edu/"> Monroe College</a></br><h2>Experience</h2> worked for Advance Auto Parts</br> work at home with remote to fix computers and on site if needed</br> Attended APEX for automotive</br><h2>Hobbies</h2> Build models</br> Build computers</br> Computer gaming</br> Go to gym</br> Paintball</br> Airsoft</br></p></div><div class="tab" id="tech"><h2>Tech</h2><p>I am more of a consulting or a adviser I can tell you what's wrong with computers or tell you how much is a part for.</br></br> troubleshooting</br> Install components</br> Install software</br> Maintenance</br> Run diagnostic</br> Use remote desktop connection to troubleshoot issues</br><h2>I look out to ensure the customer</h2> I make sure that the customer fully understands all the details I tell them</br> hat I buy all parts from well known company's</br> all warranty is done by the company manufacture</br></p></div><div class="tab" id="hour"><h2>Schedule</h2><p><table border="1" cellpadding="0" style="width:25%; text-align: center"><tr> <th colspan=6 bgcolor="white"></th></tr> <tr> <th rowspan=5 bgcolor="#F0F8FF">Hours</th> <th>Monday</th> <th>Tuesday</th> <th>Wed</th> <th>Thursday</th> <th>Friday</th></tr> <tr> <td>5-7pm</td> <td>5-7pm</td> <td>5-7pm</td> <td>5-7pm</td> <td>5-7pm</td></tr></table><br/><h3>Due to hours</h3> My support time may vary do to other work or time of appointment is not schedule</br> please call or send a Email to contact me for more information</br></p></div><div class="tab" id="feed"><h2>Validation</h2><p> <h3></h3><form method="post" action="mailto:mailto:icortez5603@monroecollege.edu@isp.com"> <br><br><form><fieldset style="border:#FFFFFF 1px solid;"></br> <legend align="left"style="color:#DarkSlateGray;">Feed Back</legend> Last Name: <input type="text" name="Lastname"/> First Name: <input type="text" name="Firstname"/> E-mail: <input type<br /></fieldset> <br><br><br>Comment:<br/><textarea row="10" cols="50"> place your comments here</textarea><br/> <input type="submit" value="Submit"/> <input type="reset" value="Reset"/> <br><br>Thank you for your time.</br> <br></br> </form> <h3>Contact Information</h3> Phone number: (718)300-7370</br> E-Mail:<a href="mailto:icortez5603@monroecollege.edu@isp.com"> icortez5603@monroecollege.</a></br></p></div></div></body></html> var tabs = $('.tabs');$('.tab').hide();tabs.find('a').on('click', function(e){ e.preventDefault();tabs.find('.current').removeClass('current'); $(this).addClass('current'); $(this.hash).show().siblings().hide();}).first().click(); vimeo.com/105080401 i am not sure whats the problem but in the js the hide does not work i need help with this is there something i am missing the link above is the idea i want
-
So i just go the genius idea of using the 6 macro keys that came with my keyboard for html snippets the most obvious i could think of was <div id=">, </ and <?php?> but do you peps out there use some macros that you can recommend for just html ?? -
So I was doing my regular computing, browsing etc, and suddenly a windows popup appeared asking me if I wanted to download a file named "OAD_Comscore_NoID2.js" and I thought "hey why not, I can handle it" (meanwhile in my head Shia LaBeouf is screaming "Do it") sort of hoping it's something exciting. I was a little confused that it just popped up with no program warning but wasn't sure if virus or nar.. So I opened my favoured script editor (NP++ of course) to view the code, but that hasn't seemed to give me much more information than a website (which leads pretty much nowhere even trying to access the different levels of / in the web address). I'm not much of a programmer myself so I can only ready what my eyes can show me. I haven't ran it yet because I don't know what to expect and I have Googled around a bit but the information was very old, flimsy and loose. Any ideas on what it is trying to do? I could just delete it but where's the fun in that ;3 all things happen for a reason. PS: Sorry if this is in the wrong section, I'm not much of a forum user and this just seemed to be an acceptable place. /*Version 2.0.5Created: 2014-11-05http://ds.serving-sys.com/BurstingRes/CustomScripts/OAD_Comscore_NoID2.js?adid=[%tp_adid%]&scriptURL=[ENCODED COMSCORE SCRIPT URL]parameters: scriptURL is the script url that you want appended to the parent of ebBannerDiv as a sibling. */(function() { var ebScriptFileName = "OAD_Comscore_NoID2.js"; if (!(typeof (ebLastQueryUsedArray) != 'undefined' && ebLastQueryUsedArray)) { ebLastQueryUsedArray = new Array(); } var ebScriptQuery = function(scriptPath) { this.scriptPath = scriptPath; }; ebScriptQuery.prototype = { get: function() { var lastQuery = ''; var srcRegex = new RegExp(this.scriptPath.replace('.', '\\.') + '(\\?.*)?$', 'i'); var scripts = document.getElementsByTagName("script"); var i; for (i = 0; i < scripts.length; i++) { var script = scripts[i]; var scriptUsed = false; if (script.src && script.src.match(srcRegex)) { var query = script.src.match(/\?([^#]*)(#.*)?/); for (var j = ebLastQueryUsedArray.length - 1; j > -1; j--) { if (query[1] == ebLastQueryUsedArray[j]) { scriptUsed = true; break; } } if (scriptUsed == false) { lastQuery = !query ? '' : query[1]; } } } ebLastQueryUsedArray[ebLastQueryUsedArray.length] = lastQuery; return lastQuery; }, parse: function() { var result = {}; var query = this.get(); var components = query.split('&'); var i; for (i = 0; i < components.length; i++) { var pair = components[i].split('='); var name = pair[0], value = pair[1]; if (!result[name]) { result[name] = []; } // decode if (!value) { value = 'true'; } else { try { value = decodeURIComponent(value); } catch (e) { value = unescape(value); } } // MacIE way var values = result[name]; values[values.length] = value; } return result; }, flatten: function() { var queries = this.parse(); var name; for (name in queries) { queries[name] = queries[name][0]; } return queries; }, toString: function() { return 'ebScriptQuery [path=' + this.scriptPath + ']'; } }; //verify by Ad ID or Flight ID try { var gEbQueries_ComScore = new ebScriptQuery(ebScriptFileName).flatten(); var foundViaEBG = false; if (window.EBG) { // EBG is available, see if we find the desired ad in EBG.ads, if not, try old client try { var comAdid = gEbQueries_ComScore.adid || -1; var comPlid = gEbQueries_ComScore.flightid || -1; for (var adIndex in EBG.ads) { if (EBG.ads.hasOwnProperty(adIndex)) { var ad = EBG.ads[adIndex], cfg = ad._adConfig; if ((comAdid == cfg.adId) || (comPlid == cfg.placementId)) { //found the target ad mmSetupComScore(ad, "ebDiv" + cfg.rnd, gEbQueries_ComScore.scriptURL); foundViaEBG = true; break; } } } } catch (e) { } } if (!foundViaEBG) { // do existing/old client stuff if (typeof (gEbEyes) != "undefined") { if (gEbQueries_ComScore.adid) { for (var i = gEbEyes.length - 1; i > -1; i--) { if (gEbEyes[i].adData.nAdID == gEbQueries_ComScore.adid) { mmSetupComScore(gEbEyes[i], "ebFloatingAd_" + gEbEyes[i].adData.nIndex + "_" + gEbEyes[i].adData.strRand, gEbQueries_ComScore.scriptURL); break; } } } if (gEbQueries_ComScore.flightid) { for (var i = gEbEyes.length - 1; i > -1; i--) { if (gEbEyes[i].adData.nFlightID == gEbQueries_ComScore.flightid) { mmSetupComScore(gEbEyes[i], "ebFloatingAd_" + gEbEyes[i].adData.nIndex + "_" + gEbEyes[i].adData.strRand, gEbQueries_ComScore.scriptURL); break; } } } } if (typeof (gEbBanners) != "undefined") { if (gEbQueries_ComScore.adid) { for (var i = gEbBanners.length - 1; i > -1; i--) { if (gEbBanners[i].adData.nAdID == gEbQueries_ComScore.adid) { mmSetupComScore(gEbBanners[i], "ebBannerDiv_" + gEbBanners[i].adData.nIndex + "_" + gEbBanners[i].adData.strRand, gEbQueries_ComScore.scriptURL); break; } } } if (gEbQueries_ComScore.flightid) { for (var i = gEbBanners.length - 1; i > -1; i--) { if (gEbBanners[i].adData.nFlightID == gEbQueries_ComScore.flightid) { mmSetupComScore(gEbBanners[i], "ebBannerDiv_" + gEbBanners[i].adData.nIndex + "_" + gEbBanners[i].adData.strRand, gEbQueries_ComScore.scriptURL); break; } } } } if (typeof (gEbStdBanners) != "undefined") { if (gEbQueries_ComScore.adid) { for (var i = gEbStdBanners.length - 1; i > -1; i--) { if (gEbStdBanners[i].nAdID == gEbQueries_ComScore.adid) { if (gEbStdBanners[i].strImgID != '') { var id = gEbStdBanners[i].strImgID; } else { var id = gEbStdBanners[i].strFlashObjID; } mmSetupComScore(gEbStdBanners[i], id, gEbQueries_ComScore.scriptURL); break; } } } } if (ebO.adConfig.adId == gEbQueries_ComScore.adid) { mmSetupComScore(ebO, ebO.phid, gEbQueries_ComScore.scriptURL); } } } catch (e) { } function mmSetupComScore(obj, id, url) { obj.ebComscoreDummy = setInterval(function() { mmSetupComScore2(obj, id, url) }, 500); } function mmSetupComScore2(obj, id, scriptURL) { var thisId = id; var thisURL = scriptURL; var doc, div = null; if (window.EBG) { // do new client stuff try { doc = EBG.adaptor.getDisplayWin().document; var divTemp = EBG.adaptor.getDisplayWin().document.getElementById(id); if(divTemp.tagName.toLowerCase() == "object"){ div = divTemp; } else if(divTemp.tagName.toLowerCase() == "embed"){ div = divTemp; } else if (divTemp && divTemp.childNodes.length > 0) { //check the placement holder div actually has it's asset present for (var i = 0; i < divTemp.childNodes.length; i++) { var node = divTemp.childNodes[i]; var tagName = node.tagName && node.tagName.toLowerCase(); if (tagName) { if (tagName == "img") { div = divTemp; //we have a banner asset present now break; } else if (tagName == "div") { var id = node.id || ""; var polite = !!obj._gotRich; if (id.indexOf("Default") > -1) { var defaultSet = id; } if (!polite || id.indexOf("Rich") > -1) { div = divTemp; //we have a banner asset present now break; } } } } } } catch (e) { } } if (!div && !window.EBG) { //if didn't find it using EBG, then try old client stuff if (typeof (gEbDisplayPage) != 'undefined' && gEbDisplayPage && typeof (gEbDisplayPage.TI) != 'undefined' && gEbDisplayPage.TI) { doc = gEbDisplayPage.TI.getDoc(); } else doc = document; div = doc.getElementById(id); try { if (obj.displayUnit.ad.strRichFlash && obj.displayUnit.ad.strRichFlash!=''){ defaultSet = id.replace('ebBannerDiv_', 'ebBannerFlash_'); defaultDiv = doc.getElementById(defaultSet); if (defaultDiv != null) { return; } } } catch(e){} if ((typeof (div) == 'undefined' || !div) && id.indexOf('ebBannerDiv_') > -1) { div = doc.getElementById(id.replace('ebBannerDiv_', 'ebBannerImage_')) } } if (typeof (div) != 'undefined' && div) { if (defaultSet && typeof (defaultSet) != 'undefined') { if (id.indexOf("Rich") > -1) { var defaultDiv = doc.getElementById(defaultSet); if (defaultDiv != null) { return; } } } clearInterval(obj.ebComscoreDummy); var node = div.parentNode; var appendElem = document.createElement("script"); appendElem.setAttribute("type", "text/javascript"); appendElem.setAttribute("src", scriptURL); node.appendChild(appendElem); } }})(); -
Hello I need a rly good answer for this topic. Is there any chance to learn all stuff you need to be good front-end dev(or average one) in just a month? I am on codeschool courses now but dunno if they can teach me everythin i need(ofc they kinda show what function in js does but not on actual program so interaction js with html on high lvl is unknown for me atm). I hope you can help me in this serious matter.
-
This is kinda a noob question, but I am building a website and in one page I use a button to show/ hide some of the items on the page, like when I select projects it only shows the containers with the projects class, this code here: $('#filter-buttons a').click(function(){ // select current var $optionSet = $(this).parents('#filter-buttons'); $optionSet.find('.selected').removeClass('selected'); $(this).addClass('selected'); var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector }); return false; }); But I want to have links to this page like ...portfolio.html?projects, ...portfolio.html?illustrations, ...... that when you load it loads with the URL it loads with the specific filter selected.
-
I am retrieving a string from the YouTube API (the video description) and shortening it in my PHP code to 170 characters. However, when it displays, it's normally fine, but if it contains a URL, it will wrap and leave a lot of whitespace because I'm trying to display it in a narrow box, which results in some content overflowing. Is it possible to use javascript or JQuery to truncate the string on the client side so that it fits in the box and still ends in an ellipsis if truncated? I can upload a screenshot if that would help. -
so yeah i got this photo viewer for my website which is under construction now. http://highslide.com/ i successfully was able to like open images with defining directories but actually how can i mod it and make it like available for every image which is even uploaded by a user or any admin or so
-
Hey guys, I'm searching for a coding tool for HTML(5), CSS(3) and JavaScript on the linux platform. Right now I'm using Bluefish, but it unfortunately there isn't any HTML5 support... @all the web developers: What tool are you using?
-
I am in the process (slowly) of making a website, and I would like, at small resolutions, to have a tab bar which is just an icon, but when you point to it, it extends to be a full label over a period of about 0.5 seconds, and retracts when you remove your mouse, over the same time. I have messed around with easing using JQuery with the mouseover() and mouseout() functions(?), but I can't get it to work correctly. Could anyone give me some advice as to how I should make it work, and I don't mind completely restructuring the code because there's no deadline and I've barely started. This is the HTML I have so far: The images linked are simple 40px by 40px placeholder images.
-
Hey! I am currently searching for a nice javascript framework/library to work with on a rather simple website. The website will only have a single site, so I don't really need too complicated stuff. I was already looking at vue.js and react.js, but I thought getting some other opinions on the topic would be nice. If you already used one of the above mentioned, what were your experiences like? I'd love to know! Have a great day, motz
-
I am trying to make a program where the user uploads a map and can cover it and uncover it. I can manage to write a code to allow the user to cover the map, but not to uncover the map. I am trying to use CSS sprites that take a piece of the uploaded image and makes that what the user paints. Since the image is uploads, it does not have a url, so using CSS sprites does not work. Is there a way to use CSS sprites, or an easier way? Note: The image is in an HTML canvas. Here is the program, if showing it helps: <!DOCTYPE html> <html> <head> <title>Dungeon Crawler</title> <style> #title { font-variant: small-caps; font-size: 50px; } </style> </head> <body> <h1 id = "title">Dungeon Crawler</h1> <b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span> <input type="button" id = "back" value="Back" onclick="back()" /> <p> <span id = "tools"> <select id="coverOrUncover"> <option value="uncover"> Uncover</option> <option value="cover"> Cover </option> </select> the map with a brush size of <input type="text" value = "50" name = "size" id = "size"> pixels. </span> <canvas id="imageCanvas"></canvas> <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> <script> var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; var x = document.getElementById("back"); x.style.display = "none"; var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">" function handleImage(e){ var vv = document.getElementById("tools"); vv.style.display = "block"; var v = document.getElementById("title"); v.style.display = "none"; var w = document.getElementById("imageCanvas"); w.style.display = "block"; document.getElementById("imageLoader").innerHTML = "" document.getElementById("size").value = "50" var y = document.getElementById("importMapText"); y.style.display = "none"; var z = document.getElementById("back"); z.style.display = "block"; // ^ shows stuff that need to and hides things that don't var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img,0,0); } img.src = event.target.result; } reader.readAsDataURL(e.target.files[0]); // ^ Prints the image to the canvas } function back(){ var vv = document.getElementById("tools"); vv.style.display = "none"; var v = document.getElementById("title"); v.style.display = "block"; var w = document.getElementById("imageCanvas"); w.style.display = "none"; document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">" var y = document.getElementById("importMapText"); y.style.display = "block"; var z = document.getElementById("back"); z.style.display = "none"; // ^ shows stuff that need to and hides things that don't } </script> <script> var sketchProc = function(processingInstance) { with (processingInstance) { size(700, 400); frameRate(30); // ProgramCodeGoesHere var size = document.getElementById("size").value; size = parseInt(size, 10); var coverOrUncover = document.getElementById("coverOrUncover").value; draw = function() { size = document.getElementById("size").value; size = parseInt(size, 10); fill(0, 0, 0); noStroke(); rect(mouseX, mouseY, size, size); }; }}; // Get the canvas that Processing-js will use var canvas = document.getElementById("imageCanvas"); // Pass the function sketchProc (defined in myCode.js) to Processing's constructor. var processingInstance = new Processing(canvas, sketchProc); </script> </body> </html>
