Learn VBA & Macros in 1 Week!

JavaScript - Help Adding Tab Using 'barelyfitz Javascript Tabifier'

Full Excel VBA Course - Beginner to Expert

Help Adding Tab Using 'barelyfitz Javascript Tabifier'	View Content

I am trying to use the javascript tabifier found here. I have it successfully working with the 3 tabs that the example comes with. I have not been able to figure out how to add more tabs to this. I would like to have quite a few more tabs.

Any help or guidance is very much appreciated.

Thanks,
RK

Full Excel VBA Course - Beginner to Expert

Javascript Tabifier On My Site Won't Work In Firefox, But Works In Ie

Similar Tutorials

View Content

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.

Adding A Rel Tag To Javascript

Similar Tutorials

View Content

I have a script which opens an HTML page and passes the current URL to a form on the page. I'm also using RokBox, which open a window as an overlay on the current page rather than as a popup. It is triggered by adding rel="rokbox" to any link. For instance, the following link opens moreinfo.htm using RokBox:

Code:

<a rel="rokbox" href="/modules/mod_S5tellafriend/moreinfo.htm">More Info</a>

Problem is the link doesn't pass the URL. The following code passes the URL but doesn't trigger RokBox:

Code:

<input type="button" class="button" value="MORE INFORMATION" onclick="s5_open_taf_popup()"/>
 
<script type="text/javascript">
var s5_taf_parent = window.location;
function s5_open_taf_popup() {
window.open('/modules/mod_S5tellafriend/moreinfo.htm','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=420,height=570,left=50,top=50,titlebar=yes')
}
</script>

Is there a way to add rel="rokbox" to the script? Or maybe pass the URL with the link instead? Thanks!

Adding Time In Javascript

Similar Tutorials

View Content

I am trying to set up a web that new times will be displayed when they add current times to a form.

here is the static HTML

<form method="POST" >
current time is 11:32 AM</p>
<p>add <input type="text" name="T1" size="5" value="20"> mins and the new time time would be <b> 11:52 AM</b></p>
<p>add  another<input type="text" name="T2" size="5" value="15"> mins and the time then changes to <b>12:07 PM</b></p>
<p><input type="submit" value="Submit" name="B1"></p>
<p><input type="reset" value="Reset" name="B2"></p>
</form>

I would like to have the new times to change dynamically as they type in either (or both) input boxes

Adding Javascript To A Link

Similar Tutorials

View Content

I have a simple problem. I want to add the current page's url to a link, like this:
<code>
<a href="http://www.somesite.com/somepage.aspx?a=">
</code>
After the 'a=' I need to add javascript that will return the current url. It can be the full url (example: http://www.codingforums.com/newthrea...=newthread&f=2) or a partial one (example: /newthread.php?do=newthread&f=2).

Can someone help me with an example?

Adding Tables With Javascript

Similar Tutorials

View Content

How can I build a table that prompts user for number of rows and then number of columns and then builds it based on user input?

Adding Forms In Javascript?

Similar Tutorials

View Content

I have found a code to help me learn how to add forms in javascript, but it's limited to text input forms.

Code:

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>

Where the inputs sum1 and sum2 are text fields you put whatever numbers you want in. That works fine. Great.

Now what I'm having trouble with is modifying the code so that it will add one form with an input number with a form that spits out a randomly generated number.

Code:

<input type="button" value="D20" onclick="this.form.display.value = Math.round (20 * Math.random())" class="buttonHi" />&nbsp; <input name="display" type="text" size="6" value="" />

This is what I'm using for my random number generator. So basically I want to be able to put, say, 5, into the input text field above this. And then click on the d20 button to get a random number, say, 15, and then have the first code add the inputted 5 with the randomly generated 15. Is this possible?

Adding Javascript Into Iframe

Similar Tutorials

View Content

hi,
Guys can u help me currently iam running clicksor ads on my blog but its decrease page load time and page stuck where javascrip is located can u help me . how can i put this javascript in iframe so that this javascript loads but never stuck the page thanx

Regards
Fawad

Adding A Timed Delay In Javascript

Similar Tutorials

View Content

Hi, im fairly new at all this, so please forgive me if I have misunderstood the guidelines on posting threads for this topic.

Im needing some help with adding a timed delay for a widget I have on my website.

My website is hosted on moonfruit, a flash based web builder, its very beginners level, and so this makes me feel like the new kid at school posting on this forum.

however moonfruit does have a HTML/JavaScript snippet

Which allows me to paste in code and show the cooliris gallery

But is has become crucial to my websites completion that this widget must have a timed delay on it

ive been at google for days till the point where im seeing the same pages again, and have come across setTimeout, unfortunately that's as far as I can seem to go, ive tried pasting in the code in numerous places and I just cant get it to work, i have pasted in other JavaScript codes, and they have worked, so i am convinced that its just me being a noob, other than it being a limitation on moonfruit

I would appreciate any help with this

Here is the code that im trying to get a delayed time of 10 seconds or so.

[CODE]
<object id="o" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="845" height="350"><param name="movie" value="http://apps.cooliris.com/embed/cooliris.swf"/><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always"/><param name="flashvars" value="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true"/><embed type="application/x-shockwave-flash" src="http://apps.cooliris.com/embed/cooliris.swf" flashvars="style=dark&backgroundColor=#0d0d0d&feed=api://www.flickr.com/?user=41683862@N04%26album=72157622009594203&glowColor=#FFFFFF&showSearch=false&showEmbed=false&show Tutorial=true&showChrome=true" width="845" height="350" allowFullScreen="true" allowScriptAccess="always"></embed></object>
[CODE]

Again any help is most appreciated

Adding Forms To My Shoppingcart Javascript

Similar Tutorials

View Content

Hello all!

I am using 'simplecartjs' as a simple shopping cart for my website. To checkout, the user e-mails me his cart containts. I would like to have his name, email and adress with this but i'm unable to add this to my shopping form.

Here is my JS:
Code:

	me.emailCheckout = function() {    

    itemsString = "";
    for( var current in me.items ){ 
        var item = me.items[current];
        itemsString += item.name + " " + item.quantity + " " + item.price + "\n";
    }   

    var form = document.createElement("form");
    simpleCart.empty();
    form.style.display = "none";
    form.method = "POST";
    form.action = "sendjs.php";
    form.acceptCharset = "utf-8";
    form.appendChild(me.createHiddenElement("jcitems", itemsString));
    form.appendChild(me.createHiddenElement("jctotal", me.total));
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

And here is the PHP that sends is (sendjs.php):

Code:

<?php
    $to      = 'info@kheuning.nl';
    $subject = 'the subject';
    $jcitems = $_POST['jcitems'];
    $headers = 'From: webmaster@example.com' . "\r\n" .
               'Reply-To: webmaster@example.com' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
    mail($to, $subject, $jcitems, $headers);
    Header('Location: thankyou.html');
?>

I understand how to add variables to send in my php form, but it doesn't take normale html form input's i add to the page. How can i add these to the js?

Thanks in advance!

Jonas

Problem Adding Another Menu In Javascript

Similar Tutorials

View Content

Hi,

I have this design, where the menu is a JavaScript that makes the content page flow in from the right. As a standard there are only 4 menu objects, but I need a fifth one.

I have tried to add another myself, and change everything i thought important in the javascript.js, but it just doesn't work. The javascript screws up, so I am clearly missing something.

Therefore i'm hoping that someone inhere, can help me adding it. Below are the index, javascript and stylesheet included.

If I'm not making myself clear, please let me know and I will try to explain it better

Thanks
walkie

index.htm
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Identity</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>
<script type="text/javascript" src="javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
</head>

<body>
	<div id="leftSide">
    	<!--Site Title-->
    	<div id="title">
        	<!--Main Title-->
        	<h1><span></span>Identity</h1>
            <!--Caption/Sub Title-->
            <span class="titleSubText">the portfolio of john smith</span>
        </div>
        <div id="arrowWrapper"><div id="arrow"></div></div>
    	<div id="buttonsWrapper">
        
        	<!--About Button-->
        	<div id="aboutButtonWrapper">
            	<div class="navButton" id="aboutButton"></div>
                <div class="navCaption" id="aboutCaption">
                	<!--About Button: Label-->
                	<span class="navCaptionText">about</span><br />
                    <!--About Button: Sub-Label-->
                	<span class="navSubCaptionText">who I am</span>
                </div>
            </div>
            
        	<!--Portfolio Button-->
        	<div id="portfolioButtonWrapper">
            	<div class="navButton" id="portfolioButton"></div>
                <div class="navCaption" id="portfolioCaption">
                    <!--Portfolio Button: Label-->
                	<span class="navCaptionText">portfolio</span><br />
                    <!--Portfolio Button: Sub-Label-->
                	<span class="navSubCaptionText">my work</span>  
                </div>
			</div>
            
        	<!--Services Button-->
        	<div id="servicesButtonWrapper">
            	<div class="navButton" id="servicesButton"></div>
                <div class="navCaption" id="servicesCaption">
                	<!--Services Button: Label-->
                	<span class="navCaptionText">services</span><br />
                    <!--Services Button: Sub-Label-->
                	<span class="navSubCaptionText">what I do</span>                  
                </div>
            </div>
            
        	<!--Contact Button-->
        	<div id="contactButtonWrapper">
            	<div class="navButton" id="contactButton"></div>
                <div class="navCaption" id="contactCaption">
                	<!--Contact Button: Label-->
                	<span class="navCaptionText">contact</span><br />
                    <!--Contact Button: Sub-Label-->
                	<span class="navSubCaptionText">get in touch</span>                  
                </div>
            </div>
            
        </div>
    </div>
    
    <div id="contentPanelWrapper">
		<div id="contentPanelEdge"></div>
        
        
        <!--Wrapper That Contains 'About' Content-->
        <div class="content" id="aboutContent">
        	<!--Title-->
        	<div class="contentTitle">about</div>
            <!--Body Text-->
            <div id="aboutText">
            	<h3>Who I Am</h3><br />
            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum,
            	dolor leo sagittis nunc, at pharetra ligula urna ut ligula. Morbi ac erat ante, in feugiat libero. Quisque nec mauris neque.
            	Quisque sit amet condimentum turpis. Sed at arcu eu augue venenatis viverra. Vivamus odio nulla, facilisis et commodo at,
            	sagittis id neque.</p><br />
                <p>Nulla facilisi. Quisque non tellus justo, at tempor nisl. Fusce eleifend augue euismod sem varius
            	pulvinar. Etiam rutrum magna in quam ultrices sit amet dictum nulla commodo.</p>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Portfolio' Content-->
        <div class="content" id="portfolioContent">
        	<!--Title-->
        	<div class="contentTitle">portfolio</div>
            <!--Image Slider-->
            <div id="portfolioSlider">
            	<div id="sliderToolbar">
                	<div class="sliderButton" id="prevButton"></div>
                    <div class="sliderButton" id="nextButton"></div>
                </div>
            	<div id="imageWrapper">
            		<ul id="imgList">
						<!--Portfolio Images Go Here (See Documentation)-->
            			<li><a class="sliderImage" href="images/portfolio/img1-large.jpg"><img alt="" src="images/portfolio/img1-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img2-large.jpg"><img alt="" src="images/portfolio/img2-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img3-large.jpg"><img alt="" src="images/portfolio/img3-small.jpg" /></a></li>
                		<li><a class="sliderImage" href="images/portfolio/img4-large.jpg"><img alt="" src="images/portfolio/img4-small.jpg" /></a></li>
                	</ul>
                </div>
            </div>
		</div>
        
        
        <!--Wrapper That Contains 'Services' Content-->
        <div class="content" id="servicesContent">
        	<!--Title-->
	  		<div class="contentTitle">services</div>
            <!--Service 1 Column-->
            <div class="serviceColumn" id="serviceColumn1">
            	<h3>Identity Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 2 Column-->
            <div class="serviceColumn" id="serviceColumn2">
            	<h3>Web Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
            </div>
            <!--Service 3 Column-->
            <div class="serviceColumn" id="serviceColumn3">
            	<h3>Icon + UI Design</h3><br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius, nisi non pretium elementum, dolor leo sagittis nunc,
                at pharetra ligula urna ut ligula.</p>
       	    </div>
		</div>
        
        
        <!--Wrapper That Contains 'Contact' Content-->
		<div class="content" id="contactContent">
        	<!--Title-->
  		<div class="contentTitle">contact</div> 
      		<div id="contactFormWrapper">
            	<!--Contact Form-->
       	  		<form id="contact" method="post" action="mail.php">
           	  		<input type="text" id="name" name="name" value="name" />
              		<input type="text" id="email" name="email" value="email" /><br /><br />
              		<textarea id="message" name="message" rows="" cols="">message</textarea>
              		<input type="image" id="submit" src="images/sendButtonDis.png" disabled="disabled" />
          		</form>
                <div id="successMessage"></div>
      		</div>
  	    </div>
        
        
	</div>
        
</body>
</html>

javascript.js
Code:

numImages=0;
currentImage=1;
currentPanel="none";

$(document).ready(function(){		
						   
	// Initializes FancyBox Lightbox
	$("a.sliderImage").fancybox({
		'zoomSpeedIn':200, 
		'zoomSpeedOut':200, 
		'overlayShow':true,
		'padding':4
	});
	
	SelectButton("none");
	$("#arrow").fadeOut(0);
	
	if (navigator.appVersion.indexOf("MSIE 7.0")!=-1){
		$("input").css({"height":13});
		$("#name").css({"width":155});
	};
	
	$("#title").click(function(){
		ShowPanel("none");
	});
						   
	// Handles Formatting the Portfolio Slider
	$("#imgList").children().each(function(){
		numImages++;									   
	});
	$("#imageWrapper").css({"width":(numImages*541)});
	
	// Handles Function of the Portfolio Slider
	$("#prevButton").click(function(){
		if (currentImage==1){
			currentImage=numImages;
		} else {
			currentImage--;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
	$("#nextButton").click(function(){
		if (currentImage==numImages){
			currentImage=1;
		} else {
			currentImage++;
		};
		$("#imageWrapper").animate({"left":-((currentImage-1)*541)},500);
	});
		
	// Handles Rollover and Click For the Nav Buttons
	$("#aboutButton").mouseenter(function(){
		SelectButton("about");
	});
	$("#portfolioButton").mouseenter(function(){
		SelectButton("portfolio");
	});
	$("#servicesButton").mouseenter(function(){
		SelectButton("services");
	});
	$("#contactButton").mouseenter(function(){
		SelectButton("contact");
	});
	$("#aboutButton,#portfolioButton,#servicesButton,#contactButton").mouseleave(function(){
		SelectButton("none");
	});
	$("#aboutButton").click(function(){
		ShowPanel("about");								 
	});
	$("#portfolioButton").click(function(){
		ShowPanel("portfolio");								 
	});
	$("#servicesButton").click(function(){
		ShowPanel("services");								 
	});
	$("#contactButton").click(function(){
		ShowPanel("contact");								 
	});
	
	// Handles Contact Form Behavior	
	$("#name").focus(function(){
		$("#name").css({"background-color":"#FFFFFF"});
		if ($("#name").val()=="name"){
			$("#name").val("");
			$("#name").css({"color":"#444444"});
		};
	});
	$("#name").blur(function(){
		if ($("#name").val()==""){
			$("#name").val("name");
			$("#name").css({"color":"#888888"});
			$("#name").css({"background-color":"#ffdddd"});
		};
	});
	$("#email").focus(function(){
		$("#email").css({"background-color":"#FFFFFF"});
		if ($("#email").val()=="email"){
			$("#email").val("");
			$("#email").css({"color":"#444444"});
		};
	});
	$("#email").blur(function(){
		if ($("#email").val()==""){
			$("#email").val("email");
			$("#email").css({"color":"#888888"});
			$("#email").css({"background-color":"#ffdddd"});
		};
		if ($("#email").val().indexOf("@")==-1 || $("#email").val().indexOf(".")==-1){
			$("#email").css({"background-color":"#ffdddd"});
		};
	});
	$("#message").focus(function(){
		$("#message").css({"background-color":"#FFFFFF"});
		if ($("#message").val()=="message"){
			$("#message").val("");
			$("#message").css({"color":"#444444"});
		};
	});
	$("#message").blur(function(){
		if ($("#message").val()==""){
			$("#message").val("message");
			$("#message").css({"color":"#888888"});
			$("#message").css({"background-color":"#ffdddd"});
		};
	});
	$("#submit").mousedown(function(){
		$("#submit").attr({"src":"images/sendButtonSel.png"});
	});
	$("#submit").mouseup(function(){
		$("#submit").attr({"src":"images/sendButton.png"});	
	});
	$("#submit").mouseout(function(){
		$("#submit").attr({"src":"images/sendButton.png"});								
	});
	$("#name,#email,#message").keyup(function(){
		if ($("#name").val()!="" && $("#name").val()!="name" && $("#email").val()!="" && $("#email").val()!="email" && $("#email").val().indexOf("@")>-1 && $("#email").val().indexOf(".")>-1 && $("#message").val()!="" && $("#message").val()!="message"){
			EnableSubmitButton();
		} else {
			DisableSubmitButton();
		};
	});
	$("#submit").click(function(){
		DisableSubmitButton();
		var dataString="name=" + $("#name").val() + "&email=" + $("#email").val() + "&message=" + $("#message").val();
		$.ajax({  
			type: "POST",  
			url: "mail.php",  
			data: dataString,  
			success: function() {  
				ResetForm();
				$("#successMessage").fadeIn(10);
				setTimeout('$("#successMessage").fadeOut(1000);',2000);
			}
		});
		return false; 
	});

});

function EnableSubmitButton(){
	$("#submit").attr({"disabled":""});
	$("#submit").attr({"src":"images/sendButton.png"});
};

function DisableSubmitButton(){
	$("#submit").attr({"disabled":"disabled"});
	$("#submit").attr({"src":"images/sendButtonDis.png"});
};

function ResetForm(){
	DisableSubmitButton();
	$("#name, #email, #message").css({"background-color":"#FFFFFF"});
	$("#name, #email, #message").css({"color":"#888888"});
	$("#name").val("name");
	$("#email").val("email");
	$("#message").val("message");
};

function ShowPanel(panel){
	currentPanel=panel;
	SelectButton(panel);
	$(".content").fadeOut(250);
		switch(panel){
			case "none":
				$("#contentPanelWrapper").animate({"left":"100%"},500);
				$("#arrow").fadeOut(50)
			break;
			case "about":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#aboutContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":22},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "portfolio":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#portfolioContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":98},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "services":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#servicesContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":170},150,function(){$("#arrow").fadeIn(50)});
			break;
			case "contact":
				$("#contentPanelWrapper").animate({"left":"100%"},500,function(){
					$("#contactContent").show();
					$("#contentPanelWrapper").animate({"left":"44%"},500);
				});
				$("#arrow").animate({"top":243},150,function(){$("#arrow").fadeIn(50)});
			break;
		};
};

function SelectButton(button){
	if (currentPanel!="about"){
		$("#aboutCaption").animate({"left":50},{queue:false, duration:250});
		$("#aboutCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#aboutButton").css({"background-position":"0px 0px"});
	};
	if (currentPanel!="portfolio"){
		$("#portfolioCaption").animate({"left":50},{queue:false, duration:250});
		$("#portfolioCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#portfolioButton").css({"background-position":"0px -64px"});
	};
	if (currentPanel!="services"){
		$("#servicesCaption").animate({"left":50},{queue:false, duration:250});
		$("#servicesCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#servicesButton").css({"background-position":"0px -128px"});
	};
	if (currentPanel!="contact"){
		$("#contactCaption").animate({"left":50},{queue:false, duration:250});
		$("#contactCaption").animate({"opacity":0},{queue:false, duration:250});
		$("#contactButton").css({"background-position":"0px -192px"});
	};
	switch(button){
		case "none":
		break;
		case "about":
			$("#aboutCaption").animate({"left":70},{queue:false, duration:250});
			$("#aboutCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#aboutButton").css({"background-position":"65px 0px"});
		break;
		case "portfolio":
			$("#portfolioCaption").animate({"left":70},{queue:false, duration:250});
			$("#portfolioCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#portfolioButton").css({"background-position":"65px -64px"});
		break;
		case "services":
			$("#servicesCaption").animate({"left":70},{queue:false, duration:250});
			$("#servicesCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#servicesButton").css({"background-position":"65px -128px"});
		break;
		case "contact":
			$("#contactCaption").animate({"left":70},{queue:false, duration:250});
			$("#contactCaption").animate({"opacity":1},{queue:false, duration:250});
			$("#contactButton").css({"background-position":"65px -192px"});
		break;
	};

};

Javascript Quiz Need Help Adding The Answers. Please Help

Similar Tutorials

View Content

My code goes through the answer function (below) and it determins if you answered green. If you answered green a popup says correct other wise incorrect. How can I modify my code so that I can add multiple answers for different questions.Example
q1 answer = green
q2 answer = blue
.
.
q20 answer = Friday

Here is my .js code
Code:

var n = 16; // modify this for number of seconds to answer
document.getElementById( 'time').value = "Answer in " + n + " seconds";
var i = setInterval('count()' , 1000);
var tooLate;

function count() {
tooLate = 0;
n--;
if(n >=0) {
document.getElementById( 'time').value = "Answer in " + n + " seconds";
}
else {
clearInterval(i);

alert("Too late!");
if(document.getElementById( 'answer').value == correct){
tooLate = 1;
}
}


function answer() {

var correct = "green"; // This is the correct answer
if (tooLate == 0) {
if(document.getElementById( 'answer').value == correct) {
clearInterval(i);
alert("Right Answer with " + n + " seconds remaining");
}
else{
clearInterval(i);
alert("Incorrect! The answer was " + correct);
}
}

submitform();

//submit form
function submitform()
{
document.forms["myform"].submit();
}

}

Adding A Hyperlink To Text In Javascript

Similar Tutorials

View Content

Hey all,
I'm sure this is very basic but I'm having a hard time adding a hyperlink to text within javascript. I want to add a website link to the text 'click here' that is being displayed under the image within javascipt. I end up modifying the whole image instead, removing the javascript that displays the larger version of the image. Can anyone help me out please? Here's the coding. I'm using Dreamweaver CS5 on a PC to modify a few things and using another website building program to get the basic layout. I'm just a small business owner trying to get my website off the ground. Thanks in advance!

<div id="imCel1_01">
<div id="imCel1_01_Cont">
<div id="imObj1_01">
<a href="javascript:imShowBox('files/june2011.jpg',500,500,'Right click to print....................Click HERE for website!','IMG','t');" title=""><img src="images/p025_1_01.jpg" alt="" title="" /></a> </div>

Problems Adding Javascript To My Site

Similar Tutorials

View Content

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?

Adding A Javascript Pop Up Confirmation Before Submitting.

Similar Tutorials

View Content

Adding Flash To Html With Javascript Flashobject

Similar Tutorials

View Content

Hi everyone, I have successfully added Flash to my page but I want the flash animation to be inside the <div id="main">. For some reason when I put the <div id="flashcontent"></div> inside the main div it doesn't show up on the page. Please help. My code is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MikeJamesDesigns</title>
<link rel="stylesheet" type="text/css" href="cssEdit.css" />

<script type="text/javascript" src="js/flashobject.js"></script>

<script type="text/javascript">
var fo = new FlashObject("bannerISRAEL.swf", "animationName", "450", "60", "8", "#FFFFFF");
fo.addParam("allowScriptAccess", "sameDomain");
fo.addParam("quality", "high");
fo.addParam("scale", "noscale");
fo.addParam("loop", "true");
fo.write("flashcontent");

</script>

</head>

<body>



<div id="wrapper">

<div id="sitebranding">
</div>

<div id="navigation">
<a href="home">Home</a> | <a href="about">About</a> | <a href="news">News</a> | <a href="images">Images</a> | <a href="home">Faq</a> | <a href="contact">Contact</a>
</div>

<div id="main">

<div id="flashcontent"></div>

</div>

</div>

</body>

</html>

My css file looks like this:

#flashcontent {
position: relative;
top: 500px;
left: 365px;
width: 60px;
heightx;
background-color:red;
z-index: ;
}

Any help would be greatly aprreciated!! Thanks Mike!

Adding Tabindex With Javascript To Built Buttons

Similar Tutorials

View Content

I am trying to add tabindex values to buttons built in JavaScript as I did with accesskeys but having no luck--it disrupts my page layout. Anyone have suggestions? Here is the code I am working with:
Code:

function ObjButtonBuild() {
  this.css = buildCSS(this.name,this.x,this.y,this.w,this.h,this.v,this.z)
  this.div = '<' + this.divTag + ' id="'+this.name+'" style="text-indent:0;"></' + this.divTag + '>\n'
  this.divInt = '<a name="'+this.name+'anc" href="javascript:void(null)"'
  if(this.accessKeyValue && this.accessKeyValue!=null){
  
  	this.divInt+=' accessKey='+this.accessKeyValue+' ';
  }
  
  if( this.altName ) this.divInt += ' title="'+this.altName+'"'
  else if( this.altName != null ) this.divInt += ' title=""'
  this.divInt += '><img name="'+this.name+'Img" src="'+this.imgOffSrc
  if( this.altName ) this.divInt += '" alt="'+this.altName
  else if( this.altName != null ) this.divInt += '" alt="'
  this.divInt += '" width='+this.w+' height='+this.h+' border=0'
  if( !is.ns4 )  this.divInt += ' style="cursor:pointer"'
  this.divInt += '></a>'
}

Code:

button41 = new ObjButton('button41',null,679,0,53,32,1,54,'div')
button41.setImages('images/0807_help.jpg','images/0807_help_over.jpg','images/0807_help_over.jpg')
button41.onUp = button41onUp
button41.hasOnUp = true
button41.capture=4
button41.setAccessKey(2)
button41.setTabIndex(2)
button41.build()

Adding Background Color To A Javascript Window

Similar Tutorials

View Content

Hi

Im taking a course in web design and am working on a basic javascript page. I have a drop down box where you select a item and it opens a new window. How would I get the back ground color to be the same as the web page color (lightblue), what code would I use and where in my code would I put it?

[CODE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>MEG</TITLE>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</SELECT>

</HEAD>
<BODY onFocus="closeAllwindows();" bgcolor="lightblue">
<DIV ALIGN="center">

<H2>Meg</H2>
<HR>
<FORM NAME="prodForm">
<TABLE WIDTH="100%">
<TR>
<TD WIDTH="50%" ALIGN="right">
<SELECT NAME="itemName">

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</SELECT>
<TD>
<INPUT TYPE="button" VALUE="Get Info"
onClick="
var i = document.prodForm.itemName.selectedIndex;
products[i].displayOne();">
<TR><TD ALIGN="right">
<TR><TD colspan="2" ALIGN="center"> 
<TR><TD colspan="2" ALIGN="center">
<INPUT TYPE="button" VALUE="Show All Products" onClick="showAll();">
</TABLE>
</FORM>
<img src="images/meg1.jpg" "alt="Meg" border="2"/>
</DIV>
</BODY>
</HTML>

[CODE]

Thanks and hope someone can help

Claire

Adding Javascript To A Webpage Inside A Iframe?

Similar Tutorials

View Content

Alright so I've been teaching myself php/javascript/html/joomla for the past couple weeks, learning as i go along. So bear with me if i seem like a total moron =p.

I'm trying to run a script from a js file to add javascript to the website inside the iframe. I also would like the script to only be activated onclick(this is all in an article).

To clarify my website has an iframe and this iframe contains a webpage from http://website987.com/. I want to run thescript.js on the website inside that iframe, to add javascript to that website, however i also only want to run this js file on the click of a link/button. I hope i'm being clear if I'm not please tell me and ill try to reiterate.

I've been trying to get this to work for a while now and I feel like this is really simple and I'm asking a stupid question. However this is what I've got so far, currently this just redirects the iframe to the URL with my code on it(instead of actually running it).How could i edit this/what coding could I use to make it so thescript.js actually runs instead of it being just redirected?
Reply With Quote

Code:

<?php
$filename = 'thescript.js';
$path = '/media/system/js/'; // add the path parameter if the path is different than : 'media/system/js/'
JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded
?>

Code:

<HTML>
<HEAD>

<script language="javascript">
function loadOne()
{
parent.FRAME1.location.javascript: function('/media/system/js/thescript.js')
}
</script>
</HEAD>
<BODY>

<iframe name="FRAME1" src="http://website987.com/" width="740" height="500" frameborder="0" scrolling="yes"></iframe>

<a href="javascript:loadOne()">Click Here/a>
</BODY>
</HTML>

Am i even on the right track? I've been testing out a billion different codes and I think it would be ridiculous to post them all so I was hoping someone could help me fix this code or at least point me in the right direction. I'm usually able to figure everything out on my own but I'm failing atm and I just need help on this one thing, I would be ever so thankful for any assistance provided, !

(BTW I'm also currently using the Joomla CMS and a joomla plugin called CodeMirror that runs your code directly from the article, not sure if this is relevent or not)

Need Help Adding Fade Effect To My Javascript Slideshow

Similar Tutorials

View Content

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

</script>
</head>

<body>
<img src="images/slideshow/image001.jpg" name="slide">

<script type="text/javascript">

</script>
</body>
</html>

Adding An Additional Element To A Javascript Function

Similar Tutorials

View Content

Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event.

It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it.

I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event.

Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch.

I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled).

Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)?

Code:

/*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/

### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
	wp_enqueue_script('jquery');
}


### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
	// Variables
	$post_id = get_the_id();
	
	// Extract ShortCode Attributes
	extract(shortcode_atts(array(
		'type' => 'show',
		'more_text' => __('View Full Post'),
		'less_text' => __('Close Post'), 
		'hidden' => 'yes'
	), $atts));
	

	// Determine Whether To Show Or Hide Content
	$hidden_css = 'display: none;';
	if($hidden == 'no') {
		$hidden_css = 'display: block;';
		$type = 'hide';
		$tmp_text = $more_text;
		$more_text = $less_text;
		$less_text = $tmp_text;
	}

	// Format HTML Output
	$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';	
	$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
	
	
	return $output;
}


### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
	echo '<script type="text/javascript">'."\n";
	echo '/* <![CDATA[ */'."\n";
	echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
	echo '/* ]]> */'."\n";
	echo '</script>'."\n";
}