From a dev perspective how do you set up an HTML document so that the browser can print the page? [on hold]

I noticed on some pages on websites that when you print in chrome that it shows only a blank page.

It would be nice to know how to set up style-sheets so that if a visitor to a web page prints from the browser that it shows up correctly.

Add button to end of WordPress navigation menu which reveals the rest of the menu options upon clicking/hovering

I’m looking to implement something on my WordPress site that will hide the main header navigation, except for one button. When you hover or click on this button, the rest of the menu options will show and remain there after moving the cursor away.

So on the example below, the blue options are hidden and are revealed once you hover over the red button. After this, both the menu and button stay until the page is reloaded.

enter image description here

I’ve tried a few CSS techniques to hide the menu until hovering over a DIV, but I cannot get this to work once it’s added to the header.

Does anyone know if this is possible?

popover is off by top: 300px

For whatever reason I cannot work out my popover is off by about 300px, I cannot work out why and as a solution I want to change the element.style that gets set on it to be +300px of whatever it gets set to.

I am using openlayers, and setting the position using the coordinates on click.

popup.setPosition(evt.coordinate);

Setting the position on my tooltip is working fine using this exact method, so I need to work out what the problem is or change the css once it has been set by the onclick function;

var element = document.getElementById('popup');
map.on('click', function (evt) {
    var element = popup.getElement();
    var coordinate = evt.coordinate;
    var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
        coordinate, 'EPSG:3857', 'EPSG:4326'));
    $(element).popover('destroy');
    popup.setPosition(coordinate);
    // the keys are quoted to prevent renaming in ADVANCED mode.
    $(element).popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': '<p>The location you clicked was:</p><code>' + hdms + '</code>'
    });
    $(element).popover('show');
});

Here is the code for toolltip:

function displayTooltip(evt) {
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
    return feature;
});
tooltip.style.display = feature ? '' : 'none';
if (feature) {
    overlay.setPosition(evt.coordinate);
    tooltip.innerHTML = feature.get('name');
}
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
    return;
}
pixel = map.getEventPixel(evt.originalEvent);
displayTooltip(evt)

});

How can I prevent transparent background-color blending?

I have the following code:

.wrapper {
  background-color: rgba(0,0,255,1.0);
}

.inner {
  background-color: rgba(255, 0, 0, 0.5);
}
<div class="wrapper">some text<span class="inner">other text</span></div>

My intention was that the <span> would have a light red color but instead I got red blended with the wrapper blue.
Is there any easy way to make this work as I expected?

bootstrap defining space between the divs without leaving the place [duplicate]

This question already has an answer here:

I’m creating a card with html, css and bootstrap and I’m using the bootstrap class col to define the columns. My problem is when separating the divs, how is it possible to define 3 divs with col 4 and get a space between them without leaving the place? when I give a style of margin-left: 5px; for example, the third div goes to the bottom line

enter image description here

In Ant Design, how can we center vertically in ?

Please see my React code example:

import React from 'react';
import { Row, Col, Icon } from 'antd';
const MyRow = () => (
  <Row type="flex" align="middle">
    <Col md={10}>Trouble is a friend</Col>
    <Col md={10}><Icon type="play-circle-o" /></Col>
    <Col md={4}><div>Lenka</div></Col>
  </Row>
);

...

When I rendered <MyRow />, I found that the text in <Row> was centered vertically well, but the <Icon> component didn’t do so. So that my <MyRow> didn’t look good. I expected all the content, not only the text but also the SVG in <Row> could be centered vertically.

I also tried other icon library, e.g. react-icons-kit, which did not work.

Does anyone have an idea?

CSS Hover Effect not working when an inline style is set

I’ve got an H1 element, which from standard has the color white. This element is in my upper navigationbar. When the page is scrolled the navigationbars background color is changed and so is the color of the text. So the text color changes from white to black. To accomplish this, my javascript just adds an inline style tag to the element setting the color:black.

There is also a hover-state defined. When the user hovers over the H1-element, the color changes to darkorange. Since the inline style tag is set to black, the CSS property for the color which is set when hovering over it is ignored, better sayed the inline style stands above the CSS property.

How can I solve this problem?

let h1children = document.getElementById(‘divNavigationContainer’).getElementsByTagName(‘h1’);
let achildren = document.getElementById(‘divNavigationContainer’).getElementsByTagName(‘a’);

        if (window.scrollY) {
            document.getElementById('divNavigationContainer').style.backgroundColor = 'white';
            document.getElementById('divNavigationContainer').style.borderBottom = '1px solid darkorange';

            for(let i=0;i<h1children.length;i++) {
                h1children[i].style.color = 'black';
            }
            for(let i=0;i<achildren.length;i++) {
                achildren[i].style.color = 'black';
            }
        } else {
            document.getElementById('divNavigationContainer').style.backgroundColor = 'transparent';
            document.getElementById('divNavigationContainer').style.borderBottom = 'none';

            for(let i=0;i<h1children.length;i++) {
                h1children[i].style.color = 'white';
            }
            for(let i=0;i<achildren.length;i++) {
                achildren[i].style.color = 'white';
            }
        }

CSS:

    .aNavigationObjectText:hover {
        color:darkorange;
     }

    .aNavigationObjectText {
       float: right;
       position: relative;
       cursor: pointer;
       font-family: Arial;
       font-weight: unset;
       font-size: 15px;
       color: white;
       margin-left: 15px;
       margin-right: 15px;
       margin-top: 20px;
       text-decoration: none;
       transition: color .2s ease-in-out;
     }

EDIT

My problem was solved by a simple !important tag!

     .aNavigationObjectText:hover {
        color:darkorange !important;
     }

Slide two items for two categories

Is there a possibility that for two categories (like in image), the latest item for two categories to be next or preview? Usually, in case with one category I have used Slick slider.

enter image description here

My HTML Code:

<div id="cat1">
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
</div>
<div id="cat2">
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
  <div class="items></div>
</div>

jQuery code:

$('.cat1').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});

The problem is that in this case, show only items from category one.

Animated class on addClass not working

I have the following CSS for an effect class:

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}
.effect {
    animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

Using the the jquery.appear functionality, I add the class .effect when a button appears in the viewport. The class is indeed added to the button, but the shake is not done as intended. So my guess is you cannot add a class like I am doing now to show the user the effect. Or because it’s once…

Below the JS code:

$('.parent .link').appear();
$('.parent .link').on('appear', function(event, $elements) {
    $(this).addClass('effect');
});

Which correctly adds the class to below element:

<a class="link effect" href="/new-page">
    <span>Click me</span>
</a>