Schlagwort-Archive: css

Link out symbol

I have been looking for a wikipedia-style link out symbol (wikipedia uses a svg symbol). Some websites recommend font awesome symbol /f08e others are in favor of the north east arrow #x2197; while I modfied now a code pen by thiago for the css of this wordpress child theme

  a:not([href*='wjst.de'])::after {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
    margin: 0 3px 0 5px;
  }

How to switch divs on or off – a super neat trick

I want to hide a div container as it clutters my otherwise clean picture display. And I found some javascript – free, CSS only solution: the  checkbox hack. Modified it a bit while it looks now like this

<label for="t">license me...</label>
<input id="t" type="checkbox" />
<div id="buy">price</div>
input[type=checkbox] {position: absolute;
 top: -9999px; left: -9999px; }
label { border:none; cursor: pointer; }
label:hover { border-bottom:1px solid #444; }
div#buy { display:none; }
input[type=checkbox]:checked ~ div#buy
 { display: block; }

You get the idea: whenever the label of the unvisible checkbox is being clicked, the display state of the div container is changing between on to off.

Let your visitors switch background color

There seem to be million of ways to do that – here is the most parsimonious solution that works for me even under difficult conditions and in different browsers.

// should be run in a $(document).ready(function(){ bracket });
// if there is no cookie we set one
if (document.cookie.indexOf("color")!== -1 {
  document.cookie = "color=white";
}
// we need a body class without any background definition
// and a class for body.black that has background:black
if (document.cookie.indexOf("black") === -1) {
  // switch to the new .black class
  $("body").toggleClass("black");
  // this is also possible in the iframe
  $(#iframe").contents().find("body").toggleClass("black");
}
// link or whatever is being clicked for the effect
$(".place").click(function () {
if (document.cookie.indexOf("white") !== -1) {
  document.cookie = "color=black";
}
else {
  document.cookie = "color=white";
}
// reload page with a small delay
setTimeout( function() { location.reload() }, 250 );

Forcing two divs in one row

In my picture gallery I show two divs side by side. Div1 is variable and needed only on a few pages. Div2 is large, complicated and takes quite some time to load as there are numerous pictures and jquery actions.
div
Rather simple setup, isn’t it? The rendering should be smooth (both divs loading at final position and not jumping around at the end of page loading) and fluid (working on smaller devices as well) and without any dynamic stylesheet language.
This simple task turned out to be complicated. Forcing two divs in one row weiterlesen