Learn VBA & Macros in 1 Week!

JavaScript - Setting The Size Of The Page, Disabling Scrollbars, Menu Bars, Address Bars Etc.

Full Excel VBA Course - Beginner to Expert

Setting The Size Of The Page, Disabling Scrollbars, Menu Bars, Address Bars Etc.	View Content

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.

Full Excel VBA Course - Beginner to Expert

Locking Menu Bars

Similar Tutorials

View Content

Is there any way to lock down the menu bars? I currently have a form that was created in Adobe Professional. I have hidden the menu bars on initial view of this form, in an effort to force the sales associates to use buttons that I created that will show them all fields that are required. This worked for a while, but now the sales associates have found out how to unhide the menu bars and are again submitting incomplete forms. I would like to have something in place, that if they do unhide the menu bars, there are certain commands that they cannot use (i.e. Attach to E-mail). Is there any way to put script on this form that will gray out certain commands on the menu bars?

Problem With Scroll Bars In Safari

Similar Tutorials

View Content

Hi,

I have written a magnifier (using both CSS and JavaScript), and it appears to work OK in the four browsers I have tested (IE9, FF3.5.7, Safari 5.1, and Opera 11.51). However, Safari annoyingly puts in scroll bars when you are magnifying the picture.

I can get rid of this by making the ctrlDiv offset as hidden, but then this removes the bottom scroll bar completely in all browsers (not really useful if the document is bigger than the browser window).

I have read about putting the image as a background image of another element, but cannot for the life of me get this to work at all.

Also, the functions to return the absolute position of elements (and mouse pointer) does not work if the document has a margin (i.e. width:1216px;margin:auto) - but I can work around this at the moment.

Anyway, the complete code is at http://www.geraldholdsworth.co.uk (it was easier to stick it there and post a link than to post the code here).

Cheers,

Gerald.

No Scroll Bars Showing Up In Any Browser

Similar Tutorials

View Content

I made this webpage. It runs with a simple javascript function that changes the content in the window when you click on the menu buttons. the only problem is there are no vertical scroll bars when viewed in any browser. There seems to be a place for them but no actual scroll bar. I tried modifying the color and such with cs but it didn't change anything.
please help
the site
www.star1on1tutoring.com

here is all the code starting with the html, then the css, and the two javascript pages

[code]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="assets/css/main.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="assets/java/global.js"></script>
<script type="text/javascript" src="assets/java/menu.js"></script>
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"/>
<title>Star 1 on 1 Tutoring</title>
<meta name="description" content="One on One tutoring for individuals and small groups in the Charlotte, North Carolina area. Taught by a former Charlotte-Mecklenburg teacher, we cater to your child's individual needs and goals. Package and groups discounts are available. "/>
<meta name="robots" content="all,follow"/>
<meta name="keywords" content=" star 1 on 1 tutroing, star one on one, one on one, Charlotte, North Carolina, Stonecrest, South Charlotte, Tutor, private tutor, tutoring, dominique greve, help in school, behind in school, huntington learning, huntington tutoring, small group tutoring, teacher, private teacher, math, science, social studies, history, math tutor, science tutor, history, history tutor, social studies tutor, grades, A+, better grades, children, school, better in school, Charlotte private tutor "/>

</head>
<body>
<div id="logo"> </div>
<div id="book">
<ul id="internalNav">
<li><a href="#intro">Introduction</a></li>
<li><a href="#subjects">Subjects and Grades</a></li>
<li><a href="#rates">Rate Information</a></li>
<li><a href="#difference">The Difference</a></li>
<li><a href="#bookIt">Book It!</a></li>
<li><a href="#payment">Payment and Discounts</a></li>
</ul>

<div class="section" id="intro">
<p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p>
</div>

<div class="section" id="subjects">
<h3> K-8 all subjects (math depends on level)</h3>
<h3>Study Skills/Organization</h3>
<h3>Introductory Spanish </h3>
<h3>High school (depends on course and level) </h3>

</div>

<div class="section" id="home">
<p>Private tutoring (individual or small group) can provide the help your child needs in order to achieve academic success.* As a former teacher, I am qualified to create an individualized plan to help your child work on specific subjects or content areas, prepare for a difficult exam or project, or simply improve study skills. While teaching and tutoring I have helped students with a variety of academic levels. I have experience with learning disabled students as well as students classified as academically gifted.</p>
</div>

<div class="section" id="rates">
<h3>Individual Rate: $30/hr</h3>
<h3>Small Group Rates: </h3>
<h3>2 students $50/hr</h3>
<h3>3 students $75/hr</h3>
<h3>4 students $100/hr</h3>
</div>
<div class="section" id="difference">
<p> At Star 1 on 1 Tutoring, your child's program is tailored specifically to his or her needs and learning style. We can focus on your child's actual course work and assignments, using the school's preferred textbooks and resources.* You do not have to commit to a lengthy and inflexible contract with an organization that pursues its own curriculum at its predetermined pace.* Star 1 on 1 Tutoring focuses on what it takes for your child to succeed.</p>
</div>
<div class="section" id="bookIt">
<h2> For more information or to book your session</h2>
<h3> Call 704-321-9226</h3>
<h3> or <a href="mailto:dgreve@star1on1tutoring.com">E-mail Me</a></h3>
</div>
<div class="section" id="payment">
<p> You can pay with a credit card or check with a secure payment on Paypal. I also offer package rates.<h3> Buy 9 sessions get the 10th free.</h3>
</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="9411314">
<table>
<tr><td><input type="hidden" name="on0" value="Package">Package</td></tr><tr><td><select name="os0">
<option value="1 hour session">1 hour session $30.00</option>
<option value="5 1- hour sessions">5 1- hour sessions $150.00</option>
<option value="10 1- hour sessions">10 1- hour sessions $270.00</option>
</select> </td></tr>

</table>
<input type="hidden" name="currency_code" value="USD">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</div>

</div>
<div id="pencil"></div>
<div id="apple"></div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

html, body {
overflow-y:scroll;
overflow-x:scroll;
}

body {
background-image:url(../images/newbg.jpg);
font-size:.9em;
overflow-y:scroll;
background-attachment:fixed;
}

#logo {
background: url(../images/logobacking.png) no-repeat;
position:fixed;
top:0px;
left:200px;
height:198px;
width:609px;

}

#book {
background:url(../images/newbook_06.png) no-repeat;
position:fixed;
left:23px;
top:173px;
width:960px;
height:455px;

}

#apple {
background-image:url(../images/star.png);
height:310px;
width:340px;
position:fixed;
left:50px;
top:440px;
}

#pencil {
background:url(../images/newpencil.png) no-repeat;
position:fixed;
top:470px;
left:372px;
height:278px;
width:617px;
}

#internalNav li a {
text-decoration:none;
list-style-type: none;
color:#000000;
}

img {
border:none;
}

#internalNav li {
font-family:"Courier New", Courier, monospace;
font-size:1.5em;
color:#000000;
list-style-type:none;
text-decoration:none;
border:none;
}

#internalNav {
position:fixed;
left:80px;
top:255px;
}

#home {
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:230px;
width:375px;
word-spacing: .01em;
}

#subjects {
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:220px;
width:350px;
}
#rates{
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:220px;
width:350px;
}

#difference{
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:220px;
width:350px;
}

#bookIt{
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:220px;
width:350px;
}

#intro{
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:230px;
width:375px;
word-spacing: .01em;
}

#payment{
display:block;
font-family:"Courier New", Courier, monospace;
position:fixed;
left:520px;
top:230px;
width:370px;
}
// JavaScript Document

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

function showSection(id) {
var divs = document.getElementsByTagName("div");
for (var i=0; i<divs.length; i++ ) {
if (divs[i].className.indexOf("section") == -1) continue;
if (divs[i].getAttribute("id") != id) {
divs[i].style.display = "none";
} else {
divs[i].style.display = "block";
}
}
}

function prepareInternalnav() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("internalNav")) return false;
var nav = document.getElementById("internalNav");
var links = nav.getElementsByTagName("a");
for (var i=0; i<links.length; i++ ) {
var sectionId = links[i].getAttribute("href").split("#")[1];
if (!document.getElementById(sectionId)) continue;
document.getElementById(sectionId).style.display = "none";
links[i].destination = sectionId;
links[i].onclick = function() {
showSection(this.destination);
return false;
}
}
}

addLoadEvent(prepareInternalnav);

[CODE]

Voting System With Horiztontal Bars

Similar Tutorials

View Content

All,
Does anyone know a good example on where to find something that when I click on vote it calculates the results and then shows me horizontal bars to show the percentage for each vote? There will only be two? Thanks in advance.

Turn Off Scroll Bars And Z-index In Javascript

Similar Tutorials

View Content

I am using the below script on http://bubbles4urtroubles.com. Because I made the bubbles larger than the ones used in the original script, the horizontal scroll bar displays some of the time, then turns off. Is there any way to just not have the horizontal scroll bar?

Also, how would I set the zindex so the bubbles are always in front of everything else.

Thank you in advance.

//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (snow@altan.hr)
//For full source code and installation instructions to this script, visit http://www.dynamicdrive.com

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.png"
snow[1] = "bubble2.png"
snow[2] = "bubble3.png"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 600, doc_height = 1024;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset+'px';
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+'px';
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// End -->
</script>

Horizontal And Vertical Scroll Bars Question.

Similar Tutorials

View Content

Hi,

As an example, I have a horizontal navigation bar that grows and shrinks when the page is resized. I'd like it if the horizontal scroll bar only appeared when the window is less than x pixels wide (thus, cutting off some of my navigation options).

The same thing with zooming. If the user starts to zoom the page and the options of my nav bar begin to get cut off, is there any way to show the scroll bar after x number of zooms?

I'm just trying to avoid ALWAYS showing the horizontal or vertical scrolls. I'd like them to only appear as needed, like this site:

http://www.crimemapping.com/map.aspx...9-966e8cda4d70

(Notice if you zoom in, or change the window size, the behavior is like what I mentioned).

Is there any way to do this?

Setting A Cookie With A Drop Down Menu

Similar Tutorials

View Content

this is going to be an options page for my site, but will be using cookies.

I want to be able to choose from a drop down menu, and there will be about 3 or 4 drop down menus on the page, with about 8 or so options in each one. It would be great if i were to choose an option in the first drop down menu, it wouldn't appear in the second one. And how can I receive it from another page, I wouldn't want the menus, just the out come of what their choice would be.

Thank you for reading, would appreciate any help

Simple Drop Down Menu - Need Help Setting It Automatically Closed At First

Similar Tutorials

View Content

I am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first.

I've tried setting ids and values, but nothing seems to work! Please help me out!

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lab 5_3</title>
<script type="text/javascript">
function collapseItem(whichitem)
{
	if (document.getElementById(whichitem).style.display == "none")
	{
		document.getElementById(whichitem).style.display = "block";
	}
	else
	{
		document.getElementById(whichitem).style.display = "none";
	}
}
</script>
</head>
<body>
<p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p>
<div id="category1">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>
</body>
</html>

Run Javascript Code In Address Bar After Page Loaded

Similar Tutorials

View Content

My source :

Code:

<html>
<head>
<title></title> 
<script type="text/javascript">
function runcode(cwin)
{ 
   cwin.location.replace("javascript:alert("Loaded complete")");
}
function newtab()
{
   win=window.open("http://www.google.com");
   setTimeout("runcode(win)",5000);
   setTiemout("win.close()",7000);
}
</script>
</head>
<body>
<input type="button" value="Click to open newtab" onclick="newtab()" />
</body>
</html>

I want after newtab is opened 5s, alert window will be opened with message:"Loaded complete". Then 2s it is closed. But it isn't what I expect. Please fix it for me. Thanks in advance!

Click An Image The Size Of An Icon, Drop Down Menu Appears.

Similar Tutorials

View Content

Hello all,

Essentially what I am trying to get without much success on the issue is this:

I want an icon in my template that, when you click on that certain icon (image), a drop down menu appears. You know when you click the file option in your browser's toolbar, and a drop down menu appears? It can be just like that, but instead of save as and open, links will be there to places within our intranet opened in a new window.

This has to work for IEX 7+ because that's all our company decides to use. I tried to submit a chang erequest for them to move to a better CSS/Javascript supportive browser such as Opera, Firefox, Google Chrome... but they're way too fixed on IEX for some odd reason.

I am obliged for any help on this.

*edit* colors dont matter. It can be the default colors used in a basic drop down menu. I figure javascript would have more options though.

Auto-adjusting Menu Image Based On Browser Size Possible With Js?

Similar Tutorials

View Content

I'm still struggling for a solution here. I have a background image that auto-resizes based on browser window / screen resolution. I want my top header menu, which requires links, to act in the same way and be in roughly the same position/size based on browser window. Is this possible? In the sample below, the image is just part of the background image to give you an idea of the look I am trying to duplicate.

Is there a Javascript out there that will help me or will I be stuck having to rework my design?

http://www.uberbotjones.com/sanny/test.html

This site is really driving me crazy.

Setting The Hash Location Of A Web Page With The Onkeyup() Event

Similar Tutorials

View Content

What I want is a textbox that the user can enter information into. When they press a key the onkeyup event will simulate a function. All that I can do. The function needs to automatically scroll down the page to the anchor that corresponds to the number the user entered.
The web page is a factor finding program. You can enter 2 numbers and it finds all the factors of all the numbers between the 2 you entered. Here is the link: http://factorfinder.tumblr.com/
As you can see, when you try to find factors of numbers a new window opens and there is a search box in the top left. Unfortunately, it doesn't work.
If you want to check out the code look at the web page but here is the bit that creates the new window
Code:

function DisplayFactors(FactorsFound, Input, Maximum, ShowFactors, ShowPrimeFactors){
FactorsWindow = window.open("", "", "location = no, menubar = no, personal = no, scrollbars = yes, status = no, toolbar = no, resizable = no, width = 580%, height = 600%, left = 720%, top = 100%")
	FactorsWindow.document.write("<div id = 'TheHeader' style = 'position: fixed; left: 0; top: 0; width: 100%; height: 15%; z-index: 2; background-color: white; border-bottom: 3px dashed black;'><table style = 'position: relative; left: 2%; top: 25%; font-size: 24px; font-weight: bolder; text-decoration: underline;'><tr><td>The Factor Finding Window</td></tr></table><table align = 'right' style = 'position: relative; top: -25%;'><tr><td>Search For The Number:</td></tr><tr><td><input type = 'text' id = 'SearchNumber_txt' maxlength = '12' onkeyup = 'opener.Search()'/></td></tr></table></div>")
	FactorsWindow.document.write("<div id = 'TheBody' style = 'position: absolute; left: 0; top: 20%; width: 100%; height: 80%; z-index: 1; background-color: white;'>")
}
function Search(){
	FactorsWindow.location.hash = "#Factor" + FactorsWindow.document.getElementById("SearchNumber_txt").value
	//This is the bit I need to change because it currently doesn't work
}

also, this is the bit where I place the anchors in the array
Code:

FactorsFound.push("<a name = 'Factor'" + Input2 + "><b>The Factors of " + Input2 + " a </b></a><p style = 'margin: 0, 0, 25px, 0; position:relative; left:20px;'>")

Ultimately I need it so that when the onkeyup event is triggered it scrolls down the window to the anchor that corresponds to the number entered.

I will validate the numbers entered after I find out how to do it. I mean, If the user enters the number 9 and the Factor Window is only displaying numbers 2 - 6, then I'll add an alert message or something. I'll cross that bridge when I get to it.

I couldn't find this anywhere on the internet.

Setting The Page Title Of Chrome Window.open

Similar Tutorials

View Content

Hi, I have some JavaScript that is being used to open a new window and display a PDF file. This is working fine apart from the title of the new window being open. I am using the window.open function and I have set the title of the page using the document.write function (see code below). The code works fine for FF and IE but for some reason Google Chrome just displays 'Untitled - Google Chrome'

Code:

<body>
    <a href="javascript:openNewWindow();">Click Here</a>

    <script type="text/javascript">
        function openNewWindow()
        {
            var pdfWindow = window.open('', "window",
                'resizable=1,scrollbars=0,width=800,height=600');

            pdfWindow.document.write('<html><head><title>Window Title</title></head>');

            pdfWindow.document
                    .write('<body><iframe src="" id="ifrm" name="ifrm" width="100%" height="100%"></iframe>');

            pdfWindow.document.write('</body></html>');

            pdfWindow.document.close();
        }
    </script>
</body>

Note: I have also tried adding - pdfWindow.document.title="Title"; - to the JavaScript, with no luck.

Is there anything specific that is required for Chrome or am I just missing something??

Thanks in advance for any help!

Setting Documentelement.style.overflow = 'hidden' Jolts To Top Of Page (undesirably)

Similar Tutorials

View Content

I have a pop-up window system on my site that shows an absolutely-positioned div over the entire page as a "pop up" of sorts when someone clicks a link. I use this simple line of Javascript to disable page scrolling when a "pop up" box is opened by a user:

Code:

document.documentElement.style.overflow = document.body.style.overflow = 'hidden';

The problem is that when a user is scrolled down on a page and clicks a link to bring up one of my pop up boxes, when the overflow is set to 'hidden' to disable scrolling, the page "jolts" back up to the top (similar as to what would happen if someone clicked an <a> element with href="#" ). However, the links are not actually links, but span tags that are programmed with JS to trigger the scrollbar to be disabled when clicked, so that is not the culprit here. I've narrowed the problem down to that one line of code which I posted earlier. Apparently, setting the documentElement overflow style to 'hidden' scrolls the user to the top of the page automatically along with "disabling" the scroll bar on the page.

I am wondering if there is a way to prevent this jolting to the top of the page each time that JS code is triggered. I don't want users to have to scroll back down to where they were each time they open a pop up dialogue box on my site, as this would be detrimental for usability purposes. Thanks in advance for any help I receive.

Detect <div> Size And Insert Into Another Page?

Similar Tutorials

View Content

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>

Textarea Size On Page Load

Similar Tutorials

View Content

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

Page Size Selector Script Question

Similar Tutorials

View Content

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...

Adjust Text Size Without Page Scroller

Similar Tutorials

View Content

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.

Mouseover Thumbnail Changes Same Image Full Size Elsewhere On Same Page?

Similar Tutorials

View Content

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

Help With Resetting And Disabling

Similar Tutorials

View Content

So I've been working on this code for the day, and when I choose one radio button and click convert, it gives me the value and disables the box that shows the value. When I go to click the other radio button to do another conversion, it freezes up. I really am just trying to figure out how to make this code functionable whether you choose one radio button and do the conversion, or you want to do the other conversion without stalling out. I can't seem to find the bugs since I'm a newbie.

Code:

var $ = function (id) {//enables you to use $ instead of all the blah blah blah nonsense
    return document.getElementById(id);
}


var temperature = function (){//This function converts the value the user provides


if($("to_celcius").checked == true)//if checked, then do this conversion
	{
		$("degrees_celcius").disabled = true;
		var far = parseFloat($("degrees_fahrenheit").value );
		
		if(isNaN(far))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		
		var far_cel =Math.round((far-32) * 5/9);//conversion assigned to variable
		
		$("degrees_celcius").value = far_cel;
		
		
		}else  ($("to_fahrenheit").checked ==true)//if the other radio button isn't clicked, then this conversion
		{
		$("degrees_fahrenheit").disabled = true;
		var cell = parseFloat($("degrees_celcius").value);
		
		if(isNaN(cell))//if its not a number then it gives the alert to enter a valid temperature
		{
		alert("Please enter a valid temperature.")
		return;
		}
		
		var cel_far = Math.round(cell * 9/5 + 32);
		
		$("degrees_fahrenheit").value = cel_far;//conversion variable equals the value of text box "degrees_fahrenheit"
		
	}
}

function reset()//resets the text box fields
{
	$("foofoo").reset();
	
}

	
window.onload = function(){//handles all the onload activities
$("convert").onclick = temperature;
$("convert").onchange = temperature;
//$("to_celcius").onchange = reset;
//$("to_fahrenheit").onchange = reset;

}

Code:

<body>
<form id="foofoo" name="foofoo">
  <div id="content">
    <h1>Convert temperature</h1>
	
       
    <input type="radio"   name="conversion_type" id="to_celcius"  />From Fahrenheit to Celcius<br />
    <input type="radio"   name="conversion_type" id="to_fahrenheit"  />From Celcius to Fahrenheit<br />
	
	
	
	
    <br />
     
    <label>Degrees Fahrenheit:</label>
    <input type="text" id="degrees_fahrenheit" name="cat"  class="disabled"  /><br />
    <label>Degrees Celcius:</label>
    <input type="text" id="degrees_celcius" name="poo"   class="disabled" /><br />
    <br />

    <input type="button" id="convert" value="Convert" /><br />
    <br />        
  </div>
   </form>  
</body>