So, the problem I face is like this:
I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?
here is th code:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : test.pdf
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
After reading some forums... (here some comments)
The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser).
People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either.
Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.
If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.
The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.
My SOLUTION:
Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
Fernando Rodríguez
frodale#gmail.com
There is a jquery plugin, bgiframe, that makes implementing this fix fairly simple.
Generally you can get around these z-index issues by placing an iframe shim directly under the div. That is, it has the same size and location (but no actual content). I'm not 100% sure this works for PDFs, but I know this fixes some other z-index issues (such as select boxes on IE6).
iframe shims can be a pain if you're placing the div dynamically, since you have to move the iframe shim with it.
I just found a solution to this. Use the google pdf viewer in the iframe to display your pdf on the page then it works like any other div.
example:
<iframe id="ifr"
src="http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true"
style="width:718px; height:700px;"
frameborder="0">
If it's IE your testing, then it could be the same issue as with ComboBox. Try inserting iframe into div.
A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or iframe parent.
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>
<style type='text/css'>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type='text/javascript'>
$(document).ready(function () {
$('#TOPNAV input').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
$(this).toggleClass('ACTIVE');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$('#btnCLICK1').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$('#btnCLICK2').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$('#btnCLICK3').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$('#btnCLICK4').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
<ul id='TOPNAV'>
<li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
<li><input type='button' id='btnCLICK2' value='LEFT' /></li>
<li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
<li><input type='button' id='btnCLICK4' value='TOP' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>
</body>
</html>
Related
I am basically trying to put an html frame within another html page. I tried to open the below site using iframe but no help. Please help me to open this site and also other ways apart from iframe to do this, also I wish to rewrite the html script later in R, so please suggest the suitable approach to follow. Thanks.
<!DOCTYPE html>
<html>
<body>
<base target="_blank">
<iframe>
src="google.com" height="200" width="300"
</iframe>
</body></html>
Update
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_parent"><button>Click me !
</button></a>
</body></html>
This is an example how syntax for iframe looks.
<iframe width="100%" height="100%" src="https://www.google.co.za/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
cant be implemented correctly since google not allowed in frame.
This would work for example :
<iframe width="100%" height="100%" src="https://www.rdocumentation.org/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
R syntax:
iframe(width, height, url_link) //syntax
iframe(width = "560", height = "315", url_link = "https://www.youtube.com/embed/0fKg7e37bQE") //example
Here is the R documentation.
https://www.rdocumentation.org/packages/shinyLP/versions/1.1.0/topics/iframe
EXTRA
Read this about adding custom search from google Click Me
Implementing any fully functional website
To use the iframe in full perspective of the browser ill give you an example using your code:
Also included an button tag to open and close iframe.
$(document).ready(function() {
$(".btn").click(function() {
$("#frame").toggle();
});
});
.btn {color: black; background-color: #eee; height: 50px; width: 200px; border-radius: 10px;border-color: #96bdd9;box-shadow: inset 0 1px 0 #f4f8fb; margin-bottom: 20px;outline: none;}
.test {position: fixed; width: 100%; height: 100%; }
.test iframe { width: 100%; height: 100%; border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button class="btn" >Iframe Open & close</button>
<div class="test">
<iframe id="frame" style="display: none;" width="100%" src="https://getbootstrap.com/" frameborder="0" scrolling="auto">
</iframe>
</div>
</body>
</html>
You can’t show Google in an iframe.
You also can’t show Yahoo!, Twitter or Facebook in an iframe.
Most major sites and banks block this ability through the use of
X-Frame-Options: DENY
Read more here
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
i am using the "old" FB Likebox:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("394109690683544");</script>
<fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
</div>
</div>
</div>
how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.
thank you
It will not work, if you look at the code that's generated
<fb:fan height="120px;" width="200%" ...
translates into
<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"
Which means that the widget reads only the values as the iframe is set to 200px not 200%
EDIT:
Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...
JSFiddle
I was using javascript to load a div and my problem was it was instantaneously expanding. I'm trying to get the smooth expand where it appears to be moving frame by frame. I was turned on to Jquery in which I changed my information into Jquery The problem is that I'm back to square one of the content just appearing after I added the display:none; line into my style. If I remove the display:none then all my content shows on page-load rather then after it's clicked. If Anyone has a solution that would be appreciated. Thanks.
My Code is as follows
<style>
j { width:150px;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Toggle</button>
<br />
<j>
My Content Goes here.
</j>
<script>
$("button").click(function () {
$("j").slideToggle("slow");
});
</script>
I have a page which generates coupons. Each coupon is a div with a height varying depending on the content. I want to print as many coupons on each page as possible, but I do not want the coupons to be split out over several pages. The CSS property page-break-inside does exactly what I need. However, I need this to work for Firefox and/or Chrome. And this is not supported. Two years and one year ago the same question was asked, and there was no good alternative for this. We are a lot of CSS3/HTML5/overall browser development further... is there an alternative to get this working?
Example is here:
http://jsfiddle.net/e3U66/2/
Assume that a page, when printed, measures 1000px. I want the second DIV to appear on the second page, because otherwise it is split out over the first and second. This code works in Opera, but not in FF or Chrome.
Why not, after the page is loaded with your content, use js to scroll through the content and add up the height of the divs.
Once you've reached 1000px or whatever you've determined to be the page height, then insert a blank div styled with page-break-before before the latest div.
Below a solution made with the help of Prototype (1.7) library
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
//page height in px
//thisPageTotal is the total of pixels on the current page, in px
pageHeight = 1000;
thisPageTotal = 0;
Event.observe(window, 'load', function(){
$$('.coupon').each(function(el){
var layout = el.getLayout();
thisPageTotal += parseInt(layout.get('margin-box-height'));
if(thisPageTotal > pageHeight) {
thisPageTotal = parseInt(layout.get('margin-box-height'));
var pageBreak = new Element('div', {
'class': 'pagebreak'
});
el.insert({before: pageBreak});
}
//this shows the current amount of px on the current page
el.update(thisPageTotal);
});
});
</script>
<style type="text/css">
div {
border: 1px solid #000;
margin: 30px;
}
.pagebreak {
page-break-after: always;
}
</style>
</head>
<body>
<div id="div_1" class="coupon" style="height: 500px"></div>
<div id="div_2" class="coupon" style="height: 200px"></div>
<div id="div_3" class="coupon" style="height: 500px"></div>
<div id="div_4" class="coupon" style="height: 200px"></div>
<div id="div_5" class="coupon" style="height: 200px"></div>
<div id="div_6" class="coupon" style="height: 400px"></div>
<div id="div_7" class="coupon" style="height: 300px"></div>
<div id="div_8" class="coupon" style="height: 400px"></div>
<div id="div_9" class="coupon" style="height: 500px"></div>
<div id="div_10" class="coupon" style="height: 200px"></div>
</body>
</html>
Maybe it helps
Honestly I would just advise creating images of the actually coupons or generating a pdf. I'm assuming you are probably generating barcodes for all the coupons already, so generating the actually images shouldn't be to hard using php (or whatever the code choice might be).
Here is some info on php image creation, but SO would probably be a better source for examples.
http://php.net/manual/en/function.imagecreate.php
Then you could just list the images.
<img src>
<img src>
<img src>
...
There's no sense it recreating the wheel.
set float left for these div and set width as 100%.
i wont tryed it ., it's may work.
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>