I want the user's cursor to be hidden over an iframe.
iframe {
cursor: none;
}
However it doesn't do the trick.
Do I need to use JavaScript? Can JavaScript even do it? What's the solution?
You could also do it without JavaScript.
Example: http://jsfiddle.net/dyV7L/
.wrapper {
position: relative;
}
.hide-cursor {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
cursor: none;
z-index: 100;
}
<div class="wrapper">
<iframe src="http://doc.jsfiddle.net/"></iframe>
<div class="hide-cursor"></div>
</div>
Unfortunately, I had to resort to js for this one.
var iframe = document.querySelector('iframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.body.style.cursor = 'none';
This won't work cross-domain, but I don't think you should be using something like that cross domain anyway.
Assuming this is all on your own domain, another good js solution would be to inject a stylesheet into the iframe, changing it's own css to cursor: none on the html or body. I have used a similar strategy for my content manager - I load the real page right into the admin panel, inject some elements and a stylesheet into it, and then have admin features available right on the site - loaded in the iframe.
I think the only solution without srcipts: create a div, set position: absolute to the div and Iframe, and set the div over the ifram with z-index.
Example:
iframe{
width: 600px;
height: 600px;
display:block;
z-index: 0;
margin-left: 0px;
margin-right: 0px;
position:absolute;
}
div{
width: 600px;
height: 600px;
z-index: 1;
display:block;
margin-left: 0px;
margin-right:0px;
position:absolute;
cursor:none;
}
Related
I've embed a google maps iframe giving it a class for a responsive behavior:
.google-maps {
padding-bottom: 55%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7325331.382945205!2d12.835158178438968!3d26.299870988416156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x13a892d98ece010d%3A0xfa076041c7f9c22a!2sLibya!5e0!3m2!1sen!2sin!4v1529409655794" width="350" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
In responsive mode it work, but when I try to put a text above or under the iframe, the text is covered by the map, and the map doesn't respect the dimension that I give to it like width=450 height=300.
When I remove the class, the text and the dimension given work, but of course the map is not responsive anymore.
Someone could help me?
Thank a lot!
Do not change the iframe css
remove this
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
and do this
.google-maps {
display: block;
width: 100%;
height: 200px // change this with media queries for different screen sizes
}
Btw it the style fully depends on what you are trying to achieve.
If you want to place the iframe inside the .google-maps you have to add the position: relative; to the .google-maps
.google-maps {
display: block;
position: relative;
width: 350px;
height: 400px;
overflow: hidden;
}
it will fit the iframe inside the google-maps div.
but better is don't try to resize the iframe use them as provided by the google or you can create your custom google map from here google map developeres.
I want to make a screen unclickable by spreading a think transparent layer of any color over the screen on the click event of a button using CSS.
Please help with this.
Using jQuery and CSS, you could define a class .spread :
.spread {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.5;
z-index: 200;
}
And when you click on the button:
$('body').append("<div class='spread'></div>");
This would add the div to the body, and the div would position itself in the top left corner. You may also have to put:
body {
margin: 0;
}
Example: http://jsfiddle.net/jcolicchio/TuP2A/
It should be super easy
HTML
<body>
some code here
<div class=overlay><div>
</body>
CSS
.overlay {
position: fixed;
z-index:100;
top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,.0);
}
Hey all i have a wonderful CSS problem here.
I am trying to use an APDIV that has a style of:
#name {
position: absolute;
width: 356px;
height: 25px;
z-index: 1;
left: 43px;
top: 1000px;
}
#donation_form {
margin-left:auto;
margin-right:auto;
width:785px;
height:520px;
background-image:url(../img/formBG_ChattClub.gif);
}
And that looks great in dreamweaver in design view:
BUT when i go to view it in the browser it shows like so:
The HTML code for the name is:
donation_container does not have a style associated with it.
What am i missing so that it lines up with the boxes just fine without any problem??
Thanks!
#donation_form {
position: relative;
}
#name {
top: 3px;
left: 5px;
}
Beside what you have written already
I used a CSS code to hide an iframe behind an image :
<style>
iframe{
opacity: 0;
border: 0px none transparent;
position: absolute;
top: 0px;
left: 0px;
height: 400px;
width: 500px;
filter:alpha(opacity=0);
}
img{
position: absolute;
top: 0px;
left: 0px;
height: 350px;
width: 401px;
}
</style>
I inserted Google Ads in the header, but ads are invisible, Please help!
you are currently applying your style to all iframes and imgs on the document.
You should use classes or ids instead, so you apply just to certain elements.
Using classes:
iframe.myframe{
...
}
//or simply
.myframe{
}
Using ids
#myframe {
...
}
and your HTML should be:
<iframe class="myframe"> or <iframe id="myframe">
Ids can only be used once per document, while classes can be used on several tags. This way your CSS should only affect specific elements, and leave the rest unaltered.
Hope it helps!
I need to fix a footer to the bottom of the viewport. IE 6 is the problem--and yes, it must work in IE 6. That much, is not my call.
Using this:
div#footer {
width:1020px;
position: absolute;
top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
In my IE6.css I can fix the footer to the top of the page. But if I switch it to this:
div#footer {
width:1020px;
position: absolute;
bottom: expression(0+((e=document.documentElement.scrollBottom)?e:document.body.scrollBottom)+'px');
left: expression(50%+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
}
It goes haywire. Am I implementing the expression function wrong for fixing it to the bottom of the viewport?
Thanks!
Don't use the expression clause. From my experience it can render the page a little on the slow side and behaves oddly. Some times it'll work and others it'll simply fail not gracefully.
I've had good success with these methods.
http://matthewjamestaylor.com/blog/bottom-footer-demo.htm
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
But without seeing your entire page it's a little harder to see if any of the links I provided will get in the way of your current stylesheet.
Try using this instead of expressions:
* {
margin: 0;
}
html, body {
height: 100%;
overflow: auto;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.box {
position: fixed;
left: 50%;
top: 180px;
margin: 0 0 0 -370px;
}
* html .box {
position: absolute;
}
/*
Fixed Positioning in IE6
http://ryanfait.com/
*/