How to Programming with Html5

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;...

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)...

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...

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...

Getting input hidden value with JQuery

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); ...

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...

HTML5 & CSS - 2-Sided Box Shadow

javascript,jquery,angularjs,html5

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....

Why WebGL slower than Canvas?

javascript,html5,canvas,webgl

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...

HTML5 video/audio player control play & pause with angular Js

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 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(); });...

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...

PHP mysql field 1 plus field 2 * 5 wrong result [closed]

php,html,mysql,database,html5

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,',','.'); ?> ...

Determine shape drawn on canvas from stored coordinates in an array

javascript,html5,canvas

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;...

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...

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) *...

customize the handler of input range

css,html5,css3

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 secure are HTML5 forms?

html5

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.

Custom Element extend from input type range

jquery,html5,actionscript-3

HTMLElement doesn't provide you with a value property, but HTMLInputElement does: var fooProt = Object.create(HTMLInputElement.prototype); ...

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...

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...

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....

Saving image to localstorage - canvas

javascript,html5,html5-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...

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...

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...

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",...

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> ...

How can assign a data-group value to an html element created in C#?

c#,jquery,html5

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...

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...

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....

How create shadow effect for div [duplicate]

html,css,html5,css3

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....

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....

HTML - How to properly mark a phrase

html5,semantics

<blockquote> doesn't demand a cite, it's optional. Don't overthink it. <blockquote> without cite is what you're looking for.

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...

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...

HTML5, geolocation in real time with marker

javascript,html5,google-maps-api-3,marker

Insert a button for refresh and solve the problem..

Set the margin-top of a div, relative to screen resolution

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...

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...

how to add a message (memo / sticky note) on (top of existing) html page

html5,forms,twitter-bootstrap,bootstrap,html-form

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...

How to change my table based on screen size?

javascript,html,css,html5

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...

Parent container have children with different width

css,html5,css3,jquery-ui

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) } ...

Animate dots or points from an offset to their actual position

jquery,html,css,html5,svg

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:...

how to define html5 svg polygon points to create graphics

html,html5,svg

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)....

Redraw text over clearRect HTML5 Canvas

jquery,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...

How can I cache my website in the user's browser?

javascript,html5,caching

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...

maxlength not working in html form input field with bootstrap

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...

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);...

how to center big image in a small div?

jquery,css,html5,css3

.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...

Regex not working in HTML5 pattern

regex,html5

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+"...

Having 4 images in each row in a div

html,css,html5,css3

#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...

Uniquely identify an upload

javascript,html5,fabricjs

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);...

How can i select closest input value on href click

jquery,ajax,html5

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...

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]...

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...

How to convert date into timeago

javascript,html5,time,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....

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...

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:...

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...

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...

PHP Form with Button

javascript,php,html5

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...

What is the semantic HTML tag to display for URLs that are not links?

html,html5,url,tags,semantics

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;...

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...

Teechart HTML5, line color and thickness

javascript,html5,teechart

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"; ...

html query string with blackberry

javascript,html5,cordova

yes it does work, I tried with a bb device (on the same network) using 2 html pages in my localhost.

Should a heading “Navigation” be above a following
element, or inside it?

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...

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; } ...

Tagging values in HTML document for automated extraction

html,xml,html5

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: <!--...

jQuery offset issues with div overflow: scroll

javascript,html5,canvas,drawimage

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...

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...

Using Aria to make a div table accessible

html,html5,wai-aria

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">...

DrawImage is not drawing in a canvas

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...

Swap nav and div vertically uing CSS only

html,css,html5,css3

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"...

What is the use of HTML5 pushState in Backbone History Start method

javascript,html5,backbone.js

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...

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"...

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).

Creating a section with video as background HTML5

javascript,css,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;...

Is there a way to make div render from right to left HTML