I'm stuck on this pretty simple problem and I know there must be a simple solution but I don't know what to do. I'm sure it is a CSS issue since everything else is functioning fine. Here is the page in question-
And the code used for the page
CSS:
div.fadehover {
position: relative;
}
img.a {
position: absolute;
left: 0;
top: 0;
z - index: 10;
}
img.b {
position: absolute;
left: 0;
top: 0;
}
HTML/JS:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
jQuery Hover Effect
</title>
<script type='text/javascript' src='jquery.js'>
</script>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({
"opacity": "0"
}, "slow");
}, function() {
jQuery(this).stop().animate({
"opacity": "1"
}, "slow");
});
});
</script>
<link rel="stylesheet" type="text/css" href="/js/mouseover.css" />
</head>
<body>
<div class="fadehover">
<img src="pre.jpg" alt="" class="a" />
<img src="post.jpg" alt="" class="b" />
</div>
</body>
</html>
I think because the two images have absolute positions the div.fadehover is failing to get a height. So adding height: 700px; to the div.fadehover class in the css seems to fix the problem. (From my point of view anyway :)
Related
I need to add the thumbnail before the video using Jquery. I have added the image but when I change the page size the thumbnail is should be centered of the place As per the below image,
But, My image is responsive as below,
My Jquery,
$(document).ready(function () {
$("body").prepend('<div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "position: fixed;width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
can any one please help me to resolve the issue?
To position the image container in the middle of the page use following style (note that you need to remove position: fixed; from image).
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
In the snippet (view in full screen) I added a <div style="height:100vh;">to emulate a larger page, which you should probably remove for your own page. Also you should keep the styles in a css file and HTML in html file, since it is hard to maintain a big blob in javascript.
$(document).ready(function () {
$("body").prepend('<div style="height:100vh;"><div id="thumbnailcontainer" class="container-fluid"><div class="row"><img id="llthumbnail" class="img-fluid" style = "width: 100%;height: 100%;top: 0;left: 0; right: 0;bottom: 0;cursor: pointer;background:black;padding:0px 100px 0px 100px;" src = "http://w3.org/Icons/valid-xhtml10" ></div></div></div>');
$('#thumbnailPlayIcon').on("click", function () {
thumbnailClick($(this));
});
$('#llthumbnail').on("click", function () {
thumbnailClick($(this));
});
});
#thumbnailcontainer {
position: relative;
transform: translateY(-50%);
top: 50%;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myDiv">
</div>
<div class="skycap-caption" style="display:none"></div>
</body>
</html>
This has been raised before, but the solutions currently fail in Firefox (34.0.5) in Windows (7 Pro 64bit SP1). I want to plot an iframe over the GE Plug-In. The following code works in
Chrome and Safari, and Firefox OSX:
but not Firefox for Windows:
Do other Windows users get the same result?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<head>
<title>HTML overlay</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAwbkbZLyhsmTCWXbTcjbgbRSzHs7K5SvaUdm8ua-Xxy_-2dYwMxQMhnagaawTo7L1FE1-amhuQxIlXw"></script>
<script>
google.load("earth", "1");
var ge = null;
function init() {
google.earth.createInstance("map3d", initCallback, failureCallback);
}
function initCallback(object) {
ge = object;
ge.getWindow().setVisibility(true);
}
function failureCallback(object) {
}
</script>
</head>
<body onload='init()' id='body'>
<center>
<div>
header bar
<br>
ignore this
</div>
<div id='map3d' style='height:98vh; width: 100%; position: relative; z-index: 50'></div>
<iframe src="" srcdoc="<p style='color: red;'>Let's put some HTML on top</p><br><p style='color: red;'>And some more here</p>" style='width: 200px; height: 100px; top: 0; left: 0; position: absolute; z-index: 100'></iframe>
</center>
</body>
</html>
Can you try giving the text the following property:
z-index: 100;
and the google map:
z-index: 1;
and give both this property:
position:absolute; //don't apply this property in the seperate html file for the iframe
I try to create a pdf file using phantomjs. This pdf contain multiple pages. I define this pages with the follwing css:
.page{
height: 210mm;
width: 297mm;
}
body{ margin: 0; padding: 0; }
And here is an example of html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="{{ asset('/css/main.css') }}" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
<div class='page'>page1</div>
<div class='page'>page2</div>
</body>
</html>
And following is config file for phantomjs:
var page = require("webpage").create();
page.open("http://site.local/pdf/2", function() {
page.paperSize = { format: "A4", orientation: "landscape" };
//page.paperSize = { width: "29cm", height: "21cm" };
//page.zoomFactor = 1.249;
page.render("example.pdf");
phantom.exit();
});
But my html pages never fit 100% in the pdf pages. They are every time smaller. If I set the zoomFactor to 1.249, then the page fit almost 100% inside. But somehow this solution is weird. How could I solve this problem?
You can write this:
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: {
top: '1cm',
left: '1,6cm',
right: '1,6cm',
bottom: '1cm'
}
};
it helped me.
I have a div of an aeroplane inside parent div with overflow: hidden, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.
See my diagram here:
The css code I have already is:
#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}
And the HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information" width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
$(function(){
var iCounter = 1;
var iMaxCounter = 4;
$( '#plane' ).animate({
top: "-=450px",
left: "+=857px"
}, 30000, function(){
}
);
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
after:onAfter
});
});
</script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>
but this is displaying as a block pushing the other elements below these divs down the page.
Do you know of a way to fix this so the plane and it's containing div is floating above my site? I've tried setting the z-index, but that doesn't seem to work.
probably you should use position relative+absolute setting position: relative on the container and absolute (with a defined z-index) for the #plane
place the #plane with top/left/right/bottom properties
at the begin you have bottom : -<somepixels>, left : 0
at the end you have top : 0, right : 0
Doing so other elements won't be affected by the presence of the plane, staying where you placed them
Use also pointer-events: none if you want to allow click/hover events behind the plane: see https://developer.mozilla.org/en/CSS/pointer-events (unfortunately it's not supported by IE<=8although some js workarounds have been published, e.g. by Lea Verou)
I do have div with a fixed height, containing an Image higher than the div's height.
I want to position this image in the middle of the div, and I use jquery-ui position().
However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>
the css looks like:
#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}
.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}
Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.
Have you tried setting the overflow for panel_1?