Is the next jQuery code the best way to decrease an elements width?[code]I tried using the next code:[code]but that's not working, also not with '-20'.Maybe it's an idea to add this functionality? It's is already used in the .animate() function for changing the position of an element.
View 3 Replies
Is there any way that one could have supersubs functionality applied to drop-down multi-column menus?I assume one would need to calculate the width of each column plus the combined width for the container.
View 1 Replies View RelatedI currently have a website where i share thoughts with my friends (some kind of forum) and within this 'forum' people can post pictures they made but most of the time these pictures exceed the max width of my website so my website gets all streched out!So this is what i want: all images on the page must run thru some sort of function which checks if the image image width exceeds the max_width. if it does then the script must calculate how many pixels the current width exceeds the max_width and get this number so that the script does: current_width = current_width - (max_width - current_width)
View 1 Replies View RelatedI've recently start using Flexigrid (old JQuery grid plugin), and, as you may know, one of the few issue this really good grid plugin got is the lack of liquid layout option. My personal idea to solve the problem is to set the "width" parameter depending on $(window).width. Here is the problem (and here's why i post this question in "General use" and not in "Plugin").
The starting, and working, code is:
$(document).ready(function(){
$("#flex1").flexigrid
(
{
[Code].....
This work fine for me, but I supose it could be done way much elegant... maybe somethin without "IF" that could emulate the "%", like var percentage = $(#div.id).width()*0.XX with the 0.XX picked from an array of percentage, one for each column. Probably I should set up a function... ahhhh, as you may easily see I'm a total beginner with JQuery (and JS in general...)
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. [URL]... 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.
View 6 Replies View RelatedI am trying to setup a javascript function that sets a div's width based on the combined width of the li's with the name "navItem". The problems I have been running into when trying to define the width of the li's is that they do not have a width defined in css. Can anyone help me out with this? The javascript function setWindow is suppose to show the div loginWindow and set the width of it.
Code:
<div id="topNav">
<ul>
<li><img src="<?php print $site->folder['images']['header']; ?>topmenu_left.jpg" border="0" alt="" /></li>
<li name="navItem"><a href="<? print $site->url['about']; ?>">About Us</a></li>
<li name="navItem"><a onmouseover="setWindow('loginWindow');" href="<? print $site->url['billing']; ?>">Client Services</a></li>
[Code]...
I got a table, first tr got 10 td, how to get the sum of the first three td's width
All I know is like:
Is there any solution via jQuery?
I'm currently working on a webpage and I seem to have a small problem.
I have a few div's with dynamic content but I can't seem to get the floating right...
So this is what I want, [url]
And this is what I got, [url]
I can't get a width to the <p> element since it's also used in other divs with other widths etc.
So now I was wondering if it would be possible to have jQuery solve this for me.
The <p> element should be 350px width when there is no image inside the div where to <p> is in.
I need a code that when a button or image is clicked then a div's width and height are changed.
Ive managed to get a few codes that does this, but the real problem is that, the contents of the div is an embedded flash file and i thought that by setting the flash width and height to 100% then the flash would fit to the new size of the div, but it just didnt work.
I need a code that when a button is clicked then the div's and the flash's width and height are changed.
please have a look at the temp website latinunit net / temp / , you will understand where im coming from.
on the right hand side i have a flash chat in a div , div is controled by a script that allows it to follow the scrollers up and down.
My goal is to add a little button in the same div that says expand or maximise so when clicked the the div expands aswell as the flash file.
I have got the following CSS-Box, with those properties in my styles.css:
.panorama {
float:left;
overflow:hidden;
}
[Code]....
But when I want to read out this information afterwards, my function doesnt work:
console.log($('.panorama').css("width")); This delivers me 0px.
Why doesnt it bring me the 1641px?
Essentially the idea is to make Element-B and Element-C to cover the area horizontally starting from center of Element-A and ending at the edge of viewport.So, I guess i want to get the distance value from the center of Element-A to the edge of viewport
Additional notes:
Element-A doesnt have static position or size.
Element-B and Element-C verticalposition or height is
irrelevant.
I was thinking something like this:Calculate width of Element-A and divide it by two ( Or just get half the width if theres a way. )
Get the distance from the edge of Element-A to the edge of Viewport Add up these calculated values.Of course unless theres way to get that this width straight up )I was trying to look for a way to do list item 2.
I'm currently working on an IE7 CSS fix for a rather large form. Long story short, I have each input wrapped in a div, all in the same class. What I need, is to have each div define a padding-right value that is equal to the width of that div. I'm fairly new to jQuery, so I'm in need of some help with the syntax. Here's what I currently have, but it keeps printing a padding-right value of "0".
$('.form_label').each(function(){
$(this).css('padding-right', function() {
var w = $(this).width();
[code]....
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?
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>
[code].....
I'm looking to grab the width of an <li>, including padding and margins that doesn't have a set width, and has one of 'auto' or 0.
View 5 Replies View RelatedI forget how to do this. Maybe somebody can point me to a decent tutorial. But I'm looking to grab the width of an <li>, including padding and margins that doesn't have a set width, and has one of 'auto' or 0.
View 4 Replies View RelatedI'd like to set the div width equal to the image width. Here's what I can think of [code]...
View 3 Replies View RelatedI have some one page whose div elements are aligned by JavaScript. The JavaScript just check a set of div elements to find the max offsetWidth, then set all div elements' width to be the max offsetWidth. It works perfect in most browsers and locales, but it fails on french-France in Firefox on Mac. In this case, the content of div wraps.
<div id="divFoo">
Heure de début :
</div>
for above HTML, below code report "79".
javascript:alert(document.getElementById('divFoo').offsetWidth);
but below code report "79.1333px".
javascript:alert(window.getComputedStyle(document.getElementById('divFoo'),null).width))
The gap between 79.1333 and 79 makes incorrect width set to inline style.I used to thought that offsetWidth and width should always be integer. Is there any way to make offsetWidth round correctly?
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.
I have problem with reading div width, sometimes, for this same div element, jquery returns width of 800 (which is correct), but then sometimes, it returns 93(which is not correct).
Here's the html (part of it):
Code:
And here jquery function:
Code:
This line is the problem. Sometimes, it says width of that div element is 800, sometimes 93. I put border around div, and i can clearly see it really hs width of 800, but sometimes, i still says (firebug) that width is 93. there is the image inside this div.
I'd like to set the div width equal to the image width. Here's what I can think of [code]...
It seems to be working, but I'm not sure if it's correct coding.
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.
How can I change the height and width of an element with Javascript? I have tried and so far I can only change either the width or height but not both, doing something like this…
Code:
<HTML>
<HEAD>
<script type = "text/javascript">
function changeSize(){document.getElementById('test').style.height = '200'}
[code]....
And this works fine but if I try to change both height and width it doesn’t work. Doing something like this doesn’t work
Code:
function changeSize(){document.getElementById('test').style.height = '200' width=’200’}
I have the following DIV, that I need to position in the center of the page, I have the following code, but you can see the div is not exactly center, space I have from the top is not the same I have in the bottom, the space I have from bot side is the same.I was wandering also if I can do this dynamically, meaning the div will receive the width and height in run time, and them I will send the values to my method "centerObj" (How I can get the height and width of the div element.
<html>
<head>
<script>[code]....
I'm having an issue getting the height and width of DIV elements that have resized themselves to fit their content.
Note: I do not have a problem getting the height and width of DIV elements that I have set using Javascript. The probel is that this value appears to stick. I.e. the height is set to 150px, then the content is changed and the DIV cosumes as much height as is required (clearly more than 150px), however analysing the DOM indicates that the height is the same (though it is clearly not).
I want to know how to get hold of the 'actual' size of a DIV element that is manipulated by the content of the DIV.
I am also interested in a solution that works in IE and Firefox (at least).
I understand that if I have an element in my document tree, I can use getComputedStyle() to determine its width based on CSS styles.
I want to dynamically create some elements to populate a given div, but I want the size of these elements to be controllable via CSS. When dynamically populating the div, I need to determine how many elements will fit. Currently, I have to add an element to the div first so its size will be calculated, then I can base my calculations off of that. However, this seems like not a great way to do ti.
Is there some way to ask for the size of an element to be calculated as if it were part of the document tree? That way, I could make my changes all at once.
I am using Ben Alman's JQuery resize plugin in order to obtain the varying computed width of an element when the window is resized (the element in question is a page wrapper that exhibits the expand-to-fit behavior of a block box, and it's computed width is obviously influenced by the resizing of the window. Essentially, what I need to be able to do, is to reference a variable that is defined in a .resize() function ('width_page') in a seperate .each() function.
[Code]...
I now understand that variables can't cross boundaries like in the example above, which leaves me a little stuck. I also understand that this is specific to the context of the .resize() function, and that it can't be taken out of it without using an element selector. Is there some way I can call the .resize() function in my .each() function?
