|
JavaScript - A Good Javascript Reference Site?
I just started learning javascript, and it'd be cool if I could find some kind of javascript reference site similar to php.net/manual with a quick reference search. After looking through google for a long while, all I could find was tutorial sites or reference books with the only way to navigate them is through boring tables of contents. Does such a place exist? Or what's the next best thing?
Similar TutorialsHi everyone, Does anybody know where I can download a decent Javascript reference in eBook format ?? I'm working on this website and some contents are set up in arrays. How do you refer variables to work with arrays. I need the correct syntax.
İ want to use this code but when the page opens, I get a null reference error. When I open the page a second time, this error doesn't occur. I understand when the site caches, this error doesn't occur. The error comes from tb_show function. My code: <script type="text/javascript"> function writeCookie(CookieAdi) { var dtGun = 1 var strValue = "1" if (dtGun == null || dtGun == "") dtGun = 365; var d = new Date(); d.setTime(d.getTime() + (dtGun * 24 * 60 * 60 * 1000)); var zt = "; expires=" + d.toGMTString(); document.cookie = CookieAdi + "=" + strValue + zt + "; path=/"; } function readCookie(cookieadi) { var c = document.cookie; if (c.indexOf(cookieadi) != -1) { s1 = c.indexOf("=", c.indexOf(cookieadi)) + 1; s2 = c.indexOf(";", s1); if (s2 == -1) s2 = c.length; strValue = c.substring(s1, s2); return strValue; } } writeCookie('OnerFacebook'); if (readCookie('OnerFacebook') != 1) { tb_show('', 'http://www.mobilyala.com/OnerFacebook/?KeepThis=true&TB_iframe=true&height=500&width=300&modal=true', ''); } </script> What should I do for it? I am running some javascript code which generates a popup window associated with a spell checking program. The way the program works, is that it takes the text out of a text field (passed as an object), spell checks the string, then puts it back into the text area field. My text area is located within a flash form, and I am having trouble pointing to it. I am sure my spell checking program is working, as it works fine if I point to an html text area. Do I have to do something special to point to a flash form object? Here is my code: Code: <!--- Source the JavaScript spellChecker object --->
<script language="javascript" type="text/javascript" src="../Spellchecking/spellerpages-0.5.1/speller/spellChecker.js">
</script>
<!--- Call a function like this to handle the spell check command --->
<script language="javascript" type="text/javascript">
function openSpellChecker() {
// get the textarea we're going to check
<!--- pointer to text area --->
var txt = window.activity.Summary;
// give the spellChecker object a reference to our textarea
// pass any number of text objects as arguments to the constructor:
var speller = new spellChecker( txt );
// kick it off
speller.openChecker();
}
</script>
Also, here is my text area: Code: <cfform format="flash" id="activity1" height="#formheight#" width="100%" style="#formstyle#" timeout="3600" wmode="transparent" name="activity" onLoad="#initVars#; onFormLoad();">
<cftextarea name="Summary" id="Summary" html="yes" maxlength="1000" tooltip="Summarize your entry here. The field has a 1000 character limit. This summary is included in the generated End of the Week reports." onChange="submitTemporary('Summary', Summary.text);requiredContent('summary');" onFocus="if(detailsBox.height>60){detailsBox.height=60;summaryBox.height=220;}"></cftextarea>
</cfform>
Any help on this issue would be much appreciated. Thanks, AeroNicko Frequent reader, usually find my code fixes via Google... so first post, but I've been programming for a while... I've always been horrible at JavaScript... Java was easier for me. anyways... My problem: I am building a website for my fire department that i am a member. here is what i have www. explosive supplements .com(header picture is a mockup, being worked on by a graphic artist) (spaced out for privacy, this domain is my testing website that i used to test my programming prototypes live without taking other sites offline.) My main issue is IE7 and IE8 in compatibility mode My Solution: I need to make a popup/warning to tell those running IE7 to update their browser to view the website and a popup/warning to tell those who are running compatibility mode in IE8 to turn it off to view the webpage properly. i thought about making a seperate template for IE7, but that still doesnt help with those running compatibility mode in IE8. Thanks for any help that you can give. Hey guys, I'm new to the forum, just registered today. And I'm wondering whats the best javascript editor out there? I'm going to school for web development and I'm taking a javascript class next semester, the problem is the class is online so i have to teach myself. I have previous coding experience with html, css, actionscript 2 and coldfusion. I want to know whats the best editor out there is? I have used Dreamweaver for my previous coding and i don't like it. It feels to bloated and has way to much stuff i never use. Anyone want to share what they use? Make me a recommendation, it doesn't matter weather its for mac or pc. I have a macbook pro i use for school and i already have a a copy of adobe creative suite 5 for mac and Visual studio 2010 for windows. Anyone ever use visual studio for web development? I would really appreciate any help you can give me. Anyway thanks for reading my long post, and any advice is really appreciated. Thank You, Emiljan This is my first post. I am reading "Javascript The Good Parts" ~ The Method Invocation Pattern Page 28 and tried this, var myObject= { value:0, increment:function(inc){ this.value+= typeof inc==="number" ? inc:1; } } myObject.increment(2); alert(myObject.value); but alert(myObject.value); is returning a value of "2", when it should return "3". Can someone help? Reply With Quote 12-22-2014, 09:59 AM #2 rnd me View Profile View Forum Posts Visit Homepage Senior Coder Join Date Jun 2007 Location Urbana Posts 4,497 Thanks 11 Thanked 603 Times in 583 Posts 0+2=2, not 3; the code is working correctly. Can any one please tell me a way to get all the links in a web page using javascript?
I took a class with just a little bit of JavaScript in it and didn't learn as much as I'd hoped. Is there a website that walks through JavaScript that easy to understand? Thanks I have a code for creating a search bar to search words on an unpublished site that i am developing. I was wondering where to enter the keywords, can anyone help me? Thanks; Code:
<script language="JavaScript">
<!-- Original by http://javascript.internet.com More javascripts http://www.************** -->
var NS4 = (document.layers); // Which browser?
var IE4 = (document.all);
var win = window; // window to search.
var n = 0; function findInPage(str)
{ var txt, i, found;
if (str == "") return false; // Find next occurence of the given string on the page, wrap around to the
// start of the page if necessary.
if (NS4)
{
// Look for match starting at the current point. If not found, rewind
// back to the first match.
if (!win.find(str))
while(win.find(str, false, true))
n++; else n++; // If not found in either direction, give message.
if (n == 0) alert("Not found."); }
if (IE4)
{ txt = win.document.body.createTextRange(); // Find the nth match from the top of the page.
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++)
{ txt.moveStart("character", 1);
txt.moveEnd("textedit"); } // If found, mark it and scroll it into view.
if (found)
{ txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView(); n++; } // Otherwise, start over at the top of the page and find first match.
else { if (n > 0) { n = 0; findInPage(str); } // Not found anywhere, give message. else alert("Not found."); } }
return false; }
</script>
<form name="search" onSubmit="return findInPage(this.string.value);">
<div align="center" font size=3>
<input name="string" type="text" size=15 onChange="n = 0;">
</font>
<input type="submit" value="Search Page">
</div>
</form>
I am a first-time Javascript user and am trying to add the Magic Image Rotator code to my site: San Diego Solar. I have followed others suggestions and directions from other places but I still can't figure it out. Here is the Javascript code I am trying to run: MagicImage.js Here is the code I am inserting into the HTML (via a .PHP file: a specific way that is used for Thesis theme on Wordpress which I run for my site). Code: function MagicImage() {
?>
<html>
<body>
<script language="javascript" type="text/javascript" src="http://www.sandiegosolarenergy.org/wp-content/themes/thesis_18/lib/scripts/MagicImage.js"></script>
</body>
</html>
<?php
}
add_action('thesis_hook_header','MagicImage');
Using Firebug for Firefox, I get errors showing up on line 37 of MagicImage.js... though I don't know what to do with that line of code. The problem is that nothing is showing up on the page! Can someone help me? Hi, I need to a small task in Javascripts and I would like to know whether this can be done. If someone knows a way that can be done or provide me some code, I would be more greatful. This is the task I need to do :- I have a small shoppig cart. I want when a customer visit the site, if that is his first time on the website and before he quit the browser or go to another URL of another domain or press back and go to another page, an alert should pop up. I have did this using cookies and Javascripts and it is working properly as I wanted. But this alert pops up even when I go inside of my own web. I want this alert only to popup when they leave from my web or go to anyother and it should not popup when I click on my links or go in to my web. I hope, I explained what I want and it is clear. Please if someone knows a solution for this. Please send me your ideas or if you have some codes that can be helpfull to me, please send me. Thank you. I have two main components running on this page below. http://vtpr.net/asociacion-relacioni...d=54&Itemid=23 Sobi directory and gavick photoslide. The problem is that the photoslideshow is not loading only on the page witht he directory. I did a little investaged and got a error console for firefox and it showing this error: Code: Error: Fx.Opacity is not a constructor
Source File: http://vtpr.net/asociacion-relacionistas/modules/mod_gk_news_image_1/js/engine_compress.js
Line: 1
I have VERY VERY limited knowledge of javascript. Any and all help is super appreciated. Thanks in advance Currently I have a .vbs script that I am using to auto login to a site. I know its not javascript but the site itself is and thats what causing my issue I think? The site is a reservation site for classes at the gym. Basically I want the script to login to the site and sign up for a specific class every week. Its the same class same time same day. Below is the code I have so far. I can't figure out what the "sign up" button sends for me to add it into the script.
Code: set a = createobject("wscript.shell")
a.run "https://clients.mindbodyonline.com/ASP/home.asp?studioid=6268/"
wscript.sleep (5000)
a.sendkeys ("khigbie")
a.sendkeys chr(9)
wscript.sleep (2000)
a.sendkeys ("ilovelamp11")
a.sendkeys "{Enter}"
call msgbox("Finished")
wscript.quit
I'm not sure if it helps but I pulled the source from the page when logged in... Code: <!-- CLISRV0107 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>The Edge Fitness Clubs Online</title>
<meta http-equiv="Content-Type" content="text/html" />
<link rel="icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="/work/scripts/jquery-1.4.2.js"></script><script type="text/javascript" src="/work/scripts/error.js"></script><script type="text/javascript" src="/work/scripts/mb.js"></script><script type="text/javascript" src="/work/scripts/home.js"></script>
<script type="text/javascript">
var js_studioid = "6268";
var dis_array = {0:'Room', 1:'Class Type', 2:'Session Type', 3:'Workshops', 4:'Appointments', 5:'Classes', 6:'Teacher', 7:'Program', 8:'Location', 9:'Booked', 10:'Completed', 11:'Confirmed', 12:'Client', 13:'Assistant', 14:'Rentals', 15:'Assistant2', 16:'Arrived', 17:'Check Out', 18:'Instructor', 19:'Program', 20:'Company', 21:'Reserved', 22:'Total', 23:'Client', 24:'Help', 25:'Online Store', 26:'Current Series', 27:'Payment', 28:'Event', 29:'Balance', 30:'Credit', 31:'Debit', 32:'Remaining', 33:'Unbooked', 34:'Purchased', 35:'Amount', 36:'Paid', 37:'Payment Ref #', 38:'Back', 39:'Email Address', 40:'Name', 41:'Username', 42:'Password', 43:'Home Studio', 44:'Billing Name', 45:'Billing Address', 46:'Address', 47:'City', 48:'State', 49:'Postal Code', 50:'CC Type', 51:'CC Number', 52:'CC Expiration', 53:'Edit', 54:'Web', 55:'Cancel', 56:'At', 57:'Date', 58:'Time', 59:'Payment Method', 60:'Status', 61:'Series', 62:'Account', 63:'Current', 64:'Expiration Date', 65:'Description', 66:'Sale Date', 67:'Color', 68:'Location', 69:'Price', 70:'Quantity', 71:'Tax', 72:'Amount Paid', 73:'Details', 74:'Info', 75:'Size', 76:'Start Time', 77:'Start Date', 78:'End Time', 79:'End Date', 80:'First Name', 81:'Last Name', 82:'Home Phone', 83:'Mobile Phone', 84:'Work Phone', 85:'Business Phone', 86:'Business Address', 87:'Business Email', 88:'Account Information', 89:'Billing Information', 90:'Notes', 91:'Country', 92:'Click Here', 93:'Phone #', 94:'Login', 95:'Discount', 96:'Class Level', 97:'Sales Tax', 98:'Tax 2', 99:'Tax 3', 100:'Tax 4', 101:'Tax 5', 102:'', 103:'', 104:'', 105:'', 106:'', 107:'', 108:'Rep', 109:'ACH', 110:'Rep 2', 111:'Rep 3', 112:'Contract Deposit', 113:'Teachers', 114:'Instructors', 115:'Sale ID', 116:'Sold By', 117:'Exp', 118:'Subtotal', 119:'Rep 4', 120:'Rep 5', 121:'Rep 6', 122:'Insurance Company', 123:'Insurance Policy #', 124:'Birthday', 125:'Question', 126:'Test', 127:'Referral Type', 128:'Remember Me', 129:'Previous Day', 130:'Today', 131:'Next Day', 132:'Last Week', 133:'Next Week', 134:'ID', 135:'Session Type Level', 136:'Search', 137:'Appointment', 138:'Male', 139:'Female', 140:'Date', 141:'Time', 142:'Class/Session Level', 143:'Yes', 144:'No', 145:'CVV2', 146:'Cardholder Name', 147:'Check', 148:'Uncheck', 149:'All', 150:'None', 151:'Substitute', 152:'Sun', 153:'Mon', 154:'Tue', 155:'Wed', 156:'Thu', 157:'Fri', 158:'Sat', 159:'View', 160:'Update', 161:'From', 162:'To', 163:'Partner', 164:'Purchases', 165:'Fee', 166:'Contact', 167:'Submit', 168:'Gender Preference', 169:'Next', 170:'OR', 171:'Open', 172:'Late Cancel', 173:'Unconfirmed', 174:'Week', 175:'January', 176:'February', 177:'March', 178:'April', 179:'May', 180:'June', 181:'July', 182:'August', 183:'September', 184:'October', 185:'November', 186:'December', 187:'Auto Pays', 188:'Contract', 189:'Print', 190:'Enroll', 191:'Add', 192:'in', 193:'This Month', 194:'This Week', 195:'Memberships', 196:'&', 197:'Contracts', 198:'Packages', 199:'Days', 200:'Book', 201:'Rep1', 202:'Class', 203:'Workshop', 204:'Middle Name', 205:'Nickname', 206:'Back Bar Charge', 207:'County', 208:'Commission', 209:'Commission2', 210:'Locker #', 211:'Emergency Contact Information', 212:'Name', 213:'Relationship', 214:'Phone', 215:'Email', 216:'Select', 217:'Item', 218:'Type', 219:'Conversions', 220:'Members', 221:'Non-Members', 222:'Company', 223:'Prospects', 224:'Costume', 225:'Costumes', 226:'Generate', 227:'Gender', 228:'Relationship', 229:'Waist', 230:'Hip', 231:'Girth', 232:'Inseam', 233:'Head', 234:'Shoe', 235:'Tights', 236:'Height', 237:'Bust', 238:'Prefix', 239:'Active', 240:'InActive', 241:'Legal Name', 242:'STAFF ALERT', 243:'Alert', 244:'Select State/Prov', 245:'Date Range', 246:'n/a', 247:'Owner', 248:'Age', 249:'Years', 250:'Months', 251:'Formula', 252:'Referral Discount', 253:'Termination Code', 254:'Termination Comments', 255:'Day', 256:'Semester', 257:'Year', 258:'Month', 259:'Quarter'};
var mbo_scd = '4/13/2009';
</script>
<link rel="stylesheet" type="text/css" href="/work/styles/jquery.tooltip.css" /><link rel="stylesheet" type="text/css" href="/work/styles/base/jquery.ui.all.css" /><script type="text/javascript" src="/work/scripts/jquery-1.4.2.js"></script><script type="text/javascript" src="/work/scripts/plugins/jquery.cookie-1.0.js"></script><script type="text/javascript" src="/work/scripts/plugins/jquery.mb.js"></script><script type="text/javascript" src="/work/scripts/jquery-ui-1.8.4.custom.js"></script><script type="text/javascript" src="/work/scripts/plugins/jquery.tooltip.js"></script><script type="text/javascript" src="/work/scripts/plugins/jquery.ba-resize.js"></script><script type="text/javascript" src="/work/scripts/plugins/jquery.lightboxLib.js"></script>
<script type="text/javascript">
$(function() {
// init tooltips
$("img[title],span[title],select[title],input[title],legend[title]").tooltip({
track: true,
showURL: false,
fade: 250
});
$('fieldset.collapsible').setCollapseEvents();
});
</script>
<!-- MBO's analytics code DevItem R58_3856-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31442-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
function resetSession() {
alert("Your session has expired, redirecting home.");
parent.location = "/ASP/logout.asp?studioid=6268"
}
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-31442-3");
pageTracker._trackPageview();
} catch (err) { }
</script>
</head>
<script type="text/javascript">
var mbo_scd = '4/13/2009';
</script>
<frameset id="mainFrameset" rows="98,*" frameborder="0" framespacing="0" NORESIZE>
<frame name="topFrame" src="top_class.asp?tg=0&vt=&lvl=&view=&trn=&date=&loc=&page=&pMode=&prodid=&stype=-7&classid=&catid=&justloggedin=" frameborder="0" noresize scrolling="NO" >
<frame name="mainFrame" src="main_class.asp?tg=0&vt=&lvl=&view=&trn=&date=&loc=&page=&pMode=&prodid=&stype=-7&classid=&catid=&justloggedin=" frameborder="0" scrolling="YES">
</frameset>
<noframes>
<body style="background-color:#FFFFFF;" text="#000000">
</body>
</noframes>
</html>
Thanks for any help!! OK, a friend and I have been working on implementing the javascript slider you see in the header of my website http://www.billboardfamily.com (hover over the facebook icon under the search area). For some reason, this is causing a lot of the other items on the site to stop functioning all together. Can anyone help me figure out how to fix this? NOTE: Running Wordpress Here are some of the problems: 1) http://billboardfamily.com/videos/ The thumbnail videos do not work when you click them 2) http://billboardfamily.com/the-process/ All 4 slides are on the page, but the slider is not working at all. 3) http://billboardfamily.com/contact-us/ The contact forms I have running are not working correctly, and the styling is no longer correct. Hi all.... newbie here. Have just finished my eccomerce site and it's ready to go but have come across a stumbling block. I use webplus4 which is a great web design program... except for one thing. The site search tool is very weak... it won't find results for words of less than 4 characters... and since my website is about plush pets this is important. For instance if you type in the breed 'pug' it says 0 results found. Same if you enter Old English Sheepdog, it ignores the entire search term because of the world 'old'. If you enter plush pug, it also ignores the entire search string. I don't have the money to purchase software nor the time and then configure the javascript to match my site. Is there anyone out there that can modify the following javascript file (jsSiteSearch.js) so that the search will not ignore words of 3 letters? Am aware that once modified I will have to replace the file each time but it will be worth it. By the way, no one on the webplus forums seems to know how to do it. Here is the code... (have removed all the keywords)... function GetSiteSearchResults(newWindow,frameObject,frameObjectName,fontFace,fontSize,fontColour,linkFace,lin kSize,linkColour,resultsText) { var sTerms=""; var iDepth = 0; var sURL = new String(document.location); if (sURL.indexOf("?") > 0) { var arrParams = sURL.split("?"); var arrURLParams = arrParams[1].split("&"); for (var i=0;i<arrURLParams.length;i++) { var sParam = arrURLParams[i].split("="); var sValue = unescape(sParam[1]); if( sParam[0] == frameObjectName) sTerms = sValue; if( sParam[0] == "depth") iDepth = parseInt(sValue); } } var d=frameObject.document; if (sTerms=="") {d.open(); d.write("<html><head></head><body style=\"background: transparent;\"></body></html>"); d.close();return;} var sBack=""; for (i=0; i<iDepth; i++) sBack+='..\\\\'; d.open(); d.write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); d.write("<html lang=\"en\">"); d.write("<head>"); d.write("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">"); d.write("</head>"); d.write("<body style=\"margin: 0px 0px 0px 0px; font-family: "+fontFace+"; font-size: "+fontSize+"; color: "+fontColour+"; background: transparent;\">"); d.write("<div id=\"wpSearchResults\"></div>"); d.write("<script type=\"text/javascript\">"); d.write("var wordMap = new Array(\"...........................................); d.write("function doNav(ind)"); d.write("{"); if (newWindow) d.write(" window.open(\""+sBack+"\"+linkMap[ind],\"_blank\");"); else d.write(" parent.window.location.href=linkMap[ind];"); d.write("}"); d.write("function wpDoSearch(searchTerms){"); d.write("var terms = searchTerms.split(\" \");"); d.write("if (terms==\"\") return;"); d.write("var results = \"\";"); d.write("var resultscount = 0;"); d.write("for (var i=0; i<wordMap.length; i++)"); d.write("{"); d.write(" var found=true;"); d.write(" for (var j=0; j<terms.length; j++)"); d.write(" if (wordMap[i].indexOf(terms[j].toLowerCase())==-1) found=false;"); d.write(" if (found)"); d.write(" {"); d.write(" results+=\"<a style=\\\"cursor: pointer; font-family: "+linkFace+"; font-size: "+linkSize+"; color: "+linkColour+"; \\\" onclick=\\\"doNav(\"+i+\");\\\"><u>\"+pageMap[i]+\"</u></a><br>\"+preMap[i]+\"...<br><br>\";"); d.write(" resultscount++;"); d.write(" }"); d.write("}"); d.write("document.getElementById(\"wpSearchResults\").innerHTML=resultscount+\" "+resultsText+" \"+searchTerms+\"<br><br>\"+results;"); d.write("}"); while(sTerms.indexOf("\"") != -1 ) { sTerms = sTerms.replace("\"",""); }; d.write("wpDoSearch(\""+sTerms+"\");"); d.write("</script>"); d.write("</body></html>"); d.close(); } Thanks so very much in advance. Any help asap will be much appreciated. Cheers Hi, I am looking for some code that will do the following Form to post any URL to an iFrame and load said URL. I been told Javascript can do this, but I am also after the form bit as well if possible. Hi all- I currently use a javascript seacrh string on my website that searchs all folders (directories) and gives results on a html page. My problem is that some folders (or sub directories) are not being found when I type into the form search box. Does anyone know why this might be happening? here is the script im using <script language="JavaScript" type="text/javascript">function OnSearchSubmit(){var b_return=true;if (document.form_search.sw){for(var i=0;i<document.form_search.sw.value.length;i++){if (document.form_search.sw.value.charAt(i)!=" ") {lh="searchresult.html?sw="+encodeURIComponent(document.form_search.sw.value);b_return=false;break;} }}if (b_return) return;window.open(lh,"_self");}</script> thanks! Hi, I really need urgent help. I am using a javascript on a DotNetNuke CMS site to allow the user to choose text/background colour, basically it changes stylesheets. Here is the code that I have used: http://www.dynamicdrive.com/dynamici...etswitcher.htm and here is my example: http://lrptintranet.com.dnnmax.com/ - you can see the colour image buttons top right under the main menu. The style sheet changer seems to work on the top menu level items but as soon as you choose a submenu the javascript doesn't seem to work. I don't know anything at all about javascript - can anyone offer any advice how I can get this working on the sub menu pages?
I'm using the Javascript Tabifier (found he http://www.barelyfitz.com/projects/tabber/) on a new website I'm building. Here is the test page I've been trying it out on: http://www.myohmomma.com/test-2 It seems to be working well in IE, but doesn't even appear in Firefox. Any idea why? Additionally, there seem to be some positioning issues when I view it in Firefox, which I'm thinking is a topic for the CSS forums, but I thought could be relevant to my issue, somehow. I don't want to overwhelm anyone williing to help with code, so please let me know if there is more you need to see. This is what applies to the tabifier: In the head of my php document: [CODE]<script type="text/javascript" src="http://www.myohmomma.com/wp-includes/js/tabber-minimized.js"></script>[CODE] In the sidebar of my php document: [CODE] <div class="sidebar"> <div class="tabber"> <div class="tabbertab"> <h2>Welcome</h2> <img src="images/Welcome.png" alt="" /> <div id="Connect"> <div id="Connect-01"> <img src="images/Connect_01.png" width="315" height="48" alt="" /> </div> <div id="Connect-02"> <img src="images/Connect_02.png" width="27" height="87" alt="" /> </div> <div id="Facebook"> <img src="images/Facebook.png" width="76" height="82" alt="" /> </div> <div id="Connect-04"> <img src="images/Connect_04.png" width="21" height="87" alt="" /> </div> <div id="Newsletter"> <img src="images/Newsletter.png" width="77" height="82" alt="" /> </div> <div id="Connect-06"> <img src="images/Connect_06.png" width="21" height="87" alt="" /> </div> <div id="Twiiter"> <img src="images/Twiiter.png" width="75" height="82" alt="" /> </div> <div id="Connect-08"> <img src="images/Connect_08.png" width="18" height="87" alt="" /> </div> <div id="Connect-09"> <img src="images/Connect_09.png" width="76" height="5" alt="" /> </div> <div id="Connect-10"> <img src="images/Connect_10.png" width="77" height="5" alt="" /> </div> <div id="Connect-11"> <img src="images/Connect_11.png" width="75" height="5" alt="" /> </div> </div> </div> <div class="tabbertab"> <h2>Features</h2> <p>Tab 2 content.</p> </div> <div class="tabbertab"> <h2>Categories</h2> <p>Tab 3 content.</p> </div> <div class="tabbertab"> <h2>Search</h2> <p>Tab 4 content.</p> </div> </div> </div>[CODE] From my CSS stylesheet: [CODE].sidebar{ position: relative; top:0px; padding-top:20px; padding-right:10px; padding-left:10px; padding-bottom:0px; float:right; width:350px; } .sidebar ul{ list-style-type: none; margin: 0; padding: 0 10px 0 10px; background:#ffffff; } .sidebar ul li{ padding: 10px 0 10px 0; background:#ffffff; } .sidebar ul li h2{ font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #2d0a0b; border-top: 1px solid #2d0a0b; border-bottom: 1px solid #2d0a0b; padding: 5px 0px 5px 0px; background:#ffffff; } .sidebar ul ul li{ padding: 0; background:#ffffff; } /* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */ /*-------------------------------------------------- REQUIRED to hide the non-active tab content. But do not hide them in the print stylesheet! --------------------------------------------------*/ .tabberlive .tabbertabhide { display:none; } /*-------------------------------------------------- .tabber = before the tabber interface is set up .tabberlive = after the tabber interface is set up --------------------------------------------------*/ .tabber { } .tabberlive { margin-top:1em; } /*-------------------------------------------------- ul.tabbernav = the tab navigation list li.tabberactive = the active tab --------------------------------------------------*/ ul.tabbernav { margin:0; padding: 3px 0; border-bottom: 0px solid #778; font: bold 12px Verdana, sans-serif; } ul.tabbernav li { list-style: none; margin: 0; display: inline; } ul.tabbernav li a { padding: 3px 0.5em; margin-left: 0px; margin-right: 3px; border: 1px solid white; background: white; text-decoration: none; } ul.tabbernav li a:link { color: #2d0a0b; } ul.tabbernav li a:visited { color: #2d0a0b; } ul.tabbernav li a:hover { color: #2d0a0b; text-decoration:underline; background: white; border-color: white; } ul.tabbernav li.tabberactive a { color: #fbb1c0; background-color: #2d0a0b; border: 1px solid #2d0a0b; } ul.tabbernav li.tabberactive a:hover { color: #fbb1c0; text-decoration:underline; background: #2d0a0b; border-bottom: 1px solid white; } /*-------------------------------------------------- .tabbertab = the tab content Add style only after the tabber interface is set up (.tabberlive) --------------------------------------------------*/ .tabberlive .tabbertab { padding:5px; border:10px solid #2d0a0b; /* If you don't want the tab size changing whenever a tab is changed you can set a fixed height */ height:285px; /* If you set a fix height set overflow to auto and you will get a scrollbar when necessary */ overflow:auto; } /* If desired, hide the heading since a heading is provided by the tab */ .tabberlive .tabbertab h2 { display:none; } .tabberlive .tabbertab h3 { display:none; } /* Example of using an ID to set different styles for the tabs on the page */ .tabberlive#tab1 { } .tabberlive#tab2 { } .tabberlive#tab2 .tabbertab { height:200px; overflow:auto; } #Connect { position:absolute; left:30px; top:200px; width:315px; height:135px; } #Connect-01 { position:absolute; left:0px; top:0px; width:315px; height:48px; } #Connect-02 { position:absolute; left:0px; top:48px; width:27px; height:87px; } #Facebook { position:absolute; left:27px; top:48px; width:76px; height:82px; } #Connect-04 { position:absolute; left:103px; top:48px; width:21px; height:87px; } #Newsletter { position:absolute; left:124px; top:48px; width:77px; height:82px; } #Connect-06 { position:absolute; left:201px; top:48px; width:21px; height:87px; } #Twiiter { position:absolute; left:222px; top:48px; width:75px; height:82px; } #Connect-08 { position:absolute; left:297px; top:48px; width:18px; height:87px; } #Connect-09 { position:absolute; left:27px; top:130px; width:76px; height:5px; } #Connect-10 { position:absolute; left:124px; top:130px; width:77px; height:5px; } #Connect-11 { position:absolute; left:222px; top:130px; width:75px; height:5px; }[CODE] I've visited the forums so many times as a reader and usually find solutions here. I'm usually good at figuring it out on my own, but I'm really stumped. I am new at this and I think I'm in over my head. I'd reallly appreciate some help. |
|||||||