Meta tags:
author= Mihai Vaduva;
description= thoughts: simple;;
keywords= web developer CSS JavaScript jQuery WordPress Drupal electro electronics;
Headings (most frequently used words):
css, js, in, vertical, of, and, simple, text, the, get, or, svg, fullpage, target, class, partial, id, by, elements, thoughts, cycle, start, random, older, ie9, fallback, placeholders, html5, mathematician, for, tester, name, integer, favorite, archive, categories, voltmeter, threshold, integers, array, sorted, previous, network, next, closest, function, sqrt, sass, propeller, novus, cable, 4510, align, sections, if, breaks, line, add, automatically, clock, digit, uno, using, arduino, element, an, node, loader, focus, trap, view, to, within, custom, top, from, scroll, always, box, proportional, throbber, make, drupal, menu, out, slide, only, parallax, screen, split, maxims,
Text of the page (most frequently used words):
the (90), css (33), div (33), and (30), this (26), animation (26), 100 (25), #function (25), for (22), #comments (21), #with (21), #menu (20), #class (20), #posted (20), #opacity (18), #jquery (17), transform (17), text (17), display (16), circle (16), width (15), left (14), #section (14), from (14), that (14), right (13), splitscreen (13), svg (13), october (13), top (13), attr (13), not (12), var (12), may (12), column (12), #array (12), height (11), tspan (11), november (11), active (11), style (11), box (10), border (10), 2015 (10), simple (10), rotate (10), keyframes (10), valign (10), html (10), infinite (10), form (10), fullpage (9), 2014 (9), elem (9), 2011 (9), position (9), value (9), august (8), webkit (8), 2017 (8), screen (8), only (8), true (8), rotatecircle (8), using (8), you (8), background (8), event (8), padding (7), return (7), are (7), input (7), inner (7), randomitem (7), else (7), margin (7), 2012 (7), current (7), but (7), 2013 (7), long (6), attribute (6), september (6), table (6), have (6), voltage (6), org (6), vertical (6), hidden (6), led (6), content (6), hour (6), there (6), 360deg (6), ease (6), translatey (6), math (6), false (6), length (6), clock (6), toggle (6), progress (6), ajax (6), linear (6), abs (5), 0px (5), rtc (5), scroll (5), solution (5), fixed (5), propeller (5), sass (5), each (5), focus (5), digit (5), moz (5), absolute (5), color (5), https (5), segment (5), name (5), some (5), center (5), just (5), all (5), december (5), march (5), had (5), when (5), unsigned (5), electro (5), cable (5), align (5), about (5), ledstate (5), split (5), login (5), demo (5), arduino (5), random (5), byte (4), one (4), timing (4), can (4), bottom (4), which (4), index (4), how (4), common (4), timedisplay (4), currentmillis (4), any (4), matches (4), http (4), find (4), spin (4), stroke (4), focusableelements (4), 2022 (4), element (4), throbber (4), val (4), number (4), view (4), time (4), none (4), fill (4), first (4), iteration (4), duration (4), custom (4), 0deg (4), include (4), network (4), radius (4), 2016 (4), pivot (4), fff (4), threshold (4), count (4), ie9 (4), add (4), resistors (3), side (3), slide (3), needed (3), fallback (3), tester (3), document (3), anode (3), high (3), leds (3), addclass (3), sevseg (3), wire (3), ie10 (3), startrand (3), child (3), toolbox (3), resistor (3), com (3), placeholder (3), int (3), ledpin (3), textarea (3), web (3), displays (3), found (3), page (3), endif (3), auto (3), where (3), low (3), precision (3), dir (3), get (3), line (3), breaks (3), window (3), sections (3), returns (3), need (3), use (3), previousmillis (3), 2000 (3), sqrt (3), 2020 (3), example (3), getval (3), out (3), june (3), javascript (3), fullscreen (3), overflow (3), older (3), april (3), july (3), proportional (3), 2010 (3), vertically (3), image (3), 120px (3), open (3), below (3), iscrollinstance (3), through (3), firstfocusableel (3), checked (3), parallax (3), case (3), never (3), flex (3), label (3), lines (3), trigger (3), href (3), ipsum (3), lorem (3), make (3), visibility (3), plugin (3), lastfocusableel (3), transition (3), 255 (3), xmlns (3), www (3), backface (2), 000 (2), float (2), spinner (2), removeclass (2), target (2), ds1307rtc (2), nav (2), indent (2), before (2), 99999em (2), d6232f (2), type (2), simply (2), transparent (2), randombox (2), checkbox (2), cycle (2), hide (2), const (2), fast (2), check (2), button (2), ds1307 (2), end (2), pin (2), xlink (2), font (2), dolor (2), calculator (2), its (2), support (2), sit (2), dip (2), version (2), amet (2), separator (2), seconds (2), part (2), seems (2), real (2), pretty (2), mounted (2), pcb (2), defaultvalue (2), parsefloat (2), item (2), cell (2), fields (2), drupal (2), 5625 (2), ready (2), alignment (2), html5 (2), placeholders (2), aligned (2), well (2), middle (2), size (2), novus (2), repeat (2), container (2), without (2), always (2), tspanx (2), tspany (2), tspanstyle (2), lineheight (2), mathematician (2), 4510 (2), layout (2), back (2), lit (2), next (2), higher (2), decimals (2), default (2), span (2), scss (2), previous (2), works (2), h1_text (2), integers (2), sorted (2), contents (2), filter (2), into (2), work (2), above (2), could (2), cathode (2), triangle (2), module (2), calculating (2), was (2), decoder (2), more (2), basic (2), uno (2), transistors (2), method (2), wikipedia (2), will (2), output (2), does (2), accuracy (2), node (2), voltmeter (2), around (2), preventdefault (2), disabled (2), addeventlistener (2), keydown (2), shiftkey (2), key (2), tab (2), design (2), idiots (2), good (2), like (2), day (2), skip (2), many (2), standards (2), tabindex (2), containerelement (2), 42px (2), circuit (2), fadein1 (2), closed (2), switch (2), fadein2 (2), fadein3 (2), fadein4 (2), january (2), search (2), loader (2), 2023 (2), 2019 (2), 2018 (2), february (2), drive (2), then (2), would (2), digitpins (2), body (2), css3 (2), numdigits (2), developer (2), mozilla (2), two (2), docs (2), title (2), head (2), segmentpins (2), bool (2), resistorsonsegments (2), project (2), inspiration (2), 00f (2), hardwareconfig (2), see (2), solid (2), interval (2), corresponding (2), tricks (2), junkbox (2), void (2), diy (2), move (2), here (2), code (2), keyframe (2), common_anode, begin, viewbox, setbrightness, loop, error, 888888, getelementbyid, timelib, circles, scrolltop, read, millis, offset, half, upper, tmelements_t, minute, 100l, c22929, 9dcb11, concentric, digitalwrite, second, poor, man, option, sort, 11cb28, ccad6d, breadboard, queryselectorall, taste, structure, privacy, policy, rss, viewing, site, device, required, your, thoughts, features, properly, 500, sidebar, main, settings, customize, init, anti, setup, select, getattribute, details, load, updatewithdelaysin, pins, offsetparent, blinking, null, hasattribute, aria, trap, full, create, allows, states, author, pinmode, pages, instructions, text_node, usb, them, cd4511, leas, dispays, vqe24e, hub, these, added, automatically, gained, digits, plain, been, lot, digging, based, examples, involved, library, problem, 74hc595, accurate, prettiest, isn, know, posibble, edit, later, both, crystal, very, over, weeks, makes, easily, directly, three, almost, ended, extra, shift, didn, log, test, format, diagram, during, console, set, modified, followed, least, link, refreshdisplay, nodetype, setnumber, waypoints, building, electronics, refresh, 8px, helvetica, family, 1999, took, register, bcd, greater, trim, scrollingspeed, append, fontsize, modules, laying, finally, decided, weekend, put, useful, 1000, navigation, negative, functions, advanced, implement, libraries, provides, newton, following, scripting, transcribed, algorithm, imaginary_number, wiki, multiplied, desired, experiment, initial, flag, compiling, simplify, looks, too, complicated, 00000000000001, 0000001, don, want, divide, smaller, than, global, wanted, operations, computations, t568a, changing, frames, fun, ideea, every, maybe, t568b, tolerate, yellow, has, special, significance, green, 7µf, speed, 200px, times, way, square, root, sides, hypotenuse, known, other, mixin, animations, snippets, syntax, almanac, properties, guide, using_css_animations, done, note, 15kω, firefox, things, governing, law, milk, water, did, neither, anything, solved, alcohol, chrome, fire, working, stops, possible, arrogant, night, nice, thing, choose, firehose, forty, beers, engineer, little, sleep, still, bright, nothing, sings, kilovolt, aren, they, integer, actual, red, relay, acting, under, grater, protection, detects, used, certain, breakdown, zener, diode, boolean, closest, replaced, recently, enough, categories, favorite, maxims, archive, wordpress, uncategorized, articles, indicator, seen, magazine, described, rudimentary, car, battery, capacitor, 10kω, now, friend, nextindex, onleave, scrolloverflow, semiconductor, national, apart, taking, resist, couldn, 1976, made, scientific, gave, rpn, while, single, fiber, glass, keyboard, robust, front, connected, notation, flat, interesting, being, machine, reverse, polish, direction, scrollable, vissually, bezier, 999, opened, pseudo, state, close, neat, overlay, trick, something, prevent, scrolling, translate3d, important, cubic, replace, data, url, scrollto, slides, tested, within, relative, cover, path, 10px, centered, items, justify, rgba, 999999, block, bubble, hardware, 100ω, contains, faulty, starts, continue, dash, string, substring, wires, ends, begins, achieved, selectors, elements, partial, means, tests, 4017, 8p8c, modular, connector, rj45, 555, timer, decade, parts, counter, build, cheap, integrated, circuits, few, floor, parent, inside, ic1, detection, hoped, hear, lack, hopes, computing, mm5760n, conditional, rule, processor, ic2, ds8864n, parallel, driver, browser, rush, last, explorer, siblings, settimeout, 2500, list, start, internet, hasclass, evening, clear, click, blur, ie8, boiled, late, antimath,
Text of the page (random words):
er el el offsetparent null el el hasattribute disabled el getattribute aria hidden firstfocusableel focusableelements 0 lastfocusableel focusableelements focusableelements length 1 lastfocusableel addeventlistener keydown function event if event shiftkey false event key tab event preventdefault firstfocusableel focus firstfocusableel addeventlistener keydown function event if event shiftkey true event key tab event preventdefault lastfocusableel focus javascript svg css loader posted in css on november 16 2022 0 comments a concentric circles loader spinner throbber svg width 42px height 42px viewbox 0 0 42 42 version 1 1 xmlns http www w3 org 2000 svg style type text css keyframes fadein1 0 opacity 0 25 opacity 1 50 opacity 1 100 opacity 1 keyframes fadein2 0 opacity 0 25 opacity 0 50 opacity 1 100 opacity 1 keyframes fadein3 0 opacity 0 50 opacity 0 75 opacity 1 100 opacity 1 keyframes fadein4 0 opacity 0 50 opacity 0 75 opacity 0 100 opacity 1 circle 1 animation fadein1 1 2s ease infinite circle 2 animation fadein2 1 2s ease infinite circle 3 animation fadein3 1 2s ease infinite circle 4 animation fadein4 1 2s ease infinite style circle class circle 1 stroke c22929 fill none cx 21 cy 21 r 5 circle circle class circle 2 stroke ccad6d fill none cx 21 cy 21 r 10 circle circle class circle 3 stroke 9dcb11 fill none cx 21 cy 21 r 15 circle circle class circle 4 stroke 11cb28 fill none cx 21 cy 21 r 20 circle svg css simple get the text node of an element posted in jquery on september 1 2022 0 comments var h1_text h1 contents filter function return this nodetype node text_node text h1 lorem ipsum span dolor sit amet span h1 console log h1_text lorem ipsum jquery arduino uno 6 digit clock posted in electro on may 26 2020 20 comments i had an arduino uno and some modules laying around for some time and finally i decided to make it a weekend project and put it to useful work by building a clock that could display the time in hh mm ss format digging the web for inspiration i found many examples that involved an extra 74hc595 shift register and a bcd to 7 segment decoder and a rtc real time clock module for greater accuracy i had a ds1307rtc module the problem was that the only 7 segment decoder i found in the junkbox was a cd4511 which can only drive common cathode dispays and the displays i had where vqe24e common anode i could ve added transistors but for 6 digits there would ve been a lot of transistors and resistors in the end i found about sevseg h library that makes it posibble to drive both common cathode as well as common anode displays easily directly from arduino i took inspiration from here for the code https electronics project hub com arduino 7 segment display clock with and without rtc below is my modified code and circuit diagram include sevseg h include wire h include timelib h include ds1307rtc h sevseg display const int ledpin a0 unsigned long timedisplay unsigned long currentmillis unsigned int hour int ledstate low unsigned long previousmillis 0 const long interval 500 void setup pinmode ledpin output byte numdigits 6 byte digitpins 10 11 12 13 a1 a2 byte segmentpins 2 3 4 5 6 7 8 9 bool resistorsonsegments false false resistors are on digit pins bool updatewithdelaysin true byte hardwareconfig common_anode display begin hardwareconfig numdigits digitpins segmentpins resistorsonsegments display setbrightness 100 void loop unsigned long currentmillis millis if currentmillis previousmillis interval previousmillis currentmillis if ledstate low ledstate high else ledstate low digitalwrite ledpin ledstate tmelements_t tm if rtc read tm hour tm hour if tm hour 0 hour 24 timedisplay hour 100 tm minute 100l tm second else timedisplay 888888 error display setnumber timedisplay display refreshdisplay in the end i didn t use the blinking seconds led but left the option there to set the time on the ds1307 rtc i followed the instructions in the link above on the breadboard there are anode resistors but i ended up not using them these displays needed some higher current to lit up well during the day i know the box isn t the prettiest one but at least it s a box later edit 12 june 2020 it seems that the ds1307 rtc at leas the one i have is not so real the clock gained over 60 seconds in almost three weeks not very accurate for a clock crystal arduino diy usb automatically add line breaks in svg text posted in jquery on october 4 2019 0 comments add line breaks in svg text with jquery based on a separator in the example below the separator is plain text br div class svg container svg version 1 1 xmlns http www w3 org 2000 svg xmlns xlink http www w3 org 1999 xlink text tspan x 0 y 0 style font family helvetica font size 8px lorem ipsum br dolor sit amet tspan text svg div svg container each function line breaks this find text each function if br i test this text var tspan this find tspan first child var tspanx tspan attr x var tspany tspan attr y var tspanstyle tspan attr style tspan hide var lines this text split br var lineheight parsefloat tspan css fontsize for var i 0 i lines length i this append tspan x tspanx y parsefloat tspany lineheight i style tspanstyle trim lines i tspan refresh svg this html this html custom how to jquery svg if in view posted in jquery on november 24 2018 0 comments check if an element is in view using only jquery a sort of poor man s waypoints demo with sections window on load scroll function element each function if this offset top window scrolltop window height 2 in view in the upper half of the screen else not in view jquery scroll using fullpage js to make a vertical split screen parallax posted in css jquery on october 9 2017 3 comments fullpage js as its author states is a jquery plugin which allows you to create full screen pages fast and simple how about using it to make a split screen parallax fast and simple first the required html structure div id splitscreen div class section div class column column left left side div div class column column right right side div div div then init the fullpage js and customize the settings to your taste document ready function splitscreen fullpage navigation false scrollingspeed 1000 now the css for the split screen splitscreen section column left float left width 50 color 000 background fff splitscreen section column right float right width 50 color fff background 000 splitscreen section column left transition all 1s ease 0s transform translatey 100 backface visibility hidden splitscreen section column right transition all 1s ease 0s transform translatey 100 backface visibility hidden splitscreen section active z index 1 splitscreen section active column left transform translatey 0 splitscreen section active column right transform translatey 0 splitscreen section active section column left transform translatey 100 splitscreen section active section column right transform translatey 100 prevent fullpage from scrolling the page splitscreen transform translate3d 0px 0px 0px important splitscreen section position absolute top 0 left 0 split screen parallax demo css custom how to jquery jquery plugin scroll css only slide out menu posted in css on september 27 2017 0 comments neat trick to toggle the display of something in the page using only css in this case a slide out menu first we need the html input id menu toggle type checkbox label class menu trigger for menu toggle label nav id menu ul li a href menu item a li ul nav use the checked pseudo class to check the state of the menu open close hide the checkbox input as it is not vissually needed and style the label as a menu button menu width 100 position fixed right 100 move the menu out of the screen top 0 bottom 0 overflow y auto transition all 1s cubic bezier 0 2 1 0 2 1 0s z index 999 menu toggle position absolute left 0 top 0 opacity 0 visibility hidden menu toggle checked menu right 0 add the menu into the screen menu trigger closed menu style menu toggle checked menu trigger opened menu style css how to simple toolbox drupal 8 custom throbber posted in css on august 15 2017 2 comments replace the default ajax progress with a fullscreen overlay css spinner ajax progress ajax progress throbber ajax progress fullscreen width 100 height 100 margin 0 padding 0 webkit border radius 0 border radius 0 opacity 1 background rgba 255 255 255 0 8 position fixed top 0 left 0 z index 999999 overflow hidden text indent 99999em ajax progress throbber before ajax progress fullscreen before content display block width 120px height 120px webkit animation spin 0 8s infinite linear animation spin 0 8s infinite linear border radius 120px border width 10px border style solid border color d6232f transparent d6232f transparent overflow hidden text indent 99999em margin auto position absolute top 0 left 0 right 0 bottom 0 webkit keyframes spin to transform rotate 360deg keyframes spin to transform rotate 360deg see demo css custom drupal css proportional box and vertical align posted in css on july 14 2017 0 comments proportional box box width 100 height 0 padding top 56 25 16 9 16 9 9 16 0 5625 0 5625 100 56 25 vertical alignment 1 div class valign div class valign inner vertically aligned content div div valign display table table layout fixed width 100 height 100 margin 0 padding 0 valign inner display table cell width 100 height 100 margin 0 padding 0 vertical align middle vertical alignment 2 valign display flex align items center justify content center valign inner flex 1 proportional box with background image and vertically centered content div class box style background image url path to image div class box inner div class valign div class valign inner vertically aligned content div div div div box position relative width 100 height 0 padding top 56 25 16 9 background repeat no repeat background position center center background size cover box inner position absolute top 0 left 0 right 0 bottom 0 text align center valign display table table layout fixed width 100 height 100 margin 0 padding 0 valign inner display table cell width 100 height 100 margin 0 padding 0 vertical align middle css fullpage js always scroll from top within sections posted in jquery on december 15 2016 0 comments scroll long sections always from top this works only for section without slides tested with fullpage 2 8 9 fullpage fullpage scrolloverflow true onleave function index nextindex direction fp scrollable each function var iscrollinstance this data iscrollinstance iscrollinstance scrollto 0 0 2000 jquery plugin novus 4510 mathematician posted in electro math on november 20 2016 4 comments a friend gave me this national semiconductor novus 4510 mathematician scientific calculator made in 1976 and i couldn t resist taking it apart it is an interesting calculator simply by being a reverse polish notation rpn machine on the inside the hardware it s pretty simple with only two ic s and a 9 digit 7 segment bubble led display mounted on a single side fiber glass pcb the keyboard seems pretty robust and it s fixed to the front part of the case while the pcb it s mounted on the back part of the case connected through a flat flex cable ic1 mm5760n 24 pin dip slide rule processor ic2 ds8864n 22 pin dip segment digit parallel input display driver basic computing simple html5 placeholders fallback for ie9 and older posted in css jquery on october 14 2015 0 comments i hoped i will never hear about ie9 and its lack of support for the placeholder attribute i had high hopes i ve boiled a simple fallback late in the evening and in a rush using ie conditional comments for browser detection if ie 8 html class ie8 lt ie10 endif if ie 9 html class ie9 lt ie10 endif if gt ie 9 ie html endif document ready function html5 placeholders fallback for ie9 and older if html hasclass lt ie10 add the placeholder text as value textarea input text each function this attr value this attr placeholder clear form fields on focus textarea input text on focus click function if this value this defaultvalue this value on blur function if this value this value this defaultvalue form fields internet explorer simple toolbox random start cycle posted in jquery on october 9 2015 0 comments function randombox randomitem randomitem randomitem var random math floor math random randomitem length randomitem eq random randomitem length addclass active function startrand var current randomitem parent find active if current is last child current removeclass active current siblings first child addclass active else current removeclass active current next addclass active settimeout function startrand 2500 startrand randombox list item cycle css target elements by partial class or id name posted in css on august 20 2015 0 comments this can simply be achieved using attribute selectors div attr elem matches any div with an attr attribute that begins with elem div attr elem matches any div with an attr attribute that ends with elem div attr elem matches any div with an attr attribute that contains the substring elem div attr elem matches any div with an attr attribute that starts with elem and may continue with a dash ex elem string ex target a form with the id login id form where id is a random form id form id login or form id login id form or form id login id form or div id login network cable tester posted in electro on may 17 2015 2 comments build a network cable tester with just two cheap integrated circuits and a few parts from the junkbox this cable tester tests all the 8 wires in a network cable in one move if one of the 8 leds does not lit up it means that the wire corresponding to that led is faulty you need 1 x 4017 decade counter 1 x 555 timer 8 x leds 2 x 8p8c modular connector rj45 8 x 100ω resistor 1 x 10kω resistor 1 x 15kω resistor 1 x 4 7µf capacitor the yellow led has no special significance i only had 7 green leds a good ideea would be that every led have the color of the corresponding wire and maybe a switch for the t568a and t568b standards diy network simple toolbox css propeller posted in css on may 3 2015 0 comments just for fun see demo css3 keyframe animation propeller do not open the demo page if you do not tolerate high speed changing frames html head title css3 propeller title head body div class propeller div body html propeller position absolute left 0 right 0 top 0 bottom 0 margin auto width 0px height 0px border width 200px border style solid border color fff 00f fff 00f border radius 50 webkit animation duration 0 2s moz animation duration 0 2s o animation duration 0 2s animation duration 0 2s webkit animation name rotatecircle moz animation name rotatecircle o animation name rotatecircle animation name rotatecircle webkit animation iteration count infinite moz animation iteration count infinite o animation iteration count infinite animation iteration count infinite webkit animation timing function linear moz animation timing function linear o animation timing function linear animation timing function linear webkit keyframes rotatecircle from tran...
|