JQuery :: Resizing Width Depending On $(window).width?

May 18, 2010

I'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...)

View 3 Replies


ADVERTISEMENT

JQuery :: Keep Image Width / Height Ratio In Jcarousel When Resizing Page?

May 25, 2011

I've set up jcarousel and configured it to work how I need it to, apart from one thing; I need the images to keep their width - height ratio when the browser is resized.

I'm using the Flexible carousel configuration and the width of the images changes appropriately when the window is resized, but the height stays the same, I need it to change.

View 3 Replies View Related

Resizing The Width Of Inline Frames

Mar 19, 2005

I did some searching on here and came across a nice example of how to resize an iframe's height using javascript. I've been screwing with it for hours now but I can't seem to get it working for resizing the width. I can't seem to figure out what I'm doing wrong. Here is the code:


function getIFrameDocumentWidth (IFrameDoc)
{
if (typeof IFrameDoc.width != 'undefined') newWidth = IFrameDoc.width;
else {
if (IFrameDoc.body && typeof IFrameDoc.body.scrollWidth != 'undefined') newWidth = IFrameDoc.body.scrollWidth;
else newWidth = null;
}
return newWidth;
}

function resizeIFrameWidth (iframeID, minWidth)
{
var IFrameDoc, oIframe = document.getElementById(iframeID);
if (typeof oIframe != null)
{
if (oIframe.contentDocument)
IFrameDoc = oIframe.contentDocument;
else if (oIframe.contentWindow)
IFrameDoc = oIframe.contentWindow.document;
else if (oIframe.document)
IFrameDoc = oIframe.document;

var newWidth = getIFrameDocumentWidth (IFrameDoc);
if (newWidth != null) oIframe.style.width = String(newWidth + 'px');
else oIframe.style.width = String(minWidth + 'px');
}
}

Then in the html page whre the iframe sits I use:


Code:

<body onload="parent.resizeIFrameWidth('myFrame', 250)">

Any ideas why this might not be working?

View 5 Replies View Related

JQuery :: Asynchronously Load Image Then Get Width And Height For Resizing A Lightbox Before Displaying?

Jul 19, 2011

I got this working in chrome and was happy until I got to check out IE8! Enough said about that.The code I have now will work (in both chrome and IE8) if I manually set the height and width of the image but I cannot get them dynamically, for instance if images have different sizes, I've been trying for a while now but cannot get anywhere with it.The code I am currently using (of my own creation) is;

$("#lightbox_image_container").html('<img id="lightbox_image" src="http://www.veritywebdesign.com/gallery/gallery_images/image.jpg" />');
$("#lightbox_image").load(function() {
// image_width = $("#lightbox_image").width();

[code]....

How do I get the height and width dynamically after loading the image?

View 1 Replies View Related

IE 8 & 9 Not Resizing Container When Width Set In Image.load

Sep 19, 2010

The *small, medium fullsize* text will be off to the left (in IE8 or IE9, works fine in Chrome, FireFox) and will not be aligned with the left edge of the image.

Code [URL] Line 154:

Code JavaScript:
ShowView.prototype.setImageSrc = function (imagesrc) {
var image = $('img#image');

[code]...

From what I can tell the `container.width(imageWidth);` is not rendered in IE8 or IE9. If the page is refreshed then it works. Using the built in developer tool shows the correct value in the html but if you use selector tool in the developer tool outline does not reflect the changed width value.I've tried using vanilla javascript. That did not work. I've tried setting the image source twice. That did not work either.

View 2 Replies View Related

JQuery :: Calculate The Width Of Each Column Plus The Combined Width For The Container?

Apr 26, 2011

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 Related

Set Button Width Depending On The Length Of Text Value?

Jan 11, 2010

I have button with no width specified. The text value of the button differs, so i left it with no width.

It automatically sets the width but the problem is it to wide with about 5 spaces on each side of text letting the button look stupid.

I thought of working out the Text in a javascript function then set the length of the button.

<input id="{Description}" type="button" value="{Description}" onclick="{@name}.click(); style="background-color: #f9f9f9; height: 23px;"></input>

View 2 Replies View Related

JQuery :: All Images Must Be Resized If Width Exceeds Max Width?

May 5, 2010

I 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 Related

JQuery :: Use Width To Decrease Width Of Element

Jul 28, 2010

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 View Related

Defining Div Width Equal To Undefined Amount Of Images Total Width?

Oct 4, 2010

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 Related

Set Width Of Item Based Off Combined Width Of Other Elements?

Jun 4, 2011

I 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]...

View 3 Replies View Related

JQuery :: Summary Width - Get The Sum Of The First Three Td's Width

Jun 2, 2010

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?

View 1 Replies View Related

Onclick Change Div.width Flash.width ?

Sep 10, 2009

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.

View 4 Replies View Related

JQuery :: Window Width Changes Its Value?

Dec 22, 2011

The first alert gives me 1267 while the second says 1280.

alert($(window).width());
$('.tab-left').css({top:250+'px'});
alert($(window).width());

View 1 Replies View Related

JQuery :: Change Backgroundposition To Window Width

Oct 1, 2009

$(function(){

Why this is not working...?

View 1 Replies View Related

JQuery :: Pass The Width Of A Window To CSS Properties?

May 27, 2011

I want to be able to pass the width of a window to CSS properties. Specifically I would like the width and left-padding of a DIV to be the exact pixel width of the browser window. Ideally, if the user resizes the window, the CSS would update. What is the simplest way to do this?

View 4 Replies View Related

Set The Width Of A Div To Be The Same Width Of The Image Inside The Div

Nov 5, 2011

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].....

View 7 Replies View Related

JQuery :: 100% Width & Height For Div Even With Window Resize - Scrollbar?

Jan 4, 2011

Applied this:

[Code]...

View 7 Replies View Related

JQuery :: Setting A Div Dimension Based On Window.height & .width?

May 7, 2010

I would like to set the height of certain #div elements on a page based on the height of the user's current window state. It should draw the elements based on the size of the window at onLoad, and also respond to the onResize event.

View 4 Replies View Related

Window Width

Jul 23, 2005

What are the variables I can use to find the width of a particular window? I have a moving ball thing on the page and want it to got the width of the current active window where the code is. I understand that there are different properties needed depending on the browser used.

View 3 Replies View Related

JQuery :: Keeping Full Width Slideshow Centered On Window Resize

Aug 9, 2011

I have a site that I'm building at [URL] which use the jquery cycle plugin for a slideshow. I won't post the code here because it's all there with view source at the above address. It's a work in progress. The slideshow is full width (the images in it are actually 2000px wide but looks full width), and works fine apart from when the browser window is resized. This is most noticable when you start with a smaller browser window and then resize it to be bigger.

The slides stay the same width as when the page loaded - I need them to adapt to the new width. I need the slideshow to be centered at all widths, so I've put the images in as backgrounds to divs with center positioning on them. I've tried getting the window width on resize and then applying it to the slides using jQuery, but the original calculated size overrides it when the slide changes.

View 1 Replies View Related

Detect Window Width

Nov 23, 2006

Is there any way to detect the width of the window in which a page is displayed? I know how to detect the screen width, but that only helps if the page is always maximized.

View 2 Replies View Related

Using JS To Detect Window Width And Change Css

Mar 20, 2011

I know 800x600 screens occupy a shrinking part of Web surfers, but I want to accommodate them by offering an alternate style sheet where my site pages don't break when someone from this smaller group visits. Yes, there are examples of how to do this on the Web, but I have one more requirement and don't know how to code it. Not only do my pages break on 800x600, they also break if the browser widow is sized smaller on a 1024x768 screen. (I'm studying css that will dynamically respond to this but I'm not there yet.) Do I just need an appropriate if/or statement to deliver different style sheets? Is there even a JS that detects browser window changes?

View 2 Replies View Related

Window.onresize, Width & Scrollbars

May 17, 2007

I'm listening for the window.onresize event and trying to get the document.body.clientWidth afterwards to make sure a wide block fits onscreen. I'm working in Firefox and the thing is, when a scrollbar is added to the page due to content getting longer, the body.clientWidth gets smaller, but the window.onresize doesn't fire (I guess this makes sense as the window hasn't been resized per se).

I am assuming that I will have to check the body.clientWidth manually after the content gets longer and then call my resize function if so. But is there a way to achieve this or watch body.clientWidth other than window.onresize?

View 2 Replies View Related

Adjusting The Width And Height Of A Popup Window

Jul 20, 2005

Im working on a site for a friend, and we've setup a popup window for a couple pages, but with the code we have, the variables for the width and height are in the <script> portion of the code, and not on each individual popup code segment. Is there a way I can add "width=400" or something to each popup to change its width? Code:

View 1 Replies View Related

Open Popup Window Centered And 100% Width?

Feb 8, 2010

im looking for a javascript code that will open a window in 100% width, no toolbars, no menubars, no statusbar, nothing but the page conent basically but for it to all be centered on the screen vertically

View 1 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved