I am currently in the process of developing an online shop via wordpress. Everything was working fine, now I wanted to give my page a custom border( inverted round corners) and found the css code for it as seen here:
css:
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
html:
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello</h1>
<div class="bottom"> </div>
</div>
</div>
I renamed the classes to get no conflict with the existing css classes of the theme. It is working fine as seen here:my site. The problem is now, that I cannot interact with the site anymore, no links, no hover effects. It seems like the custom css is overlaying the actual site. Do you have any suggestions what I maybe did wrong?
P.S. I edited the header.php so that inverted corner div and the top div are right underneath the page-wrapper div( site content) and in the footer.php I edited the top div and the inverted-corner div closing right above the page-wrapper div closing.
Add :
pointer-events: none;
to the .bottom-corner CSS, so the mouse passes through.
In your custom.css you have this:
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
This basically overlays the whole page and thus disables any interaction.
One other option I would like to suggest to change following css rule
CSS
.top-corner, .bottom-corner {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
Replace above code with the below one
.top - corner, .bottom - corner {
position: absolute;
width: 100 % ;
}
this solution will work on all modern browsers and IE8 and above ( I'm not sure about lower version of IE, but it may work on them as well )
Related
I need help keeping my CSS tooltip on screen for my website. It unfortunately is too big for the website near the edge of the screen and also is WAY too big for any mobile device and doesn't position correctly (probably because I plan to add very large descriptions in each tooltip). I would like to just use CSS but would be willing to use JS as I'm starting to think that may be the only way to do it correctly, but I'm having a lot of trouble figuring out how to make it work.
I basically had copied over the code from another website with many tweaks if it helps you understand my code better: https://www.w3schools.com/css/css_tooltip.asp
The only results I could find online were about centering the tooltip on the screen which strangely didn't work and code using SCSS which I'm not experienced with and would prefer not to use.
Here is my partial HTML and CSS code:
body {
overflow-x: hidden;
overflow-y: scroll;
}
.ref {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.ref .versekjv {
visibility: hidden;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 5px;
border-radius: 6px;
z-index: 98;
position: absolute;
top: 100%;
left: 50%;
margin-left: -125px;
flex-direction: column;
}
.ref .versekjv::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.ref:hover .versekjv {
visibility: visible;
}
.redletters {
color:red;
}
#media screen and (max-width:1000px){
.ref .versekjv {
font-size: 1rem;
max-width: 20rem;
position: fixed;
bottom: auto; top: 13%;
left: 78%;
text-align: left;
transform: translate(-50%);
transform: translateX(-50%);
white-space: normal;
z-index: 98;
}
.ref .versekjv::after {
border-color: transparent;
}
}
<li class="box"><a>
<div class="innerbox">Reference</div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u></div>
<div class="innerbox"><u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>#</i> Verse Text</p></span></u>; <u class="ref">Reference<span class="versekjv"><b>Bible Book</b><p><i>Verse Num.</i> Verse Text</p></span></u></div>
</a></li>
Thank you so much for your help!
First, you need to get the DOM object of your tooltip,
let tooltip = document.querySelector(".ref .versekjv")
Then, you can use the js method "getBoundingClientRect", which gives you an object that has top, right, left and bottom fields which give you the distances of your element from top, right, left and bottom of the viewport. If your element is fully visible inside the element, all four fields would be positive numbers, otherwise it means it's partly invisible, for example a left field of "-10" means about 10px of length of your elements is beyond the left edge of the viewport.
What you can do is that you always check the top, left, ... distances of your element, and if they are negative numbers, manually change them and thus position your element correctly, which could be achieved like this:
tooltip.style.left = 20
I need to put a google maps into a div and this one must be a circular div, but I've two problem
at load time I see standard rectangular div and after half second this div became circular
when use this map in draggable way I see always a standard div and only after mouse leave I see circle again
I think that the main idea is the order of loading files in your site: html, css, js.
Take a look at this: http://jsfiddle.net/nfng1sm4/
. You only have to change the background color in to the color of your container div.
.circle-text, #googleMap {
width: 500px;
height: 380px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #4679BD;}
adding css position: relative;, z-index: and border-radius to the parent div of the map holder, it will mask the child div(#mapCanvas)
Fiddle demo
css
.mapCover {
position: relative;
width: 300px;
height: 300px;
border: 5px solid #000000;
border-radius: 400px;
overflow: hidden;
z-index: 1000;
}
#mapCanvas {
width: 300px;
height: 300px;
}
html
<div class="mapCover">
<div id="mapCanvas"></div>
</div>
I am trying to display divs with some information after a client clicks on a small dot-like div (7x7px black background) pointing to a place on a map. It works but the distance between the dot-like div and the information div is different in every dot-information couple.
Here is the HTML/JS script. Please, don't mind that all the JavaScript and CSS are in the same file, it is done for the sake of simplicity and will be changed lately.
<html>
<head>
<meta charset="utf8" />
</head>
<body>
<div id="pointer_div"
onclick="getClickPosition(event)"
style="position:absolute; top:1px; left:1px; border: 1px solid black;
background-repeat: no-repeat; width: 1146px; height: 714px;" >
<div id="sofia"
onclick="showForecast('Sofia_381_178')"
style="position:relative; top: 381px; left: 178px;
background:black; width: 7px; height: 7px;" ></div>
<div id="plovdiv"
onclick="showForecast('Plovdiv_512_435')"
style="position:relative; top: 512px; left: 435px;
background:black; width: 7px; height: 7px;" ></div>
<div id="ruse"
onclick="showForecast('Ruse_77_662')"
style="position:relative; top: 77px; left: 662px;
background:black; width: 7px; height: 7px;" ></div>
<div id="result_data"
style="visibility:hidden; width:300px; height:100px;
border: 1px solid black; background:white;"/></div>
</div>
<script language="JavaScript">
function showForecast (strr) {
var splits = strr.split('_');
var xcoord = splits[2];
var ycoord = splits[1];
if (xcoord>810) xcoord= xcoord-300;
if (ycoord>610) ycoord= ycoord-100;
var resultDiv= document.getElementById("result_data");
resultDiv.style.visibility="visible";
resultDiv.style.position = "relative";
resultDiv.style.left = xcoord;
resultDiv.style.top = ycoord;
resultDiv.innerHTML = 'Forecast for: ' + splits[0];
};
</script>
</body>
</html>
So, when I click on div "plovdiv", info div appears some 30px below the dot-div, but when I click "ruse" the info div shows right below the dot. I checked both in Firefox and SeaMonkey browsers and they behave identically.
I tried to put the script in jsfiddle but it was showing all the info divs at the top left of the page and I couldn't fix that. Here it is anyway, if anyone is interested jsfiddle.
The coordinates for the info divs are passed to the JS function in a string, and they are the same as those of the dot divs (one of the reasons I kept the css in the html file). I hope someone with better understanding of JS will be able to explain that.
It's because you are using position:relative on your divs, which moves them from the position they would be in by default. So (because divs are a block element) ruse would be under plovdiv which would be under sofia, then they are moved by the top and left values. Make them all position: absolute and they'll behave uniformly.
Here's your code working in jsfiddle(I added px units to your js): https://jsfiddle.net/wkz6dj04/5/
#sofia {
position: absolute;
top: 381px;
left: 178px;
background: black;
width: 7px;
height: 7px;
}
#plovdiv {
position: absolute;
top: 512px;
left: 435px;
background: black;
width: 7px;
height: 7px;
}
#ruse {
position: absolute;
top: 77px;
left: 662px;
background: black;
width: 7px;
height: 7px;
}
Here's the code working with the above modifications: https://jsfiddle.net/wkz6dj04/6/
If you want the gap back in, I suggest using margin-top on your #result_data like in this fiddle: https://jsfiddle.net/wkz6dj04/7/
I use Bootstrap 3.3.4 and I want to know which way is better to align texts or items in carousel.
here is a exemple from a slider. How can I align text like this and stay at any screen resolution at the same place. I use top: x, right: x but every time when I resize the window, text climb above and not stay at middle anymore.
CSS for align
.carousel-caption {
position: absolute;
right: 15%;
bottom: 40%;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
Just basic bootstrap slider. But If I use bottom 40% for exemple to rise text at middle of the page works. But if I use smaller displays the text rise and stay almost on top.
In this exemple text stay fixed on every device.
<div class="wrap">
<div class="display-table">
<div class="display-cell">
<h1>Title in here</h1>
</div>
</div>
</div>
<style>
.wrap {
width: 100%;
height: 400px;
}
.display-table {
width: 100%;
height: 100%;
display: table;
}
.display-cell {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
</style>
This allows fixed vertical alignment and should work cross browser. Just note the fixed height applied to .wrap must be present for the children to inherit 100% height!
Hope this helps :)
Hope, Try this demo that centers text vertically in the Bootstrap carousel.
Here is the Fiddle.
All I do here is give the div a height that contains the text and then position it with this css...
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
I have a page that I want to show a div overlay with a popup. Basically, like colorbox. But I want this to be permanent. They should not be able to click out of the div. Inside of the div should be contents from popsurvey.com in an iframe. The link I need to frame is this -> http://www.popsurvey.com/s/5gzmqc/0x5513 - How do you recommend this be done? Thanks.
<script>
$(document).ready(function() {
$.colorbox({iframe:true, width:"620", height:"591", href:"http://www.popsurvey.com/s/5gzmqc/4zk4lm?embed=true", opacity: ".3"});
});
</script>
I've created a solution in jquery which is light enough and simple enough to suit your needs (I hope), Clean and simple is usually the best way to do these sort of things and 99.99% of the time it's pretty redundant to use larger plugins or prebuilt solutions.
jsfiddle demo
jsfiddle
The html:
<div id="block"></div>
<div id="iframecontainer">
<div id="loader"></div>
<iframe></iframe>
</div>
The css:
#iframecontainer {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222;z-index: 999999;}
#iframecontainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#loader {background: url('http://www.calgaryramsrugby.com/images/ajax-loader.gif');background-repeat:no-repeat; width: 250px; height: 250px; margin:auto;}
#block {background: #000; opacity:0.6; position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}
The js:
$(document).ready(function() {
$('#block').fadeIn();
$('#iframecontainer').fadeIn();
$('#iframecontainer iframe').attr('src', 'http://www.popsurvey.com/s/5gzmqc/0x5513');
$('#iframecontainer iframe').load(function() {
$('#loader').fadeOut(function() {
$('iframe').fadeIn();
});
});
});