Building a digital signage platform in HTML5
CSS gives you a lot of different metrics for sizing things. The most obvious way to scale relative to an existing size (such as the size of the body itself) is through percentages. Your left column is going to be about 33% width, and your right column should be left...
how to add a message (memo / sticky note) on (top of existing) html page
javascript,jquery,html,css,html5
Check out this jsfiddle for a simple example https://jsfiddle.net/traso7o7/ position: absolute; is main thing you need to put your message on the top...
What is the semantic HTML tag to display for URLs that are not links?
If I understand you correctly, you want the url to be a link but also display as a url. To do this put the url in the a tag twice, like so: This can then be style as desired by the destination page. <style> a { color: blue; text-decoration: underline;...
Javascript form sum of form inputs
javascript,jquery,html,html5,forms
You may find it easier to identify the issues you are having if you separate out each part of the process. If you store all of the elements you are going to be using at the beginning you will make your calculations easier to read plus avoid unnecessary DOM calls....
jQuery & CSS only load after many refreshes
jquery,css,html5,internet-explorer,internet-explorer-11
I only get the problem when IE pays attention to the X-UA tag in your header to force IE8 standards. A bunch of JavaScript fails to load and the rest of the page falls over. If I ignore this tag and render with Edge using F12 the page always works...
HTML5 & CSS - 2-Sided Box Shadow
Not sure what you mean by a four sided or a two sided box shadow. A box shadow consists of a color, x offset, y offset, blur radius and a spread radius. So box-shadow:red 2px 2px 0px 0px; would only show a red shadow on 2 sides of the element....
How create shadow effect for div [duplicate]
Your only option is to use multiple box-shadows. However, there are some restrictions: You must use a semi-opaque colour, because they will show through each other. You have to manually specify each box-shadow property, but you can do it programatically with either JS, or with a CSS pre-processing language (e.g....
DrawImage is not drawing in a canvas
javascript,html5,canvas,drawimage
In your function function loadImg() { var loadTile = new Image(); loadTile.src = 'Top/x+y+/' + tileToLoad + ".png"; loadTile.onload = function() { ctx.drawImage(loadTile, tileToLoadX, tileToLoadY); }; console.log("Successfully loaded tile " + tileToLoad); }; The variables tileToLoad, tileToLoadX and tileToLoadY belong to the function imageSearch() as local variables and would be...
Retrive geolocation in real time (HTML5)
javascript,html5,google-maps,gps,geolocation
setInterval(function, delay) or (function(){ // do some stuff setTimeout(arguments.callee, 60000); })(); The second aproach guarantees, that the next call is not made before your code was executed. The final code will depends on the choosen aproach. could be var map; var geocoder; var delay = 1000; function initialize() { var...
how can I use 'localStorage' to store an entire page?
Kinda crazy but you could do it like so: var htmlContents = document.documentElement.innerHTML; localStorage.setItem('myBook', JSON.stringify(htmlContents )); From there you can call it up whenever you like.. localStorage.getItem('myBook'); It would be better of course to get the actually book contents of course instead of the entire page! Also as for what...
How can i select closest input value on href click
Did you tried using jQuery parents(): $(".change").click(function(e){ e.preventDefault(); var qty = $(this).parents().eq(1).find('input').val(); var href = $(this).attr('href'); alert (qty); }); jsfiddle...
enable a disabled select when choose a value in another select tag
javascript,html,html5,disabled-input
JavaScript Version: document.getElementById("one").onchange = function () { document.getElementById("two").setAttribute("disabled", "disabled"); if (this.value == 'car') document.getElementById("two").removeAttribute("disabled"); }; <select id="one"> <option value="car">car</option> <option value="truck">truck</option> <option value="moto">moto</option> <option value="none">none</option> </select> <select disabled id="two"> <option...
Why WebGL slower than Canvas?
The short answer is that webgl/opengl is not meant for drawing a SINGLE quad at a time. GPUs are designed to be massively parallel and thus to gain the most out of webgl you have to draw in batches. You should be comparing drawing 10k images in canvas versus drawing...
How to Detect that user have selected date from html input date [closed]
Why can't we just use the HTML5 required? <input type="date" name="date" required> ...
Trying to get my home button image directly to the left of my logout button
Change the order of anchor tags in the html. try <h1>Add a New Subdiv file <a href="/logout" class="LogoutButton"> Logout </a> <a href="/main" class="HomeButton"> <img src="../../../../Pictures/dwelling1.png" height="50"/> </a> </h1> Snippet: .HomeButton { text-decoration: none; float: right; display: inline-block; } .LogoutButton { text-align: center; width: 10%; float: right; background-color: #ffec64; border: 2px...
PHP Form with Button
Load latest version of jQuery: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> HTML code: <form> <button type="button" class="formLoader">Click button</button> <div id="formContentToLoad"></div> </form> jQuery code: <script type="text/javascript"> $(function(){ $(".formLoader").click(function(){ $("#formContentToLoad").load("scriptToRun.php"); }); }); </script> Whatever markup you need to update in the form, can be put into...
JSON without keynames to ul li tag with jQuery [on hold]
Just use for in order to loop through the object and append the li elements data = { "408": "NameSurname1", "415": "NameSurname2" } for (i in data) { $('ol').append('<li><p>' + i + '</p><p>' + data[i] + '</p></li>'); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ol></ol> ...
Should a heading “Navigation” be above a following
html,html5,accessibility,semantic-markup
nav is a sectioning element and as such, if you have a heading that describes the navigation it should be inside: <nav> <h1>Navigation</h1> <ul> <li>...</li> </ul> </nav> Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the nav element. The W3C HTML5 spec provides a...
Parent container have children with different width
Use calc() but you need to account for borders etc so probably needs to be greater than 20px. .custom-combobox-input { background-color:green !important; margin: 0; background:initial; width: calc(100% - 20px) } ...
Redraw text over clearRect HTML5 Canvas
One possible solution is that you move all your clearRect()'s out from the else-statements to the top and clear it from the start. Then you add text in a second step. That way you can also group the if-statements together to form a if-else if relationship (crappy explanation, just look...
HTML5, geolocation in real time with marker
javascript,html5,google-maps-api-3,marker
Insert a button for refresh and solve the problem..
Swap nav and div vertically uing CSS only
The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...
JSON.parse parsing a string into string
That's because JSON.parse is able to successfully parse that input, it will parse it as a string and a string is what the return result will be. Check out the documentation and look at the examples. This one specifically: JSON.parse('"foo"'); // "foo" And in regards to achieving your objective, you...
Dropdown menu not working (tab focus)
html,css,html5,twitter-bootstrap,bootstrap
I'm not 100% sure I understand your question but, if you want the dropdown to toggle when you tab onto it, you can do the following using javascript, $('.dropdown-toggle').keyup(function(e) { if (e.keyCode == 9) { $(this).dropdown('toggle'); } }); Here's an example, http://jsfiddle.net/p73vc8Lv/3/...
boostrap & Normalize.css: spacing problems
As far as I see you have this style .wrapper { border: 1px solid white; } Try to remove the border style. It should help you....
Set the margin-top of a div, relative to screen resolution
javascript,jquery,html,css,html5
Use vh: iewport-percentage lengths defined a length relatively to the size of viewport, that is the visible portion of the document. Only Gecko-based browsers are updating the viewport values dynamically, when the size of the viewport is modified (by modifying the size of the window on a desktop computer or...
Show only the requested forms using JS
javascript,jquery,html,html5,forms
Keep both the forms hidden at first and give a ID to each <a> and also to the <form> Then $("#id-of-btn1").click(function(){ $("#form-1").toggle(); }); and $("#id-of-btn2").click(function(){ $("#form-2").toggle(); }); EDIT: This could be a solution to make it completely independent of ID/Classes. If you give a class to div containing all the...
Can the ouput of a HTML5 FileReader.readAsDataURL be used to reference fonts?
javascript,html5,fonts,filereader
Short answer: yes. Longer answer: yes, but you want to re-serve it with the real mime type, not "octet stream" mime type. It'll probably still work, but the browser will complain that the resource had the wrong mime type, and if the site you serve it on uses CSP (which...
Common CSS in all HTML Files [on hold]
If you are not using any server side languages with your HTML, then it is not possible for you to include another external JavaScript file to your HTML page, unless it is something like PHP, where you do: <?php include "header.inc"; ?> If you are using pure HTML, you need...
How to make my nav bar responsive
This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....
How to filter values in Multiple selection using textbox value
javascript,jquery,html5,drop-down-menu,autocomplete
The .filter(function) jQuery method can be used to find the target option elements and show them as follows. The JavaScript method .toLowerCase() is used to make the search case-insensitive: $('#filterMultipleSelection').on('input', function() { var val = this.value.toLowerCase(); $('#uniqueCarNames > option').hide() .filter(function() { return this.value.toLowerCase().indexOf( val ) > -1; }) .show(); });...
Getting input hidden value with JQuery
javascript,jquery,html,css,html5
You need to reference the actual input element, not the containing element. This will find the input element if it is hidden using type="hidden", using css or using jQuery's hide() var global_id = $("td:first input:hidden:first", this).val(); console.log("value=" + global_id); ...
How to change my table based on screen size?
No, definitely don't use Javascript for email sending, as most clients fully disable it. You wouldn't need Javascript at all even if you were designing your table for web browsers only. All your problems can be solved with well applied media queries, if you wanna spend a little time doing...
How to scale an image down to fit inside a canvas, without distorting the image?
1) Determine which dimension is the one which exceeds the size of the window you want to put the image in. If both exceed the size calculate both factors and use the largest: width_factor = imagewidth / allowable_width height_factor = imageheight / allowable_height 2) Scale both the height and the...
validation of AngularJS direcrives
angularjs,html5,html-validation
data- prefix can be used by any directive and the underlying directive name normalization process takes care of matching the directive attribute declaration with the directive implementation. More details about the normalization process is available in the directive user guide under section "Matching Directives". Hence adding data- prefix to to...
html query string with blackberry
yes it does work, I tried with a bb device (on the same network) using 2 html pages in my localhost.
HTML5 video/audio player control play & pause with angular Js
javascript,jquery,angularjs,html5
https://github.com/2fdevs/videogular creating your own custom directive can does the job for you (Preferred and reusable), The simplest way is using angular.element and selecting the required video element from the DOM using its functionalities. <video autoplay="autoplay" preload="auto" ng-click="pauseOrPlay()"> <source src="{{url }}" type="video/mp4" /> </video> //controller function myCtrl($scope) { $scope.url =...
how to center big image in a small div?
.my-size { width:264px; height:264px; border:solid 1px #e1e1e1; } .full-bg { background: url(https://drscdn.500px.org/photo/97054699/m=2048_k=1_a=1/5bd4a9ac205fef91437ee596edda9362) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } <div class='my-size full-bg'></div> Why not just set the image as the background and use background-size:cover to fill the space like the example here or below...
Jekyll and Liquid for-loop
html5,for-loop,navigation,jekyll,liquid
You're comparing two counter that are not working the same way. {% assign imgIndex = {{forloop.index0}} This will count from 0 to array.size-1 {% assign naviIndex = {{forloop.index}} This will count from 1 to array.size As your not in the same "time zone", for the first image you have imgIndex...
How can assign a data-group value to an html element created in C#?
First off, please notice that DataGroup or data-group is nothing predefined, it's an HTML5 data-* attribute which can be named anything you like. Since you are working with ASP.NET and WebForms, you can use the Attributes collection on your TextBox element like this: boxRequesterName.Attributes.Add("data-group", "1"); See on MSDN WebControl.Attributes and...
CSS drop down navigation
css,html5,css3,drop-down-menu,navigation
You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...
jQuery offset issues with div overflow: scroll
javascript,jquery,html,css,html5
Here's a board for you guys to play with as an example. Also, my stab at the jquery is included as well. Basically, it finds where you clicked, calculated the px distance in float form, and animates the soldier to slide to his new position: var black = '<td style="background-color:black"><div...
How to display special chars in html [duplicate]
php,html5,encoding,character-encoding
I think your problem might be the encoding of the file. Open it in notepad++ and change the to UTF-8 (without bom).
Custom Element extend from input type range
HTMLElement doesn't provide you with a value property, but HTMLInputElement does: var fooProt = Object.create(HTMLInputElement.prototype); ...
Load javascript in consecutive order after browser load event
javascript,jquery,html,html5,browser
You're not the first to have this problem, thankfully. There's a lot of difficult solutions around this problem, including using a module loader as suggested in the comment (which I agree is the best long term solution, because they account for more browsers and flexibility, but it's a lot to...
PHP mysql field 1 plus field 2 * 5 wrong result [closed]
You need to multiply earning per unit (($product['sellingprice'] - $product['cost'])) by the amount of stock ($product['stock']): <?php echo number_format(($product['sellingprice'] - $product['cost']) * $product['stock'],0,',','.'); ?> ...
How secure are HTML5 forms?
Yes, any HTML can be modified with a basic page inspector. You'll need to include server-side validation to make sure they're not messing with your page.
javascript manipulating html elements in a php foreach
javascript,php,html,html5,loops
To give to each button a different id you can do this way: <?php $i = 1; foreach($queryResult as $res) { ?> // output all table columns <form onsubmit="return javascriptFunction(); " method="post"> <button id="element-<?= $i ?>">edit</button> </form> <?php $i++; } ?> For the second question: if you want to pass...
customize the handler of input range
Use the following to style the base: input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should...
how to define html5 svg polygon points to create graphics
The values are in pairs, each pair is an (x, y) co-ordinate of a polygon vertex. 200, 10 is 200 units away from the origin in the x direction (across) and 10 units in the y direction (down)....
change icon on collapse in Bootstrap 2.3 not in bootstrap 3
javascript,jquery,css,html5,twitter-bootstrap
Updated. Yes - the first pure CSS solution was not satisfactory. If you dare to add some javascript, you can do this : $('.accordion-group').on('show', function() { $(this).find('.accordion-toggle').removeClass('arrow-down').addClass('arrow-up'); }); $('.accordion-group').on('hide', function() { $(this).find('.accordion-toggle').removeClass('arrow-up').addClass('arrow-down'); }); It is using the bootstrap collapse hide / show events directly on the collapse sections. Still without...
CSS Style definition appears not to be respected when HTML 5 doctype is used
The problem is that div.topbar Should be div.topBar Because <div class="topBar"> is not <div class="topbar"> It is still being rendered in quirks mode for some reason but html5 mode wont render it. (Demo)...
Animate dots or points from an offset to their actual position
Using SVG You can use animateTransform like in the below snippet. Basically what is being done is that initially the circle elements, cx and cy (center points) are translated in the Y axis (by 100px) and they are slowly animated back into their original position. polyline { stroke: black; stroke-width:...
Creating a section with video as background HTML5
I used this as an example and modified your css. Example 1: Video as background of containing div In this example the video only plays as the background of the containing div, similar to lumosity.com: JSFIDDLE 1 #banner { position: relative; height:300px; width:100%; overflow: hidden; } #videobcg { position: absolute;...
HTML vs. JavaScript form validation [duplicate]
javascript,jquery,html,html5,validation
but what if the user has js turned off? The same could be said for HTML5 - what if the user is using a browser which doesn't support that? If you're wanting to process data on the server-side you should always perform server-side validation. Front-end validation is primarily used...
HTML - How to properly mark a phrase
<blockquote> doesn't demand a cite, it's optional. Don't overthink it. <blockquote> without cite is what you're looking for.
Lock to diagonal movement
FabricJS does not have a native API hook to lock an object to follow along a diagonal line. You will have to listen for the object's :moving events and then manually reset its x & y position to keep it on the line. Here's a function that reports which [x,y]...
Place tables one under another forming columns
jquery,html,css,html5,css-tables
Using a library like http://masonry.desandro.com/ See http://jsfiddle.net/tnbqxqpg/1 var elem = document.querySelector('div'); var msnry = new Masonry(elem, { itemSelector: 'table', columnWidth: 200 }); <div> <table border="1"> ... </table> <table border="1"> ... </table> <table border="1"> ... </table> </div> ...
maxlength not working in html form input field with bootstrap
html5,forms,twitter-bootstrap,bootstrap,html-form
It is not bootstrap that are causing this. maxlength does only apply to <input>'s of type text, email, search, password, tel or url. See MDN. Thats why maxlength not works with your <input type="number" maxlength="2"> Proof of concept : text : <input type="text" maxlength="2"> number : <input type="number" maxlength="2"> here...
HTML & CSS - Full Screen Image
html,css,html5,google-chrome,website
I think you are asking about Parallax. Explore a bit on Parallax in Wiki and see some samples here...
What is the use of HTML5 pushState in Backbone History Start method
Including the pushState option when starting Backbone.history tells Backbone to use the HTML5 history API. Basically, this API lets you change the URL in the address bar without reloading the page (see more about it here). Without pushState, Backbone will use hashes (#) to change the URL, so it doesn't...
How to read all video type in a video tag
javascript,php,html5,video,codec
Please note that by far very few codecs are supported by browsers. You should have at least 2 versions of each video: ogg and mp4; if you can get webm as well, that'll be a bonus. mkv are not normally supported by any browser, especially ac3 encoding. Now, provided you...
More modern image maps?
Responsive SVG solution or classic image map After taking Paulie_D's comment about SVG into account, I wrote an alternative using SVG to the classic image map. Both work fine, but the SVG version clearly wins when it comes to responsiveness. Both versions have a connection between the anchors and the...
Determine shape drawn on canvas from stored coordinates in an array
Heres how i solved my problem finally :) var newLine = new myLine(startX, startY, endX, endY,type); myLines.push(newLine); function myLine(xStart, yStart, xEnd, yEnd,type) { this.xS = xStart; this.yS = yStart; this.xE = xEnd; this.yE = yEnd; this.type=type } And then looped through the array for (i = 0; i < myLines.length;...
Is there a way to make div render from right to left HTML
javascript,jquery,html,css,html5
Use float: right on divs: HTML <div id="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> CSS #container div { float: right; width: 100px; background: yellow; margin: 10px; } Demo...
Why does the box come out like this (padding/border/margin)?
html5,css3,border,margin,padding
By default, <code> elements have a display of inline (which is going to generate an element box for every one of the parts separated by <br>). Switching to display: block (code { display: block } in your CSS) or display: inline-block will mean creating just one element box for your...
Teechart HTML5, line color and thickness
Having a Line series: To modify the line thickness, change the series format.stroke.size property. Ie: Chart1.series.items[0].format.stroke.size=2; To modify the series color, change the series format.stroke.fill property. Ie: Chart1.series.items[0].format.stroke.fill="red"; ...
Having 4 images in each row in a div
#content img { width:25%; float:left; } You'll likely want to use a viewport tag (in your HTML head) <meta name="viewport" content="width=device-width, initial-scale=1"> So that you're able to use @media screen and (max-width: 768px) { } and change it to, for example #content img { width:50%; float:left; } when the images...
list checkboxes displayed horizontal
html,css,html5,twitter-bootstrap,css3
First thing is your mark-up is totally wrong! You cannot have <ul> inside <span>. You can have only <li> inside <ul>. To answer your query, it is just a simple CSS fix: .new-select { display: inline-block; } ...
How to convert date into timeago
My problem is that the result of datetime is [object Text] Well, yes, because you tell JavaScript to do that: timeTag.setAttribute("datetime",document.createTextNode(message.date)); Try timeTag.setAttribute("datetime", message.date); Attribute values are strings, whereas DOM nodes (including text nodes) are objects....
javascript select change field price with discount onchange [closed]
javascript,php,jquery,html,html5
here is a link to a jsfiddle if you would like to play with it yourself Using javascript and html only. This will update the textbox with the value selected onchange. By setting the 'onchange' attribute on the select tag, you register the 'updateInput()' function as a listener to the...
javascript onblur onMouseOver calculate tax and autofill form input
javascript,php,html,html5,forms
First add an ID to your elements (this makes referencing the elements with JS easier). Ex <input name="cost" type="text"> becomes <input name="cost" ID="cost" type="text"> You need to add a script tag to house the JS code like this <script> var taxPerc = .19; document.getElementById("cost").onblur = function(){ document.getElementById("costplustax").value = parseFloat(document.getElementById("cost").value) *...
Saving image to localstorage - canvas
If the height or width of the canvas is 0, the string "data:," is returned. This is most likely the cause for some images to fail to receive a proper dataUrl. Check your img elements and/or scripts to obtain and set the width and height of the canvas. The...
why i don't get return value javascript
javascript,jquery,html,json,html5
the first "A" in AJAX stands for "Asynchronous" that means, it is not executed right after it has been called. So you never get the value. Maybe you could first, get the os list and then output what you need, like this: function createCheckBoxPlatform(myDatas) { $.ajax({ url: "/QRCNew/GetOS", type: "post",...
Prevent bootstrap 3 tab from stacking when window is resized (made smaller)
html5,css3,twitter-bootstrap-3
Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...
Does localStorage.clear(); clear ALL from PC?
javascript,html5,local-storage
From the spec for clear: The clear() method must atomically cause the list associated with the object to be emptied of all key/value pairs, if there are any. If there are none, then the method must do nothing. In the above, "the object" in this context would be localStorage. What...
onended audio event firing without playing the audio
javascript,html5,audio,javascript-events
I've got it to work. <!DOCTYPE html> <html> <body> <script> var count=0; </script> <p>Press play and wait for the audio to end.</p> <audio id="myAudio" onended='IncrementCount()' controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <audio id="myAudio2" controls onended='IncrementCount()'> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3"...
Unwanted Space Between and
html,css,html5,whitespace,semantic-markup
Set display block on the image for fixing fitting issues. body { max-width: 960px; margin: 0 auto; font-size: 120%; } header, nav { margin: 0; padding: 0; border: 1px solid black; } img.mainpicture { width: 100%; display: block; } <header> <img class="mainpicture" src="//lorempicsum.com/futurama/960/200/2" alt="A picture" /> </header> <nav> Navigation area....
How can I make a DIV element Fixed but non-Scaleable?
As it is fixed it will not react to the parent div. So to fix it make the wrapper fixed instead that way you can center it and your content will adjust around the parent i.e wrapper. I made a new wrapper inside of your wrapper and called it navWrapper;...
Uniquely identify an upload
Try to wrap it as a Control? var uploadProgress = function(uploadObj, event) { // Do somthing about uploadObj } // Target maybe object or string, whatever you want var Uploader = function(target) { var xhr = new XMLHttpRequest(); var handler = uploadProgress.bind(this, target); xhr.upload.addEventListener("progress", handler, false); xhr.open("POST", target, true); xhr.send(f);...
Should I use a cite attribute, at its current state?
Yes, use cite, the semantic web can be ours today. Cite becomes more important the more people use it. If everyone used the attribute, developers could make some pretty awesome stuff. Using extra semantics such as these are also good for SEO. Even if Google does not currently look for...
Tagging values in HTML document for automated extraction
If you are using them as meta-documents and they are sent to the parser, then converted as HTML and as long as the converted HTMLs do not have any irrelevant tags, it is fine! So, if the following code: <requirement> THE REQUIREMENT HERE </requirement> Gets converted into something like: <!--...
How can I cache my website in the user's browser?
Reconsider using AppCache. Using it doesn't necessarily imply that your site will work offline. Basically, here are the steps that AppCache takes, regardless of the browser connection status: Asks the server for the manifest file. If the manifest file hasn't changed, it serves the local files. If the manifest file...
Angular get ng-model properties eg. minlength
javascript,html,angularjs,html5
Actually there is a feature request for this https://github.com/angular/angular.js/issues/9849 For getting validators you can use $error object, for example for minlength it will be something like form.$error.minlength[0].$name. But, there is no way to get exact value of this validator yet. See this issue: https://github.com/angular/angular.js/issues/11671. You need to implement ngModel directive...
Server side vs client side website
javascript,html,ajax,html5,seo
There is only one real SEO issue at stake here: content accessibility. Some search engines don't execute Javascript as part of crawling and indexing. So if your content cannot be accessed with a URL defined in a sitemap without using Javascript, then such content will not be indexed and ranked....
Regex not working in HTML5 pattern
The pattern attribute has to match the entire string. Assertions check for a match, but do not count towards the total match length. Changing the second assertion to \w+ will make the pattern match the entire string. You can also skip the implied ^, leaving you with just: <input pattern="(?!34)\w+"...
Using Aria to make a div table accessible
I don't know if this will actually work considering these roles are intended for real tables. Using an actual table would be a much better idea. Anyway, your roles could be improved. Looks like your columnheader context is wrong. The header row should use the row role: <div class="Heading" role="row">...
Spring Mobile apps to be deployed in emulator
javascript,android,html5,spring,spring-mvc
Since you're not actually developing a mobile app (which would be installed on the mobile device itself) but a web page that detects and supports mobile devices, you don't need an Android emulator. What you do need is a browser that allows emulating a mobile client - Chrome has a...
How can you drop an image from your desktop into an editor and move it around?
javascript,html5,contenteditable
You can set the caret from your mouse position. See Text selection in div(contenteditable) when double click Didn't try it on IE, but this seems to work on Chrome/Firefox: function userDidDrop(event) { event.preventDefault(); if (document.caretRangeFromPoint) { //Chrome range = document.caretRangeFromPoint(event.clientX, event.clientY); } else if (document.caretPositionFromPoint) {//Firefox rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);...
Sending input data to a javascript file
javascript,jquery,ajax,html5,send
You can "send" the input field value to main.js by passing the input field value as a parameter to a function in main.js. main.js: function mainjsfunction(inputFieldValue) { console.log(inputFieldValue); //do something with input field value } html: <form> <input class="inputField" type="text" required="required" pattern="[a-zA-Z]+" /> <input class="myButton" type="submit" value="Submit" /> </form> <script...
How to get a deleted element in a contenteditable div?
javascript,html,html5,javascript-events,html-select
If you’re interested in the deleted element and its properties, one way is to set a MutationObserver to track modifications to the DOM. Its callback provides changes and affected elements and other userful information. (new MutationObserver(function(mutations){ mutations.forEach(function(mutation){ if(mutation.type=='attributes') console.log('Element attributes may have changed, see record:',mutation); else if(mutation.type=='childList') console.log('Child nodes were...