Archive
HowTo: Show block on anchor hover and click to keep open with CSS
I was looking for a way to show a hidden HTML element with just CSS (no Javascript) when mouse hovers over an anchor (say over a “more…” note), while at the same time also supporting touch-only (no mouse) clients, where clicking should show (and keep open) that same element.
I ended up combining solutions and comments from
https://stackoverflow.com/questions/18849520/css-show-hide-content-with-anchor-name and
https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a#5210074
into
https://jsfiddle.net/birbilis/23nt74se/
Achieved the following behaviour:
- Can hover over an anchor to temporarily show its respective more info block
- Once the info block is open, hovering over that one too (having left the anchor above it) keeps it open (useful to select and copy content from the item)
- Can click on an anchor to show its respective more info block and keep it open. Only one such block is kept open at a time. If multiple exist and you click on another’s anchor, the last one is shown and kept open instead (this doesn’t affect what is temporarily also shown via the hover mechanism).
Notes:
- Could show the item inside the flow or float, e.g. using inline-block instead of block (https://www.w3schools.com/css/css_inline-block.asp)
- I use the :target CSS selector in a bit different way than the original suggestion had, I just set the anchor to jump to itself for easier maintenance of IDs and targets and maintenance-free CSS when adding more targets.
- The anchor with the “openhelp” class must be placed immediately before the item with the help class, since .openhelp:hover + .help is used (https://www.w3schools.com/cssref/sel_element_pluss.asp)
At Trafilm Gallery Metadata forms I ended up using yet another variation with simpler syntax, where the anchor and help text is placed inside a parent div that has text for the item the help is about and that div is marked with class “question”. See https://jsfiddle.net/birbilis/s3kaknt9/ – When the parent questions already have an ID, this has the benefit that you don’t need to add an ID to the anchor, just an href, plus when clicked it scrolls to the parent item (the question) instead of to the help item that is at the bottom of it which would put the question text out of the view when the help link is clicked, if the question is far enough down the page for it to scroll when targetted by the openhelp anchor.
HowTo: Hide HTML markup from non-signedin users at MonoX Social CMS
At MonoX Social CMS, which I use at both ClipFlair Social and Trafilm websites, I was in the need of hiding some HTML markup when the user is not signed-in.
The solution for this is to add runat="server" to the HMTL element one wants to hide and then set the Visible property that the object acquires due to the runat clause. The Visible property is set using some special syntax to access the MonoX API like below:
<ul runat="server"
Visible="<% $Code: Page.User.Identity.IsAuthenticated %>" >
…
</ul>
Redirecting output of batch file from the inside
Calling a label in a batch file is useful to redirect (for logging) the output of the batch file to a file from inside that same batch file, without needing to author a separate batch file to do the redirect of standard output.
@echo off
call :process > update_cxml.log
goto :EOF:process
…
(Revised previous version of this post)
Suggestion: add optional “where” clause to “foreach” statement in C#
Wouldn’t it be nice if I could use in C# the following syntax?
for (SomeType repeaterVariable
in SomeEnumerable
where someBooleanExpressionOfRepeaterVariable)
doSomethingUsingRepeaterVariable;
e.g. use this one:
instead of this one:
BTW, if you wonder what FixTime does, it prepends 0: to time strings to make sure they are of format h:m:s.f
Have added this as a comment to another person’s suggestion that I see has similar format, so please vote for that one:
Suggestion: Add instance modifiers to C# (and other languages)
I’d like to be able to do
someFunctionReturningY(x){ somePropertyOfY=4; … }.DoSomething();
It should also support casting without needing parentheses in the following type of statement:
Z zzz = (Z)functionReturningY{somePropertyOfZ=…; … };
The same pattern should work for enums too apart from object instances. It is inspired by initializers in C#, e.g. var x = new Test(){someProperty=…}. It’s just a generalization of the same pattern.
E.g. at the following scenario I want to modify an object that GetMetadataFromUI function returns
and currently I’m forced to write this which is way more verbose:
If you like this suggestion please vote for it at:
HowTo: Copy effective-computed CSS style for specific HTML paragraph
I’m in the process of setting up a temporary landing page for the trafilm project, where I need apart from showing the trafilm logo to also show some text description about the project, till I set up an instance of MonoX Social CMS for it, like the one in ClipFlair’s Community website (ClipFlair Social).
Since ClipFlair Social has some nice text styling, I decided to borrow the style of one of its home page paragraphs, using Firefox web browser’s developer tools (accessible via F12 key).
Being at the Inspector tab of the dev tools (which is the default when they first open), using the “Pick element” tool (first one on the dev tools pane’s toolbar on the left), I select the paragraph that looks nicely styled and I go to the Computed tab at the Style view, then press CTR+A to select all computed style CSS declarations for that paragraph element and press CTRL+C or right click and select Copy to copy them to the clipboard.
If pasted (CTRL+V) in some text editor like Window’s Notepad that looks like a big ugly line, since they contain Unix-style line-endings, that is LF (linefeed) and not Windows-style ones (CRLF, Carriage Return + Line Feed), but editors like Wordpad or Notepad++ can show them nicely and even convert line endings from Unix to Windows and vice-versa if you wish so (e.g. in Notepad++ the respective actions are at Edit / EOL Conversion menu).
So, this is the copied Computed CSS style for that paragraph:
border-bottom-color: #333;
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color: #333;
border-left-style: none;
border-left-width: 0px;
border-right-color: #333;
border-right-style: none;
border-right-width: 0px;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
color: #333;
cursor: default;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
As you can see, it has lots of stuff that isn’t needed, unless you want to be sure your style doesn’t get affected by style of parent elements. In my case I decided to trim it down a bit:
color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 24px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
Adding around the text above (which is represented by the CSS comment /* … */ below) a CSS selector to wrap those declarations in order to make a proper CSS rule-set:
p {
}
and passing to CSS LINT tool to help us clean up the CSS we get no errors, but several warnings:
For example, as explained at W3Schools.com, in CSS one can use shorthand margin and padding properties:
The
marginproperty is a shorthand property for the following individual margin properties:
margin-topmargin-rightmargin-bottommargin-left
CSS has properties for specifying the padding for each side of an element:
padding-toppadding-rightpadding-bottompadding-left
…so one wonders why Firefox Dev Tools don’t spit those out with that order and give them in bottom, left, right and top order instead.
Also instead of 0px, one is suggested to always write 0 instead, since zero will always be zero irrespective of the CSS units used for it (at least for the currently available CSS unit systems that is). This is merely to save in bandwidth I think, since 0px is better, suggesting to anyone modifying this value in the future they’d better use “px” [pixels] instead of say “pt” [points]).
So we clean up this CSS into (pay attention to the order of values in margin and padding shorthand declarations, which is top, right, bottom, left, that is clockwise starting from the top side of the HTML elements targeted via the CSS rule selector, which is a paragram – p – in our case):
p {
color: #333;
font-family: "Open Sans",sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
margin: 0 0 20px 0;
padding: 0 0 10px 0;}
Pasting at CSS LINT online tool again we get no warnings anymore (apart from no errors):
One might also remove the redundant space chars at the end of each line that Firefox places when copy-pasting the style declarations. Notepad++ can do it via Edit / Blank Operations / Trim Trailing Space menu command:
George Birbilis @zoomicon 