Develop Reference

How to achieve text/image layout like this on single Wordpress blog post page

I've been trying to create something like this for my blog page. Idea is that text of blog and thumbnail are 50/50 until image ends. After image the text should become 100% of page width. Options like placing image in Wordpress editor or text-wrap don't work because I want to add styling line next to text content which is 50%.
I've considered that maybe I should work out a jQuery/Javascript solution which splits the words and adds them form 50% div to 100% div after 50% div extends the height of the image.
Has anyone familiar with solution like this. What are the options for me?

For image:
float: left;
width: 50%;
This will allow you to wrap the text around your image and set image width to 50% of your container.
The only issue will be with the border, I am still not sure how to do it the best way.
.pretend-it-is-an-image {
height: 100px;
width: 50%;
background-color: blue;
float: left;
margin-right: 20px;
color: white;
text-align: center;
}
<span class="pretend-it-is-an-image">Image</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nulla vitae nulla consectetur sollicitudin ac vel nisi. Ut fringilla erat augue, quis accumsan nisl aliquet a. Sed tempor libero est, non iaculis leo dignissim quis. Duis sagittis tristique libero. Mauris iaculis mauris eget convallis posuere. Aliquam iaculis tempus nunc. Quisque facilisis mauris arcu, eget lacinia neque elementum eget. Mauris tincidunt nunc suscipit ipsum vulputate, non congue nibh laoreet. Duis nisi lectus, tempus ut mauris id, hendrerit semper enim.
Phasellus commodo faucibus mauris ut commodo. Suspendisse ornare imperdiet nulla sed malesuada. Aenean et pharetra nibh. In auctor purus a mollis venenatis. Pellentesque sodales lorem urna, nec vestibulum massa interdum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat ligula, egestas luctus mattis vitae, hendrerit quis sem. Proin tincidunt suscipit ligula id efficitur. In sed nisi scelerisque, tincidunt turpis eu, euismod dui. Donec bibendum malesuada massa sed vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque convallis pulvinar justo. Phasellus egestas, mi sit amet vehicula laoreet, lorem sapien ultrices mi, sit amet ornare erat orci eu ex.
Maecenas ultrices blandit cursus. Aenean sed elit sodales, pharetra dolor eu, condimentum enim. Donec vitae venenatis mi. In ut quam tristique ex aliquam gravida. Vestibulum a maximus dui. Proin enim diam, imperdiet tincidunt nulla dictum, tincidunt consectetur diam. Phasellus varius faucibus tristique.
</p>
Where to make a change?
You mentioned Wordpress, so these changes usually go into single.php file. For more information about where to make changes, see this: https://developer.wordpress.org/themes/basics/template-hierarchy/

try:
<img src="images/subjects/sub.jpg" align="left" style="width:45%; border-right:2px solid #000; padding:7px; margin-right:7px;"/>

How to show/hide an element based on the presence of vertical scrollbars?

I want to show a div only if the page has scrollbars, and hide it if not. I want to do this in either pure CSS or JavaScript (if impossible in CSS).
I've found a question on Stack Exchange, but it's infested with that garbage jQuery cancer, so it's useless. I'm talking about pure JavaScript -- not jCancer.

Here's a pure JS solution, using this function:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
Edit (description):
The function returns true if the element is scrollable, false otherwise.
Example:
const isScrollable = elem => elem.scrollHeight > elem.clientHeight;
// make scrollable divs have a red border
document.querySelectorAll("div").forEach(div => {
if (isScrollable(div)) div.style.borderColor = "red";
});
div {
border: 1px solid grey;
width: 200px;
overflow: auto;
margin-bottom: 1rem;
}
div#div1 {
height: 100px;
}
div#div2 {
height: 170px;
}
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat. Fusce tempor erat eget dolor ultrices interdum. Pellentesque sed placerat nulla. Duis consequat, lorem quis vehicula lacinia, libero leo tincidunt odio, et porta ex turpis malesuada lorem. Proin sapien metus, facilisis sed urna non, vehicula commodo velit. Etiam venenatis laoreet neque vel sollicitudin. Suspendisse lacinia, lectus hendrerit dapibus laoreet, dui lorem condimentum enim, a vulputate ex ipsum ut nibh.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu quis mi eleifend tristique. Curabitur convallis tellus eget volutpat luctus. Fusce molestie molestie ante, vel fermentum erat.
</div>

Hide Header on Scroll Down After a Certain Point?

I have this code, used from https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
I'm wondering if it's possible to amend this so that the header only disappears on scroll after a certain height says 120px from the top of the page. Here's the code I have currently:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
section {
background-color: grey;
margin-top: 50px;
}
<div id="navbar">
Home
News
Contact
</div>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan tincidunt massa in tristique. Vestibulum mattis erat sed porttitor cursus. Praesent dignissim, sem vel tincidunt venenatis, dolor orci sollicitudin ipsum, et vestibulum mauris ex non felis. Cras pulvinar lectus eu risus lobortis malesuada. Sed accumsan metus quis ante scelerisque molestie. Maecenas molestie arcu in massa egestas tempus. Vestibulum augue purus, tincidunt ut porta quis, pulvinar imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque id convallis odio.
Sed fringilla rutrum nulla. Nam diam ex, gravida at nisl vel, feugiat vehicula ex. Duis et ligula vitae velit pretium finibus quis sit amet diam. Sed ac interdum magna, a pharetra ante. Quisque vestibulum luctus ligula, elementum aliquam sem molestie non. Maecenas auctor magna a magna hendrerit, ornare facilisis tortor finibus. Nulla eu augue leo. Donec euismod scelerisque porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sit amet nisi eu porttitor. Donec dictum quis erat ut tincidunt. Curabitur pharetra iaculis purus. In hac habitasse platea dictumst. Aenean egestas laoreet lorem, ac eleifend magna.
Sed quis feugiat diam. Nunc euismod dapibus mauris quis egestas. Nam venenatis magna sit amet lorem semper, eget sagittis dolor malesuada. Sed fringilla pulvinar maximus. In venenatis ligula magna, id pulvinar magna auctor condimentum. Aliquam dictum erat sit amet elit tristique feugiat. Curabitur feugiat nunc ultricies sapien finibus condimentum. Duis gravida, ipsum sit amet luctus vulputate, odio quam ornare sapien, non aliquam enim metus eget dolor. Duis nisl lorem, tempor non cursus nec, lobortis vel nibh. Suspendisse consectetur sed nisl in vestibulum. Nunc at placerat ante. Donec ante massa, mollis vel ultricies sed, ullamcorper at risus. Morbi euismod laoreet sagittis.</section>
Currently, the header disappears as soon as you start scrolling down, but I'd like it to stay visible until after you've scrolled past the height of the header.
Hopefully, that makes sense.

You can just check when the scroll position is greater than 120 and then make it disappear, revert it back when it's less than 120
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (currentScrollPos > 120) {
document.getElementById("navbar").style.top = "-50px";
} else {
document.getElementById("navbar").style.top = "0px";
}
}

How to make full page/window width image inside limited width container and next to sidebar?

I need to make an image inside bootstrap's container. Image in div .full-image should be from the left to the right browser window. I know how to make it in single container, but in this example I have a menu left sidebar that is must to be. I need help with javascript/jquery script. Script should read the size of the browser window and keep the picture all the time on the left and right side of the window when the window reduces size(for mobiles, tables etc) and be full responsive.
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class='container'>
<div class='row'>
<div class='col-3'>
<ul>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
<div class='col-9'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
<img src='http://blogs.worldbank.org/africacan/files/africacan/small_better_small.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula </p>
<div class='full-image'>
<img src='http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
</div>
</div>
</div>

To show your image based on your screen size don't bother too much with CSS coding. I would suggest you, use #mediaQuery of CSS. It would provide your image responsive support according to screen size.
-- Add below like code in your CSS and you will find your images responsive according to your screen size. You can enhance according to your requirements further. I feel this would be the best way to acquire responsiveness for your page.
#media only screen and (max-width: 600px) {
img {
max-width: 100%; /*bootstrap responsive images*/
height: auto;
}
.full-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
}
-- I am attaching a outcome of using above code in your CSS. How it will look like in responsive outcome you can take a look.
-- Feel free to ask further queries. Thanks!

Issue with absolute positioned element that to be shown inside a scrollable div

We are using a dropdown plugin, which is hiding original dropdown and painting an input text element below the original element. And the options are being painted from an unordered list(which are appended to body) with position as absolute.
This is working fine. But when the select/input element is painted inside an internal scrollable div and when we scroll the internal div, the position of list is not getting changed(It is not sticking to text box). But, when we scroll with external scrollbar, position of list is moving as expected(sticking to text box).
Please provide your inputs to solve this.
PFA sample HTML at
https://plnkr.co/edit/PsVIOrVeMILsfSBUAlfW?p=preview
#scrollable {
max-height:200px;
overflow:scroll;
}
input{
width:200px;
}
ul {
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:13px;
left:185px;
}
<div id="scrollable">
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br>ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, por.</p>
</div>
<ul><li>First</li><li>Second</li><li>Third</li></ul>

Add position:relative on the container
#scrollable{
position:relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
body{
max-height:300px;
overflow:scroll;
}
#scrollable{
max-height:200px;
overflow:scroll;
position:relative;
}
input{
width:200px;
}
ul{
background:lightgrey;
border:1px solid black;
width:160px;
position:absolute;
top:5px;
left:245px;
}
li{
list-style-type:none;
text-align:left;
}
</style>
</head>
<body>
<div id="scrollable">
<center>
This is scrollable conatiner
<input type="text" name="textbox"/>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris,<br> vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
<ul><li>First</li><li>Second</li><li>Third</li></ul>
</center>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel cLorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed est mauris, vestibulum ut diam aliquet, volutpat pellentesque o
rci. Quisque consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
ommodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
consequat posuere est, vel commodo mi consequat consequat. Cras bibendum eros in dolor finibus egestas. Morbi tempor odio dignissim, pellentesque odio ut, vestibulum nulla. Sed ut massa eget ligula vestibulum sodales. In lacinia scelerisque mollis. Nulla semper quam quis justo hendrerit, at faucibus turpis lobortis. Ut enim est, porttitor at nunc ac, consectetur fringilla lacus. Nunc euismod sapien et ligula condimentum, eu pharetra velit molestie.</p>
</p>
</body>
</html>