I am trying to use jquery to resize a div containing a 100% height/width image in an asp.net page. I have some code that works fine as a simple html page. Here it is:
<html>
<head>
<title>Image Resize Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#SizeSelect").change(function() {
var newDim = $(this).val();
$("div.pillContainer").height(newDim);
$("div.pillContainer").width(newDim);
});
});
</script>
<style type="text/css">
div.pillContainer {
width: 70px;
height: 70px;
display: block;
margin: 20px;
}
div.pillContainer img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div>
<b>Size:</b> <select id="SizeSelect" name="SizeSelect" >
<option value="50 px">Small</option>
<option value="70 px">Medium</option>
<option value="90 px">Large</option>
</select>
</body>
</html>
For some reason, as soon as I put this exact code in an .aspx page in between form tags runat=server, the re-sizing quits working. To be specific, here's my broken aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyMediHealth.Interface.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>
<title>Image Resize Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#SizeSelect").change(function() {
var newDim = $(this).val();
$("div.pillContainer").height(newDim);
$("div.pillContainer").width(newDim);
});
});
</script>
<style type="text/css">
div.pillContainer {
width: 70px;
height: 70px;
display: block;
margin: 20px;
}
div.pillContainer img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div>
<b>Size:</b> <select id="SizeSelect" name="SizeSelect" >
<option value="50 px">Small</option>
<option value="70 px">Medium</option>
<option value="90 px">Large</option>
</select>
</form>
</body>
Anybody know why it's not working and how to fix it?
A better question is: why is it working at all in either version. :)
You are sending "50 px" (or whatever) to jQuery's height function. Try just sending a number instead by changing your options to:
<option value="50">Small</option>
<option value="70">Medium</option>
<option value="90">Large</option>
Changing this fixed it for me in ASP.net. (it didn't work before, like you said)
I haven't tested your HTML only version to see why it works.
EDIT: For the record, I can't get your other version to work in JSFiddle either. I think you changed it before you ported it to ASP.net and didn't realize you broke it?
Worked fine for me, though you are missing the closing tag in your .aspx code block.
There is no space between a value and it's unit. Remove the spaces, and it works:
<select id="SizeSelect" name="SizeSelect" >
<option value="50px">Small</option>
<option value="70px">Medium</option>
<option value="90px">Large</option>
</select>
It will also work if you remove both the space and the unit, as clifgriffin suggests. The width and height methods will add px if the value is only digits.
When you use this in a page without a doctype, it's rendered in quirks mode and the rules are more relaxed. The space between the value and the unit is still not allowed, but some browsers will use the value and assume the unit px, and ignore what's after the space.
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.
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>
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
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.