JQuery :: Dynamic Height / Width Sometime Broken On Page Load?
Aug 28, 2009
I've written a small plugin to serve as a feature rotator and am having one strange problem.You can see some demos of the plugin and documentation here:
http://pbskids.org/pbskidswidgets/carousel.html.The plugin does a number of things that involve reading the width and height of DOM elements and using them to set the width and height of other elements. The problem is that sometimes in Firefox and Safari, when the page loads, the widths and heights of panels in the carousel are fracked.
Reload the page and the problem's fixed. In Safari, I can't get it to happen again on many reloads. In Firefox, though, if I reload repeatedly, I can get the problem to happen again: maybe once every seven or eight times.It looks like something's happening with page loading, but I'm at a loss to diagnose it further: is the script firing before the elements have fully loaded sometimes, and then works on subsequent tries because those elements are in the cache? Also: I've never seen this error in any of the IE versions.
View 1 Replies
ADVERTISEMENT
May 1, 2010
I have a question about loading an external .html page into another page.Presumably, I need to accomplish this by using iframes, right? I have a lot of files (around 1000 files) that I need to load into the same iframe. It's only a part of the total page I need to load and to create over 1000 pages instead of using an iframe (or another way to load a page into a page, which I don't know yet?) is much more work than using the frames.
Anyway, that for background. Now to the reason why I need dynamic height. Some of the pages are like 500 px in height, while the other half of my pages have a height of around 1500px (though the height of 80% of the pages vary per page! but approximately these heights as an example).If I'm viewing a small page with a predetermined set of height of 1500px, I'll be viewing a lot of blank space. Which is why I need to get around the fixed height, so the solution is a dynamic height. Another reason why I need a dynamic height, is because I have a 'back' button function which will lead you to the previous visited page when clicked. So if you were viewing a small page, then clicked a link to view a large page.... and then click on the back button at the bottom of the large page... You'll be taken back to the small page, but viewing it from the same point as you were on the large page, so you'll be actually viewing the huge blank space.
So... I've searched the web endlessly for a script to let me predetermine the height of the loaded pages, but none of them actually give me what I want.I need the script to work in at least the three main browsers (IE, FF and Chrone) at the same time. I've only found scripts that'll only work for IE, or only for Chrome and a lot of scripts that don't even work at all. I could give you some of the codings I've found, but they still don't work well enough. Also, some of those will lead me to the top of the page when you click a link. Since there's a lot more on the main page, I either need it to stay at the same position as the previous page visited, or at the top of the iframe, not the top of the parent page.I've been searching endlessly on the web and I cannot find something that works good enough. It doesn't have to be a frame, but so far, that's only way I've found to load a page into another page.
View 14 Replies
View Related
Apr 3, 2010
I've ran into this problem more than once, there are plenty of tutorials on how to toggle/fade a hidden div that already has data placed into it, but I want to $.load() a page into an empty div ID and then toggle/fade it into view.
I can't for the life of me figure out how to do this or find anyone in Google trying to either. This has to be the first time I've ran into a limitation of jQuery and it isn't even something that should be such a problem.
View 1 Replies
View Related
Oct 30, 2011
I have a strange issue with jQuery while using the following code :
$("#image").append('<img src="'+json.filename+'" id="cropje" alt="None" />');
$('#cropje').load(function() {
alert($(this).width());
}) .error(function(){
alert("FAIL TO LOAD IMAGE");
And the result is : 0 But it looks like the image gets loaded after the alert... How is that possible?
View 4 Replies
View Related
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
Jun 12, 2011
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.
View 18 Replies
View Related
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
Jun 4, 2009
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]....
View 5 Replies
View Related
Nov 17, 2009
i am using jquery to detect picture width and height in a page. if the size exceeds a specified value, then a maximum size will be assigned to the <img > attribute.
this jquery is run with $(window).load, because when $(document).ready the pictures may not be loaded and the script may fail
this theory is good. however, if the internet speed is slow, or the picture link is dead, user would have to wait for a long long time before the jquery executes.
is there any way to do the resizing job wisely? for example, resize each picture once each of the pictures is loaded?
View 5 Replies
View Related
Jun 16, 2011
I put the following line in the onchange tag of a listbox to use the values to manipulate an iframe:
document.getElementById('viewer').src=('Location_Files/')+(this.value)+('.htm') There it works perfectly but I wanted to do more so I decided to build a function around it:
function display()
{
document.getElementById('viewer').src=('Location_Files/')+(this.value)+('.htm')
}
When I put the function in the onchange tag instead, the iframe tries to work but I get a "can't load page" message like the src is broken. Now when I first made that line it took me hours to figure out that I can't use a "" because if I do it fails. So I went with "/" and that works but I wonder if that rules change when I specify it in the java script instead of in the onchange tag itself. Either way it still breaks if I try to use "".
View 5 Replies
View Related
Feb 9, 2011
I have jQuery loading content from an aspx page - however, once this is loaded, jQuery doesn't appear to "see" the content. For example, in the code below, I am retrieving a table, with the class "stripeme" from the aspx page - I then try to add the mouseover/alternate row scripts, but my table does not change.
My main page is:
(page head info removed for length)
<script type="text/javascript">
function showDetails() {
var div = $("#divResult");
div.slideUp(function () {
div.load("getContent.aspx", .....
Should I add dynamic content, that I then want to manipulate using jQuery, in some other way?
View 1 Replies
View Related
Nov 8, 2010
The original question was: does anybody know how to load a specific content and not an entire web page when using the jQuery.get below?
$.get('filename.html', function(data) {
$('.class_name').html(data);
});
and was given this code to use/try:
$.get('filename.html', function(data) {
$('.class_name',data).html(); //returns the HTML of .class_name inside of filename.html
});
but it didn't quite work. It loads the entire web page into the defined class name rather than loading a specific content (Look below for further understanding)The filename.html which has content tag names like "[Copyright Year] that goes in the footer position of the site gets dynamically generated.I've created another static page help.html that has pretty much the same content overall except the dynamic content won't get loaded with the content tag (the system doesn't allow static pages to load them). This is what brought me to this solution. So now that I've added a class name to the indicated class that I want to load it pulls all the content and styling of the site rather than just the dynamically generated content of (filename.html) .
<div class="adp_footer">[Copyright Footer]</div> <---- Doesn't get loaded when I used any of the above mention jquery strings,
View 3 Replies
View Related
Jul 20, 2009
Currently for the height and width functions, this is the description:
View 3 Replies
View Related
Oct 27, 2011
I'm facing the following problem: I'm using .append() method to add a new <div> on the fly and I need to read its width and height right after it's been created. How can this be doneMy current strategy to accomplish this task is:
$("#container").append(
$("<div/>").append(
$("<p>").html("This is a content example that goes inside my just created div")
[code]....
View 2 Replies
View Related
May 22, 2010
I'm just starting my first jQuery project (tutorial from this months Web Designer) and I've got a background image that I want to spread across the entire background, regardless of browser size. It's big, so I originally had an onload function. This works fine in Mozilla and Safari but not in IE.
My question is, can jQuery set a width and height of 100% and have it work in IE?[code]...
View 2 Replies
View Related
Apr 11, 2011
I have x amount of draggable & resizable divs, they work as I want them to, I am outputting the coordinates of each div in a textfield. My problem is that the textfield only displays coordinates when a div is CLICKED, so when holding the mouseBtn and dragging a div around then releasing the mouseBtn the coordinates aren't displayed in the textfield. I tried to set 'mouseup' instead of 'click' but then the divs are being dragged around all the time even tho you released the mouseBtn. The second thing is that i want to output the size of the div in another textfield, so when a div is resized the new size of that div should be displayed in the textfield.
<script>
$('#resizeDiv, #resizeDiv2, ,#resizeDiv3')
.draggable()
.resizable({
minHeight: 150,
minWidth: 200
});
</script>
<script>
$("*", document.body).click(function (e) {
var offset = $(this).offset();
e.stopPropagation();
$("#result").text(this.id + " coords ( " + offset.left + ", " +
offset.top + " )");
});
</script>
For the size I tried to work with
function showWidth(ele, w) {
$("div").text("The width for the " + ele + " is " + w + "px.");
}
$('#test').click(function () {
showWidth("paragraph", $(this).width());
});
I want to send both size and x&y of each div to a database.
View 1 Replies
View Related
Mar 11, 2011
i have a small question .... Lets say i have a html web page withthe folowing code inside:
[Code]...
View 4 Replies
View Related
Jun 18, 2009
during the initial phase in the development of amuch more complex zomm&pan widget, i ended up with this tiny (yet another) zoom&pan plugin. Since it's small and with just few functionalities i'd call
[Code]...
View 5 Replies
View Related
Jun 9, 2009
I have always been using Prototype but I finally made the switch to jQuery because of its good documentation and large user base.
I have a problem that I hope someone can solve. The problem is that I cannot correctly set a size of my dialog when loading the content using Ajax.
I have the following code:
The content is loaded but the dialog is not sized properly. I guess that it depends on the content being changed after the dialog has been initialized. Is there a nice way to solve this problem?
I tried the following solution (not very good looking but anyway...)
This causes the size to be correct but it doesnt center the window and it also removes scrollbars from the content. I must have the scrollbars but I want the dialog not to exceed the viewport.
Another solution is to download and use YET ANOTHER third party plugin but hey comeon, shouldnt jQuery UI be able to do this?
View 3 Replies
View Related
Jan 4, 2011
Applied this:
[Code]...
View 7 Replies
View Related
Oct 21, 2011
How to resize the dialog to fit to browser height and width? I want the dialog to resize if user resizes the browser size..
View 3 Replies
View Related
May 17, 2009
I had problem when try to reuse div element with ui.dialog().If I set the width & height the first time it works; but if I call it from second function with different width & height it won't apply the new setting. Also if I manually resize the dialog when it appear after close and reopen it use the new size (resized manually) not the one I specified in the code.is it possible to resize the dialog before it show up?
View 3 Replies
View Related
Jun 29, 2011
I have a div with content that i want to overlay over some other content. The tricky part is getting it to be full browser width and height. This doesn't seem possible in CSS, so I'm looking for a jquery solution. It will basically fade in when a button is clicked. I'm comfortable with the fading it in etc, but I'm just having trouble working out the full screen part - especially since I want it to stay full screen even on browser re-size.
View 2 Replies
View Related
Mar 17, 2011
IE6 don't recognize with themin-height and min-width attribute of CSS?
View 1 Replies
View Related
May 28, 2010
jquery width() and height() functions are consistently returning the wrong values for the viewport size (i.e. $(window).width). Anyone know why..or what I can do to fix it?
View 3 Replies
View Related
Sep 24, 2010
I have the following code:
$.blockUI({
css: { width: blockwindow_width + "px",
height: blockwindow_height + "px",
top: ($(window).height() - blockwindow_height) /2 + 'px',
[Code].....
View 3 Replies
View Related
