I used iframe for delivering an image icon for the pdf links in an html page.
I have tried using overflow:hidden, scrolling: "no" etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this.
Here is the complete code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
/* one */
.imagewrap {
display: inline-block;
position: relative;
}
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
}
iframe{
overflow:hidden;
}
</style>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<h1>PDF Files</h1>
<br><br>
<div class="imagewrap" id="pdf1">
<a href="something.pdf">
<img width="100" height="100" border="0">
<iframe src="something.pdf" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe></img>
</a> <i class=" icon-remove-sign" ></i>
</div>
You can set attribute scrolling= 'no' in your iframe.
<iframe src="..." style="overflow:hidden" scrolling="no" />
Here is a fiddle
UPDATE
Here is a fiddle with a valid pdf link. It looks ok on my browser (ff, chrome)
Please try this code
<iframe src="your site url" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Add demo link
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Use the above to remove scrollbars from iframes on chrome
Related
I am working on a project where we need to save the iframe content as a PDF or an image.
Currently, I getting issue where the PDF is just blank.
Does anyone has any solution for this ?
Thanks in advance.
Here is my code:
<html>
<head>
<script src="jspdf.umd.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" ></script>
<script >
function createPdf(){
window.jsPDF = window.jspdf.jsPDF
var pdf = new jsPDF()
var element = document.getElementById("capture")
pdf.save("output.pdf")
}
</script>
</head>
<body>
<iframe id="capture" src="https://wikipedia.org/wiki/Main_Page" style=" width: 100%; height: 600px" frameborder="0"></iframe>
<button onclick="createPdf()">create pdf </button>
</body>
</html>
I am using JQueryUI with dialogextend on a boostrap template (Shards UI).
I have the issue that the dialog can move outside the window and makes scrollbars to the webpage:
Does anyone know what can cause this? I've tried to include the CSS and JS in different orders, but that doesn't help.
Here is the minimal code on which the issue still appears:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>
<body class="h-100">
<div id="testdialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div class="container-fluid">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#testdialog" ).dialog({
resizable: true,
closeText: "",
height: "auto",
width: 400
});
$('.ui-dialog').css('z-index',9999);
} );
</script>
</body>
</html>
Thanks for the replies.
Solved it.
I was using a different version of the JS file and CSS file. Using the same version works.
Hello I'm trying to make a more friendly UI for user when they click on a point on a map. I want the popup button to open a popup vertically (Bottom to Top) from the bottom of the div map. This is on a mobile app and there is not much room to work with. So I've seen a few apps open up the pop-up info from the bottom of the map and cover 1/3 of the map with the pop-up info.
I created a JSfiddle here https://jsfiddle.net/5kdryesz/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
}
</style>
</head>
<body>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
</script>
</html>
I'm having issues understanding the position css property. I've tried absolute but just couldn't figured it out and I'm curious if absolute will work with all different sizes of phones. Any help is appreciated. Thanks
Hope this may help you.
If you use position:absolute then you should have position relative to its parent div.
google map (.leaflet-bottom) has z-index value 1000 so put our popup on map we should have higher z-index value of popup hence i have put z-index value 1001 to our popup.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function(){
$("#popupdiv").show("slide", { direction: "down" }, 600);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap core JS-->
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<!-- Jquery JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<style>
#map {
height: 500px;
width: 300px;
background-color: rgb(52, 58, 64);
}
.popup{
display: none;
background-color: blueviolet;
width: 300px;
position:absolute;
bottom:0;
z-index:1001;
}
.container{
position:relative;
}
</style>
</head>
<body>
<div> Testing </div>
<button id = 'popupbtn'> popup</button>
<div class = 'container'>
<div id= 'map'></div>
<div id = 'popupdiv' class = 'popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
</body>
<script>
</script>
</html>
I assume this is what you need. I used z-index to put the pop-up on top of the map and fixed positioning to put the pop-up at the bottom.
The height of the pop-up will be the same on each device: 30% of the screen. The with is fixed because the width of the map is fixed and therefore also the pop-up.
If the pop-up needs to be 30% of the height of the map, it can be an absolute value.
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
$("#popupbtn").click(function() {
$("#popupdiv").show("slide", {
direction: "down"
}, 600);
})
#map {
height: 700px;
width: 500px;
background-color: rgb(52, 58, 64);
position: relative;
z-index: 10;
}
.popup {
display: none;
background-color: blueviolet;
width: 500px;
height: 30vw;
position: fixed;
bottom: 0;
z-index: 20;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/3590d6dbc0.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div> Testing </div>
<button id='popupbtn'> popup</button>
<div class='container'>
<div id='map'></div>
<div id='popupdiv' class='popup'> Info This needs to go over Map div
<br>phone: 324234
<br>email: asdfsa#ssdf.sdf</div>
</div>
<div>
testing and thinds
</div>
I have seen similar posts ..I have modified my code and currently using this Code to add color to Hyperlink Text..My Hyperlink generates at runtime in HTML output..I have multiple css ..I think css effects are overriding
a:link
{
color: red;
color: inherit;
text-decoration:underline;
}
also tried this one :
a:link
{
color: #fff;
text-decoration:underline;
}
My Script:
function (response) {
obj =response.d;
var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";
for (var x = 0; x < obj.length; x++) {
output += "<tr><td >" + obj[x].EMID + "</td></tr>";
}
output += "</table>";
$("#result").append(output);
this is my markup
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UFZillaErrorStatus.aspx.cs"
Inherits="Dashboard.Web.UFZillaErrorStatus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UFZillaErrorStatus</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Open+Sans+Condensed:300,700"
rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/themes/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/assets/style.css" rel="stylesheet" type="text/css" />
<link href="js/common/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/common/jquery/json2.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/plugins/grid.postext.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery.alphanumeric.js" type="text/javascript"></script>
<script src="js/dashboard/UFZillaErrorStatus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content1" style="background: 0 0 0 #FFFFF">
<div id="uferrdivs" align="center">
<table>
<tr>
<td>
Product
</td>
</tr>
<tr>
<td>
<select id="proselct">
</select>
</td>
</tr>
</table>
<center>
<div>
<div id="result" style="background-color: #F5F5F5; width: 800px; margin-top: 50px;">
</div>
</div>
</center>
</div>
</div>
</form>
</body>
</html>
..Underline effect appears..But color not changing ..I have tried other method .But Not working ...
Any Suggestion would be helpful
Remove:
color: inherit;
As this is overriding your colour that you want.
Ensure that your tag contains
href="#"
At minimum.
Try simplest way
use this css
a, a * {
color: #FFF !important; // important will avoid if any other css try to override it
}
If your background color is WHITE, link will not be visible. Because you set the same color for link
color: #FFF;
Try with different color
Try to remove
color: inherit;
and see it will work.
Simple demo of both
Fiddle Demo using inherit
Fiddle Demo without using inherit
<html>
<head>
<title>My Website </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {allowFullScreen:true};
var attributes = {};
swfobject.embedSWF("preview.swf", "nav", "100%", "100%", "9.0.0", "expressInstall.swf",flashvars,params,attributes);
</script>
<style>
body{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
}
</style>
</head>
<body>
<div id="content" align="center">
<div id="nav">
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
</body>
</html>
Have you added the link to the SwfObject JS file
Have you also uploaded the swfobject.js file to the server?
Try setting a min-height on your nav div:
div#nav { min-height:100px; }