JavaScript - Download The Current Web Form/brochure In Pdf Format
Hi Folks,
I want a javascript code to download the webform/brochure in pdf format. While i click on a link/button the form should be saved in pdf format with whatever the state it is while a button click event was triggered. I am a newbie and have been trying a lot to address this requirement but not able to come up with a right code. Please help!! Thanks for your help in advance. Regards, Keen Learner Similar Tutorialshey all - new to the forum, and need some quick help. i have a form with multiple data entry fields, one of which i need to be in a certain format. currently it will only check for total length (17 digits), which is part of it, but the format needs to be exactly: 0000-00000-000000 (where zeros are numbers) the best thing would be if when the user enters 15 digits, it would automatically format it with the dashes. any and all help is appreciated. please note: this is being used for a print solutions software that auto-generates most of the code, we cannot rewrite all of the code, only work with what we have. here is the code: Code: if (Form1.elements['EIF2']){ if(Form1.elements['EIF2'].disabled == false){ if (!CheckEntry('EIF2', 'Lawson # ', true, 17, 'exactly'))return false; } Hi! I would like to show you guys the JavaScript that i using for my contact form /*----- Code goes here by clicking the link -----*/ http://web.ezenne.com/js/completeValid.js The above code was copied from a Youtube tutorial about JavaScript. I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted? Thanks! Regards, Ezenne Hi Guys, Hope you can help. How do you simply output the current url in the browser i.e if i am in google.com I want google.com outputted and so on. Also on multilanguage sites if my url is say www.mydomain.com/en/about.html or http://www.mydomain.com/en/animals/h...stallions.html I want to be able to manipulate the url so I can change en to fr for example when I jump between english and french pages. I want users to be able to switch the language of that particular page by clicking a link. I need to be able to switch segment one of the url (en,fr,de etc...)dynamically somehow instead of hardcoding a link into each page. Any ideas? THANKS Hey, I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions? For non-IE browsers, here is the code I am using Code: div_opac = document.getElementById(some_div).style.opacity; Thanks for the help! I need to get an add on JS for this form to go with the current JS that is on it I need the add on JS to Validate all the fields have been filled out and then pop up an error if any of the fields are not filled out <FORM NAME="gather"><form onclick="return check(this);"> <fieldset> </p> <table width="200" border="0" cellpadding="10"> <tr> <th scope="row"><p align="left" class="style1">First Name*</p> <p> <div align="left"><input type="text" name="data_NameFirstName2" id="data_NameFirstName2" value="[Fname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Last Name*</p> <p> <div align="left"><input type="text" name="data_NameLastName2" id="data_NameLastName2" value="[Lname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Phone*</p> <p> <div align="left"><input type="text" name="phone1" id="phone1" /> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Email*</p> <p> <div align="left"><input type="text" name="email" id="email" /> </p></th> </tr> </table> </p> <p> <p><span class="style5">Please confirm your contact information.</span> <p><span class="style5"> (* = required) </span> <br /> <br /> <span class="style1"> <input type = "radio" name = "rad1" value = "Contact me"> <strong> Please contact me</strong></span></p> <p> <span class="style1">Please have my personal advisor</span></p> <p class="style1">contact me as soon as possible. <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Send me more info"> <strong>Send me more info</strong> </span></p> <p class="style1">I'm not ready to enroll yet, but</p> <p class="style1">please continue to send me more</p> <p class="style1">information and updates about </p> <p class="style1">going back to school <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Remove me from your mailing list"> <strong> No thanks </strong></span></p> <p class="style1"> Please remove me from your </p> <p class="style1">mailing list. <br /> <br /> </p> <label> <input type = "button" value = "submit" onclick ="chkrads()"> </label> </fieldset> </form> <script type = "text/javascript"> function chkrads() { var chosen = "None"; var which = -1; var len = document.gather.rad1.length; for (i = 0; i < len; i++) { if (document.gather.rad1[i].checked) { chosen = document.gather.rad1[i].value; which = i; } } if (chosen == "None") { alert("No Location Chosen"); } else { } if (which == 0) {window.location = "http://www.hudsonsd.com/national2010/thankcontact.html"} if (which == 1) {window.location = "http://www.hudsonsd.com/national2010/thanksend.html"} if (which == 2) {window.location = "http://www.hudsonsd.com/national2010/thanknocontact.html"} } </script> Thanks! Hi, i need some help with this if is possible. I make this dropdown: Code: <dl class="dropdown"> <dt><a><span>Select a Field</span></a></dt> <dd> <ul id="menu-tags-menu" class="menu"> <li id="menu-item-159" class="menu-item current-menu-item"><a href="http://myweb.com.ar/portfolio/">All Fields</a></li> <li id="menu-item-54" class="menu-item"><a href="http://myweb.com.ar/tag/branding/">Branding</a></li> <li id="menu-item-55" class="menu-item"><a href="http://myweb.com.ar/tag/print-design/">Print Design</a></li> <li id="menu-item-57" class="menu-item"><a href="http://myweb.com.ar/tag/web-design/">Web Design</a></li> <li id="menu-item-56" class="menu-item"><a href="http://myweb.com.ar/tag/ui-design/">UI Design</a></li> <li id="menu-item-52" class="menu-item"><a href="http://myweb.com.ar/tag/motion-graphics/">Motion Graphics</a></li> <li id="menu-item-53" class="menu-item"><a href="http://myweb.com.ar/tag/illustration/">Illustration</a></li> </ul> </dd> </dl> Working with jquery and this code: Code: $(document).ready(function() { $(".dropdown dt a").click(function() { $(".dropdown dd ul").toggle(); }); $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); }); This works very well.. but i need the dt a span show me the value of the current li (<li class="current-menu-item">), so instead "Select a Field" must say "All Fields" (current value in this example), and when i go to "Motion Graphics" (for example), when page is load must say "Motion Graphics". Can i do this adding a variable to take the value of current li and droping when document.ready? Thanks When I use the following script in my web page I do not get a print out. Can anyone tell me what is wrong? <!-- Begin // Get today's current date. var now = new Date(); // Array list of days. var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Array list of months. var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December'); // Calculate the number of the current day in the week. var date = ((now.getDate()<10) ? "0" : "")+ now.getDate(); // Calculate four digit year. function fourdigits(number) { return (number < 1000) ? number + 1900 : number; } // Join it all together today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear())) ; // Print out the data. document.write(today); // End --> Hi. I am pretty sure this requires js, but if not and I am posting in the wrong section, I am sorry. Let me try to explain my situation so you know what i'm trying to accomplish. I am hosting a site on a home pc. My isp blocks inbound port 80 so I use no-ip services and port 80 redirect and cloak the address because it displays my ip instead of the domain name. For example, without the cloak it will show http://xxx.xxx.xxx.xxx:81/index.php instead of http://mydomain.com/index.php I would like to display the current page the user is on somewhere on the page. Example: You are currently viewing index.php How would I be able to accomplish this? Hey, i'm building my own wyiwyg-editor, and all works very good, exept getting the current focused element, i mean i wan't to show a path where the user is, and this function came out: Code: wysiwyg.getPath = function(i) { if(wysiwyg.getMode(i) == 'source') return; curr = document.getElementById('wysiwyg_frame_' + i).contentWindow.document; sel = curr.selection; if(sel == undefined) return; if (sel.type=="Control") { // control selection range = sel.createRange(); if (range.length==1) { elem = range.item(0); } else { // multiple control selection return; } } else { range = sel.createRange(); elem = range.parentElement(); } p = elem.tagName; while(elem == elem.parentNode && elem.tagName != 'BODY'){ p = elem + ' > ' + p; } document.getElementById('wysiwg_path_' + i).innerHTML = p; } unfortunaly sel is always undefined, how can i fix it? i hope you can help me Morri I am developing extension which should upload currently displayed html as a file to a remote web server, unfortunatelly so far i haven't suceeded. I think this should be done through XMLHttpRequest(), but neither I know how to upload files through XMLHttpRequest nor how to convert string to file. The HTML form that uploads a file: <form method="POST" action="https://woodmin.catsone.com /api/add_candidate" enctype="multipart/form-data"> <input name="resume" type="file"> </form> But as I said i need my plugin to do it automatically and file must be made from html code. Maybe you have some ideas, advices or good links which can help to solve my problem? This is a real headache for me! Thank you in advance. Presently am using below code, and it is showing an error message says "Cannot call method "getCurrentWindow" of undefined (<Unknown source>#4) in <Unknown source> at line number 4" ========================================= function insertDataIntoHtmlEditorIE() { currentwindow = this.browserbot.getCurrentWindow(this); var iFrame = currentwindow.getElementById ('ctl00_MainContent_editor_ctl02_ctl00'); var iFrameBody; iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; iFrameBody.innerHTML = "xyz"; } ================================================ please help me out to resolve this issue.. *am calling this script in Selenium RC through Eclipse I have been trying to download the jquery code from this site, but the Firefox browser downloader says that it is unable to download it. Any ideas why this happens? Frank Hi guys. I'm trying to make a small bit of scripting that will show the current time, updating once every second. What I need is the following: 1. Multiple timezones or GMT offsets (just put me on the right path, I can code them in, 2. Daylight savings time taken into consideration (only for Australia), adding the 1 hour during the times it is needed, 3. Text to show "Open" and "Closed" during different times (open during 8am to 5pm and closed if not 8am to 5pm.) I have the following code as a start, but I am completely stuck with how to get the rest of what I need! Any help would be appreciated. <h4>Victoria <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } document.write(hours + ":" + minutes + " ") if(hours > 11){ document.write("PM") } else { document.write("AM") } //--> </script> <script type="text/javascript"> <!-- var currentTime = new Date() var hours = currentTime.getHours() var minutes = currentTime.getMinutes() if (minutes < 10){ minutes = "0" + minutes } if(hours > 11){ document.write("True") } else { document.write("False") } //--> </script> </h4> Cheers in advance. Dale. Hi all I have created a single page horizontally scrolling website comprised of 5 sections with a fixed navigation bar in the top right of the screen at http://www.clickmunki.com and I am trying to figure out how to highlight the active section of the site in the nav bar as the user navigates through the site so that the user knows exactly which section of the site they are in. I assumed this would be a pretty basic thing to try and do but I have not been able to achieve it so far. I have tried a few different methods but no success as yet. Can anyone point me in the right direction as to how best achieve this? Can I do it just using css or would i need some js? Any assistance would be very much appreciated.111 Kind regards Anne This is my js: Code: $(".nav").click(function(){ $(".nav.a").toggle("fast"); $(this).toggleClass("active"); }); This is my css; Code: .nav { text-align: center; overflow: hidden; margin: .3em ; width: 500px; position: fixed; padding: 0px 0px 0 830px; } .nav a { position: relative; float: left; padding: 2.2em 0 3.1em; width: 20%; text-decoration: none; color: #484848; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .nav a:hover { color: #c6342e; } .effect { position: absolute; left: 120%; -webkit-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -ms-transition: 0.7s ease-in-out; transition: 0.7s ease-in-out; } .nav a:nth-child(1):hover ~ .effect { left: 66.3%; } .nav a:nth-child(2):hover ~ .effect { left: 73.8%; } .nav a:nth-child(3):hover ~ .effect { left: 81.2%; } .nav a:nth-child(4):hover ~ .effect { left: 89%; } .nav a:nth-child(5):hover ~ .effect { left: 96.4%; } /* ----- dot effect -----*/ .ph-dot-nav:after { content: ""; display: block; position: absolute; width: 100%; height: 1px; background: #484848; bottom: 40px; } .ph-dot-nav a:after { content: ""; position: absolute; width: 6px; height: 6px; bottom: 38px; left: 50%; margin-left: 0px; background: #484848; border-radius: 100%; } .ph-dot-nav .effect { width: 10px; height: 10px; bottom: 36px; margin-left: -5px; background: #fff; border-radius: 100%; z-index:999;} I would like top use this excellent script on my website, but I am not sure how to enhance the function of it. I mean I would like to use it for more than just one navigation menu. The script assigns the "current" id for the active link on the page through the "nav" menu. What needs to be added to, or modify if I would like to use it also for "nav2" on the same page? Thank you, Peter window.onload=function() { setPage(); } function extractPageName(hrefString) { var arr = hrefString.split('/'); return (arr.length < 2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); } function setActiveMenu(arr, crtPage) { for (var i=0; i < arr.length; i++) { if(extractPageName(arr[i].href) == crtPage) { if (arr[i].parentNode.tagName != "DIV") { arr[i].className = "current"; arr[i].parentNode.className = "current"; } } } } function setPage() { hrefString = document.location.href ? document.location.href : document.location; if (document.getElementById("nav") !=null ) setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString)); } Hey Basically all i want to do is highlight the pages hyperlink the user is currently on. So when the home page loads, the home page hyperlink is a different colour to the other hyperlinks, and then when another is page is pressed it is that pages hyperlink that is a different colour to the others Hello, I am a newbie to this forum. I have searched for the problem that I have in this forum but found none. I am creating a calendar using html/css and javascript. I used one the free javascript for calendar on the internet and modified it to the way I wanted it to be. However, I could not write the if statement so that the calendar will highlight the current date of the current month only, not all 12 months. And I could not write the if statement so that the calendar will know what day is a holiday and make it red color. Here is my code: Code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My Calendar</title> <style type="text/css"> #left {position:absolute;left:40px;top:10px;} #right {position:absolute;left:400px;top:10px;} .table1 {border-collapse:collapse;background-color:#efefef;} .th2 {height:10px;background-color:#eeeee0;color:#951159;font-size:10px;} .sunday {background-color:#DD2211;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;} .day {background-color:navy;font-size:10px;font-weight:bold;color:ivory;width:20px;height:8px;} .date0 {border:1px solid #cccccc;font-size:10px;color:red;font-weight:bold;text-align:center;} /* This is the color for Sundays and Holidays */ .date1 {border:1px solid #cccccc;font-size:10px;height:10px;font-weight:bold;text-align:center;} /* This is the color for regular days */ .today {border:1px solid #cccccc;font-size:10px; color:#0000ff;background-color:#daffee;} /* This is the color for current day */ </style> </head> <body bgcolor=#cccccc> <div id="left"> <script> var i=0; for (i=0;i<=5;i++) { function leapYear(year) { if (year % 4 == 0) // basic rule return true // is leap year /* else */ // else not needed when statement is "return" return false // is not leap year } function getDays(month, year) { // create array to hold number of days in each month var ar = new Array(12) ar[0] = 31 // January ar[1] = (leapYear(year)) ? 29 : 28 // February ar[2] = 31 // March ar[3] = 30 // April ar[4] = 31 // May ar[5] = 30 // June ar[6] = 31 // July ar[7] = 31 // August ar[8] = 30 // September ar[9] = 31 // October ar[10] = 30 // November ar[11] = 31 // December // return number of days in the specified month (parameter) return ar[month] } function getMonthName(month) { // create array to hold name of each month var ar = new Array( "JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE", "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER") // return name of specified month (parameter) return ar[month] } setCal() function setCal() { // standard time attributes var now = new Date() var year = now.getFullYear() var current_month = now.getMonth() var date = now.getDate() now = null var month = i var monthName = getMonthName(month) // create instance of first day of month, and extract the day on which it occurs var firstDayInstance = new Date(year, month, 1) var firstDay = firstDayInstance.getDay() firstDayInstance = null // number of days in current month var days = getDays(month, year) // call function to draw calendar drawCal(firstDay + 1, days, date, monthName, year) } function drawCal(firstDay, lastDate, date, monthName, year) { // create basic table structure var text = "" // initialize accumulative variable to empty string text += '<CENTER>' text += '<TABLE class="table1">' // table settings text += '<TH COLSPAN=7 class="th2">' text += monthName + ' ' + year text += '</TH>' // close header cell // create array of abbreviated day names var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT") // create first row of table to set column width and specify week day text += '<TR ALIGN="center" VALIGN="center">' for (var dayNum = 0; dayNum < 7; ++dayNum) { if (dayNum == 0) { text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>' } else { text += '<TD class="day">' + weekDay[dayNum] + '</TD>' } } text += '</TR>' // declaration and initialization of two variables to help with tables var digit = 1 var curCell = 1 for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) { text += '<TR ALIGN="left" VALIGN="top">' for (var col = 1; col <= 7; ++col) { if (digit > lastDate) break if (curCell < firstDay) { text += '<TD></TD>'; curCell++ } else { if (col ==1) { // This is to make the text color red if it is Sunday text += '<TD class="date0">' + digit + '</TD>' } else /* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday text += '<TD class="date0">' + digit + '</TD>' } else */ /* if (digit == date) { // current cell represent today's date text += '<TD class="today">' text += digit text += '</TD>' } else */ text += '<TD class="date1">' + digit + '</TD>' digit++ } } text += '</TR>' } // close all basic table tags text += '</TABLE>' text += '</CENTER>' // print accumulative HTML string document.write(text) } } </script> </div> <!-- #################################################################### --> <div id="right"> <script> var i=0; for (i=0;i<=5;i++) { function leapYear(year) { if (year % 4 == 0) // basic rule return true // is leap year /* else */ // else not needed when statement is "return" return false // is not leap year } function getDays(month, year) { // create array to hold number of days in each month var ar = new Array(12) ar[0] = 31 // January ar[1] = (leapYear(year)) ? 29 : 28 // February ar[2] = 31 // March ar[3] = 30 // April ar[4] = 31 // May ar[5] = 30 // June ar[6] = 31 // July ar[7] = 31 // August ar[8] = 30 // September ar[9] = 31 // October ar[10] = 30 // November ar[11] = 31 // December // return number of days in the specified month (parameter) return ar[month] } function getMonthName(month) { // create array to hold name of each month var ar = new Array( "JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER") // return name of specified month (parameter) return ar[month] } setCal() function setCal() { // standard time attributes var now = new Date() var year = now.getFullYear() var current_month = now.getMonth() var date = now.getDate() now = null var month = i var monthName = getMonthName(month) // create instance of first day of month, and extract the day on which it occurs var firstDayInstance = new Date(year, month, 1) var firstDay = firstDayInstance.getDay() firstDayInstance = null // number of days in current month var days = getDays(month, year) // call function to draw calendar drawCal(firstDay + 1, days, date, monthName, year) } function drawCal(firstDay, lastDate, date, monthName, year) { // create basic table structure var text = "" // initialize accumulative variable to empty string text += '<CENTER>' text += '<TABLE class="table1">' // table settings text += '<TH COLSPAN=7 class="th2">' text += monthName + ' ' + year text += '</TH>' // close header cell // create array of abbreviated day names var weekDay = new Array("SUN", "MON","TUE","WED", "THU", "FRI", "SAT") // create first row of table to set column width and specify week day text += '<TR ALIGN="center" VALIGN="center">' for (var dayNum = 0; dayNum < 7; ++dayNum) { if (dayNum == 0) { text += '<TD class="sunday">' + weekDay[dayNum] + '</TD>' } else { text += '<TD class="day">' + weekDay[dayNum] + '</TD>' } } text += '</TR>' // declaration and initialization of two variables to help with tables var digit = 1 var curCell = 1 for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) { text += '<TR ALIGN="left" VALIGN="top">' for (var col = 1; col <= 7; ++col) { if (digit > lastDate) break if (curCell < firstDay) { text += '<TD></TD>'; curCell++ } else { if (col ==1) { // This is to make the text color red if it is Sunday text += '<TD class="date0">' + digit + '</TD>' } else /* if ((month ==1) && (col ==2) && (row==3)) { // This is to make the text color red if it is a holiday text += '<TD class="date0">' + digit + '</TD>' } else */ /* if (digit == date) { // current cell represent today's date text += '<TD class="today">' text += digit text += '</TD>' } else */ text += '<TD class="date1">' + digit + '</TD>' digit++ } } text += '</TR>' } // close all basic table tags text += '</TABLE>' text += '</CENTER>' // print accumulative HTML string document.write(text) } } </script> </div> </body> </html> This is just for my practice in html/css and javascript. Thanks for all your time and support. kvkt Hi,my current pop under code works ever 24hrs,but I would like to change it to work every hour,and/or to work every time a member clears his cookies.If I am not explaining this correctly please let me know and I will try to correct this. Code: function setCookie(name, value, time) { var expires = new Date(); expires.setTime( expires.getTime() + time ); document.cookie = name + '=' + value + '; expires=' + expires.toGMTString(); } Any help with this would be greatly appreciated!! Mike Edit:If you need me to post the whole code I have no prob with this.I only posted this part because I thought the issue would be in var expires = new Date();. Just want to know what should I change it to? Here is the whole code. Code: <script type="text/javascript"> var puShown = false; function doOpen(url) { if ( puShown == true ) { return true; } win = window.open(url, 'wmPu', 'toolbar,status,resizable,scrollbars,menubar,location,height=700,width=1100'); if ( win ) { win.blur(); puShown = true; } return win; } function setCookie(name, value, time) { var expires = new Date(); expires.setTime( expires.getTime() + time ); document.cookie = name + '=' + value + '; expires=' + expires.toGMTString(); } function getCookie(name) { var cookies = document.cookie.toString().split('; '); var cookie, c_name, c_value; for (var n=0; n<cookies.length; n++) { cookie = cookies[n].split('='); c_name = cookie[0]; c_value = cookie[1]; if ( c_name == name ) { return c_value; } } return null; } function initPu() { if ( document.attachEvent ) { document.attachEvent( 'onclick', checkTarget ); } else if ( document.addEventListener ) { document.addEventListener( 'click', checkTarget, false ); } } function checkTarget(e) { if ( !getCookie('popundr') ) { var e = e || window.event; var win = doOpen('My Site Name Here/'); setCookie('popundr', 1, 24*60*60*1000); } } initPu(); </script> I do know that most of you hate pop ups and pop unders,but this is not to annoy my users.I am just using this to promote another site that I own..Thanks again. So I have realized more and more how much I need to learn more with JavaScript. So upon trying multiple an multiple combinations of failures I am posting the starting point again, hoping someone can explain my objectives. Just a nudge in the right direction. I first got each number to work and change to orange using the document.getElementById("gallery").style.color="#ff4000"; line. However once again when it comes to current page I cant figure out to keep the colors working with the next and previous buttons. I think the biggest issue I am having is how I am supposed to identify each <a> link so that it will color the right button for the right value. Code: <script type="text/javascript"> var imgList = [ "../Assets/Images_Revised/40_kitchen.jpg", "../Assets/Images_Revised/40_stair.jpg", "../Assets/Images_Revised/C_front2.jpg", "../Assets/Images_Revised/C_rear_side_combo.jpg", "../Assets/Images_Revised/C_side.jpg", "../Assets/Images_Revised/Y_combo.jpg", "../Assets/Images_Revised/Y_window.jpg" ]; var clientData = [ "This is a place holder for the first set of text.", // index 1 "This is a place holder for the second set of text. This is a place holder for the first set of text. This is a place holder for the first set of text.", // index 2 "This is a place holder for the third set of text.", "This is a place holder for the fourth set of text.", "This is a place holder for the fifth set of text.", "This is a place holder for the sixth set of text.", "This is a place holder for the first seventh of text.", ]; var currentMain = 0; var currentMainT = 0; function Prev() { return ShowMain(currentMain-1); return ShowMainT(currentMainT-1); } function Next() { return ShowMain(currentMain+1); return ShowMainT(currentMainT+1); } function ShowMain(which) { currentMain = which; currentMainT = which; if ( currentMain < 0 ) currentMain = 0; if ( currentMainT < 0 ) currentMainT = 0; if ( currentMain > imgList.length-1) currentMain = imgList.length-1; if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1; document.getElementById('mainImg').src = imgList[currentMain]; document.getElementById('mainText').innerHTML = clientData[currentMainT]; var PD = document.getElementById('Pg'); var PD2 = document.getElementById('Pg2'); if (PD != null ) PD.innerHTML = 'Image '+(currentMain+1)+' of '+imgList.length; if (PD2.innerHTML != "" ) PD2.innerHTML = (currentMainT+1)+' of '+clientData.length; document.getElementById("mainText").style.display = 'inline' document.getElementById("gallery").style.color="#ff0000"; return false; } onload = function() { ShowMain(0); } onload = function() { ShowMainT(0); } </script> <script language="JavaScript"> function preloader() { // counter var i = 0; // create object imageObj = new Image(); // set image list images = new Array(); images[0]="../Assets/Images/pt_entry+hall2.jpg" images[1]="../Assets/Images/pt_stair+hall.jpg" images[2]="../Assets/Images_Revised/40_kitchen.jpg" images[3]="../Assets/Images_Revised/40_stair.jpg" images[4]="../Assets/Images_Revised/C_front2.jpg" images[6]="../Assets/Images_Revised/C_rear_side_combo.jpg" images[7]="../Assets/Images_Revised/C_side.jpg" images[8]="../Assets/Images_Revised/Y_combo.jpg" images[9]="../Assets/Images_Revised/Y_window.jpg" images[10]="../Assets/Images_Revised/V_stair.jpgg" // start preloading for(i=0; i<=3; i++) { imageObj.src=images[i]; } } </script> Code: <div id="mainText" alt="testter">This is a place holder for the first set of text.</div></div><p></p> </td> <td id="cell5 images"> </td> </tr> <tr> <td colspan="3" class="wideText" id="cell4"><div id="gallery" ><a href="#" onclick="return ShowMain(0); return ShowMainT(0)">1</a ><a href="#" onclick="return ShowMain(1); return ShowMainT(1); setColor()">2</a ><a href="#" onclick="return ShowMain(2); return ShowMainT(2); setColor()">3</a ><a href="#" onclick="return ShowMain(3); return ShowMainT(3); setColor()">4</a ><a href="#" onclick="return ShowMain(4); return ShowMainT(4); setColor()">5</a ><a href="#" onclick="return ShowMain(5); return ShowMainT(5); setColor()">6</a ><a href="#" onclick="return ShowMain(6); return ShowMainT(6); setColor()">7</a ><a href="#" onclick="return Prev();" class="gallery"><</a ><a href="#" class="gallery" onclick="return Next();">></a></div> I have a button (in html) and I want the center of the button to be on the center of the line I'm typing on... I was just putting it inside a span and then using this code to move it down. Code: <span style="position:relative; bottom:-10;"> It worked great! But... once I started allowing my users to change the font sizes the buttons got bigger and they needed to be moved down further... if the font size was +1: Code: <font size="+1"><span style="position:relative; bottom:-10;"> if the font size was +6: Code: <font size="+6"><span style="position:relative; bottom:-27.5;"> So is there a way in javascript to detect the current font size and then adjust the span position based off of that? If I can just get the number of the current font size I can do all the rest of the coding, I just need a way to figure out the current font size and put it in a variable... I was thinking of using something like 1.0em so that it stays the same but then we have a basis of measuring off of but I have no clue.. I'm fairly new to javascript. Thanks! |