|
JavaScript - Set The Width Of A Div To Be The Same Width Of The Image Inside The Div
I want to set the width of a div to be the same width of the image inside the div.
The following code works great. But... The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier? Any help would be great! PHP Code: jQuery: $(document).ready(function(){ var newWidth = $('div.wrapper img').attr('width'); $('div.wrapper').width(newWidth); }); HTML: <div class="wrapper"> <p><img src="image1.jpg" width="200" /><br /> Caption</p> </div> <div class="wrapper"> <p><img src="image2.jpg" width="250" /><br /> Caption</p> </div> Similar TutorialsHello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... Hello guys ! I'm fairly new to JavaScript, so this is maybe an obvious mistake, but here is the code that doesn't work, it goes inside the body of my document : Code: <script type="text/javascript">
aImg = new Image();
aImg.src = "myimage.jpg";
aHeight = aImg.height;
aWidth = aImg.width;
document.write(aHeight + "," + aWidth);
document.write("<img src=" + aImg.src + ">");
</script>
While the image is displayed, the value written for the height and width is "0". This code worked fine when I compiled it in the "Tryit Editor" of w3schools.com (I told you I was new to JS :P), but it fails when I insert it in a page and then view the page with Google Chrome or IE7. Of course this is not all fo the code, I intend to display the image differently depending of its size... but I need to get that part right before moving on Any help would be greatly apreciated, thanks ! Hi CF, I'm a graphic/designer and occasional Actionscript developer making what's turning out to be a rather clumsy transition into Javascript. Be gentle. I'm trying to create a script that will load an external image and test whether it's in my document's "tall" or "wide" formats before placing it in the page. This is easy in IE just using imageObject.width, but Firefox seems to always return a value of 0, no matter what I do (this includes using imageObject.naturalWidth). Refreshing the page suddenly causes the wide mode to activate, but any time before the image is actually placed in the document, FF just won't read the width. I've tried maybe a dozen different scripts, but here's my most recent: Code: function testImage(){
if (defaultImage.naturalWidth > 320){
wideMode = true;
}
placeImage();
}
function loadFirstImage(){
defaultImage.src = "images/myGIF.gif";
defaultImage.onLoad = testImage();
}
Any ideas on how to accurately get an image object's width after loading, but before placing it on the page? Any help is much appreciated. Thanks, ~gyz I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution? I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait) Code: <li class="frame" id="sm">
<div class="frm" id="frame1">
<img src="image.jpg">
</div>
</li>
Need to set the width of a Table that is being spit out by this god awful CMS... please help me... change the html attribute width! I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can. This code that I has works perfect in EditRocket, but when I add it to the custom BBcode the image does not resize. Original EditBucket Code: Code: <html>
<head>
<script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
</head>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png">
</body>
</html>
vBulletin Custom BBcode: title: Test Image bbcode tag name: timage Replacement: Code: <script type="text/javascript">
function show_confirm(testimg)
{
var theImg = document.getElementById('testimg');
var theWidth = theImg.width;
var theHeight = theImg.height;
if (theWidth<250)
{
theImg.width = theWidth;
theImg.height = theHeight;
}
else
{
theImg.width = 250;
theImg.height = theHeight*(250/theWidth);
}
}
</script>
<body>
<img id="testimg" onload="show_confirm(testimg)" src="{param}">
</body>
Example: [timage]http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png[/timage] Description: Embed imaged inline with forum Option: no I have a the following code for displaying a tooltip: Code: <a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display"> The javascript for the tooltip is as follows: Code: $(document).ready(function(){
$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");
var css_width = $('#tooltip').width();
var text_width = $('#tooltip').textWidth();
if (css_width > text_width) {
$('#tooltip').width(text_width);
}
},
mouseleave:
function(){
this.title = this.t;
$("#tooltip").remove();
}
}
);
});
$.fn.textWidth = function textWidth() {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width= $(this).find('span:first').width();
$(this).html(html_org);
return width;
}
What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so: Code: <a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display"> This width will then be passed into the javascript above and used to set the width of the tooltip. How can I modify the above code to do this?? Thanks Hi My html document contain many images which has the attribute src of img tag as the flowing : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- All those images has the common source folder http://images.mysite.com/a/p This is an example : PHP Code: <img src = "http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg--" width = "105" height = "73" > I tried during many days to find the solution using RegExp but I didn't arrives. What I want to do is I - change for all image from the seem folder the src attribute to match the exact url of the image without special characters, for this example : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg?x=210&y=83&q=85&sig=Tua1ukyUEVKTPSsz7xGPsg-- Became : PHP Code: http://images.mysite.com/a/p/ap.eba553af4b719.ec03.jpg II - Control the width and height of the image by changing its height and width attributes resp. from two javascript variables : PHP Code: var v_width = 320 // Just for example var v_height = 250 // Just for example This is an example of try didn't work for me, for the first issue : PHP Code: var element = document.getElementsByTagName("img"); for(var i=0;i<element.length;) { var myString = new String(); var myRegExp = new RegExp("http:\/\/d\.images\.mysite\.com\/a\/p[^\?]*(jpg|png|gif)","i"); var myRegExp0 = new RegExp("\?.*","i"); myString = element[i].getAttribute("src"); if(myRegExp.test(myString)) { var newString = myString.replace(myRegExp0,""); element[i].setAttribute("src",newString); } } Help me please Think you Hi, I'm trying to change the column from javascript using. cell.width='7'; or cell.style.width="7px"; when i set this. all the columns in each row within the table are resetting to this column width. How can i make sure that this reflects for only one row for which i set this property to. Please let me know. Hi, Here are sample divisions: Code: <style type="text/css">
#grandparent {width:100px;}
#parent {overflow:auto; height:100px; }
.child {overflow:hidden; margin-left:10px;}
</style>
<div id="grandparent">
<div id="parent">
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
<div class="child">1000000000000000000000000</div>
</div>
</div>
The <div class="child"> width value is always 10 pixels less than <div id="parent"> width value. How can it be calculated so any width value is given to <div id="parent">, its child gets 10 pixels less than that? Any help is very much appreciated! Mike http://www.hannahdesign.co.nz/client...ing-collateral So here is what I have done so far: - Used FlexCroll (1) to make custom scrollbars on the top image panel - In the scrollbar - I have used a no-repeat background image that is 17px in width Problems: - When loading a vertical scrollbar appears - The horizontal scrollbar does not go all the way to the end Here is what I want to do: - Disable the vertical scrollbar for ONLY this div (this same script is used for another vertical scrollbar - http://www.hannahdesign.co.nz/client/summary) - Make the horizontal scrollbar limited to 17px or another set width. I have included both my CSS and the uncompressed JS. (1) - FlexCroll - http://www.hesido.com/web.php?page=customscrollbar Hi After searching on Google and looking on numerous forums I can't seem to find a good solution which works the way I want. I have a select box which is a set width. Some of the text in the dropdown list is longer than the set width. In Firefox / Chrome the width of the dropdown will expand to display all the text, and thats exactly how I want it. However, in IE7 the width of the dropdown will not expand. I do not want to resize the select box itself as it will mess up the look of the page. I know this is an issue with IE but was wondering is there any solution, or can anyone point me in the direction of a solution. See attachments on a simple example to see what I mean. I'm sure there must be some fix for this, maybe JavaScript. Any ideas would be great. Here is some simple code used in the screenshots Code: <html> <head> <body> <select id="list" style="width:100px;"> <option value="text1">Some text</option> <option value="text2">Some longer text</option> <option value="text3">Some even longer text</option> </select> </body> </head> </html> Hi, I'd like to set the div width equal to the image width. Here's what I can think of: Code: <script type="text/javascript">
window.onload = function ()
{
document.getElementById('foo').style.width = document.getElementById('bar').width + 'px';
}
</script>
<div id="foo" style="background:red;"><img id="bar" src="image.jpg"></div>
It seems to be working, but I'm not sure if it's correct coding. Thanks in advance for checking the code or any improvement you suggest! Rain lover Hi guys, was just wondering if there was a way to control the page height and width using js/jquery? I have a page that is: width: 980px height: 2500px I would like the page height to be set to around 900px with the viewable scrollbar and all other content not viewable underneath. Any help is appreciated Cheers, paffley Hey all, I'm a new Javascript coder; it's still pretty easy for me to get snagged on stuff. Anyways, I had a question for a specific project I've been trying to figure out. I have an element set with CSS to a width of 160px. What I want is a way for users to the site to drag a slider back and forth to set the width of the button. Some sort of smooth animation while this is happening would also be nice. I'd also like a way to set a max width on the element. So, can this be done? I'm guessing it would use jQuery, but I don't really know. Does anyone have any ideas? AA I am currently using this: Script Title: Modular Scroller (Scrollable content script III) - Demo The two links providing information can be found he http://www.dynamicdrive.com/forums/s...ad.php?t=11899 / http://home.comcast.net/~jscheuer1/s...side_table.htm I figured out how the script works. The only problems I'm having are I would like to get rid of the border that is around the container and the up and down images. Also, I would like it so that as the browser window gets bigger or smaller, the width and height of the content div expands with the browser. Here is what I have right now: http://gds.parkland.edu/student/fall...inal/menu.html Hello all, I need to get the border and internal padding width of a cell of a table. I plan to subtract these values from the offsetWidth to get the content width, and use that to set the style.width of another cell. Unfortunately, I can't find a tried-and-true way to get the border and padding width. Anyone got an idea? Hi I have embeded a video like this: Code: <div class="videoDiv" id="showDis"> <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer1"> <param name="url" value="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="showcontrols" value="true"> <param name="autostart" value="true"> <!--[if !IE]>--> <object type="video/x-ms-wmv" data="http://mysite/myvideo.wmv""> <param name="src" value="http://mysite/myvideo.wmv""> <param name="autostart" value="true"> <param name="controller" value="true"> </object> <!--<![endif]--> </object> </div> I would like to retrieve the video's width and height (resolution), for example: 640x480 how can I do that via JavaScript? this is what I tried: Code: var objPlayer = document.MediaPlayer1;
alert(objPlayer.offsetWidth);
alert(objPlayer.width);
alert(document.getElementById('showDis').style.width);
alert(document.getElementById('showDis').style.offsetWidth);
nothing gives me the real value. even looked he http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx but couldn't find anything relevant |
|||||||