Jump to content

Search the Community

Showing results for tags 'javascript'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. Hello & Thanks , A javascript Tutorial for BenghaziGame : I just wanted to let you know that I have written a javascript tutorial for my BenghaziGame , and to thank all you folks on this Forum who have helped me to convert this game to javascript . Benghazi Game is a shoot 'em up political satire browser game . But instead of bullets , we throw cowpies at politicians when we see them lying . How do we know when they are lying ? When their noses turn into long carrot noses , they are lying . The Tutorial game begins here : http://liesandcowpies.com/javascript/BenghaziGame.00-TUTORIAL.html I have also posted the whole Tutorial for download here : http://liesandcowpies.com/javascript/BenghaziGame-TUTORIALS.zip My disclaimer: I am going to let w3schools.com do most of the heavy lifting , and use their GameTutorial resources to do the explaining on specific keywords . Here is a list of their web pages that we will be using: http://www.w3schools.com/games/ http://www.w3schools.com/games/game_canvas.asp http://www.w3schools.com/games/game_components.asp http://www.w3schools.com/games/game_controllers.asp http://www.w3schools.com/games/game_obstacles.asp http://www.w3schools.com/games/game_score.asp http://www.w3schools.com/games/game_images.asp http://www.w3schools.com/games/game_sound.asp and more as the need arises . Thanks...Vern
  2. Hi, I having problems when I execute (from a JS file) an onclick function by the class that is into an append of another JS file. My code is this: JS File1: var user_tmpl = $('<div />') .addClass('user') .append('<strong/>').find('strong').addClass('titulo').html(item.titulo) .append('<a href="#buscamedioModal" role="button" class="btn btn-danger deletebuscamedio" data-toggle="modal" id=' + item.gid + ' data-name=' + item.titulo + '>Eliminar</a>') .parent(); JS File2 (call): // Configuraciones Generales var boton_eliminar_buscamedio = ".deletebuscamedio"; // Clase // Fin de configuraciones $(document).on('ready',function(){ $(boton_eliminar_buscamedio).on('click',function(e){ e.preventDefault(); var Pid_medio = $(this).attr('id'); alert(Pid_medio); var name_buscamedio = $(this).data('name'); But it seems that it can't run the function because doesn't find the class "deletebuscamedio". Does anyone how to do this? Thank you in advance!
  3. Hello I'm trying to add a drag and drop event to my js/jquery code in which after my shape is rendered to the canvas I need to move the shape around by selecting it then dragging it into position. I'm not sure if I need to use jquery or just plain old javascript. I've been tinkering around with it but its not working for me. Can somebody give me a hint please? function drawCircle(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 25, 0, 2 * Math.PI); ctx.stroke(); } function clearArea() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); return false; } function drawEllipse(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); } function drawP(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("p", 50, 100); } function drawQ(){ var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "12px serif"; ctx.fillText("q", 50, 100); } function OnClickDraw() { var drawtype = $('#drawType').val().toLowerCase(); switch(drawtype) { case 'c': drawCircle(); break; case 'e': drawEllipse(); break; case 'p': drawP(); break; case 'q': drawQ(); break; } return false; } As you can see I'm using jquery already in my switch statement...
  4. Hi I'm looking for a way to put content from one site (an entire page including images and server side scripts) in a frame from another site. I would like to find a solution my idea is javascript(not sure), do you have any hints/suggestions?
  5. I've just created a really simple online editor for HTML, Javasacript and CSS in "w3schools tryit" style. I call it WePro. The title stands for Web Programming, so, it doesn't mean I'm a pro developer. Feedback are welcome as this is one of my lesson in learning web programming. Please visit: WePro Hit "Run" to execute. The Code area is draggable and you can toggle it by clicking the "WePro title above the page. Is this any good?
  6. I made an ajax call in my project, the call return a json object, i can see the json object in my console but when ever i call the w3DisplayDate() I get this error in my console " w3data.js:30 Uncaught TypeError: Cannot read property 'insertBefore' of null ". Is this a bug or am I doing something wrong, someone please help.
  7. Hi all I would like to know whether it is possible or not to build a secure inlog script. The script I have as example is mainly in php. I read a couple of tuts online and watched some youtube video's and discovered that both javascript and php are used. I dont know much about encryption but more and more questions are rising ..... Is it true that it is possible to add javascript encryption wen you want a user to login ? My own idea is that this looks quite insecure as anybody can see the encryption code. I have more questions but first i would like to know this if possible.
  8. if(trigger.getAttribute("onmouseover")) { document.addEventListener("mouseover", function(event) { if(event.target !== elem && event.target !== elem.parentNode) { if(elem.style.opacity == 1) fadeOut(x); } }, false) } The code above is not working properly as it is supposed to. I have a trigger element which is event.currentTarget. When the user hovers over the trigger item the elem is display. What I am looking for is that when the user hover over anything else on the page except the trigger and the elem items the elem should fade out. The code works fine when I use onmouseenter event; however, that is not supported in safari and some older versions of other browsers as well. Therefore, please help with this I have been stuck at this problem for days now and there is no good online resource for it as well. Thanks! in advance... Sam
  9. I am trying to stop a mousewheel event from occurring when mousewheeling on a tooltip. Why something like this doesn't work (it only works on the first of the tooltips)... document.body.onwheel = function(e) { e = e || window.event; var target = e.target || e.srcElement; for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) { if (document.querySelectorAll('.tooltip')[i].contains(target)) { return false } // perform some stuff } }; But this does? document.body.onwheel = function(e) { e = e || window.event; var target = e.target || e.srcElement; if (document.querySelectorAll('.tooltip')[0].contains(target) || document.querySelectorAll('.tooltip')[1].contains(target)) { return false } for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) { // perform some stuff } }; Please note I am using return false because e.preventDefault() doesn't seem to work at all either!
  10. Hi, I need a tutorial (in .pdf) on how to make a login page for a web app and secure password database using MS Access. Do you have any reference? Thanks!
  11. UPDATE: Please skip to Post #11 (where I've re-started the post with, "UPDATE: Restarting question/post here...") Is it (reasonably) possible to autoscroll a text (txt) blob during the playback of a video on a page, and if so then how? What I'm wanting to accomplish is very similar to what SoundHound does with audio files and lyrics; while the audio file plays the synchronized lyrics scroll by in a frame. For example, I have a video 10 minutes long that I will play on a web page. I have a txt file with short lines of data.I can manipulate the txt file however needed to make this process work. Each line of text has a time stamp (and I can place the time stamp wherever in the line I want or need it placed). The times (timestamped lines) are not in even time intervals (but I can make the intervals even by placing in filler lines if needed). Most likely I'll have one line of text for every second (and I can even force it to be one line/row per second if it makes it easier). The text lines vary in length (but if really needed I could make them the same length, so it might be possible to scroll by byte range). [*]On my page: I will have the video playing. Below the video I will have the txt blob displaying in a scrolling field. [*]I would like the text blob to scroll automatically in synchornization with the video. If the user speeds up or slows down the video or jumps to a new place (forward or back) in the video, the blob needs to remain in sync. When the video is paused then the blob needs to stop scrolling. Is this something reasonably do-able? If so, can someone point me to or provide an example? (I'm a noob at this, but trainable.) Thanks in advance, Andrew
  12. Good Day to All. I have a website to display my artwork and poetry. In the poetry section there is the main page with links to other pages and also an anthology which lists my poems by title, the titles are linked to a page to view the poems in their entirety. When you click the link to any poem, that page also displays the anthology so that you can easily navigate to the next poem that interests you without having to return to the main poetry page. The problem I find myself with is that when I want to add a new poem to the anthology I need to edit every page that contains that list. Not something I am interested in doing. I created the website from scratch several years ago and am just a novice, nothing fancy. I have searched the internet for answers but have yet to find what I am looking for. I would like to create the Anthology as a list of links on a separate page/file that can be referenced/sourced in each poetry page that would display the list. In this manner I only have to edit one page and those changes will reflect on all the associated pages. This is the navigation portion of the code that reflects the links desired; <div id="nav"> <ul> <li><a href="../index.html">Home Page</a></li> <li><a href="../aboutartist.html">About the Artist</a></li> <li><a href="../all-art.html">Gallery</a></li> </ul> <h2>Anthology</h2> <ul> <li><a href="achildcries.html">A Child Cries</a></li> <li><a href="addedupon.html">Added Upon</a></li> <li><a href="brokenflowers.html">Broken Flowers</a></li> <li><a href="deadlovers.html">Dead Lovers</a></li> <li><a href="dreamchaser.html">Dream Chaser</a></li> <li><a href="ebb.html">Ebb</a></li> <li><a href="eyes.html">Eyes</a></li> <li><a href="inthedark.html">In The Dark Recesses of Our Soul</a></li> <li><a href="luna.html">Luna</a></li> <li><a href="myancientpictographs.html">My Ancient Pictographs</a></li> <li><a href="raindrop.html">Rain Drop on the Back Porch Railing</a></li> <li><a href="restlessthenight.html">Restless The Night</a></li> <li><a href="summer.html">Summer</a></li> <li><a href="tameroftheuniverse.html">Tamer of the Universe</a></li> <li><a href="thankyouchild.html">Thank You Child</a></li> <li><a href="theburning.html">The Burning</a></li> <li><a href="unopenedbooks.html">Unopened Books</a></li> <li><a href="whereangelstread.html">Where Angels Tread</a></li> </ul> </div> Ideally, all the links below <h2>Anthology</h2> would be referenced/sourced from a different page/file. My difficulty is two fold. 1. How to source the link. I have tried javascript (which i do not know); <script src="../Poetry List/poetrylist.js"></script> This was the closest thing I could find that might get me where I want. 2. how to create/format the source page that contains the information. currently it is saved as .js Here is the poetry page of the website;http://sagebrushart.com/Poetry.html Any and all help would be greatly appreciated.
  13. Hello & Thanks , I am making my way thru game tutorial - http://www.w3schools.com/games/tryit.asp?filename=trygame_controllers_keys and I would like to know , what is the purpose of a 'name :' label ( canvas : , start : , clear : ) ? var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 480; this.canvas.height = 270; this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('keydown', function (e) { myGameArea.key = e.keyCode; }) window.addEventListener('keyup', function (e) { myGameArea.key = false; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } Also , for ' ("canvas"), ' , why the comma ' , ' ? Thanks
  14. lease see my code below, I have sorted out all my coding to work how I want it too, but for some reason I just can't get it to load the map when you open it up in a browser. Can anyone see where I have gone wrong and guide me to get it work please. Thank you. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <title>County Polygons + Markers w/elapsed time</title> <script src="../fiveenglishcounties.js" charset="UTF-8"> // positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk </script> <script type="text/javascript"> var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin; $('#controls input[name="[counties]"]').click(function(){ var poly = pollies[this.value]; if(poly.map){ poly.infowindow.close(); poly.setMap(null); this.checked = false; } else { poly.setMap(map); this.checked = true; } }); function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); $('#activatemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setIcon(pinImage); return false; } }); }); $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } tm.get(0).size = $('option', tm).length; }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); this.size = $('option', $(this)).length; }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.178227, -0.46013)); map.setZoom(8); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(8); } }); function formatCodes(codeString){ var a = codeString.split(' '), l = a.length, po; while(--l > -1){ po = a[l].split(','); a[l] = {lat: +po[1], lng: +po[0]}; } return a;} function initMap() { pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor); defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor); var p; geocoder = new google.maps.Geocoder(); bounds = new google.maps.LatLngBounds(); map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: {lat: 52.178227, lng: -0.4013}, mapTypeId: google.maps.MapTypeId.ROADMAP }); pollies = { Bedfordshire: { paths: BedfordshireCodes, strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.15, latlng: {lat: 52.002974, lng: -0.465139} }, Bedford: { paths: BedfordCodes, strokeColor: '#FFC0CB', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FFC0CB', fillOpacity: 0.15, latlng: {lat: 52.135973, lng: -0.466655} }, Hertfordshire: { paths: HertfordshireCodes, strokeColor: '#FFFF55', strokeOpacity: 0.9, strokeWeight: 2, fillColor: '#FFFF55', fillOpacity: 0.25, latlng: {lat: 51.809782, lng: -0.237674} }, Cambridgeshire: { paths: CambridgeshireCodes, strokeColor: '#00FF00', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#00FF00', fillOpacity: 0.15, latlng: {lat: 52.305297, lng: 0.021820} }, Northamptonshire: { paths: NorthamptonshireCodes, strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.15, latlng: {lat: 52.272994, lng: -0.875552} } }; for(p in pollies){ var polly = pollies[p]; polly.paths = formatCodes(polly.paths); polly = pollies[p] = new google.maps.Polygon(polly); polly.infowindow = new google.maps.InfoWindow({ content: p, position: polly.latlng }); polly.addListener('click', function(){ if(this.infowindow.map){ this.infowindow.close(); } else { this.infowindow.open(map, this); } }); polly.setMap(map); } } function initialize() { } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form> <br> Location 1 <input type="text" class="address"> <br> <br> Location 2 <input type="text" class="address"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="submit" value="Submit"> </form> </div> <div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"> <label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br> <label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br> <label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br> <label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br> <label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label> </div> <div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br> <input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br> <input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker"> </div> </div> <div id="map"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div> </body> </html>
  15. I am trying to embed some kml files for local county bodries but am not sure how to asign multiple ones as I am coding in dreamweaver. Also I have made a drop down menu for eack kml file but am not sure how to link and get it all to work, mainly want the boundries to be shown on the map at all times and when selected in the dropdown menu, that particular county is shown on the map. Please see my coding I have done, and if there is any advice i would appreciate it. I am completely new to this and trying to teach myself. var kmlUrl = 'maps/central bedfordshire' ; var kmlOptions = { suppressInfoWindows: true, preserveViewport: false, map: map }; var kmlLayer = new google.maps.KmlLayer(kmlUrl, kmlOptions); function countiesDropdown(container){ var counties = { "bedfordshire", "hertfordshire", "cambridgeshire", "northamptonshire", "buckinghamshire" } var out = "<select><option value=""></option>";</select> <select> for (var key in counties) {</select> <select> out += "<option value="" + key + "">" + counties[key] + "</option>";</select> <select> }</select> <select> out += "</select>"; console.log(out); document.getElementById(container).innerHTML = out; } I have already inbeded the general map and markers etc and they work fine hence why have only given the coding that isn't working. Here is the HTML part. <div id="menu" style=" position: absolute; margin: 45px 80px;" > <select id="Counties"> <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </div> Hope this enough of an understanding of what i have and am trying to do.
  16. I have done some research into adding date and time elpsing. There seem to be a few different ways it can be done, but I am having trouble fitting it in to work for me. I have managed it so the the map is still displayed and my county selction function works fine, but where I have tried to incorporate the time and date with the marker placement it hasn't worked not does the placement of the marker now either. The error in my browser console states no element found which I google searched with no luck of a resolution exxept for a firefox debug. Here is my coding, If anyone can guide me in where I have gone wrong i would appreciate it thanks. <!DOCTYPE html> <html> <head> <!-- Google Maps and Places API --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var markers = []; function elapsed(rfd) { var rs = (new Date().getTime() - rfd.getTime()) / 1000, days = Math.floor(rs / 86400), hours = Math.floor((rs - (days * 86400 )) / 3600), minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60), secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))), fet = secs + 's'; if(minutes){fet = minutes + 'm' + ' ' + fet;} if(hours){fet = hours + 'h' + ' ' + fet;} if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;} return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago'; } function createMarker(latlng, html, map) { var ref = $.trim($('#reference').val()), infowindow = new google.maps.InfoWindow({ content: ref || html }), marker = new google.maps.Marker({ map: map, time : new Date(), position: latlng, html: html, icon: defaultPin, infowindow: infowindow }), $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>'); $tm.get(0).selectedIndex = 0; marker.addListener('mouseover', function() { clearInterval(infowindow.timer); infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content).fadeIn(); infowindow.timer = setInterval(function(){ infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time)); $('#supplementwindow').html(infowindow.content); }, 300); infowindow.open(map, this); }); marker.addListener('mouseout', function() { clearInterval(infowindow.timer); infowindow.close(); $('#supplementwindow').fadeOut(); }); marker.addListener('click', function() { var oe = this.optel; $tm.get(0).selectedIndex = $('option', $tm).index(oe); $tm.trigger('change'); }); marker.optel = $('option', $tm).last(); $tm.get(0).size = $('option', $tm).length; markers.push(marker); } var up206b = {}; var map; function trace(message) { if (typeof console != 'undefined') { console.log(message); } } up206b.initialize = function() { var latlng = new google.maps.LatLng(52.136436, -0.460739); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } var geocoder = new google.maps.Geocoder(); var bounds = new google.maps.LatLngBounds(); $('#formcont form').submit(function(e){ var addresses = $('.address', this); addresses = [addresses.eq(0).val(), addresses.eq(1).val()]; addresses.forEach(function(address, refnum) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map, refnum); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); e.preventDefault(); }); jQuery(function($){ $('#removemarker').click(function(){ var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val(); if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ v.setMap(null); markers.splice(idx, 1); return false; } }); $o.remove(); bounds = new google.maps.LatLngBounds(); if(markers.length){ $.each(markers, function(i, v){ bounds.extend(v.position); }); map.fitBounds(bounds); } if(markers.length < 2){ map.setZoom(markers.length? 13 : 8); } }); $('#themarkers').change(function(){ this.title = this.options[this.options.selectedIndex].title; var i = this.value; if(!i){return;} $.each(markers, function(idx, v){ if(v.html === i){ map.setCenter(v.position); map.setZoom(10); return false; } }); }); $('#showall').click(function(){ $('#themarkers').get(0).selectedIndex = 0; if(!markers.length){ map.setCenter(new google.maps.LatLng(52.136436, -0.460739)); map.setZoom(13); return; } map.fitBounds(bounds); if(markers.length === 1){ map.setZoom(13); } }); }); </script> </head> <body onload="up206b.initialize()"> <div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px"> <h1 align="center">Map Search</h1> <div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" > <form > <br> Location 1 <input type="text" id="address"> <br> <br> Location 2 <input type="text" id="address2"> <br> <br> Reference <input type="text" id="reference"> <br> <br> <input type="button" value="Submit" onClick="up206b.geocode()"> </form> </div> <div id="menu" style=" position: absolute; margin: 45px 89px;" > <select id="counties" > <option value="">Select County</option> <option value="bedfordshire">Bedfordshire</option> <option value="buckinghamshire">Buckinghamshire</option> <option value="cambridgeshire">Cambridgeshire</option> <option value="hertfordshire">Hertfordshire</option> <option value="northamptonshire">Northamptonshire</option> </select> </div> <script type="text/javascript"> $("#counties").on("change",function(){ var cnt=$(this).val(); var bounds = new google.maps.LatLngBounds(); switch(cnt){ case "bedfordshire": bounds.extend(new google.maps.LatLng( 52.22, -0.41)); bounds.extend(new google.maps.LatLng(51.8797, -0.4176)); break; case "buckinghamshire": bounds.extend(new google.maps.LatLng(52.18, -0.83)); bounds.extend(new google.maps.LatLng(51.9206978, -0.6529431)); break; case "cambridgeshire": bounds.extend(new google.maps.LatLng(52.29, -0.13)); bounds.extend(new google.maps.LatLng(52.082174, -0.029477)); break; case "hertfordshire": bounds.extend(new google.maps.LatLng(52.082174, -0.029477)); bounds.extend(new google.maps.LatLng(51.8031689, -0.208661)); break; case "northamptonshire": bounds.extend(new google.maps.LatLng(52.492298, -0.684233 )); bounds.extend(new google.maps.LatLng(52.09, -1.03)); break; } map.fitBounds(bounds); }) </script> </div> <div id="map_canvas" style="height: 500px; width: 500px; float:right; margin:20px 75px;"></div> <div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" > <input type="button" value="Assign"> </div> <div id="menu2" style="position: absolute; right: 200px; top: 450px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option> </select><br> <input type="button" id="showall" title="Or Reset if None" value="Show All"><br> <input type="button" id="removemarker" value="Remove Marker"></div> </body> </html>
  17. Hi How can I change the code that when the counter get to 30 seconds he will stop and start to count again..? This is the script: (function($){ // Number of seconds in every time division var days = 24*60*60, hours = 60*60, minutes = 60; // Creating the plugin $.fn.countup = function(prop){ var options = $.extend({ callback : function(){}, start : new Date() },prop); var passed = 0, d, h, m, s, positions; // Initialize the plugin init(this, options); positions = this.find('.position'); (function tick(){ passed = Math.floor((new Date() - options.start) / 1000); // Number of days passed d = Math.floor(passed / days); updateDuo(0, 1, d); passed -= d*days; // Number of hours left h = Math.floor(passed / hours); updateDuo(2, 3, h); passed -= h*hours; // Number of minutes left m = Math.floor(passed / minutes); updateDuo(4, 5, m); passed -= m*minutes; // Number of seconds left s = passed; updateDuo(6, 7, s); // Calling an optional user supplied callback options.callback(d, h, m, s); // Scheduling another call of this function in 1s setTimeout(tick, 1000); })(); // This function updates two digit positions at once function updateDuo(minor,major,value){ switchDigit(positions.eq(minor),Math.floor(value/10)%10); switchDigit(positions.eq(major),value%10); } return this; }; function init(elem, options){ elem.addClass('countdownHolder'); // Creating the markup inside the container $.each(['Days','Hours','Minutes','Seconds'],function(i){ $('<span class="count'+this+'">').html( '<span class="position">\ <span class="digit static">0</span>\ </span>\ <span class="position">\ <span class="digit static">0</span>\ </span>' ).appendTo(elem); if(this!="Seconds"){ elem.append('<span class="countDiv countDiv'+i+'"></span>'); } }); } // Creates an animated transition between the two numbers function switchDigit(position,number){ var digit = position.find('.digit') if(digit.is(':animated')){ return false; } if(position.data('digit') == number){ // We are already showing this number return false; } position.data('digit', number); var replacement = $('<span>',{ 'class':'digit', css:{ top:'-2.1em', opacity:0 }, html:number }); // The .static class is added when the animation // completes. This makes it run smoother. digit .before(replacement) .removeClass('static') .animate({top:'2.5em',opacity:0},'fast',function(){ digit.remove(); }) replacement .delay(100) .animate({top:0,opacity:1},'fast',function(){ replacement.addClass('static'); }); } })(jQuery);
  18. Let's pretend, there's a <div> on a page. There's a usual HTML form inside it that sends information to another php-file. By default, the visibility of the div is hidden, and the click on the button makes it visible. The question is how to close the form (i.e. hide the div) using a button or <a> element on the div, WITHOUT the sending data to php-file. In other words, how to close this <div> as if it is usual popup-window, without changes?
  19. Hi all, I have created a static web site on our company network. It is not exposed to the internet. They are pure HTML - no CSS or scripting so far. I meant for it to be very simple cause I was very limited by time. But, apparently, a search mechanism is required. I found the google and other auto creators on the web. But they require ,as far as I understood, to set an internet web URL and do not support internal sites. whereas my urls domain is in the form of: 192.168.4.xxx/something.htm So, do you know a solution I can use? a free component or a javascript I can use? Thanks!
  20. Hi, I am using express framework form to get inputs from user and sending it as email by using node mailer. However i am unable to receive the image and system type (Combo box).I am new to node.kindly help. ### My HTML code ``` <div class="container"> <p style="font-size:24px;">ONLINE SUPPORT REQUEST</p> <hr size="2%;"width="50%;"> <form role="form" name="myForm" onsubmit="return(validate());" action="http://127.0.0.1:8081/process_post" method="POST" > <div class="form-group"> <label for="name">What is your name?</label> <input type="text" class="form-control" id="text" name="fname" placeholder="name"> </div> <div class="form-group"> <label for="cname">What is your company name?</label> <input type="text" class="form-control" id="text" name="cname" placeholder="company name"> </div> <div class="form-group"> <label for="email">What is your email address?</label> <input type="email" class="form-control" id="email" name="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="phone">What is your phone number?</label> <input type="text" class="form-control" id="text" name="phone" placeholder=" phone number with area code"> </div> <div class="form-group"> <label for="one">Is this an emergency? </label> <input type="radio" class="form-control" id="text" name="emergency" value="No"> NO <input type="radio" class="form-control" id="text" name="emergency" value="Yes"> YES </div> <div class="form-group"> <label for="one">Do you require a phone call when we begin working on your ticket? </label> <input type="radio" class="form-control" id="text" name="phonecall" value="No"> NO <input type="radio" class="form-control" id="text" name="phonecall" value="Yes"> YES </div> <div class="form-group"> <label for="combo" name="systemtype"> What is your system platform</label> <br> <select> <option value="volvo">Microsoft Windows</option> <option value="saab">Mac OS X</option> <option value="opel">Linux</option> <option value="audi">IOS</option> <option value="5">Android</option> <option value="6">Others</option> </select> </div> <div class="form-group"> <label for="uploadfile"> Please attach a screenshot if applicable.</label> <input type="file" class="form-control" id="text" name="attachment" size="50"> <br> <input type="submit" value="Upload File" /> </div> <div class="form-group"> <label for="name">What is the subject of your support request?</label> <input type="text" class="form-control" id="text" name="supportrequest" placeholder="suport subject"> </div> <div class="form-group"> <label for="comment">Please describe the support issue in detail </label> <textarea class="form-control" rows="5" id="comment" name="urcomments"></textarea> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <br> ``` ### My server Code ```js var express = require('express'); var app = express(); var fs = require("fs"); var bodyParser = require('body-parser'); var multer = require('multer'); // Create application/x-www-form-urlencoded parser var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(express.static('public')); var upload = multer({ dest: './uploads' }); app.get('/client-support.htm', function (req, res) { res.sendFile( __dirname + "/" + "client-support.htm" ); }) app.post('/process_post', urlencodedParser, function (req, res) { // Prepare output in JSON format response = { fname:req.body.fname, cname:req.body.cname, email:req.body.email, phone:req.body.phone, emergency:req.body.emergency, phonecall:req.body.phonecall, systemtype:req.body.systemtype, attachment:req.body.attachment, supportrequest:req.body.supportrequest, urcomments:req.body.urcomments }; console.log(response); res.end(JSON.stringify(response)); console.log(req.files.file.name); console.log(req.files.file.path); console.log(req.files.file.type); var file = __dirname + "/" + req.files.file.name; fs.readFile( req.files.file.path, function (err, data) { fs.writeFile(file, data, function (err) { if( err ){ console.log( err ); }else{ response = { message:'File uploaded successfully', filename:req.files.file.name }; } console.log( response ); res.end( JSON.stringify( response ) ); }); }); //sudan file upload edit end //sudan edited node mailer code below var nodemailer = require('nodemailer'); // create reusable transporter object using the default SMTP transport // setup e-mail data with unicode symbols var mailOptions = { from: 'xxxxxxxx.com', // sender address to: 'xxxxxxxxx.com', // list of receivers subject: 'Client Support Page - Client Details', // Subject line text: 'you have a new submission with folowwing details....Name:'+req.body.fname+'cname:'+req.body.cname+'Email:'+req.body.email+'Phone:'+req.body.phone+'emergency:'+req.body.emergency+'phonecall:'+req.body.phonecall+'systemtype:'+req.body.systemtype+'attachment:'+req.body.attachment+'supportrequest:'+req.body.supportrequest+'urcomments:'+req.body.urcomments, // plaintext body html: '<table border="1" style="width:100%"><tr style="background-color:#373737;color:#ffffff;"><td><b>DETAILS LIST</b></td><td><b>CLIENT DETAILS</b></td></tr><tr style="background-color: #eee;"><td><b>Name:</b></td><td>'+req.body.fname+'</td></tr><tr><td><b>Email:</b></td><td>'+req.body.email+'</td></tr><tr style="background-color: #eee;"><td><b>Phone:</b></td><td>'+req.body.phone+'</td></tr><tr><td><b>emergency:</b></td><td>'+req.body.emergency+' </td></tr><tr style="background-color: #eee;"><td><b>phonecall:</b></td><td>'+ req.body.phonecall +' </td> </tr><tr><td><b>systemtype:</b></td><td>'+req.body.systemtype +'</td></tr><tr style="background-color: #eee;"><td><b>attachment:</b></td><td>'+req.body.attachment +' </td></tr><tr><td><b>supportrequest:</b></td><td>'+ req.body.supportrequest +' </td></tr></table>'// html body }; // send mail with defined transport object transporter.sendMail(mailOptions, function(error, info){ if(error){ return console.log(error); } console.log('Message sent: ' + info.response); }); }) var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port })
  21. I am trying to allow a user to input their own info in to their place make, say a reference number for example, but am struggling to do so. I believe the way for this is a regular counter loop, but i am not sure how and where to put it and even if that is the right thing to do. Can anyone help me with this please. The code below is what I have done so far. <!DOCTYPE html> <html> <head> <style type="text/css"> #supplementwindow { display: none; position: absolute; left: 10px; top: 10px; } </style> <!-- Google Maps and Places API --> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var markers = []; function createMarker(latlng, html, map) { var infowindow = new google.maps.InfoWindow({ content: html }); var marker = new google.maps.Marker({ map: map, position: latlng }); marker.addListener('mouseover', function() { infowindow.open(map, this); $('#supplementwindow').html(latlng + '<br>' + html).fadeIn(); }); marker.addListener('mouseout', function() { infowindow.close(); $('#supplementwindow').fadeOut(); }); markers.push(marker); } //declare namespace var up206b = {}; //declare map var map; function trace(message) { if (typeof console != 'undefined') { console.log(message); } } up206b.initialize = function() { var latlng = new google.maps.LatLng(52.136436, -0.460739); var myOptions = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); up206b.geocode(); } var geocoder = new google.maps.Geocoder(); up206b.geocode = function() { for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var bounds = new google.maps.LatLngBounds(); var addresses = [$('#address').val(), $('#address2').val()]; addresses.forEach(function(address) { if (address) { geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); createMarker(results[0].geometry.location, address, map); bounds.extend(results[0].geometry.location); map.fitBounds(bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); } }); } </script> </head> <body onload="up206b.initialize()"> <div style="top: 0; right: 0; width:380px; height: 500px; float:right; padding-left:10px; padding-right:10px;"> <h1 align="center">Map Search</h1> <div style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" > <form > <br> Location 1 <input type="text" id="address"> <br> <br> Location 2 <input type="text" id="address2"> <br> <br> <input type="button" value="Submit" onClick="up206b.geocode()"> </form> </div> </div> <div id="map_canvas" style="height: 500px; width: 500px; float:right"></div> <div id="supplementwindow"></div> </body> </html>
  22. I came across a very odd issue in a project and hope someone here would have some insight into WHY this is happening... Have googled for days and can't find this issue anywhere, but I find it hard to believe no one has come across it before... We have a webpage (asp) which can result in a dynamic length, and we need to find out what the length of any particular presentation of this page is. Normally, this would be very simple by using the onload body.scrollHeight value. In fact, when the page is loaded in a pop-up using window.open, the value of the scrollHeight is accurate. If we print the page, we can convert to mm using the formula sH / 96 *254 adjusting for a 96dpi resolution and 254mm/inch. The value in this formula is spot on every single time, accurate to within 1mm. BUT... when the exact same page is loaded using the window.showModalDialog method, the scrollHeight values reported are different - and not in any mathematically consistent way. It is the same page and should have the same body.scrollHeight onload!! Here are three examples of actual measured page length compared to the loading method and resulting scrollHeight: measurement sH .open method sH .showModal Dialog method 952mm 360 px 344 px 1302mm 490 px 493 px 1682mm 661 px 637 px BOTH methods are being called without any menus, scroll, or other adornment. The browser is IE in all cases, with the same printer for measured output of course. The ONLY difference in the reported values is coming from the method being used to load the page. Needless to say, this is driving me nuts :-). Anyone have any ideas??? Thanks!
  23. Hi I have an absolute div on my html page. my requirement is when i click on the rest of the page (other than the absolute div) the div's display should become none. I mean the div should not be displayed. How can i achieve this? any simple solution? Please help.
  24. Hello, Having some issues with this Given http://codepen.io/caim/pen/pggZOx I'm trying to replace the first column from input to select dropdown but having trouble figuring out how to read the data for each cell. It was working fine with an input and normal td but now the select entered the picture and it's skipping one column. The day drop-downs are for newly added rows currently. This is how I'm trying to read the data, maybe I'm missing something essential here $BTN.click(function () { var $rows = $TABLE.find('tr:not(:hidden)'); var $tds = $TABLE.find('td:not(:hidden)'); var headers = []; var data = []; // Get the headers (add special header logic here) $($rows.shift()).find('th:not(:empty)').each(function () { headers.push($(this).text().toLowerCase()); }); // Turn all existing rows into a loopable array $rows.each(function () { var $td = $(this).find('td'); var $td2 = $td.find('input'); var $td3 = $td.find('select'); var h2 = {}; // Use the headers from earlier to name our hash keys headers.forEach(function (header, i) { // h2[header] = $td.eq(i).text(); //the dropdown value -> //console.log($td3.eq(i).val()); h2[header] = $td3.eq(i).val(); if ($td3.eq(i).val() === undefined){ // it's not dropdown ? read it normaly.. console.log(i); h2[header] = ($td.eq(i).text() == '') ? $td2.eq(i).val() : $td.eq(i).text(); } //console.log(h2[header]); }); data.push(h2); }); // Output the result $EXPORT.text(JSON.stringify(data)); });
  25. http://craft.minestatus.co MineStatus - Minecraft Servers MineStatus is a brand new modern minecraft server list. Personal Server Analytics Votifier Voting Sharing Profiles Comments Blogs I have recently created my second site. Tell me what you think.
×
×
  • Create New...