JavaScript - Scaling With Aspect Ratios - Maths Fail :(
I've cannibalised some code from the jQuery supersized plugin that scales images to full screen size while retaining aspect ratio.
However, I seem to be getting it wrong, and my maths is... well, appalling. The problem is that while it's resizing correctly to fit the width OR the height, it's not fitting the width AND the height. That is: If I adjust the window height, the image scales to fit the height, but goes outside the window width. If I adjust the window width, the image scales to fit the width, but goes outside the window height. If I adjust both (dragging the window corner) it seems to favour fitting the width. I am currently using only landscape images. I don't know if that has a bearing. This may well just be a logic issue, but my brain is just turning to jelly when I look at my code below: Code: var image_ratio = options.image_dimensions.height / options.image_dimensions.width; var browser_ratio = browser_height / browser_width; if (browser_ratio > image_ratio){ var target_height = browser_height; var target_width = Math.floor(browser_height / image_ratio); } else { var target_width = browser_width; var target_height = Math.floor(browser_width * image_ratio); } The code above works out some new image dimensions and is called when the browser is resized. The options.image_dimensions.height and options.image_dimensions.width variables represent the original dimensions of the image, and browser_height and browser_width are calculated from the window size. How can I make it fit either landscape or portrait images to the smallest available dimension of the browser? Similar TutorialsHi, Please bear with me as I have zero knowledge of programming, or even if this is the right way to do this. I use a website that has (i believe) Javascript on that uses some maths, and I am looking to convert this webpage into excel... I wonder if someone could give me a pointer to convert the attached code into the excel format, or even just to highlight where the maths is so i can continue myself! Code: script is too long, so ive attached as a zip Hey guys, I'm pretty new to javascript and would like some help with the maths, or rather, the way which the math is calculated. Ok, let's say you have 2 variables, north and south and then we run the program... north = 10; (north at this point is obviously 10) south = north + 5; (south at this point is north + 5 which is 15) north = 2*2 - north + south My question here is, is the north (the one in bold) equal to 10 or the new north, 4? Thanks, hello, ive been wondering about this possibility for a while. i havent been able to find an answer to it using google, but im not very knowledgable about javascript in the first place. what id like to do is make a webpage that has one frame (or div if its necessary) that resizes based on a percentage of the size of the user's window upon loading, but always keeps the same aspect ratio. to get more specific: i want that second frame (or div) to have a locked 4:3 ratio. can this be done? Im trying to get this script working on this game on Kongregate Im experimenting on this I took some script which resizes the whole game to its maximizations and I thought it needs to keep aspect ratio anyway I tried to modify all I can but all I get are gaps and game gets aligned to left some reason I couldnt find out I based it on this http://userscripts.org/scripts/show/34214 so can you tell me what I am doing wrong to get those gaps and what I need to do to make game not get aligned to left Im working like zomg This is what I tried but alas, it does not work por que no? This is located on my main index file which if the result of z is greater than 1, I would have the user stay at this page as opposed to redirecting to the portrait design. I have optimized the website for mobile use so there is a reason of having two different pages, the wide screen has extra tools / other stuff that isn't shown on the portrait not because of size/responsive design but becasue I want it to be this way. Anyway... "What's the situation captain?" This is located above my <style> tag Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script language="JavaScript" type="text/javascript"> <script> function redirect() { var x = screen.width; var y = screen.height; var z = x/y; if (z<1) { window.location.replace("alternate destination"); }; else ( ){ // stay here }; }; </script> Reply With Quote 12-21-2014, 01:58 AM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts You have extra semicolons in there. In general, don't put a semicolon directly after a right brace }; There are a couple of exceptions, but they don't apply here. What's the point in having the else?? I have a client that wants to add images to her website, and I have trawled for several hours through google trying to find the answer, but I am not a Javascript coder but I understand how it works. I need a script that can scale an image and keep it portrait/landscape, but inside a 120x120 box As far as I know (from my limited knowledge) it would go something like if height > width then height = 120px else width = 120px From what I understand I would need to do this using a <div><img /></div> system, but as I said I'm not a JS coder so I'm likely wrong Thanks for any help Hello, I'm trying to make a website that has a javascript gallery that dynamically scales with the window size. This is an example of what I'm trying to do, but its written in Flash. http://jeffbark.com/ you can see my site at ryanwhittierhale.com. I have an image gallery set up on the site made with javascript that swaps around between divs to load in different images. I wanted to make it so the image scales to fit the window size as well. I tried to use that height= 100%; but that doesn't seem to work in certain browsers. I found an example of what I'm trying to do online that appears to be written an java. It seems to work on all the browsers I've tried it in so far. On Deviantart the images scale when you adjust the window size, very similar to what I'm trying to do. http://www.deviantart.com/#/d3337hl I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files. test5.html : Code: <div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'> </div> <script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script> <script type="text/javascript"> function showrsp(){ jQuery.get("test5a.html", function(data) { $('#div').append(data); $(document).ready(function(){asd();}); }); }; function asd(){ $('#div').scrollTop($('#div')[0].scrollHeight); } showrsp(); </script> test5a.html : Code: <p>asdasdas</p> <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><p>asdasdas</p> <p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p> <p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> <p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /> How to wait until innerHTML finish render the contents before execute function asd()? You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
Greetings, I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE. Here is the DOCTYPE I added to the top of the page; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The error log in FireFox says; frmTest is not defined - Line 30 Here is the block of code it is referring to; function MoveForward(ipage) { if(TestAnswers()) { frmTest.action.value = 'next'; frmTest.p.value = ipage; frmTest.submit(); frmTest.cmdNext.disabled = true; try { frmTest.cmdBack.disabled = true; } catch(err) { } } } Line 30 is: if(TestAnswers()) The opening form code further down the page is; <form action="stress_test.asp" method="post" name="frmTest" id="frmTest"> I have been up against this for a couple days, any help would be very (very) appreciated. Regards, Ross for an anchor object, it is ok to reference by index. But when referenced by name, it seems unavailable in IE8 (not sure abt other IE version). I tried FF, it works well. So is it an IE bug or something? Code: <a name="thisAnchor">HERE</a> <script language="javascript" type="text/javascript"> alert(document.anchors[0].nodeType) // no problem in IE and FF alert(document.anchors["thisAnchor"].nodeType) // does't work in IE? </script> thx in advance Honestly, its probably my fail. Regardless, here is the deal, any help would be appreciated. I am currently skinning up a custom cpanel theme for a company I work with from time to time, kudolabs.net. They would like their Jixed Bar that is on their main web page to be on the skin, and I am attempting to put it there now. I have put the code into the html of the skin, both the call to the proper javascript files and css files, and the proper code for the bar itself. It is not working, the bar shows up as it is supposed to, but it is not aligned correctly and the bar does not float with the page. It acts exactly like the javascript is not working at all.... Unfortunately I can't just provide access to the cpanel for people to check, but you can see the source code of the main page, kudolabs.net, and if you're willing to help, I can of course give you access to a demo account (and quite possibily provide some hosting for a month or two, we're based in the netherlands and have plenty of space to share to anyone willing to help us with little problems such as this. @_@ ) Thank you for your time reading this, any help or points in the right directions would be appreciated. Unfortunately, google has failed me this time. Or, rather, I have failed google. o.o If you try some codes and then catch exception, it should catch the exception when there is. However, if there is a setInterval method in the try clause, then the exception cannot be caught... why??? the following works ( a usual method is invoked in the try clause): Code: <script language="javascript" type="text/javascript"> function invoke() { var i=0; return i.x.y; } try { alert(invoke()); } catch(ex){ alert(ex); } //Any Exception will be caught. </script> if the highlighted line is changed as below (using setInterval method), then it fails... Code: <script language="javascript" type="text/javascript"> function invoke() { var i=0; return i.x.y; } try { setInterval(alert('invoke())',1000); } catch(ex){ alert(ex); } //The Exception will NOT be caught. </script> any idea? thx in advance EDIT: Ive actually managed to sort this out. The problem was as simple as the onload in the body tag was overriding the onload script in the header. Combining the two solved the problem. Ive recently been appointed to do some work on my employers website. For now, to hold us over until we can manage a complete re-write, I have been asked to just do a little update to the look and feel. One of the things I have done is use the niftycorners code for rounded divs. I have had no trouble implementing this code over all the site pages, until I got to one page. Our product pages. Ive never seen a code placed directly within the body tag, but this is what has been done here. <BODY onload="pricing_init(); attribute_changed();"> This code loads the dynamic pricing feature. Unfortunately, it also causes the nifty corners code I have placed between the head tags to fail. I dont know if its just the odd placement of the code or the code itself as I am just learning js (using the Javascript and Ajax for dummies book). Is there some way I can alter this so that both the dynamic pricing and nifty corners works? thanks in advance for any suggestions. I have a JSP page,such as test.jsp Code: <input name="id1" type="text" value="abc" size="40"> Then I want to open it by using Javascript,and alert id1 value,so I use following statements: Code: var s=window.open('test.jsp','mywin'); alert(s.document.id1.value); When I run alert(s.document.id1.value),,it raise javascript error Code: s.document.id1.value undefined I want to know how Javascript can get jsp value by window.open? Thanks I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? Why fail? --> <span onclick="document.bgColor = 'grey';">Grey</span> <span onclick="document.bgColor = 'grey';">Grey</span> does not change the page grey on this page: u s e r s (dot) r c n (dot) c o m / r o b e r t (dot) a c k e r t / g r e y . h t m any ideas why? I think something is blocking it. |