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> ...
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...
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).
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...
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...
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...
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...
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...
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....
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.
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 to handle form submission in HTML5 + Thymeleaf
html5,forms,spring-boot,thymeleaf
I believe there could be 2 parts to your question and I will try to answer both. First on the form itself how would you get to a child_id to display fields from another object on the form. Since your Person class does not have a Child relationship you would...
HTML Mandarin isnt working
Add the following meta definition inside your head tag: <meta charset="utf-8" /> ...
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...
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)....
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...
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...
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) *...
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....
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 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....
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....
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:...
can we use html button onclick event inside php?
Just change the name select to someother name like myselect and it should work. You should not have the function name as select This should work for you <?php echo"<td width=14% align=center><input type=button value=Export onclick=myselect() /></td>"; ?> <script> function myselect() { console.log('Clicked'); } </script> ...
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...
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....
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...
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;...
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...
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);...
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">...
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...
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",...
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);...
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...
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...
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;...
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...
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 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(); });...
add multiple rows in one column using angular ng-repeat
javascript,json,angularjs,html5
Use ng-repeat-start and ng-repeat-end. For example: <tr ng-repeat-start="user in users"> <td rowspan="{{user.subjects.length+1}}">{{user.id}}</td> </tr> <tr ng-repeat-end ng-repeat="subject in user.subjects"> <td>S{{subject.id}}</td> </tr> Here is a full example: var app = angular.module('MyApp', []); app.controller('MyController', function ($scope) { var users = [{ id: 1, subjects: [{ id: 1, name: "eng" }, { id: 2,...
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...
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) } ...
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...
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...
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...
mouse over of lower z-index is called even when its hidden behind the more z-index element
javascript,css,html5,google-maps,google-maps-markers
Please note as per the stacking order of the CSS -first the context is printed -then the element with position and negative z-index are printed -then element without position are printed -after that the element with 0 or auto z-index are printed -the all element with postive z-index and position...
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...
How to delete an element by using ul li:before and clicking on the content?
So the reason why the hole part is clickable is, because the X is part of the whole LI-Tag and you have no access to the :before and :after pseudo-element. You can use following technique: Access the css ":after" selector with jQuery Or you can just put another element in...
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); ...
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...
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...
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...
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...
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> ...
Html5 input type number formatting
android,iphone,html5,windows-phone-8,input
When retrieving the value with jquery it is returned with a . decimal separator. Try this: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="number" name="myNum" id="myNum"> <button id="submit">Submit</button> <hr/> <code></code> <script> $("#submit").on("click",function() { var numericValue = $("#myNum").val();...
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....
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...
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,',','.'); ?> ...
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...
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.
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...
HTML5, geolocation in real time with marker
javascript,html5,google-maps-api-3,marker
Insert a button for refresh and solve the problem..
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...
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...
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+"...
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]...
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...
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 =...
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...
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...
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...
Set all selects lists by class
You just need to use .val() method. No need to use loop. $(".contacts").val(selected_values); DEMO...
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...
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"...
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: <!--...
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...
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/...
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...
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...
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...
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...
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.
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 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...
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...
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 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;...
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"...
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...
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....
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;...