I have two divs with text in them. One is static i.e. no action on user's part changes anything in the div, the other div is transparent, however, the text shadow moves as per the user's actions.
Even though I have mentioned z-index in CSS, it doesn't seem to be implemented by the browser. In this case, the div 'introText' needs to be on top of the div 'introTextShadow'.
HTML:
<div id="textQuote">
<div id="introTextShadow">
<span id="textshadow01" class="cTextShadow">This</span>
<span id="textshadow02" class="cTextShadow">world</span>
<span id="textshadow03" class="cTextShadow">rocks</span>
<span id="textshadow04" class="cTextShadow">big</span>
<span id="textshadow05" class="cTextShadow">time</span>
</div>
<div id="introText">
<span id="text01" class="cTextFloat">This</span>
<span id="text02" class="cTextFloat">world</span>
<span id="text03" class="cTextFloat">rocks</span>
<span id="text04" class="cTextFloat">big</span>
<span id="text05" class="cTextFloat">time</span>
</div>
</div>
CSS:
#introText {
position: absolute;
top: 200px;
left: 20px;
width: 300px;
height: 50px;
word-spacing: 0;
font-size: 16px;
font-weight: 900;
color: rgb(100,100,100);
text-shadow: 1px 1px 1px rgb(1,1,1),
-1px -1px 1px rgb(199,199,199);
opacity: 1;
z-index: 100;
}
#introTextShadow {
position: absolute;
top: 200px;
left: 20px;
width: 300px;
height: 50px;
word-spacing: 0;
color: rgb(21,21,21);
font-weight: 900;
z-index: 0;
}
Here is the JS fiddle
Related
Depending on the zoom-level of the browser, the background color of the child div has a strange behavior. Some white spaces appears.
See these examples:
Zoom 125%:
Zoom 150%:
Zoom 175%:
Zoom 200%:
Here is my code:
(JSFiddle: https://jsfiddle.net/3L4wfvyg/)
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.HeaderContainer3:hover {
color: white !important;
background-color: blue;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Why is this happening and how can I solve the problem?
When i remove the border from Container3 it seems like the problem does not occur anymore, but I do not know if this is because it gets hard to see if the problem is still there due to the white color.
There can be a sort of edge effect on zoom brought about by one CSS pixel not being just one screen pixel but 2 or more on high def/modern screens. If the system is trying to map several screen pixels to one CSS one and is asked to do a fraction it can sometimes 'leave behind' a screen pixel. Hence the white on occasion, and the variation at different zoom levels.
In the case in the question maybe doing a simple hack, making the parent element have background blue on hover, would be sufficient?
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
background-color: blue;
}
Inspired by A Haworth's answer: coloring the parent element instead is indeed less prone to rendering artifacts when dealing with different zoomlevels/screen densities. You could remove the background from the child element, and add a new :hover selector for the parent that only activates when it is not in the .clicked state.
.HeaderContainer3:hover {
color: white !important;
/** Background removed here **/
}
/** New block with a :not selector **/
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
Full working code example:
$(document).ready(function () {
document.getElementById("HeaderContainer").addEventListener("click", function (e) {
if (e.target.id != "FormContainer") {
document.getElementById("Container3").classList.toggle("clicked");
document.getElementById("HeaderContainer").classList.toggle("HeaderContainer3");
};
});
});
.Container1 {
background-color: white;
line-height: 30px;
font-size: 20px;
color: black;
border: none;
position: absolute;
}
.Container1 h3 {
font-size: 30px;
color: #142D41;
margin-top: 20px;
margin-bottom: 10px;
position: relative;
}
.Container1 .Container3 {
padding: 30px;
display: block;
border: 1px solid black;
border-radius: 5px;
margin-top: 15px;
font-size: 15px;
min-width: 100%;
background-color: white;
text-align: left;
height: 100px;
overflow: hidden;
}
.Container1 .Container3:hover {
text-decoration: none !important;
cursor: pointer;
}
.Container1 .Container3:hover:not(.clicked) {
background-color: blue;
}
.HeaderContainer3:hover {
color: white !important;
}
.HeaderContainer2 {
padding: 30px;
}
.HeaderContainer1 {
z-index: 10;
position: relative;
margin: -31px;
padding: 32px 30px 25px 30px;
width: auto;
}
.FormContainer {
font-size: 20px !important;
}
#Container3 {
height: 0px;
transition: height 300ms ease-in-out;
box-shadow: 0.1px 0.6px 2px 0px #8c8c8c;
}
#Container3.clicked {
height: 314px;
}
.Header {
position: relative;
padding-top: 6px;
overflow: hidden;
width: 100%;
height: 100%;
cursor: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="Container1" class="Container1">
<h3>Title
</h3>
<div class="Container2">
<div id="Container3" class="Container3">
<div id="HeaderContainer" class="HeaderContainer1 HeaderContainer2 HeaderContainer3">
<div class="Header">Header</div>
</div>
<div id="FormContainer" class="FormContainer">
<hr />
<div style="padding: 5px 0px 8px 0px;">
Form
</div>
<br />
<div id="FormElementsContainer" class="FormElementsContainer">
<div>
<b>First</b>
<br />
</div>
<div>
<b>Last</b>
<br />
</div>
<div>
<b>Third</b>
<br />
</div>
<div>
<br />
<button>
Submit
</button>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
Here's a fix. It's similar to what someone else suggested, but takes into account the .clicked state.
Fix boils down to setting the background-color property on the container with border and border-radius properties instead of on the nested container. It achieves this by replacing .HeaderContainer3:hover selector with .Container3:not(.clicked):hover.
.Container3:not(.clicked):hover {
color: white !important;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/2eqLb6go/
As for why this happens, I don't have a technical answer, but it does appear to have something to do with fractional pixel rendering with nested containers when parent has a border. Here's a demonstration of the same problem in a simplified form:
https://jsfiddle.net/0vje6k5w/
It seems like a rendering issue due to a rounding error with border. It appears that the clipping area and the border widths are calculated differently resulting in an inconsistent gap of transparent pixels which can be rounded to either 0 or 1. The background of the container with the border property is respected (hence the above-described fix), but anything nested inside of it will be clipped, and there doesn't appear to be any way to stop that from happening. E.g. the problem persists even if the child elements are absolutely positioned inside of it.
Honestly, I'd call this a buggy implementation of the box-model with regard to page zoom. It's odd that all major browsers in 2021 suffer from the same behavior.
I changed border size to 0.0125em. (It's weird but worked!).
.Container1 .Container3 {
border: 0.0125em solid black;
}
I'm trying to get the lines on either side of the icon (top) and text(bottom) and dynamically to there width for my project?
Try something like this
I created a div with a border and two text elements inside
<div class="text-container">
<span class="top-text">Top Text"</span>
<span class="bottom-text">Bottom Text</span>
</div>
I positioned the text elements absolute relative to the parent div and used a background on them to overlay the border.
May be this will work for you.
HTML
<div class="box">
<span class="top">TOP TEXT</span>
<span class="bottom">BOTTOM TEXT</span>
</div>
CSS
.box {
margin-top: 50px;
position: relative;
border: 1px solid #d00;
min-height: 100px;
text-align: center;
}
.box > span.top {
background: #fff;
padding: 5px;
border: 1px solid #d00;
top: -15px;
position: absolute;
left: calc(50% - 35px);
}
.box > span.bottom {
position: absolute;
background: #fff;
padding: 5px;
border: 1px solid #d00;
bottom: -15px;
left: calc(50% - 50px);
}
with Jquery dynamic width capture.
HTML
<div class="box">
<span class="top">TOP TEXT</span>
<span class="bottom">BOTTOM TEXT</span>
</div>
CSS
.box {
margin-top: 50px;
position: relative;
border: 1px solid #d00;
min-height: 100px;
text-align: center;
}
.box > span.top {
background: #fff;
padding: 5px;
border: 1px solid #d00;
top: -15px;
position: absolute;
}
.box > span.bottom {
position: absolute;
background: #fff;
padding: 5px;
border: 1px solid #d00;
bottom: -15px;
}
jQuery
var getWidthTop = $('.box > .top').width() / 2;
var getWidthBottom = $('.box > .bottom').width() / 2;
$('.box > .top').css({'left':'calc(50% - ' + getWidthTop + 'px)'});
$('.box > .bottom').css({'left':'calc(50% - ' + getWidthBottom + 'px)'});
<div class="box">
<span class="top">
Some TExt
</span>
<span class="bottom">
Some TEXt
</span>
</div>
and create some fiddle
https://jsfiddle.net/tf8ajg0h/34/
What im trying to do is when I hover over a anchor tag link on the same page, it also needs to affect the corresponding link.
It might be possible in CSS but I think JQuery would handle this better.
Im new to jquery
Heres my code:
<script>
$('.js-tooltip').on('click', function () {
$(this).toggleClass('js-tooltip-active')
})
</script>
Heres my CSS:
.tooltip {
position: relative;
display: inline-block;
height: 18px;
width: 18px;
line-height: 26px;
padding: 0 0;
border-radius: 15px;
font-size: 12px;
font-weight: bold;
color: #FFF;
background: #b71a71;
box-shadow: none;
white-space: nowrap;
cursor: pointer;
}
.tooltip:hover {
background: #b1d12d;
}
.tooltip-wrapper {
pointer-events: none;
position: absolute;
width: 250px;
margin-left: -125px;
left: 50%;
bottom: 100%;
margin-bottom: 5px;
text-align: center;
text-decoration: none;
opacity: 0;
transition: opacity 0.5s ease;
}
.js-tooltip-active .tooltip-wrapper,
.tooltip:hover .tooltip-wrapper,
.tooltip-wrapper:hover {
pointer-events: auto;
opacity: 1;
}
.tooltip-wrapper:after {
z-index: 11;
display: block;
position: absolute;
left: 50%;
margin-left: -7px;
content: " ";
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #333;
}
.tooltip-wrapper:before {
bottom: -9px;
display: block;
position: absolute;
left: 50%;
margin-left: -8px;
content: " ";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(255,255,255,0.1);
}
.tooltip-text {
display: inline-block;
position: relative;
padding: 6px 9px;
z-index: 10;
white-space: normal;
font-size: 12px;
font-weight: normal;
line-height: 18px;
background: #333;
background: rgba(0,0,0,0.8);
color: #fff;
border-radius: 5px;
text-shadow: none;
cursor: default;
box-shadow: 0 1px rgba(255,255,255,0.1);
}
<div class="mapbox"><img src="#" style="z-index: 101; border: none" width="672" height="744" usemap="#Map"/>
<a class="tooltip js-tooltip manmap" href="#" style="top: -315px; left: 270px; border: none; "><span class="tooltip-wrapper" style="z-index: 103; border: none; "><span class="tooltip-text" style="z-index: 103; cursor: pointer; border: none;">View</span></span></a>
<a class="tooltip js-tooltip lonmap" href="#" style="top: -150px; left: 365px;"><span class="tooltip-wrapper" style="z-index: 103;"><span class="tooltip-text" style="z-index: 103; cursor: pointer;">View</span></span></a>
</div>
What the code above does is when I hover over the hotspot a small title box appears that the user can click.
<div id="col3" class="right">
<h2>Select a location<img src="#" width="21" height="18" alt="icon" /></h2>
<div class="box">
<h3>Select</h3>
<ul id="locationList">
<li class="a">A</li>
<li>B</li>
</ul>
</div>
This is the <li> link list that I would like to connect to the map.
What I want is to try and replicate the effect of the circle hover but on the links, I don't want to show and hide the circle markers on the map I would just like them to appear when the corresponding link has been hovered over.
Also the Map markers change colour from purple to green am I able to replicate that effect hovering over the links in the sidebar.
So basically when I hover over the circle marker the title tag pops up with the link, that is what I would like the link to do as well so I can hover over link and it will do the same and hovering over the circle and vice-versa.
I don't know if this helps but this is where I got the code for the tooltip/hotspot Heres the link, then I changed the code for it to look circle.
Thanks.
Ok....it took a little doing because my Jquery skills are poor so I'm sure this could be refactored and simplified but here goes.
We have to add an individual attribute to each list item, I use a data-attribute which can then be used to select each individual map point which will have it's own ID
JSfiddle Demo
Revised HTML
<div id="col5" class="left">
<h1>Pick A Location</h1>
<div class="mapbox">
<a id="A" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper">
<span class="tooltip-text">View 1</span>
</span>
</a>
<a id="B" class="tooltip js-tooltip" href="#">
<span class="tooltip-wrapper" >
<span class="tooltip-text">View 2</span>
</span>
</a>
</div>
</div>
<div class="box">
<h3>Select a location</h3>
<ul id="locationList">
<li><a data-item="A" href="#">View 1</a></li>
<li><a data-item="B" href="#">View 2</a></li>
</ul>
</div>
CSS
I just added an `.active' class for the list item links
#locationList a.active {
color:red;
}
EDIT- and for the tooltip something similar
.tooltip.current {
background: #b1d12d;
}
Jquery
I added these two functions
$('.tooltip').hover(function() {
$('a[data-item="'+this.id+'"]').toggleClass('active');
});
/* when a tooltip is hovered, find the anchor which has a data-item attribute that matches the ID of the hovered element and toggle the active class */
$('#locationList a').hover(function() {
$('#' + $(this).data('item')).toggleClass('js-tooltip-active');
$('#' + $(this).data('item')).toggleClass('current'); /* EDIT for hover */
});
/* when list item link is hovered, find the matching ID toggle the js-tooltip-active class */
This is what you need. it is no my code all the credit goes to the author of the link below. Check the link to see the live example.
#one:hover ~ #three,
#six:hover ~ #four,
#seven:hover ~ .box {
background-color: black;
color: white;
}
#four {
margin-left: -35px;
}
#six {
left: 80px;
position: relative;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
http://jsfiddle.net/ThinkingStiff/a3y52/
I'm playing around with the google InfoWindow.
And almost everything is perfect. I'm Just missing something on the windows.
I always have a right and bottom white space.
I don't mind that much for the bottom one but I'd like to get rid of the right one.
Any idea how to do that ?
EDIT, here is the code:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
<div class="" style="overflow: auto;">
<div class="infoBox">
<div style="max-width: 352px; padding: 0px;">
<div id="info-map-element">
<div class="street">
<img src="http://maps.googleapis.com/maps/api/streetview?size=360x190&location=37.7831059,-122.4446528&fov=90&heading=235&pitch=10&sensor=false" alt="">
<div class="shadow"></div>
<div class="title"> Customer History<br> 123 Foo Av, San Francisco, CA 12345</div>
</div>
<div class="wrap clearfix">
<div class="item clearfix">
<small>2013-09-11</small>
<p>This is the a test of customer history purchases.</p>
<div class="row clearfix">
<div class="col-lg-5"> Cost Estimate <span>$11000</span></div>
<div class="col-lg-7"> Purchase No. <span>123456789</span></div>
</div>
<div class="row clearfix">
<div class="col-lg-12"> Sell by My Online seller dot com</div>
</div>
</div>
<div class="row clearfix"></div>
</div>
</div>
</div>
</div>
</div>
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
#map_newsfeed .gm-style-iw > div {
overflow: hidden!important;
}.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
font-size: 13px;
font-weight: normal;
}#info-map-element .row > div {
font-size: inherit;
font-weight: inherit;
}
#info-map-element .shadow {
width: 100%;
height: 100%;
bottom: 0;
-webkit-box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
box-shadow: 0 -35px 75px rgba(0,0,0,0.95) inset;
position: absolute;
font-style: normal;
font-weight: normal;
z-index: 1;
}
#map .gm-style {
font-family: inherit;
}#info-map-element .pagination {
margin: 10px 0 0;
}
.infoBox > img {
position: absolute;
top: 0px;
right: 25px;
display: block;
z-index: 3;
}
#info-map-element .pointer {
width:23px;
height:19px;
top: 99%;
left: 41%;
position:absolute;
display:block;
background: transparent url('http://d3flf7kkefqaeh.cloudfront.net/_assets/3/pointer_down.png');
}#info-map-element .wrap {
padding: 0;
}
#info-map-element .wrap .item:nth-child(even) {
background: #ececec;
}
#info-map-element .wrap .item {
padding: 10px;
}#legend strong {
float: left;
margin: 0 10px 0 0;
display: block;
}
EDTI #2:
So I can change the dom the way I want it with Jquery. Those 3 lines work"
$(".gm-style-iw").next("div").css("right", '52px');
$(".gm-style-iw").prev("div").children().last().css("width", '351px');
$($(".gm-style-iw").prev("div").children()[1]).css("width", '351px');
But for some reason only the first line get executed.
The padding is caused by the scroll applied to the .gm-style-iw-d div, this would remove it but be careful and make sure all your content fits inside the max width and height of the info window cause otherwise it will be hidden.
.gm-style-iw-d {
overflow: hidden !important;
}
You need to first remove the infowindow background & shadow, then apply your own css.
JS part
/*
* The google.maps.event.addListener() event waits for
* the creation of the infowindow HTML structure 'domready'
* and before the opening of the infowindow defined styles
* are applied.
*/
google.maps.event.addListener(infowindow, 'domready', function() {
// Reference to the DIV which receives the contents of the infowindow using jQuery
var iwOuter = $('.gm-style-iw');
/* The DIV we want to change is above the .gm-style-iw DIV.
* So, we use jQuery and create a iwBackground variable,
* and took advantage of the existing reference to .gm-style-iw for the previous DIV with .prev().
*/
var iwBackground = iwOuter.prev();
// Remove the background shadow DIV
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
// Remove the white background DIV
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
});
CSS part (example)
.gm-style-iw {
width: 350px !important;
top: 0 !important;
left: 0 !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 0 0;
}
Source
For those who are still looking for solution. Angular 8, helped the code below to remove the paddings and hide the close button for agm-info-window.
Basically, overflow: scroll in .gm-style-iw-d element creates that space.
/* hide close button in info-window */
::ng-deep button.gm-ui-hover-effect {
visibility: hidden;
}
/* clear the paddings */
::ng-deep .gm-style .gm-style-iw-c {
padding: 0;
}
/* remove the white space */
::ng-deep .gm-style-iw .gm-style-iw-d {
overflow: auto !important;
}
You should stop to try fix height/width and set it auto.
Try to change this line:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: 352px; height: 290px;">
To this:
<div class="gm-style-iw" style="position: absolute; left: 12px; top: 9px; overflow: auto; width: auto; height: auto;">
In the Css change:
#map_newsfeed .gm-style-iw {
width: 352px!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
To:
#map_newsfeed .gm-style-iw {
width: auto!important;
height: auto!important;
left: 0!important;
font-size: 15px!important;
font-weight: normal!important;
top: 0!important;
overflow: hidden!important;
border-radius: 3px;
}
It should solve your problem, if not, please show the full code (html/css).
I have two DIVs (previous-image and next-image) that are absolutely positioned. Here is my structure:
<div id="sheet" onclick="close()">
<div id="popover">
<div id="previous-image" onclick="previous()">«</div>
<img src="http://cynthiawoodyardlandscapedesign.com/watermark.php?src=images/main1.jpg&x=0&y=470&opacity=50" id="popover-image" />
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Link: http://cynthiawoodyardlandscapedesign.com/
Here is my CSS:
#next-image {
position: absolute;
right: -100px;
top: 250px;
text-align: center;
line-height: 50px;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
z-index: 200;
background: transparent;
color: white;
}
#previous-image {
position: absolute;
left: -100px;
top: 250px;
text-align: center;
line-height: 50px;
z-index: 200;
font-size: 50px;
-webkit-text-stroke: 1px black;
-moz-text-stroke: 1px black;
height: 50px;
width: 50px;
background: transparent;
color: white;
}
My JavaScript:
$("#sheet").click(function() {
$("#sheet").animate({
opacity: 0
}, 200, function() {
$("#sheet").hide();
});
});
Edit
Seems you had omitted the actual HTML of your #sheet element, which has a display: none set on the element, and therefore all is invisible inside the sheet element, including the arrows.
Your actual HTML on your site is:
<div id="sheet" onclick="close()" style="display: none;">
<div id="popover" onclick="close()">
<div id="previous-image" onclick="previous()">«</div>
<img src="watermark.php?src=images/main1.jpg&x=0&y=420&opactity=50"
id="popover-image" onclick="close()">
<div id="next-image" onclick="next()">»</div>
</div>
</div>
Removing that style="display: none;" will show the arrows again.