I have an application that resizes itself upon window resize. Theproblem is that if I resize down the window so it is smaller, twoscrollbars appear during resize (nothing new for now...), but thecomputed body width is the width with the scrollbars.Then, when I stop resizing, my app resizes itself, but as you may haveguessed, there are a small empty space on right and bottom,corresponding to the scrollbars.I have not found a pretty way to do it (of course I could set a timerinside my resize function that will call itself again 10ms later, just
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?
I am working on implementing a carousel-style switcher (using a pre-built script dependent on the MooTools library) on the home page of one of my Web sites. The script displays a series of thumbnail images. When the user clicks on one of those thumbnails, an AJAX request returns the following items, which are then switched out using javascript:A background image (usually between 50 and 100 kilobytes)A foreground image (usually between 10 and 20 kilobytes)A header for the promotional item (strictly text)The body text of the promotional item (text and HTML code, generally no more than 200 characters of text)I have all of that working properly.
When the user clicks on the thumbnail, the AJAX function executes. Then, I use javascript to invoke a new Image() object to load the background image. Once that's completed, I invoke another Image() object to load the foreground image. Once both requests are fully loaded, I switch out the information. While they are working, I display an animated gif that indicates the information is loading. However, if at all possible, I would like to implement a progress indicator rather than just a simple animated gif. Because of the size of the background images, it can sometimes take between 10 and 15 seconds to load on a dial-up connection (even longer if the user's connection is especially slow or overloaded).
That's a long time to sit and stare at a "loading" image, especially if there's no way to indicate whether it's going to actually do anything or if it's just completely stalled. I am already sending the filesize of the background image and the foreground image to my javascript using the AJAX request, so if I need to use that somewhere in my script, I can easily do that. However, I've hit a roadblock in trying to figure out if there's a way to determine how much the user has actually downloaded successfully. From most of my research, it does not seem possible (due to security issues) to determine any sort of file size on the user's local computer using javascript.
However, the majority of the information I've found on the subject seems to relate to the opposite type of situation (users uploading files rather than downloading). The few examples I've been able to find for "download indicators" seem to simply count the total number of images being loaded, then divide 100 by that count. Then, for each image that loads, it adds that percentage to the indicator. Since I will always be loading two images, that means that my download indicator would always display 0%, 50% or 100%, which isn't much more helpful than the animated "loading" gif I'm already using. Is there any way to use javascript to determine how much (percentage-wise or in bytes) of a file a user has downloaded from the server into their cache?
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.
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)
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...)
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.
I'm trying to make my body content scroll at the same time as an iframe located within the body. This has to do with the age old problem of mouse focus on iframes. When my mouse reaches the iframe and it takes over focus, I would like the body to keep scrolling until the iframe is right at the top of the screen. After that I want to relinquish focus to the iframe. I don't mind if the iframe starts scrolling as soon as the mouse reaches it, so long as the main body keeps scrolling for a while.
I was checking on jQuery plugins, but most of the scrollbar ones are using like 4 - 5 div classes just to stylize one scrollbar and most of the classes names must be specific to make it work with the plugin, is there any way to give some style to a scrollbar without doing all that coding?
How exactly does the sizing of the grid work? I have a grid that I've tried to experiment with and it seems like no matter what setting I use, there is a vertical and a horizontal scrollbar. the only thing that changes is if it stretches to fill the its container div. How do I get it to fit within a specific width and also to not display scrollbars?
I have a div that is filled with content dynamically and is fixed so it will always be in the same place even when you scroll. I need scrollbars to appear when the div is has too much content and goes beyond the screenborder.
I have a site project where I'm using an overlay to display an iframe that contains a slide show. When the overlay/iframe loads there is a scrollbar on the parent window. What would be the proper jquery syntax to write a function that tells the parent window to set overflow to hidden to hide the scrollbar when the iframe loads? I was thinking maybe this, but I'm not sure of the correct syntax:
To everybody who's interested,here is a nice cross-browser script which will zoom the page in case it isdesigned for a minimum resolution. The script will zoom the page to fit the width of the window so that the user does not have to scroll the page to the right or to the left.minW is the minimum width for your homepage to look good.divWrap is a DIV with which you should wrap your entire homepage.This script will also work when the window is resized.
<script type="text/javascript"> var minW = 1200; $(function () {
Does anyone knows a method to measure the scrollbar's width, which works in Safari/Chrome.
The innerWidth function doesn't seem to take the scrollbar's width into account when measuring the innerWidth of the child element of a scrollbared element.
Say I have a site that's centered on the page, and do $ ("#some_content").slideDown(). If the appearance of the new content means that the page no longer fits in the browser window, scrollbars will appear, and so the available page width decreases slightly, and so my centered content jumps left while it's sliding down. Is there a decent workaround for this? Best I can figure out at the moment is to persuade the browser to always display scrollbars, which isn't exactly ideal.
I want to install jQuery ScrollPane on my site(this one:[url])so I can use the scroll-pane plug-in to replace the ugly windows scrollbars.
Some simple questions:
If I want to use Google's jquery installation, is this all the code I need in my header?
Is there any way to easily test whether the jquery is installed correctly? i.e. a small piece of script that will tell you one way or another?
I found a few examples similar to this online:[url]
When I cut and paste the code onto my page it doesn't seem to do anything (I've either installed that wrong, or the google jquery link wrong, or both).
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.
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.
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.
IE6 in standards mode doesn't seem to hide scrollbars on the body element (overflow:hide) Ain't this a quandary. I have it in my head that I need to specify html instead. The scrollbars do hide on Gecko browsers though, so there is definitely a disagreement among browser developers on how to implement scrollbars (as a side note, Gecko browsers with their notoriously bug-ridden resize code seem to always screw up when asked to stretch and scroll divs, even when the page is reloaded on every resize!)
My first thought is to modify the CGI that generates the style sheet as I already have code that deprecates the document type when hidden scroll bars are required on IE6 (but not IE5.) This is based on the simple empirical evidence that the scroll bars are still there on IE6 in standards mode, so the optimal document type (XHTML strict) cannot be used. So I could just change this to output an html style (rather than a body style) for IE6 and lose the deprecation (it wouldn't be needed at this point.)
So the question is this. Given that CGI-based processing of browser versions for these kinds of tweaks is taboo, what would you check on the client side before dynamically generating the style for the body and/or html element? It doesn't seem like you could just send both as this would surely break some older browsers (I know you can do tricks with comments and such, but that only works for NS4 and maybe IE3 AFAIK.)
documentElement is the only thing I can think of that indicates standards mode and NS6/Mozilla support this AFAIK.
IE Conditional comments perhaps? I would hate to hard-code a test for a browser version number into the actual document (for obvious reasons), but I guess it is an alternative if the browser version is exposed to these things.
I don't see any other way to deal with a situation like this than with server-side code that looks at the browser's version number and makes the necessary adjustment. And there are lots of little differences like this that just don't seem to have viable client-only solutions. There's DirectX stuff (probably is an object detect for that) and funky colored scrollbars (hey people ask for them) and document margins (Opera did them slightly differently than the rest as I recall) and now this scrollbar thing.
I have used a textarea to display typewriter effect text. The scrollbars are displayed by default. What is the code to disable the scrollbars in a textarea form field? < scrolling="no"> does not seem to work.
<script> var newWindow = null; var scrolling = 0;// Controls whether the layer is scrollin or not var yT = 25;// Pixel position the top of the scrolling layer should be set to var lT = 25;// Initial position for the top of the layer var yI = 5;// Increment that the scrolling layer should move at var yH = 0; var domStyle;// Stores the generic DOM for the scrolling layer to access style properties var dom;// Stores the generic DOM for the scrolling layer var isDHTML = 0; var isLayers = 0; var isAll = 0; var isID = 0;
