|
JavaScript - How To Prevent Page Scrolling Up When Calendar Shows
I am using the following code from this site...
http://www.javascriptkit.com/script/...selector.shtml but for some reason if the page is long the whole page scrolls up so the top of the calendar is at the top of the browser, which actually hides the box that the date will end up in. can anyone see how I can alter the code so that the page does not scroll up, but have the calendar show just below the box that the date will go in and the page does not scroll? here is the full code that I am using to test this out with. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.ds_box {
background-color: #FFF;
border: 1px solid #000;
position: absolute;
z-index: 32767;
}
.ds_tbl {
background-color: #FFF;
}
.ds_head {
background-color: #333;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
}
.ds_subhead {
background-color: #CCC;
color: #000;
font-size: 12px;
font-weight: bold;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
width: 32px;
}
.ds_cell {
background-color: #EEE;
color: #000;
font-size: 13px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
cursor: pointer;
}
.ds_cell:hover {
background-color: #F3F3F3;
} /* This hover code won't work for IE */
</style>
</head>
<body>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>
<script>
// <!-- <![CDATA[
// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
// Get Element By Id
function ds_getel(id) {
return document.getElementById(id);
}
// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}
// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');
// Output Buffering
var ds_ob = '';
function ds_ob_clean() {
ds_ob = '';
}
function ds_ob_flush() {
ds_oe.innerHTML = ds_ob;
ds_ob_clean();
}
function ds_echo(t) {
ds_ob += t;
}
var ds_element; // Text Element...
var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.
var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.
// Calendar template
function ds_template_main_above(t) {
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
+ '<tr>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="7" class="ds_head">' + t + '</td>'
+ '</tr>'
+ '<tr>';
}
function ds_template_day_row(t) {
return '<td class="ds_subhead">' + t + '</td>';
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}
function ds_template_new_week() {
return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
return '<td colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
// Define width the day row.
}
function ds_template_main_below() {
return '</tr>'
+ '</table>';
}
// This one draws calendar...
function ds_draw_calendar(m, y) {
// First clean the output buffer.
ds_ob_clean();
// Here we go, do the header
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
for (i = 0; i < 7; i ++) {
ds_echo (ds_template_day_row(ds_daynames[i]));
}
// Make a date object.
var ds_dc_date = new Date();
ds_dc_date.setMonth(m - 1);
ds_dc_date.setFullYear(y);
ds_dc_date.setDate(1);
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
days = 31;
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
days = 30;
} else {
days = (y % 4 == 0) ? 29 : 28;
}
var first_day = ds_dc_date.getDay();
var first_loop = 1;
// Start the first week
ds_echo (ds_template_new_week());
// If sunday is not the first day of the month, make a blank cell...
if (first_day != 0) {
ds_echo (ds_template_blank_cell(first_day));
}
var j = first_day;
for (i = 0; i < days; i ++) {
// Today is sunday, make a new week.
// If this sunday is the first day of the month,
// we've made a new row for you already.
if (j == 0 && !first_loop) {
// New week!!
ds_echo (ds_template_new_week());
}
// Make a row of that day!
ds_echo (ds_template_day(i + 1, m, y));
// This is not first loop anymore...
first_loop = 0;
// What is the next day?
j ++;
j %= 7;
}
// Do the footer
ds_echo (ds_template_main_below());
// And let's display..
ds_ob_flush();
// Scroll it into view.
ds_ce.scrollIntoView();
}
// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
// Set the element to set...
ds_element = t;
// Make a new date, and set the current month and year.
var ds_sh_date = new Date();
ds_c_month = ds_sh_date.getMonth() + 1;
ds_c_year = ds_sh_date.getFullYear();
// Draw the calendar
ds_draw_calendar(ds_c_month, ds_c_year);
// To change the position properly, we must show it first.
ds_ce.style.display = '';
// Move the calendar container!
the_left = ds_getleft(t);
the_top = ds_gettop(t) + t.offsetHeight;
ds_ce.style.left = the_left + 'px';
ds_ce.style.top = the_top + 'px';
// Scroll it into view.
ds_ce.scrollIntoView();
}
// Hide the calendar.
function ds_hi() {
ds_ce.style.display = 'none';
}
// Moves to the next month...
function ds_nm() {
// Increase the current month.
ds_c_month ++;
// We have passed December, let's go to the next year.
// Increase the current year, and set the current month to January.
if (ds_c_month > 12) {
ds_c_month = 1;
ds_c_year++;
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous month...
function ds_pm() {
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
// We have passed January, let's go back to the previous year.
// Decrease the current year, and set the current month to December.
if (ds_c_month < 1) {
ds_c_month = 12;
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the next year...
function ds_ny() {
// Increase the current year.
ds_c_year++;
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous year...
function ds_py() {
// Decrease the current year.
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Format the date to output.
function ds_format_date(d, m, y) {
// 2 digits month.
m2 = '00' + m;
m2 = m2.substr(m2.length - 2);
// 2 digits day.
d2 = '00' + d;
d2 = d2.substr(d2.length - 2);
// YYYY-MM-DD
// return y + '-' + m2 + '-' + d2;
return d2 + '-' + m2 + '-' + y;
}
// When the user clicks the day.
function ds_onclick(d, m, y) {
// Hide the calendar.
ds_hi();
// Set the value of it, if we can.
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(d, m, y);
// Maybe we want to set the HTML in it.
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(d, m, y);
// I don't know how should we display it, just alert it to user.
} else {
alert (ds_format_date(d, m, y));
}
}
// And here is the end.
// ]]> -->
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="" method="post">
<div>
<b>Example Form</b><br/>
Please input a date: <input onclick="ds_sh(this);" name="date" readonly="readonly" style="cursor: text" /><br />
Please input another date: <input onclick="ds_sh(this);" name="date2" readonly="readonly" style="cursor: text" /><br />
<input type="submit" value="Submit" />
</div>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
Similar TutorialsHey! I searched a while on the web for this but i didn't find a solution that really worked. So is there a way how i can prevent IE9 from scrolling when i use the arrow keys? Knowing just enough about javascript to get myself in trouble, I have put three timed javascripts to appear from 18 December to the 1 January on three pages of my sister's website. The scripts are on the main index for the site; the index page for the bibliography folder /bibliography/ and in the education folder on just one page: /education/educationlinks.html. Part one of the script inserts the css file; part two of the script inserts a "snowing" script and part three inserts a "make it stop snowing/let it snow" script. Everything is working perfectly for the main index page and the bibliography page. But I cannot figure out why the 3rd "make it stop snowing/let it snow" refuses to show up on the page in the education folder (the snowing javascript IS working on all three pages). There are no errors being thrown and the education page validates. This is the coding for the 3rd script: Code: // snowscript part 3: Show the script between 19-31 Dec and 1 Jan
var date = new Date();
var d = date.getDate();
var m = date.getMonth() + 1;
dm = d + m;
if (m = 12)
{
if (d > 18)
{ document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript" id="snow"></script>');
}
else
{
document.write('');
}
}
else if (dm == 1,1)
{
document.write('<script src="/scripts/snowlinkswitch.js" type="text/javascript"></script>');
}
else
{
document.write('');
}
This is the coding for snowlinkswitch.js Code: function myhref(){
document.getElementById('myAnchor').innerHTML="please let it snow!";
document.getElementById('myAnchor').href=location.href;
document.getElementById('myAnchor').title="let it snow! let it snow!";
document.getElementById('myAnchor').onclick="location.reload(); startstop('spanstyle'); return false;";
}
//
document.write ('<div id="snowlinks"><img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"> <a id="myAnchor" href="" onclick="myhref();hidesnow(); return false;" title="please make it stop snowing!">please make it stop snowing!<\/a> <img src="/images/snow3aa.gif" width="11" height="11" border="0" alt="*"></div> ');
I would search for a similar occurrence but have no clue about what search words to use. Does anyone here have an idea about what I have done incorrectly that is causing this to happen? Many thanks. E Morris Toronto, Canada I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right: http://www.javascriptkit.com/script/...ifferent.shtml I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that. there is a javascript glider that requires them both to be on the same page. link to the page here . . . http://www.sunupdesignbuild.com/NEW/index.html appreciate your help thank you T Hi all, I am facing problem in preventing my web page being loaded into an iFrame. I search in internet and found this solution : if (self == top) document.documentElement.style.display = 'block'; else top.location = self.location; The above java script code is simple redirecting me to the home page of my web site. But I donot want that kind of solution. When anybody tried to access my web page through iFrame, it should show an error message like "The content of the web site cannot be loaded into an IFrame". This message should be displayed inside the iFrame. For example, if we tried to access "google.com" site in an iframe, the website should not allow the iframe object to load into it, insted it will display an error message along with a provision to open webiste with an external link with it. Any help? thanks, -Sanath hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. Code: <html>
<head>
<title>color</title>
<script type="text/javascript">
function toggle(box,theId) {
if(document.getElementById) {
var cell = document.getElementById(theId);
if(box.checked) {
cell.className = "on";
}
else {
cell.className = "off";
}
}
}
</script>
<style type="text/css">
.off {
background-color: #fff;
}
.on {
background-color: red;
}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="off" id="sub1"><input type="checkbox" name="subject" onclick="submit(); toggle(this,'sub1'); " value="s1" id="demo1">ABC</td>
<td class="off" id="sub2"><input type="checkbox" name="subject" onclick=" submit(); toggle(this,'sub2'); " value="s2" id="demo2">XYZ</td>
</tr>
</table>
</body>
</html>
Reply With Quote 01-21-2015, 08:37 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Originally Posted by raj_d hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. You will need to use a cookie or local storage to record the colour of the checkbox. Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/ Code: <script type="text/javascript">
// <![CDATA[
// show the popup
function show_popup(UserID) {
if(http_getuser) {
//get user data and show popup
sendRequest(UserID);
}
}
// hide the popup
function close_popup() {
document.getElementById('popup').style.display='none';
}
// Make the request
function createRequestObject() {
if(window.XMLHttpRequest){
ro = new XMLHttpRequest();
} else if(window.ActiveXObject) {
ro = new ActiveXObject("Msxml2.XMLHTTP");
if(!ro) {
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return ro;
}
//Create Request Variables
var http_getuser = createRequestObject();
//Send Request for user info
function sendRequest(UserID) {
var userinfo_url = '{AJAX_USERINFO_PATH}';
http_getuser.open('get', userinfo_url.replace('USERID', UserID));
http_getuser.onreadystatechange = handleResponse;
http_getuser.send(null);
}
// fill in the response
function handleResponse() {
if(http_getuser.readyState == 4 ){
var xmlDoc = http_getuser.responseXML;
if(xmlDoc.hasChildNodes()) {
document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue; //document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;
//Apply style which makes profile info visible
document.getElementById('popup').style.display='block';
//Get height of popup
var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all[i] || null;};
}
var d = getRefById('popup'), h = '0px', o;
if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
//alert(h);
//make room for popup
document.getElementById('test').style.height= h;
}
}
}
// set popup to mouse possition
function set_div_to_mouse(e) {
//Make x and y cord vars
var docX, docY;
//get page info
if(e) {
if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
else {docX = e.clientX; docY = e.clientY;}
//vert
} else {
e = window.event;
docX = e.clientX; docY = e.clientY;
if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
}
else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
docX += document.body.scrollLeft; docY += document.body.scrollTop;
}
}
//hor
if (docX > document.body.offsetWidth - 400) {
document.getElementById('popup').style.left = (docX - 350) + "px";
} else {
document.getElementById('popup').style.left = (docX - 5) + "px";
}
document.getElementById('popup').style.top = (docY + 30) + "px";
}
//document.onmousemove = set_div_to_mouse;
// ]]>
</script>
<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist fullwidth">
<li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
</ul>
<ul class="topiclist forums">
<li><dl>
<dd style="width:100%">
<table> <tr> <td><div id="ajax_avatar"></div></td> <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br /> <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br /> <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br /> <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br /> <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br /> <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br /> <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/> <span id="ajax_add"></span> </tr> </table>
<br/ style="clear: both;">
</dd>
</dl></li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content? FYI http://www.hotscripts.com/forums/jav...croll-how.html Hi there, and happy new year. I am looking for a javascript code with the effect used by Google in the following example; http://www.google.co.uk/search?q=che...ient=firefox-a ... whereby the map scrolls with the page once it has been reached by the top of the browser. If anyone could point me in the right direction I would be very grateful. Many Thanks, Patrick. Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? Hi, I am new to javascript,this is my first time using it, I am wishing to have 2 buttons on my website, one that scrolls to the bottom of my page when clicked and then stops at the bottom and one that scrolls back up the page when clicked, but I want my viewers to be able to see this movement. I have some code (below) which works fine in firefox but it doesn't work in explorer, and I can't get this code to work moving upwards (after taking away the minus from -50). Can anybody please help me I have been battling for days trying to make it work although I am finding it hard to understand javascript being a first time user. I currently have this javascript : [CODE] <head> <script language="JavaScript"> function pageScrollup() { window.scrollBy(0,-50); // horizontal and vertical scroll increments if (window.pageYOffset) { scrolldelay = setTimeout('pageScrollup()',5); } } </script> </head> <body> <a href="JavaScriptageScrollup()">Back to Top</a> </body>[ICODE] Any help is greatly appreciated. OrangeAnt Hi, I have an .aspx page which the author claims to be an RSS feed (http://gcn.com/rss-feeds/state-local.aspx). It is simply a list of links with a description for each. I am trying to embed these links into an RSS feed on my own page. I am using code from http://www.mioplanet.com/rsc/newsticker_javascript.htm to create the scrolling ticker. Do I need to do something to convert the .aspx page to an RSS feed? Please help. Thanks. I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... Hi all, I have a photo gallery on a page, when viewed in IE it will show nothing after it hits this gallery. The error that is produced is - "'null' is null or not an object" The code I have for my photo gallery is below, I have a feeling (though it is only a hunch) that it maybe to do with the IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; line. I have tried swapping the styleSheets[3] for different values 0-5 but to no effect. Code: var thumbProportion = .17 // thumbnails are 32% of their full size;
var IE = false;
if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}
function swapImg(nImg,nSwapImgClass,nFullSizeImg){
var thumbImg = nImg;
var thumbImgAlt = thumbImg.alt;
var origFullWidth = nFullSizeImg.width;
var origFullHeight = nFullSizeImg.height;
var tempImgHolder = nFullSizeImg.src;
var origFullAlt = nFullSizeImg.alt;
nFullSizeImg.src = thumbImg.src;
thumbImg.src = tempImgHolder;
nSwapImgClass.style.width = nFullSizeImg.width + "px";
thumbImg.style.width = Math.round(origFullWidth * thumbProportion) + "px";
thumbImg.style.height = Math.round(origFullHeight * thumbProportion) + "px";
thumbImg.alt = origFullAlt;
thumbImg.title = origFullAlt;
nFullSizeImg.alt = thumbImgAlt;
nFullSizeImg.title = thumbImgAlt;
nCaption.firstChild.data = thumbImgAlt;
}
function init(){
var nImg = document.getElementById('fullSizeContainer');
var fullSizeImg = nImg.getElementsByTagName('img')[0];
nCaption = nImg.getElementsByTagName('div')[0];
IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
for (i=0; i<nRule.length; i++)
{
if (nRule[i].selectorText == ".swapImg")
{
var swapImgClass = nRule[i];
nRule[i].style.width = fullSizeImg.width + "px";
}
}
var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
for (i=0; i<nGallery.length; i++)
{
nGallery[i].onclick = function()
{
swapImg(this.firstChild,swapImgClass,fullSizeImg);
return false;
}
nGallery[i].href = "#";
}
}
IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);
If anyone can help I would really appreciate it! Hi Guys I'm trying to find a way to insert a dropdown eg: <select> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> ...place the dropdown to the left and have an information panel to the right. i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car" and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown. THANKS I have a 'show more' link on my page and wish to allow users who disable javascript to automatically see this normally hidden div as the link obviously will not work. is this possible ? the info in the hidden div will be taken from MySQL databases. Code: <div><!-- start of div2 -->
<div class="floatleft"><a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">Show more</a>
</div>
<div><!-- start of div3 -->
<div id="textbox" class="more">
<div class="formtitles">Show more <a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a>
</div>
<div>
<div class="containercolour3">
<div class="rtopcolour3">
<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
</div>
<div class="formspacer">Hidden text</div>
<div class="rbottomcolour3">
<div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
</div>
</div>
</div>
</div>
<!-- end of div3 --></div>
<!-- end of div2 --></div>
The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this??? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style type="text/css"> img {display: block; margin-left: auto; margin-right: auto; } </style> </head> <body> <img id="shown" src="/tools/hoe.jpg" alt="hoe"> <script> function imageView(saw) { document.getElementById("shown").src="/tools/"+saw+".jpg"; } imageView('saw'); </script> <p><input type="button" value="Saw" onclick="imageView('saw')"> </p> <p><input type="button" value="Hoe" onclick="imageView('hoe')"> </p> <p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')"> </p> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <head> <title>Student Information</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> Code: <SCRIPT type="text/javascript">
<!--
function displayEntries () {
var sfirst = document.frmStudentInfo.textSfirst.value;
var smi = document.frmStudentInfo.textSmi.value;
var slast = document.frmStudentInfo.textSlast.value;
var sadd = document.frmStudentInfo.textSadd.value;
var scity = document.frmStudentInfo.textScity.value;
var sstate = document.frmStudenInfo.textSstate.value;
var szip = document.frmStudentInfo.textSzip.value;
var sphone = document.frmStudentInfo.textSphone.value;
var sdob = document.frmStudentInfo.textSdob.value;
window.alert('sfirst' + 'smi' + 'slast' + '\n' +
'sadd' + '\n' +
'scity' + 'sstate' + 'szip' + '\n' +
'sphone' + '\n' +
'sdob');
}
//-->
</SCRIPT>
</head> <body> <table width="70%" align=center ID="Table1"> <tr><td><img SRC = "nwlogo.jpg" width=120 height=60></td> <td><H3>Student Information</H3></td></tr> </table> <form name="frmStudentInfo" action="ignore"> <table align="center"> <tr><td> Last Name:</td> <td><input type="text" name="txtSlast" size="20"></td> <td> </td> <td></td> </tr> <tr><td> First Name:</td> <td><input type="text" name="txtSfirst" size="20" ></td> <td> </td> <td></td> <tr><td> MI:</td> <td><input type="text" name="txtSmi" size="5" tabindex="3"><td> <td> </td> </tr> <tr><td> Address:</td> <td><input type="text" name="txtSadd" size="20" tabindex="4"></td> <td> </td> <td></td> </tr> <tr><td> City:</td> <td><input type="text" name="SCity" size="20" tabindex="5"></td> <td> </td> <td></td> </tr> <tr><td> State:</td> <td><input type="text" name="txtSstate" size="5" tabindex="6"></td> <td> </td> Code: <td><input type="button" name="cmdUpdate" value="Update" onClick="displayEntries();"></td> </tr> <tr><td> ZIP Code:</td> <td><input type="text" name="txtSzip" size="20" tabindex="7"></td> <td> </td> <td></td> </tr> <tr><td> Phone:</td> <td><input type="text" name="txtSPhone" size="20" tabindex="8"></td> <td> </td> <td></td> </td> </tr> <tr><td> Date of Birth:</td> <td><input type="text" name="txtSdob" size="20" tabindex="9"></td> <td> </td> <td></td> </tr> </table> </form> </body> </html> I'm having trouble with the pop up window. I cannot get it to pop up and I'm not sure where I have went wrong with it. I need it to pop up once the update button is clicked and contain the information that has been input into the form. Any help would be much appreciated. I have this floating banner code and I want to show it once per visitor. How could I have it to show once per visitor? <style> #floating_banner_bottom { text-align: left; width: 00%; bottom: 00px; margin-bottom: 0px; height: 50px; position: fixed; z-index: 50; left: 0px; </style> <div id="floating_banner_bottom"> <!-- Button to Close Banner --> <a style="display:scroll;position:fixed;bottom:50px;left:0px"> banner code <br /> <div class="close"> <a href="#" onclick="document.getElementById('floating_banner_bottom').style.display='none';return false;"> <i style="font-family: Georgia,"Times New Roman",serif;"><span style="background-color: #999999; color: white; font-size: small;"></span></i> <center> <img border="0" width="20" height="20" src="http://lh5.ggpht.com/_9vgJ1nwu_xA/S1jSp2ZhA7I/AAAAAAAAB8A/2AEBd4mR9qA/x.png" /> </center> </a> </div> <a/> </a></a></div> <!-- End Here --> Hi there, I saw this on the website for the new blackberry playbook and want to do something similar to that. http://us.blackberry.com/playbook-tablet/ Does anyone know of a script that will let me have 5 pictures or so and it will automatically go through them all but you can fastforward to the picture you like by clicking on a dot at the bottom like on the blackberry website? Hope I explained that well enough My slideshow is working in the dreamweaver preview, but not showing up when i upload and view on the internet. http://www.kristynaswebpages.com/home2a.html I have this in the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [1024, 400], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://www.kristynaswebpages.com/falcon_1.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_2.jpg", "", "", "The A Control Room is blah blah blah"],
["http://www.kristynaswebpages.com/falcon_3.jpg"],
["http://www.kristynaswebpages.com/falcon_4.jpg", "", "", "The A Control Room is blah blah blah"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
and then i put <div id="fadeshow1"></div> where I wanted the slideshow to appear (between the menu bar and the text at the bottom). I have tried writing the pic links as both "http://www.kristynaswebpages.com/falcon_2.jpg" and "falcon_2.jpg" If anyone could help, that would be so awesome! |
|||||||