I am attempting to implement a iframe shim to render custom html content on top of the google earth plugin. I am successful in rendering the overlay, however I would also like to make both the iframe and custom html semi-transparent. The custom html content does not render when setting "allowTransparency" to true and lowering the opacity of the iframe.
Below is sample code
<body>
<div id="earth"></div>
<iframe allowTransparency="true" style="position:absolute; top:0px; bottom:0px; right:0px; width:200px; height:500px; background:#222; opacity:0.5; border:none; z-index:100;"></iframe>
<div id="shimdiv" style="position:absolute; top:0px; bottom:0px; right:0px; width:200px; height:500px; background:#222; opacity:0.5; border:none; z-index:100;"></div>
</body>
All the examples I have found render full opacity html content. Does anyone know of a work around to allow for transparency?
Thanks in advance.
Related
After loading some purticular sites i must be able to add my own defined header banner to that site and display site. This loading can be made possible with running js files in background after loading site. But how to edit site in js add my extra banner to that site. I am adding here a sample pic how banner should be added at the top of site.
like that above banner should be added automatically after loading some sites.
for example this is the code of header i should place on site.
<!DOCTYPE html>
<html>
<head>
<style>
.wetest{
background-color:black;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li a{
text-decoration:none;
padding:14px 16px;
color:white;
text-align:center;
display:inline-block;
}
li a:hover{
background-color:orange;
}
.litest{
display:inline;
float:left;
}
</style>
</head>
<body>
<ul class="wetest"><span style="cursor:pointer">
<li class="litest">Home</li>
<li class="litest">News</li>
<li class="litest">Contact</li>
<li class="litest">About</li>
</span>
</ul>
</body>
</html>
I have a simple JQuery thing that activates when the page is ready. Two strings would slide down at different times.
The problem is that in the first string, only the first half of the word slides down but the second half is delayed for a split second.
Can someone tell me why?
Here is my code:
<!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>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
background-color:#007B4C;
width:1280px;
height:70px;
position:fixed;
left:0px;
top:0px;
z-index:10;
}
.body{
width:1267px;
position:relative;
left:-12px;
height:1010px;
background-color:#EDF0F5;
top:25px;
z-index:9;
}
.footer{
background-color:#007B4C;
width:1267px;
position:relative;
left:-12px;
height:200px;
top:25px;
z-index:9;
}
.message{
font-family:"MS PGothic";
width:1200px;
font-size:40px;
text-align:center;
position:relative;
left:50px;
color:#333333;
top:200px;
display:none;
}
.congratulations{
position:relative;
font-family:"MS PGothic";
width:300px;
left:450px;
top:200px;
color:#333333;
font-size:60px;
display:none;
}
</style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
$(".congratulations").slideDown(400);
$(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>
It is because the h1 element containing your string "Congratulations!" is smaller than it's rendered text and jQuery apparently applies the animation on the h1 element at first, which crops just a fraction of the string.
Either remove width property of .congratulations class or make it wider than the text.
I suggest you to use "inspect elemnt" tool in your browser to debug strange things like this.
The reason for CONGRATULATIONS to cut out while sliding is because of the width given for .congratulations in CSS.
The first half that slides will be equal to the width that is set. Reducing would keep the first part smaller and increasing would keep it larger.
Keeping the width:100% is the solution to your problem.
hi the problem comes from css class .congratulations
increase to width:500px //this will fix the problem with half word slide
This is pretty wild, slideDown is sliding down only the portion you specified in the width, 300px. The rest is displayed after the slideDown finishes.
Remove width from congratulations CSS class.
I have an 'Export Text/PDF to Excel' functionality in my webapp. I display the original report in the same domain to be exported to excel in an iFrame inside a jsp(parent doc)
<iframe name="imgbox" id="imgbox" scrolling="yes" width="80%" height="400" src="/xxx/xx.txt" ></iframe>
In the existing page, I ask the users to click the positions/points inside the iFrame for column splitting i.e., the text between 2 selected split points form a column in the resultant excel sheet and I record the positions using jQuery's event.pageX. NOW WHERE I NEED HELP is that I want the selected positions to be highlighted by vertical, colored thin lines as a column marker from the top edge to the bottom edge of the iFrame
This is what I want:
Click to view the resultant jsp page
Some one please help!!!
Ended up positioning the elements over each other, the text file was a random file I selected from google. You will have to track the clicks but the hard part is done an the code could be a little cleaner but it answers your problem I hope.
Answer requires jQuery
Live demo: http://jsfiddle.net/3aQC4/1/
<html><head>
<style>
#con, .line{
display:block;
position:absolute;
top:0;
left:0;
height:300px;
width:600px;
border:1px solid black;
z-index:10;
background-color:transparent;
}
.line{
border:none;
border-right:1px solid black;
z-index:5;
}
iframe {
position:absolute;
top:0;
left:0;
z-index:1;
height:300px;
width:600px;
}
</style>
</head>
<body>
<div id="con"></div>
<iframe class="stack" src="http://textfiles.com/bbs/dljunkie.txt"></iframe>
<script>
$('#con').click(function(e){
var html='<div style="width:'+e.offsetX+'px;border:1px solid red" class="line"></div>';
$('body').append(html);
});
</script>
</body>
</html>
In Firefox, IE7, IE9 and other browsers, YouTube embedding works fine, but in IE8 nothing happens when you click the video.
I'm thinking its a CSS issue to do with Z-index perhaps? I've tried changing things around but had no luck.
Any help would be great. Visit the page and click the images to see the problem.
Here is the CSS for the modal:
.youtubemodal {
width: 590px;
height: 464px;
position:fixed;
z-index:700;
top:180px;
left:50%;
display:none;
background-image: url('images/youtubeconsole.png');
margin-left:-295px;
}
.youtubediv {
position:absolute;
left:15px;
top:15px;
}
.youtubexbutton {
bottom: 12px;
right:13px;
position:absolute;
width:26px;
height:26px;
background-image:url('images/youtubex.png');
}
and the script:
jQuery('#youtube').click(function(){
jQuery('.youtubemodal').show();
});
and the HTML:
<div class="youtubemodal"><div class="youtubediv"><iframe width="560" height="400" src="http://www.youtube.com/embed/G5FRxH8ytJk" frameborder="0" allowfullscreen></iframe></div>
Use this after the <head> tag
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
Solved it: my youtubediv had no width or height so I changed it to cover the size of the YouTube video.
I'm developing a web page and I have a side panel on the left with a search bar and a Google maps api v3 filling the rest of the page to the right. When I make the browser very small vertically, there is a white space between the side panel and the map, and the bottom of the browser. However, the text continues to the bottom of the browser. It looks like:
Here's my css code:
<style type="text/css">
body {margin:0;}
#panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;}
#header {padding:2px; text-align:center}
#address_instruction {position:relative; top:7%; padding:2px; text-align:center}
#geocoder {position:relative; top:8%; padding:2px; text-align:center}
#toggle_instruction {position:relative; top:22%; padding:2px; text-align:center}
#layers {position:relative; top:25%; padding:2px; text-align:center}
#layer0 {padding:2px; text-align:center}
#layer1 {padding:2px; text-align:center}
#layer2 {padding:2px; text-align:center}
#link {top:50%; position:relative; padding:2px; text-align:center}
#map_canvas {height:100%; left:300px; right:0px; position:absolute; padding:0;}
</style>
The IDs within #panel refer to the items on the left hand side in the panel. Why don't the side panel background color and map extend to the bottom of the browser?
I was able to fix the problem by changing and adding the following to #panel: { position:fixed; overflow:auto; }