We have a strange problem with the new Bing Maps.
When positioning the map in a div further down on the page, the popup menu (mouse over "birds-eye view") popups up much further down on the page.
Any ideas how we can fix this code to make it work:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
$(document).ready(function(){
//console.debug('Map', ($("#map"))[0]);
var location = new Microsoft.Maps.Location(-8.59838423, 115.33570617, 0),
map = new Microsoft.Maps.Map(($("#map"))[0], {
credentials: '<removed credentials>',
disableUserInput: false,
showCopyright: false,
showDashboard: true,
showLogo: false,
showScalebar: false,
mapTypeId:Microsoft.Maps.MapTypeId.birdseye
}
);
map.setView({
animate: false,
center: location,
zoom: 12
});
//map.entities.push(Microsoft.Maps.Pushpin(location));
});
</script>
</head>
<body>
<div style="position: relative;">
<div style="width:200px; height: 1000px; background: #eee; position: relative;">Some long content</div>
<div style="position: relative;">
<div id="map" style="width: 600px; height: 300px; "></div>
</div>
<div style="width:200px; height: 1000px; background: #eee;">Some long content</div>
</div>
</body>
</html>
You need to add a DOCTYPE declaration to the top of your document, before the opening tag, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Described here: http://msdn.microsoft.com/en-us/library/gg427624.aspx
(As a side note, I also suggest that you edit your question to remove the "credentials" line - this is your own personal application key that you should try to protect)
I looked into this and found that when the menu was triggered before I scrolled down, the menu appeared in its correct position. However, if I first scrolled down the page, the menu would appear off by X pixels, where X is equal to the number of pixels scrolled.
My diagnosis is that Microsoft are calculating the offset from the scrolled viewport (idiotically) rather than the top of the actual page. I think the only way to fix this is for Microsoft to correct their mistake.
Related
How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
I have a flash scene converted with Google swiffy to html5.
All is fine but I can't get the scene (or stage) align to the right side of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Swiffy output</title>
<script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>
<script>
swiffyobject = {"tags":[{"bounds":.........HERE IS THE SWIFFY-CODE..........
</script>
<style>html, body {width: 100%; height: 100%}</style>
</head>
<body style="margin: 0; overflow: hidden">
<div id="swiffycontainer" style="width: 800px; height: 310px">
</div>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</body>
</html>
Can you help? I think it's very easy for HTML-specialists - but I can't solve
this little problem.
I assume the script is what you want to align... if not ill take it as an example
With float:right; you can make it float to the right
<div style="float:right;">
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</div>
a other option is text-align:right;
<div style="text-align:right; width:100%;">
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
swiffyobject);
stage.start();
</script>
</div>
If you find this page because you were looking how to CENTER the swiffy animation then;
#swiffycontainer { margin:0 auto; }
Works great for me.
I'm new in Jquery (learning from examples).
I'm trying to create some step by step tutorial and then to show FAQ with iframe at the end.
My main problem is that the page loads all my iframes (but hides them) so it takes about 10-15 seconds to load the page.
I want to be able to load each iframe by clicking on the button/text only, somehow I managed to to that (because my URL is the same and only the id of the url changes: http://my.nanorep.com/widget/widget.html?account=waze&kb=623233&onloadquestionid=ID)
Id: 3490608 or 3490611
When I click on forgot password for example it shows the iframe but when I clicks on it again it doubles it, I have no idea how to make it hide/ removed/ show it once.
The code: http://jsfiddle.net/ronvaisman/SKBWA
(it's under web -> Login Issue
Thanks for the help,
Ron
to show:
$('frameid').show();
to hide:
$('frameid').hide();
This is an example I made which has proven really useful as a starting point for these types of things.
<!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>Untitled Document</title>
<script src="jquery.js"></script>
<style>
#click{ cursor:pointer;}
.clickopen{ background-image:url(clickopen.png); background-repeat:no-repeat;}
.clickclose{ background-image:url(clickclose.png); background-repeat:no-repeat;}
</style>
</head>
<body>
<div style="width:800px; margin:0 auto;">
<div id="box" style="width:800px; height:100px; background-color:#000; display:none;">
</div>
<div style="width:800px; height:100px;background-color:#CCC;">
<div id="click" style=" width:213px; height:27px;" class="clickopen">
</div>
</div>
</div>
<script>
var clickTrue = 0;
//show dialog
$("#click").click(function () {
$('.clickopen').toggleClass("clickclose");
$('#box').animate({
opacity: 0.75,
height: 'toggle'
}, 400, function() {
// Animation complete.
});
});
</script>
</body>
</html>
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)
Im getting a really weird problem which im pretty sure is due to 'positioning'.
Basically i've got a master page, which contains a container div, and has its position set to absolute, and using this it fills in margins along the side of the page. I'm then trying to use jQuery AutoComplete on a page, which itself has the position set to absolute, but when I select an item from the list, it reduces the margins, and its as though the absolute position on the page is removed/overriden, until typing something in the input box.
Using Firefox and Chrome there is no issue, and they work as expected.
I've managed to replicate my problem a bit simpler:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CssProblem.WebForm1" %>
<!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">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div id="container-content" style="width: 98%; position: absolute; min-height: 100%; border-left: solid 1px #ccc; border-right: solid 1px #ccc;">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<br />
Some Text
</div>
</body>
</html>
Any help/tips/suggestions would be greatly appreciated
Edit:
Found this issue does not apply to IE8, but does apply against IE7 & IE8 Compat mode, still having no joy
For
position:absolute
probably you can change it to
position:absolute !important
which will not allow any external CSS to override the position attribute try this which may help you out