I'm using code from this answer to print a separate page directly from a print button. The user clicks the print button and a url is sent to the print function. The print function loads the separate page into a display:none iframe and prints that iframe onLoad. It works in IE, Chrome but not firefox. In firefox it loads the page into the div but never prints or opens the print dialog. It turns out firefox will not print an iframe if it is set to display:none as below:
<div id="printerDiv" style="display:none"></div>
Is this expected behavior? All other browsers print, I'm thinking of posting on Bugzilla. I tried some css "tricks" to make the div not display where the user can see it, but it's always visible in some way. I'm currently using the below CSS to make the iframe invisible:
#printerDiv iframe{
width:1px !important;
height:1px !important;
border:0 !important;
margin:0 !important;
}
But it's margins still exist and leave a 14px gap once the iframe is generated.
Is there some way to make the iframe not be visible at all without the display:none attribute? Better yet, is there some way to do this without a hack like that?
I even tried using CSS to set the iframe to display:block #print media types and display:none for screen, the JS function still won't print.
If you absolutely position your iFrame off the page, it will still be printable while not being visible to the user.
#printerDiv iframe{
position: absolute;
top: -1000px;
}
I had exactly the same problem. When the display attribute is set to none, Firefox returns 0 for $('#printerDiv').css('height'), $('#printerDiv')[0].style.height or when outerHeight() or outerWidth() are called on the element.
I used z-index for this which does not bind you to use position:absolute.
So, you could have this in the css file:
#printerDiv { z-index: -10; }
Then, when you want to make it visible, just set the z-index using a jquery css() call.
If you control the content of the iframe, make it print itself:
<script type="text/javascript">
window.print()
</script>
Related
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
I have this piece of code in my style sheet to change the cursor to a pointer on one page, and it works well except on firefox, where it doesn't give you a "pointer" finger to let you know the page is clickable.
html {
cursor:pointer;
}
The thing is, the normal method of putting an onclick event in the body tag isn't working. (shown below not working)
<body onclick="window.href.location=filename">
body text
</body>
How do I get a pointer finger on the whole page instead of the normal mouse cursor in firefox?
Add a hover rule to the body element.
body:hover {
cursor:pointer;
}
You'll have to fill your whole screen with the element.
html {
cursor:pointer;
width: 100%;
height: 100%;
}
Check this JSFiddle that I put together for you.
I guess you need to fill the entire page with some element like:
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px">
</div>
and use this inside the body. There you probaly need to care about the bodies margins.
Or you append a click handler to the entire window via JavaScrip:
window.addEventListener("click", doSomething, false);
Make life easy:
CSS
#page{display:block;position:absolute;top:0;bottom:0:left:0;right:0;}
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.