|
JavaScript - Screen Resolution Accessibility - A Perfect Solution?
Dear Forum,
I began working on a "best" solution for screen res widths of 1024+ for centralised fixed width pages with potentialy large (or any size) left and right margin graphics and have come up with something I'm very happy with: an outside wrapper set to 100% + overflow hidden (removes the horizontal scrollbar on all screen res) a wrapper inside that set to 1000px with margin auto (allows the central page to be in the middle of, or to fill the page of all screen res - brilliant because originally one main objective was for a left margin not to push the page to the right and out of view on a lower res screen) an inside wrapper inside the centralised one above set to for example, width 1800px and left 400px, allows both margins to be viewable for all screen res larger than the central page (1000px+) ok, so the final hurdle in what for me would be a perfect solution is for any screen res lower than 1000px - currently the horizontal scroll bar is removed - therefore the central page has its right potentialy chopped off.... and so with some research, I've put together the following JavaScript: Code:
<SCRIPT language="JavaScript">
if (screen.width<1000)
{document.getElementById('outsidewrapper').style.cssText='overflow: visible;';}
</SCRIPT>
This is my best effort at JavaScript - I am slowly and steadily learning more. I feel its on the right track, to return the overflow on the outer wrapper would bring the horizontal scroll bar back, but on IE (lower than 1000 res screens) this causes an error and does not work on any browser. If anyone could help with syntax or wisdom how to get this code to work, it'd make for me today a good day, if any of this is difficult to understand without seeing, the site is: http://www.delightwebdesign.co.uk/ many thanks Will Similar TutorialsAll- I have a page coded that pulls files from a directory using PHP then sets them up using a Flash type player to stream the video. My problem is that I have to resize the video window for each computer I play it on. They all have different resolutions. I was able to use: Code: <script type="text/javascript" src="/jwplayer/swfobject.js"></script>
<script type="text/javascript">
var x = (+screen.width);
var y = (+screen.height);
if (x == '1920' & y == '1080')
{
var xn = 1440;
var yn = 900;
document.write(xn);
document.write(yn);
}
if (x == '1024' & y == '600')
{
var xn = 900;
var yn = 400;
document.write(xn);
document.write(yn);
}
swfobject.registerObject("player","9.0.98","/jwplayer/expressInstall.swf");
</script>
To pull out the current Resolution of the user and pass to a variable the resolution I want the video to be. Here is where the video code is Code: <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4 =../Movies$full_dir.jpg' />";
?>
<object type="application/x-shockwave-flash" data="/jwplayer/player.swf" width="900" height="400">
<param name="movie" value="/jwplayer/player.swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<?
echo "<param name='flashvars' value='file=../Movies$full_dir.mp4&image=/Movies$full_dir.jpg' />";
?>
<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
</object>
</object>
In the video part, where it says Height and Width, I just need to have it take the 2 variables i created depending on the resolution used. Variables xn or yn. Any ideas? Please Please help! been stumped on this all afternoon!! Thanks Defyer! Hi all, I'm new to javascript and im trying to teach myself how to use it, however, ive come accross a problem. I'm using this code embeded in a HTML page for rollover images: Code: <script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
homebuttonup = new Image();
homebuttonup.src = "./Images/nav/home2.png" ;
homebuttondown = new Image() ;
homebuttondown.src = "./Images/nav/home2.png" ;
newsbuttonup = new Image();
newsbuttonup.src = "./Images/nav/news.png" ;
newsbuttondown = new Image() ;
newsbuttondown.src = "./Images/nav/news2.png" ;
gallerybuttonup = new Image();
gallerybuttonup.src = "./Images/nav/gallery.png" ;
gallerybuttondown = new Image() ;
gallerybuttondown.src = "./Images/nav/gallery2.png" ;
}
function buttondown( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "down.src" );
}
}
function buttonup ( buttonname )
{
if (document.images) {
document[ buttonname ].src = eval( buttonname + "up.src" );
}
}
// -->
</script>
<a href="index.html?cmd=welcome" onmouseover="buttondown('homebutton')"onmouseout="buttonup('homebutton')">
<img src="./Images/nav/home2.png" name="homebutton" border="0" /></a>
<a href="about.html?cmd=welcome" onmouseover="buttondown('newsbutton')"onmouseout="buttonup('newsbutton')">
<img src="./Images/nav/news.png" name="newsbutton" border="0" /></a>
<a href="services.html?cmd=welcome" onmouseover="buttondown('gallerybutton')"onmouseout="buttonup('gallerybutton')">
<img src="./Images/nav/gallery.png" name="gallerybutton" border="0" /></a>
This works completly fine in 1280 x 800 but goes mental when you hover over it in 1024 x 768 screen resolution. Can anyone help please, it would be greatly appreciated! I have set javasscript code to detect and store into variable screen resolution. How to store this javascript into variable PHP? PHP Code: <script type="text/javascript"> var ScreenWidth=screen.width; var ScreenHeight=screen.height; var ScreenResolution=ScreenWidth+"x"+ScreenHeight; document.write("<span style=\"color:red;text-transform: capitalize;\">your current screen resolution is " + ScreenResolution + "</span>"); --></script> } </script> <?PHP $screen=str_replace("#","",$resolution); echo "screen width is:".$screen; ?> I have this script: Code: <SCRIPT language="JavaScript">
<!--
// small
if ((screen.width>=1024) && (screen.width<1280))
{
window.location="0_framside/1_small/849x507.html";
}
// medium
else if ((screen.width>=1280) && (screen.width<1400))
{
window.location="0_framside/2_medium/1105x507.html";
}
// large
else if ((screen.width>=1400) && (screen.width<1600))
{
window.location="0_framside/3_large/1225x639.html";
}
// xlarge
else if ((screen.width>=1600) && (screen.width<1920))
{
window.location="0_framside/4_xlarge/1425x789.html";
}
// manual
else
{
window.location="resolution.html";
}
//-->
</SCRIPT>
See the page in action he http://www.kollalfa.com/temp_LesForMeg/index2.html The problem? On a computer with 1280x1024 resolution, IE detects it to be 1024 (thus sending the user to the wrong page). It works perfectly in all other browsers (that I have tried). Any ideas? Thanks in advance! Hi there. I'm considering using the script below to detect the screen resolution of the user and then call a specific CSS for that user. The main aim is so that I can design the website at a fixed width for a larger resolution (used by most people), but if the user has a 980px resoltion then they can be catered for as well. Code: <SCRIPT language="JavaScript">
<!--
if ((screen.width>=1024) && (screen.height>=768))
{
window.location="highres.html";
}
else
{
window.location="lowres.html";
}
//-->
</SCRIPT>
I don't want to use liquid layouts as I think it looks messy, and I don't want to design to a width of 960px as I don't like the blank space at the sides on larger resolutions. Is this an acceptable method, or do you think i'll run into problems? Any advice would be great. Cheers. Pat. Hi All! I have a web application with an aspanel, users can add images, the program automatically make the thumbnail. when user click on thumbnail they can see a pop up modal page. Images are in different sizes, so what I need to achieve is to get the screen resolution or browser visible area and re-size the image according to this resolution. (users could have different type of computer screen with different resolution), I need a JavaScript or jquery code. Thanks in advance Please delete, someone had a retard moment
Ok guys, im willing to pay for the solution, got to get this site finished today!! Im having some trouble with a site im working on. In a nutshell, im using a navigation bar with dropdown and JS Fadeshow. When using the navbar dropdown, it goes BEHIND the fade show. If anyone could advise it would be great! I didnt attach the code as i think the best thing to do is just take a look yourself. Its alhambrarenovations. COM Thanks in advance Tell me what other info you need and i'll suply it. I am a govt. employee wanting to make a multi-user database. This is a replacement for the current solution: 1. Single-user Excel sheet on a shared network folder. Here are my design limits: 1. The system uses Windows XP only. 2. I do not have communication with the network admins. 3. I will never have permission to install servers anywhere. They are forbidden. 4. I do not have permission to install any software on any computer. 5. My group only has access to one shared network folder. I've brainstormed some solutions, including: A. Marrying a VB Application with SQLite, with the SQLite file sitting in the shared folder. B. Using how to use SharePoint to develop my application. C. Using Microsoft Access as a client-side GUI which connects to another .mdb on the shared folder. D. Using Internet Explorer with Javascript and ADO ActiveX Objects to manipulate records in a .mdb on the shared folder. I choose D. Choice A is out because I can not install any software development tools. B may not work for me because my database is heirarchical in nature and I want more control over the GUI. Same reason for C, and Access is a little micky-mouse. Amazingly, the security settings on IE allow the creation of ActiveX objects through Javascript. I can also develop with javascript because I have Wordpad. To test the code I can simply run it by launching the HTML. This allows users to open the same HTML file in the shared folder instead of distributing front-ends. The javascript must all be client-side, including all data manipulation. However, I am not concerned about security issues because only our group will be using the system, and all traffic is already contained within Navy networks. So I don't care if I use window.location for storing variables since it works for this case. Does anyone have anything to say about this? I'm looking for pointers, gotchas, guidelines, and any other, better solutions. Thanks. Hi, javascript method downloadUrl() is very very slow at chrome. means, i am not able to see the data from mysql server at chrome browser.. But this works fine at IE. Pls suggest me with some alternative javascript methods.. thanks, VK but I just can't figure it out. I have trawled the net for a solution and tried many different things that I have seen but still no luck. Maybe the answer is staring me right in the face and I just can't see it. The code it executing the first time but as the setTimeout tries to start the second loop I get an error 'box is not defined'. Any suggestions and explanations of what I am doing wrong much appreciated! Code: function expand(box) {
var box = document.getElementById(box);
var originalHeight = parseInt(box.style.height);
var inc = 5;
newHeight = (originalHeight + inc);
box.style.height = newHeight + "px";
int = setTimeout('expand(box)',100); }
Hi, Normally when i try to put a form in a html page i use the Code: <form action="http://www.site.com/test.php" method="post"> and so on with the respective input (Something i learn over here) Today i was trying to create a html box whith the purpose of submiting to a external site but the problem i got is that the external site doesn't use the Code: <form> tag to submit and uses javascript in an onclick event. Is there any way i can still submit? Note: I tried an iframe 0 to load up the site and the respective scripts and emulate the submition in the top page but didn't work out. Thanks for all the help... I made some code to factor a quadratic equation and I could use some help finding situations where it finds the wrong answer. If you can find any problems, let me know. Thanks http://www.wdroom.com/factor.html I want to create dynamic Select option in form, I want that whenever user clicks on add member button then new row will get added & i have done that by taking help of DOM createElement method & I want that by using same, I want to create select option drop down list.
Hi everyone, I am setting up a website where we want a drag n drop solution for a customer to place an email. To give you an idea on what we want, picture this... A form where the customer can enter there details. Below the form are icons of items. The customer can then drag these items into an image of a box below. Would also be nice if it could list what is "in" the box. Once customer is satisfied, the contents get emailed to us and we can provide further details from there. Mainly has to look nice from the customers side, on our side we are happy to receive just the titles or codes of what they are dragging into this box. Hopefully i have made this simple to understand, if anyone needs any more information, please do not hesitate to ask me. Also, this will be implemented into a Joomla site once sorted out, if that makes any difference. Thank you in advance! Hi Guys & Girls, I am looking for help with a technical issue, which my programmer can't find the answer to. My website has a demonstration facility which allows a client to enter their website which then in turn creates a video transparency overlaying their own website. The problem is some sites with Flash, overlay my transparency video so that you cant see my demo video. Any ideas please. Thanks Maximillion I was trying to find a way to preload images using javascript or PHP or anything that would work - specifically I wanted a way to preload all images from a directory AND its sub-directories. Well, there are solutions out there and some are pretty complex. In the end I chose to do a simple thing which works well for particular image-heavy pages. It is so easy I am wondering why it isn't more often mentioned. OK, it's simply including on a chosen "lead-in" page some almost invisible inline frames (1 px x 1px) of the image-heavy pages you want to preload the images from: Code: <iframe name="I1" src="index1.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> <iframe name="I2" src="index1b.html" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0" width="1" height="1"> </iframe> etc. Sure, you have to stay long enough on the lead-in page, but even if you don't, its a help. Here is my solution in action: http://maraboni.aapress.com.au/html/...y/gallery.html (my site went down just as I posted! but it'll be on in a short while, I hope!) You can see that I have used a nice bouncing ball loader routine (pace.js) top right to partially alert the user to what is going on, but it is not essential. Without the inline frames, clicking on the nav links at the top of the page will usually result in a less than optimum visual experience and a necessary page reload of the image-heavy pages. I can't see any downside. Can anyone? Hi guys (and ladies) I am a bit stuck and hope this community might shine a light, or even better can supply me with a solution. I want to do the following: - Having an ordinary webpage containing links - I will link the links with files (word processing files , MS Word, Open Office writer, wordpad or similar) - Now when clicked on the link I want the 'system' to copy the contents of the linked file to the windows clipboard, so when clicking paste, the text from the file is pasted wherever I want. To make clear, I don't want any word processing app to open, just click the link and paste where it needs to be. Possible?? MOST LIKELY but I have no clue how. Any chance someone might know the answer??? I am looking forward to the replies! Thanks PvL Hi! I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com At the top of the blog is an iframe window that directs to http://aro2220.com/blog On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog. It works great except that the height is not automatically resizing. Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this) Quote: var stringvariable = http://aro2220.com/blog/index.html; int stringlength = stringlength(stringvariable); int autosize = 200 + stringlength * 5; <iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe> Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do. |
|||||||