This is one of two scripts I'm having problems with involving the fb:friend-selector. It's a facebook iframe application but no matter what I try, in ie6 the height is around 150px which gives scrollbars. By adding 1px borders it would seem that in other browsers where it does actually work, there is an initial height of around 150px whci hresizes as the friends list gets populated. In IE6 this never happens.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head></head>
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<?=$_GET[friend_sel];?>
<fb:serverfbml style="width: 500px; height:20px; border:1px solid red">
<script type="text/fbml">
<form id="addform" action="http://www.keywordintellect.com/facebook/iframeexample/serverfbml.php?<?=fbvars?>">
<fb:fbml>
<fb:friend-selector uid="<?=$user_id?>" name="newuid" idname="friend_sel" style="height: 700px"></fb:friend-selector>
</fb:fbml>
<input type="submit" value="Submit"/>
</form>
</script>
</fb:serverfbml>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){
FB.Facebook.init("<?php echo $appapikey ?>", "xd_receiver.htm",null);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Have you tried to set up your applicaion IFrame Size to Resizable?
if you don't go to your application ->edit setting->canvas->canvas setting->IFrame Size
the check Resizable.
Related
I have a ckeditor that currently has a height and width of auto, but I would like to make these parameters fixed. I first tried to set the rows and cols but this did not work:
<textarea id="editor1" name="editor1" rows="10" cols="10">
Example text goes here
</textarea>
Then I tried to use the config file with this code (which still doesn't work):
<script>
CKEDITOR.editorConfig = function(config) {
config.height = '100px';
config.width = '100px';
};
</script>
After using both of these methods, the height and width of the ckeditor is still auto (checked with chrome's inspect element feature)
My example: http://strawberrycv.com/test.php
The code to this page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="ckeditor/ckeditor.js"></script>
<style>
#ckeWrapper{
height: 700px;
width: 600px;
}
</style>
</head>
<body>
<form>
<div id='ckeWrapper'>
<textarea id="editor1" name="editor1" rows="60" cols="90">
the text goes here
</textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
hey i just started using this plugin but i think i got a clue for u:
find the api here: http://docs.ckeditor.com/#!/api/CKEDITOR.config
And look for the corresponding JS line that should go in the bottom ''
After you have defined the texarea JS takes over, so I'd say you need to do your editing in the JS instead of the CSS.
HERE Maps JavaScript API errors in Firefox and Chrome (but not IE) when there are style sheets in the body.
Working example:
<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
Failing Example:
<!DOCTYPE html>
<html>
<head>
<title>Failing</title>
<script type="text/javascript" src="http://js.api.here.com/se/2.5.3/jsl.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 500px"></div>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/2008/site/css/minimum" />
<script type="text/javascript">
nokia.Settings.set('appId', *REMOVED*);
nokia.Settings.set('authenticationToken', *REMOVED*);
new nokia.maps.map.Display(document.getElementById('map'));
</script>
</body>
</html>
The problem appears to be from the following logic:
var f = c.styleSheets, p = f.length, a, k, m = c.createElement("style");
m.setAttribute("type", "text/css");
c.getElementsByTagName("head")[0].appendChild(m);
a = f[f.length - 1];
It looks like what's happening is document.styleSheets will have elements in the body after elements in the head, so this tries to manipulate an external style sheet instead of the style element it just created.
According to the HTML5 specification on link:
If the rel attribute is used, the link element is restricted to the head
element....
Therefore your HTML5 markup is invalid, since the link should not occur within the body, this is metadata content which should be placed in the head. Obviously IE is being more lenient for some reason (I guess there must be some sort of IE specific code being used here to try and get it to be standards compliant, which happens to accept the link in a body as a by-product)
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.
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.
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