Develop Reference

WHITESPACE in Webpage

i have problem with my website i have whitespace background between img and text on the right side on the screen, take a look of my screenshots to see what i mean,i will provide the code to see if i actualy make mistake in my code to programming this website i use bootstrap to be responsive on mobile but however you see in my screenshots is not. how can i fix this can anyone have solution? i try whit bootstrap use d-block but its still showing me whitespace.
HTML
.myimg {
position: absolute;
top: 60em;
left: 60em;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 23em;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>

The solution is to set the CSS left propery to 0 so that there is no gap between the left side of the HTMLElement and page.
.myimg {
position: absolute;
top: 60em;
left: 0;
width: 100%;
height: auto;
}
.myimg2 {
border-radius: 100%;
width: 35%;
}
.name {
position: absolute;
top: 37em;
left: 0;
color: azure;
text-shadow: 2px 2px 2px black;
}
.mytext {
position: absolute;
top: 48em;
left: 0;
color: wheat;
text-shadow: 2px 2px 2px black;
}
<div id="aboutMe">
<img src="Images/background.jpg" width="1920" height="1080" alt="bg">
<div class="aboutMeContent ">
<div class="container">
<div class="row">
<div class="myimg">
<img src="Images/me.jpg" alt="me" class="myimg2">
</div>
<h1 class="name">Stefan Momcilovic</h1>
<h4 class="col-sm-6 text-center mytext"><i>Hello dear visitors I am Stefan Momcilovic, I'm a web development from high school, so far I have several projects that I've made some of you can see in my portfolio, programming has been interesting since my early years, but for the first time I entered in programming is on elementary school I made games that you can find on a google play store, and from high school I'm doing web development, I hope we will work together on your project in the future,Have nice day!</i></h4>
</div>
</div>
</div>
</div>

1- if you want to make the responsive page and improve your code, an absolute position not suitable for the responsive page.
2- when you use absolute position, consider the relative position for the parent node as well as consider the box model of the parent;
for your question, if you remove left or assign left:0 then overflow-x eliminated.
for example :
.myimg {
position: absolute;
top: 0;
text-align:center;
width: 100%;
height: auto;
}

JS popup is not working on Safari (hide/show)

Simple popup with js is not working on IPhone and IPad
Tried to replace href="javascript:PopUpShow()" to onclick="PopUpShow()", but still the same, it works everywhere but Safari
click me
<div onclick="PopUpShow()"><i class="fas fa-phone"></i> </div>
<div class="b-popup" id="popup1">
<div class="b-popup-content">
<a class="b-popup-close" href="javascript:PopUpHide()">
<div class="col-md-4 col-12 padding-pop"> <div class="right-cont-pop" id="pop-hide"> close </a></div></div>
<div class="row">
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="col-md-4 col-12 padding-pop"><i class="fas fa-phone"></i></div>
<div class="padding-pop-text">blabla i'm pop up</div>
</div>
</div>
</div>
This is my JS code
function PopUpShow(){
$("#popup1").show();
}
function PopUpHide(){
$("#popup1").hide();
}
And css
.b-popup .b-popup-content a{
color: #000;
font-weight: 500;}
.mobil-icons {
display: block;
right: 0px;
position: absolute;
z-index: 999;
padding-top: 10px;}
.b-popup{
display: none;
min-height: 100%;
overflow: hidden;
position: fixed;
top: 0px;}
.b-popup .b-popup-content{
margin: 38px auto 0px auto;
width: 250px;
height: 250px;
padding: 10px;
background-color: #fff;
position: fixed;
top: 0;
right: 0;}
.b-popup-close {
color: #000;
font-weight: 500;
text-decoration: none;}
Please, help me to resolve this problem!

As it appears, the problem was not in JS at all. "display: flex;" made the whole popup absolutely invisible. I mean the popup was there the whole time, I tapped at the link on it! Just changed it to "block" and it appeared. But I have a question to Safari developers... WTF?

How to make Responsive Text [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have an example Calendar Days
.month-days-wrapper {
display: inline-block;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>
Squeeze the Result horizontally and you will see the days are responsive.
(Totally ignore the green line please as that will be taken care of by server side coding.)
The challenge is to make the text “Tom Jones – $4,000” responsive also.
Can this be done via CSS and maybe JS as well?
Edit
Please have a look at this image as it will hopefully explain what I am getting at clearly.
More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg
More edit.
Background: This is a monthly line calendar for a booking app whose days move to the second row, third row, etc when its container is narrowed. This works perfectly well.
12 months-at-a-time are shown on the web page.
When a property is booked the calendar needs to show the Name and $Amount starting ON THE FIRST DAY of the booking.
When the calendar is narrowed and a day goes to the following row the text must track the day as shown in the image above.
Boundary Conditions
A booking may be one night or 100s of nights.
If a short booking and all text cannot be fitted in then finish it with ellipsis.
The text must flow across month boundaries. eg booking starts on Nov 30 so text must flow to Dec 1 etc
If anyone can do this then I will pay an agreed amount otherwise I will go to Freelancer.com. (I am offering the $s here as people have made an effort already and should be rewarded if they can "bring home the goods".)
Cheers

You do not need js, you can use scalable values for your text on font-size
vh is the percentage of the height
font-size:2vh
vw is the percentage of the width
font-size:2vw
vmin is the percentage of the shorter one (useful for mobile)
font-size:2vmin
vmax is the percentage of the longer one
font-size:2vmax

Its hard to get a feel for exactly what you're going for here, but here are a couple of thoughts.
In your original code, the green background booking info is part of the div for the day on which it starts. As long as you do things this way, it will never scale properly when you adjust the screen size.
With that in mind, here is a modified code which moves the booking info to the end of the date container, which will keep it there as you resize the page.
</head>
<body>
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We
</div>
<div class="day-body">
<div class="day-body-day">25
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th
</div>
<div class="day-body">
<div class="day-body-day">26
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr
</div>
<div class="day-body">
<div class="day-body-day">27
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa
</div>
<div class="day-body">
<div class="day-body-day">28
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su
</div>
<div class="day-body">
<div class="day-body-day">29
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo
</div>
<div class="day-body">
<div class="day-body-day">30
</div>
</div>
</div>
<div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000
</div>
</div>
</div>
</div>
</body>
</html>
.month-days-wrapper {
display: inline-block;
position: relative;
}
.day-wrapper {
float: left;
}
and the CSS:
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.text-container {
z-index: 10;
position: absolute;
left: 21px;
bottom: 5px;
width: 174px;
height: 20px;
left: 50%;
margin-left: -87px;
background-color: green;
border-radius: 5px;
}
However, as a related point, is this is part of a larger application (looks like it might be related to some kind of booking system), you might want to consider dynamically setting the background colors of the date divs rather than putting this overlay on them. It will be much less finicky. Just a thought.
Good luck, and welcome to Stack Overflow!

A little tricky, but I think this is what you need JSfiddle
Splitted the word in multiple containers and gave them display:inline-block

Maybe you cold try a trick with line-height, then use an extra span container (or child div itself), position:absolute and word-wrap/word-break :
.end-ellipsis class is removed.
remove test width from .month-days-wrapper to test on resize or play with http://codepen.io/anon/pen/dYBypL .
.month-days-wrapper {
display: inline-block;
width: 160px;
position: relative;
}
.day-wrapper {
float: left;
}
.day-header {
font-weight: 400;
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 26px;
}
.day-weekday {
background-color: #ededee;
}
.day-weekend {
background-color: #e3e3e3;
}
.day-body {
border: 1px solid #dcdcdc;
text-align: center;
vertical-align: middle;
width: 34px;
height: 50px;
}
.end-ellipsis {
margin-left: 3px;
color: #ffffff;
vertical-align: middle;
text-align: left;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.brlines {
z-index: 1;
position: absolute;
max-width: 100%;
text-align: left;
margin-top: -1.6em;
text-indent: 1em;
word-wrap: break-word;
word-break: break-all
}
.brlines span {
display: inline;
word-wrap: break-word;
word-break: break-all;
line-height: 5em;
background-color: green;
border-radius: 5px;
padding: 0 1em;
}
<div class="month-days-wrapper">
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div class="brlines">
<div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>
</div>

Getting the height of a element hidden by a container with height 0

I'm encountering an issue with scrollHeight and offsetHeight that I suspect is a product of abusing the css rendering engine.
I'm attempting to get an accurate scrollHeight or offsetHeight for an element in the following context.
CSS
.transitionHeight {
overflow: hidden;
transition: height 1s;
}
.closed {
height: 0 !important;
overflow: hidden;
padding: 0 !important;
border: none !important;
margin: 0 !important;
margin-top: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
width: .1rem;
}
HTML (snippet)
<div class="fullHeight closed" id="addressTarget" style="height: 1119px;">
<div class="widget bar contact" id="addressDetails">
<div class="column left">
Header:
</div>
<p class="column right">Information</p>
<div class="column left">
Header 2:
</div>
<a href="" class="column right">
More Details
</a>
<div class="column left">
Like us on Facebook at:
</div>
<a href="" target="_blank" class="column right">
Even More Details
</a>
</div>
</div>
Calls to document.querySelector("#addressDetails").clientHeight and document.querySelector("#addressDetails").offsetHeight are both returning a seemingly random integer when the closed style is applied to the #addressTarget, when #addressTarget does not have the closed style attached either call returns an accurate value. Ideally the code should be able to calculate the correct height while the style is applied to avoid an FOUC, is there a way to get this value?
The goal here is to set document.querySelector("#addressTarget").style.height to the value returned by the height check to create a reliable slide down. If the javascript call cannot return the required height is there a css rule that can be applied to .heightTransition that will a) represent a transition target and b) be calculated correctly?
(While the exact definitions of .column .left and .right are not required to solve this problem I'm including them here in case they are useful, however the best place I can pull them from is the original .scss so I'm providing them in sass rather than css:
$rook: 500px;
$bishop: 750px;
.column {
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 1rem;
box-sizing: border-box;
&.left {
width: 100%;
vertical-align: top;
text-align: center;
#include applyWiderThan($rook) {
width: 33%;
text-align: right; }
#include applyWiderThan($bishop) {
width: 20%} }
&.right {
width: 100%;
overflow: scroll;
border: 1px solid mix($gold, white, 20%);
border-radius: 10px/10px;
#include applyWiderThan($rook) {
width: 65%;
border: none;
border-radius: none; }
#include applyWiderThan($bishop) {
font-size: 1.5rem;
width: 78%} }
}

Jquery : how to use tooltip with JQuery?

I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.

JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.