|
JavaScript - Page Size Selector Script Question
This is pretty much my first really useful script that I wrote myself. I am trying to load a different index.html page for each different screen size that the browser has. So the page looks best at different resolutions. I am not really able to test it since I haven't finished building all the different resolution index pages yet. I am just wondering if anyone sees any glaring errors in my coding.
This is my script: Code: <script src="javascript/stndlibrary.js">
var screendim=getWindowSize();
var screenwidth=screendim[0];
var screenlength=screendim[1];
var screenw=new array(640,800,1024,1280,1400,1600,2048); //Array for standard screen widths
var screenh=new array(480,600,768,1024,1050,1200,1536); //Array for standard screen heights
var indexfilename=new array('vga','svga','xga','sxga','sxgap','uxga','qxga'); //Array for filenames for different pages for each screen size
for (i=0;i<=6;i++);
}
if (screenwidth <= screenw[i]) && (screenlength <= screenh[i]);
{
window.location.replace('http:\\perezcomputer.com\'+indexfilename[i] + 'index.html');
break;
}
}
</script>
The stndlibrary.js file contains the function I wrote to fetch the screen width and height that will be passed back to the script. that function is he Code: function getWindowSize() {
if (window.innerWidth)
theWidth=window.innerWidth;
else if (document.documentElement && document.documentElement.clientWidth)
theWidth=document.documentElement.clientWidth;
else if (document.body)
theWidth=document.body.clientWidth;
if (window.innerHeight)
theHeight=window.innerHeight;
else if (document.documentElement && document.documentElement.clientHeight)
theHeight=document.documentElement.clientHeight;
else if (document.body)
theHeight=document.body.clientHeight;
return [theWidth, theHeight]
}
Please be gentle I am a nOObi... Similar TutorialsI was playing around with some onmouseover/onmouseout and setting innerHTML to various strings depending on what has been mousedover/out. The DIV for the innerHTML was above the items being onmouseovered/out and because the strings sent were of different lengths, sometimes a one or two line wrap would happen and everything below it would be resized accordingly creating a horrible effect. For reference, what is a good way to approach building pages which are immune to this effect? hi guys, i am using this script (jquery) to resize textareas when a user enters text. it works well. in the management system im writing i would like to also resize all textareas so that all text is visible when forms load i.e. a user loads a form with textareas on and all the text is visible when they read the contents Code: /*
* jQuery autoResize (textarea auto-resizer)
* @copyright James Padolsey http://james.padolsey.com
* @version 1.04
*/
(function($){
$.fn.autoResize = function(options) {
// Just some abstracted details,
// to make plugin users happy:
var settings = $.extend({
onResize : function(){},
animate : true,
animateDuration : 150,
animateCallback : function(){},
extraSpace : 20,
limit: 1000
}, options);
// Only textarea's auto-resize:
this.filter('textarea').each(function(){
// Get rid of scrollbars and disable WebKit resizing:
var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),
// Cache original height, for use later:
origHeight = textarea.height(),
// Need clone of textarea, hidden off screen:
clone = (function(){
// Properties which may effect space taken up by chracters:
var props = ['height','width','lineHeight','textDecoration','letterSpacing'],
propOb = {};
// Create object of styles to apply:
$.each(props, function(i, prop){
propOb[prop] = textarea.css(prop);
});
// Clone the actual textarea removing unique properties
// and insert before original textarea:
return textarea.clone().removeAttr('id').removeAttr('name').css({
position: 'absolute',
top: 0,
left: -9999
}).css(propOb).attr('tabIndex','-1').insertBefore(textarea);
})(),
lastScrollTop = null,
updateSize = function() {
// Prepare the clone:
clone.height(0).val($(this).val()).scrollTop(10000);
// Find the height of text:
var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
toChange = $(this).add(clone);
// Don't do anything if scrollTip hasen't changed:
if (lastScrollTop === scrollTop) { return; }
lastScrollTop = scrollTop;
// Check for limit:
if ( scrollTop >= settings.limit ) {
$(this).css('overflow-y','');
return;
}
// Fire off callback:
settings.onResize.call(this);
// Either animate or directly apply height:
settings.animate && textarea.css('display') === 'block' ?
toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
: toChange.height(scrollTop);
};
// Bind namespaced handlers to appropriate events:
textarea
.unbind('.dynSiz')
.bind('keyup.dynSiz', updateSize)
.bind('keydown.dynSiz', updateSize)
.bind('change.dynSiz', updateSize);
});
// Chain:
return this;
};
})(jQuery);
many thanks for any help I have a goal in mind, and that is to get the width & height of a <DIV> tag in one document and insert them into another document...all on the same domain. It sounds like a simple task, but in case more detail is needed, let me explain: I have a page called 'demo.html' which launches a page called 'gallery/archive_iframe.html' via Shadowbox as an iFrame. The problem is that 'gallery/archive_iframe.html' slightly differs in dimension on every browser and screen resolution. I want to have the iFrame's size detected every time it launches so Shadowbox can get solid dimensions to display it without scrollbars. You can see the current (fixed size) example at: http://www.mikegermond.com/demo.html Click on the 'Video Archive' image. Here is the code I would like to insert the dimensions in to: Code: <A HREF="/gallery/archive_iframe.html" rel="shadowbox;width= ??? ;height= ??? " class="imgLink" title="Video Archive"><img src="gallery/videoarchive_thm.jpg" alt="Launch Video Archive (popup window)" width="260" height="162" border="0" /></A> i want to adjust text size according to a page without scrollers. e.g the page should be shown that its scrollers are off and the text on the page spread from top to bottom.
Hi, I'm new here and trying to get some basics via examples. On this page http://www.gilariverwoodworks.com/kitchens.htm I have thumbnails in a table. Immediately below the table is a full sized image of thumb 1. I want to mouseover the thumbs and have the respective full size images swap. The thumbs remain as is. All the thumbs are the same file as the full size image but resized. If moused over, the new image should remain until the next thumb is moused over - ie no autoclose or return to original image. The viewer should be able to move around the page without having the image change til the next mouseover All the images are the same size Can someone offer or direct me to a script that will do this? TIA mr johnson Hello again . If these questions concerning Regular Expressions are inappropriate in this forum please let me know . Thank You. This expression <script[^>]*>.*?</script> matches ... Code: <script type="text/javascript">var cnnIsHomePage = true;</script> but not ... Code: <script type="text/javascript">
var cnnIsHomePage = true;
</script>
Please , how can i match the latter ? Hi, I'm doing some freelance for a guy and I need to make a script. I wrote a script that starts an action as soon as a file enters PS. The script needs to initiate an action as soon as 5 files enter photoshop. The files enter one by one and when the fifth one enters I want the script to start an action. I already have the action written. The coding for the script needs to be in javascript. If someone could help me write this script it would be very appreciated. Thanks, James Hi all, I have finished a program for an assigment the varibles num1,num2,num3,num4 are the final result of the calulation that i needed to preform. I can document.write these no problem. I just read the assigment and I have to create an unordered list with bullets from the results The only way i could think of doing it was to create variables so I can enter them in the list,can I do that? [var num1 =("You were born on a " + weekday[usersInputDate.getDay()]+'.','<br />'); var num2 =("You are "+(ageofUser.toFixed(2))+ " years old.<br />"); var num3 =("You are "+(usersAgeinDays.toFixed(0))+" days old.<br />"); var num4=("You have lived "+(usersExLife.toFixed(0))+" % of an average lifespan.<br />"); <ul> <li> ('num1') </li> <li> ('num2') </li> <li> ('num3') </li> <li> ('num4') </li> </ul>] How do i write this to the screen as [<li> num1 </li>] doesnt work neither does [<li> 'num1'</li>]. Does the <ul> function only read the string entered or can it run the variable assigment ? Thanks all Shayne Darcy. Help... I have a quick Java Script question... At the following page, I am asking people to copy and paste a Sponsor ID into our registration form that sits in an 'iframe'. Code: http://www.agelessoverview.com/beta/order-now.html People are screwing this up and even changing the number... So here is my question... is there a small snippet of java script I can use in the source page or iframe that will automatically fill in the Sponsoring Distributor ID:, while at the same time, blocking the input from being changed and also block the 'I don't have a sponsor' radio button? That's it! Thank you, you magicians of code. Respectfully, StealthMarketer I have two pages one html page and one Javascript page index.html and script.js. I want to call the javascript page 3 times to display 3 images. How would I do this from my html page. script.js Code: <script language="JavaScript">
<!--
/*
Random Image Link Script
By Website Abstraction (http://www.wsabstract.com)
and Java-scripts.net (http://www.java-scripts.net)
*/
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
myimages[2]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
myimages[3]="http://flashmajic.com/Google/atomica/atomicasmallicon.jpg"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="http://www.wsabstract.com"
imagelinks[2]="http://www.dynamicdrive.com"
imagelinks[3]="http://www.java-scripts.net"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=2 hspace=1></a>')
}
random_imglink()
//-->
</script>
index.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> ????? How would I call that script 3 times to display 3 random images? </body> </html> hey guys " I have question about writing a java script code equivalent to the following figure : I've written the code like this , <html> <body> <script type="text/javascript"> var x; x = 12; while (x != 0) { document.write(" x = " + x +"<BR>"); x = x - 3; } document.write("DONE"); </script> </body> </html> is my answer right or wrong ?? < Hey everybody. I have this code that disables right clicking on a page. It works fine, but I'd like to tweak it a little bit if possible. When trying to right click on a page, the script will pop up an alert message. If you try right clicking a second time, you receive an option to disable the alert message. I want to disable this option so that the alert pops up every single time, but I have no idea how to actually do this. Can anybody help me out? Thanks. Code: <script type="text/javascript" language="javascript">
var message="ALERT MESSAGE";
function click(e)
{
if (document.all)
{
if (event.button==1||event.button==2)
{
alert(message);
return false;
}
}
else
{
if (e.button==1||e.button==2)
{
e.preventDefault();
e.stopPropagation();
alert(message);
return false;
}
}
}
if (document.all){
document.onmousedown=click;
}
else{
document.onclick=click;
}
</script>
Hello, I am trying to create simple Java Script form that will open a URL based on the contents entered into the form. The form shall consist of only a text box and submit button. A user will enter XXXX in the text box and click submit. The form would then load a URL consisting of http://www.company.com/XXXX I know this can be done because I had a code like this a few years back but I have lost it. I've been searching for over an hour, trying to figure this out. Any help would be grately appreciated. Thanks! Can anyone tell me what I have done wrong here? I have the following html code Code: <div id='group1'>
<tr class='time'>
<td colspan='3' name='1262815200'></td>
</tr>
<tr>
<td class='timeleft group1' name='1262815200' colspan='3'></td>
</tr>
<tr class='game'>
<td><input type='radio' name='G1' value='NYJ'>NYJ</td>
<td><input type='radio' name='G1' value='BUF'>BUF</td>
<td><select name='G1P' class='points' tabindex = '1'></select></td>
</tr>
</div>
and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks. I have a series of hand-made arrays each of which has many elements, eg Code: var BlobI = new Array("id1","id2","id4",..."id32");
var Blob2 = new Array("id1","id3","id5",.."id31");
and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element: Code: function noBlob (arrayA,visibility,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var blob = document.getElementById(arrayB[current]);
blob.style.visibility = visibility;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}
If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array. What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script. Is this possible? eg, if using YASS (http://yass.webo.in/), something like: Code: var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))
Has any one experience with either engine? How can I fixed the size of the page to desired width and length and also make that page fixed to that size so that it cannot resized. And also I want to disable all bars(scrollbars, menubars, address bars etc) for the page. I am using these codes for my projects and these are for commercial purpose. I am also asking for your permission to use these codes for my projects. lookin 4wrd. I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
I have been using the following html & have tested it cross-browser with no malfunction Code: <a href="#quicklinks" name="modal">Quick Links</a> <a href="#Login" name="modal">Login</a> js part Code: //select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//using href as id (already defined in CSS)
$(id).fadeIn(2000);
Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him Quote: Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name. Plz guide me |
|||||||