My code throws a JS error, offsetParent is not set -- cannot scroll. I tried position: relative; but it still shows the same error.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$('#btnShow').click(function(){
$("#dialog").dialog();
});
});
</script>
this link
<div id="dialog" style="display: none; position: relative; height: 4em; overflow: scroll;">
<div>
<iframe src="reports/my_pdf.pdf"></iframe>
</div>
</div>
Try to use "lazy loading":
<script type="text/javascript">
$(document).ready(function() {
$('#btnShow').click(function(){
$("#dialog").dialog();
$("#frame").attr("src", "reports/my_pdf.pdf");
});
});
</script>
this link
<div id="dialog" style="display: none;">
<div>
<iframe id="frame"></iframe>
</div>
</div>
Rather than jquery you can simply do this by using Javascript
You can use window.open() method and insert the pdf file in it window.open("path/for/pdffile") and give width, height and its position
window.open("path/for/pdffile", "width=500,height=500,top=100,left=500")
You can insert the above code in a function and call it when a html element is clicked .
That's it your pdf file will be opened in a pop up window
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
i am using this jQuery to load my content into a div. How can i replace to 1000px height in the object into auto? So when it loads, it re-sizes into the correct size?
<div id="siteloader" style="width: 100%; height:auto;"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#siteloader").html('<object data="content.html" style="width: 100%; height:1000px;">');
</script>
<script type="text/javascript" >
$(window).load(function() {
$("#siteloader").html('<object data="content.html" style="width: 100%; height:1000px;">');
});
</script>
Hi I have been having this problem for about 4 months now i gave up at first but now i have to solve it am trying to do a zoom in effect on hover and i did all the code and it works properly, but when i copy it and paste it in the editor or like the code it self it doesn't work i tried Firefox (latest version) and Google chrome(also latest version) but still no effect happens nothing and also i tried using Google's cdm and also tried downloading the jQuery from the website itself nothing worked out please help me as i am just a beginner in coding thank you
My HTML :
<html>
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
</head>
<body>
<img src="RandomPage.png">
<p style="margin-right:220px; margin-top:20px; float:right; font-size:22px; font-family:century gothic; id="nav2" ">I <a id="nav" href="">HOME</a> I <a id="nav" href="">Apple</a> I <a id="nav" href="">Android</a> I <a id="nav" href="">Gaming</a> I <a id="nav" href="">Random Tech</a> I <a id="nav" href="">About Us</a> I </p>
<div id="menu">
<img style=" margin-top:10px; margin-left:10px; border-radius:4px; " src="RandomGaming.png" class="resizableImage">
<img style=" margin-top:10px; border-radius:4px;" src="RandomFashion.png" class="resizableImage">
</div>
</body>
my script :
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
Thank You In Advance
You need to add the jquery library, and it has to be the first thing you add.
Paste this <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> in your head tag, and make sure it's the FIRST script there.
Your sample HTML is not including jQuery.
Put the follwoing script below the script in your head. So liek this:
<head>
<title>Random Page</title>
<link rel="stylesheet"; type="text/css"; href="Stylesheet.css" media="all">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- include future js scripts here -->
</head>
Then JUST before your closing </body> tag, add the jQuery code, like so:
<script>
$(document).ready(function(){
$('.resizableImage').mouseenter(function() {
$(this).stop().animate({ width: "+=10%", height: "+=10%" });
});
$('.resizableImage').mouseleave(function() {
var x = $(this).attr('width'),
y = $(this).attr('height');
$(this).stop().animate({ width: x, height: y });
});
});
</script>
Note: It's more efficient and allows your pages to load faster if your JS scripts are included before your closing tag above the functions..but for simplicity sake, I included it in the <head>, which is not bad either.
In my code i am trying to hide a div element which contains a image, but when i run the code i get - ReferenceError: jQuery is not defined
})( jQuery ); in the file jquery-ui.js (line 314). My code is given below
<!DOCTYPE html>
<html>
<head>
<title>Sliding a div</title>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#1').click(function(){
console.log("i am inside");
$('#element').hide('slide',{direction:'left'},1000);
});
});
</script>
</head>
<body>
<div id="headder" style="width: 1300px; height: 100px">
<h1>Slide the div</h1>
</div>
<div id="element" style="width: 600px; height: 400px; border: 2px solid red; position: relative">
<img src="images/aa.jpg" width="600" height="400">
</div>
<div id="control" style="position: relative">
<input type="button" id="1" value="PRESS">
</div>
</body>
</html>
Please let me know the reason behind this.
You need to reference jQuery before jQuery UI:
<script type="text/javascript" src="plugin/jquery-1.9.1.js"></script>
<script type="text/javascript" src="plugin/ui/jquery-ui.js"></script>
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.