public marks

PUBLIC MARKS from decembre with tag html

This year

FIR - DEV - Éxaminer et modifier le code HTML - Outils de développement | MDN

Recherche: À partir de Firefox 45, la boite de recherche de l'Inspecteur trouve les correspondances dans tout le markup du document ouvert, ainsi que dans toutes les frames. Pour commencer une recherche, il suffit de cliquer sur la boîte de recherche pour l'agrandir ou bien d'utiliser les raccourcis clavier Ctrl + F , ou Cmd + F sous Mac. Lors de la saisie, une pop-up d'autocomplétion affiche toutes les classes ou ID qui correspondent à la recherche en cours :

HTLM - REFERENCE - HTML Standard

(via)
HTML ← 4.5 Text-level semantics — Table of Contents — 4.7 Edits → 4.6 Links 4.6.1 Introduction 4.6.2 Links created by a and area elements 4.6.3 API for a and area elements 4.6.4 Following hyperlinks 4.6.5 Downloading resources 4.6.5.1 Hyperlink auditing 4.6.6 Link types 4.6.6.1 Link type "alternate" 4.6.6.2 Link type "author" 4.6.6.3 Link type "bookmark" 4.6.6.4 Link type "canonical" 4.6.6.5 Link type "dns-prefetch" 4.6.6.6 Link type "external" 4.6.6.7 Link type "help" 4.6.6.8 Link type "icon" 4.6.6.9 Link type "license" 4.6.6.10 Link type "nofollow" 4.6.6.11 Link type "noopener" 4.6.6.12 Link type "noreferrer" 4.6.6.13 Link type "pingback" 4.6.6.14 Link type "preconnect" 4.6.6.15 Link type "prefetch" 4.6.6.16 Link type "preload" 4.6.6.17 Link type "prerender" 4.6.6.18 Link type "search" 4.6.6.19 Link type "serviceworker" 4.6.6.20 Link type "stylesheet" 4.6.6.21 Link type "tag" 4.6.6.22 Sequential link types 4.6.6.22.1 Link type "next" 4.6.6.22.2 Link type "prev" 4.6.6.23 Other link types

html - Draggable div without jQuery UI - Stack Overflow

(via)
Here's another updated code: $(document).ready(function() { var $dragging = null; $('body').on("mousedown", "div", function(e) { $(this).attr('unselectable', 'on').addClass('draggable'); var el_w = $('.draggable').outerWidth(), el_h = $('.draggable').outerHeight(); $('body').on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - el_h / 2, left: e.pageX - el_w / 2 }); } }); $dragging = $(e.target); }).on("mouseup", ".draggable", function(e) { $dragging = null; $(this).removeAttr('unselectable').removeClass('draggable'); }); });​

jQUERY -JqueryUI - DRAG - JqueryUI Draggable

(via)
$ (selector, context).draggable (options) Method The draggable (options) method declares that an HTML element can be moved in the HTML page. The options parameter is an object that specifies the behavior of the elements involved. Syntax $(selector, context).draggable(options); You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows − $(selector, context).draggable({option1: value1, option2: value2..... });

HTLM - Les formulaires dans les documents HTML

(via)
Un formulaire HTML est une partie du document constituée d'un contenu normal, d'un balisage, d'éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes. L'utilisateur « remplit » généralement le formulaire en modifiant ses commandes (en saisissant un texte, en sélectionnant les articles d'un menu, etc.), avant de soumettre le formulaire à un agent pour son traitement (par exemple, à un serveur Web, à un serveur de courrier, etc.).

CSS - TRICK - FLOAT - html - Div collapse after float css - Stack Overflow

(via)
Add any overflow value other than visible to your container: div#nav { overflow:auto; } Then add width to restore the width : div#nav { width: 100%; overflow:auto; }

2016

RSS - TOOL - Web RSS - RSS Widget - RSS to HTML - Display RSS for Free with Web RSS

Create RSS Feeds for your Website or Blog _ Create your own RSS feeds and track how they do by day, week and month. Ping your feed out to the major ping servers and publish your feed on your website or blog. - Create RSS Feeds without any programing skills - Update your feed without updating the code just login and add more items. - Make your own RSS feeds for News, Podcasts and More! - We host your RSS feed for free! - Track your feeds hits by day, week or month - Get cut and paste code for your feed to place on your site - Ping your feed to the major ping servers for free - Validate your Feed - Edit your feeds at any time and have the update Instantly display on your website.

2015

CSS - html - Horizontally center a div in a div - Stack Overflow

Centering a div of unknown height and width Horizontally and vertically. Works with reasonably modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.) ____ .content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

UserScript: Quick link to Flickr Url and HTML code for images. | Femgeek.co.uk

(via)
This is a very basic user script that puts the url of the image you want in the image thumbnail as your browsing the site, it also adds a textarea to enable you to copy the html straight into your blog post without clicking through to the image

Flash OBJECT and EMBED tag attributes

This document is the target of a link in the Flash Lite 4 Porting Guide. Before you archive or unpublish, contact Learning Resources. This document lists the attributes of the OBJECT and EMBED tags used to publish SWF (Flash-enabled) content in HTML pages for display in web browsers. The attributes allow you to specify certain parameters that control the details of how and where Flash Player displays the SWF file in the browser. Information about including Flash-enabled (SWF file) content within web pages is also available in the TechNote OBJECT tag syntax | Flash (tn_4150).

jQuery - TUTO - Iframe - Créer un élément HTML dans le DOM avec jQuery

Le sélecteur jQuery est la plupart du temps utilisé pour sélectionner des éléments existant dans le DOM, via une règle CSS. Mais le sélecteur peut aussi créer de nouveaux éléments HTML de manière extrêmement simple ! Voici un petit exemple très simple qui créé un élément div , écrit "Salut !" à l'intérieur, puis enfin ajoute cet élément à la fin de la page web (en l'ajoutant à la fin body) :

DEV -Code Examples - Google Charts — Google Developers

(via)
Here are some code samples to demonstrate using the Google Visualization API. Table Example Customized Table Example Gauge Example Interaction Example Full HTML Page Example Query Wrapper Example Table Query Wrapper Example Mouseover Tool Tip Example

GM - greasemonkey - Changing Javascript on an HTML page out of my control - Stack Overflow

use Greasemonkey to modify the script or to insert another script just after it to override the function

2014

GM - DEV - Greasemonkey Tutorial for Beginners

In Greasemonkey tutorial, I have covered how to write Greasemonkey user scripts. After this tutorial,you will be able to write user-scripts for Greasemonkey. Topics covered: GreaseMonkey Installation Hello World Example Adding a Button Reading/Modifying HTML content Loading External Scripts.

VIDEO - 10 Free HTML5 Video Conversion Tools

Gone are the days when having moving images on your website meant having to use GIFs or Adobe Flash. The emergence of HTML 5 and its multimedia features has allowed designers to do without Adobe Flash or heavy, slow-loading GIF animations and, instead, use the native HTML5 video player. However, HTML5 only supports a few video formats, namely OGG, WebM and MP4.

Custom Buttons • Format HTML

Highlight text in page textarea and click on format desired. Focus needs to be in page textarea for Dialog to display. Style1 - Style10 buttons are preset with the displayed style Customize the 10 preset styles at the beginning of the script (do not alter characters after !important;) Texarea for user defined csss (retains last entry) Optional short name for url's (retains last entry) Quote name clears after each insert Colorpicker or manually insert color value for fonts

CSS - OVERFLOW - elippsis - html - With CSS, use "..." for overflowed block of multi-lines - Stack Overflow

The link below provides a pure HTML / CSS solution to this problem. However, it's quite involved and most likely won't work in non-modern browsers:

CSS - DEMO - The Shapes of CSS : "Square" or "Magnifying Glass"

by 2 others
These Icons use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.. Magnifique exmple....

HTML Imports: #include for the web - HTML5 Rocks

HTML ImportsThe web's most basic content, HTML, requires the greatest amount of effort to work with. Fortunately, Web Components are here to get us back on track. Getting started HTML Imports, part of the Web Components cast, is a way to include HTML documents in other HTML documents. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS.

image - Responsive - JAVASCRIPT (PHP) - Adaptive Images in HTML

by 8 others (via)
How is it different? Adaptive-Images aims to mitigate the problems inherent with Filament Group's method. It is designed to be entirely non-destructive so that it will work with any CMS or even with existing mark-up, without a need to edit anything. It creates and manages its own resized images using your existing images as the source, and it will adapt to the same resolution brackets your site does with the CSS3 @media queries used in your Responsive Design. It can do all of this because it already has the high resolution version to work on (it's the one referenced in the mark-up).

CSS - Responsive Images: Experimenting with Context-Aware Image Sizing | Filament Group, Inc., Boston, MA

(via)
What is this all about? The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

jQuery / Javascript : 390 ressources Javascript & jQuery

by 1 other
Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows,