JavaScript - Jquery Ui - Button Has No Rollover Style?!

hi
anyone know how to style the dojo button cause i declare the button it appear but i cannot use the style:"border:0px; background-color: black;"

this is how i declare my dojo button

var forward = new dijit.form.Button({
style: "border:0px;background:black;",
label: "NEXT"

});

Please help me with this !!!
Please Reply ASAP!!!
Thanks
p.s if can show me some sample

ok, I am using jQuery UI http://jqueryui.com

I have it all working but I wanted to style my form button

I am using this:

Code:

<button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">A button element</span></button>

that styles it, but doesn't work as I need it to be a form button?!

Please help?!

thanks

Hi all,

I'm trying to hide a form button in javascipt.
Within a function I have the following ...

Quote:
document.getElementById(button).display='none';
However it just errors and says button is undefined. button is the id and name of the form button btw.

Do I need to define which form it is part of or something else?

Many thanks for any pointers or help.

Sir P

I have three divs, Step 1, Step 2, Step 3.
I'm trying to get it so when a person clicks the Facebook Like, the style changes to none and Step 2 is revealed and when the Facebook Share is clicked, the Step 3 is revealed. But when I like the first thing, it doesn't change to Step 2.

Any thoughts?


Code:

       <div id="Step1"><table border="0" width="630" height="174" background="images/step1-2.jpg"><tr><td valign="top" align="left" style="padding-left: 215px; padding-top: 80px"><br />
       <iframe src="http://www.facebook.com/plugins/like.php?href=LINKHERE&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35" scrolling="no" action="like" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>
       <br />
       
       </tr></td></table></div><div id="Step2" ><table border="0" style="display: none" width="630" height="174" background="images/step2-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 82px"><br />
           <a name="fb_share" type="button" share_url="LINKHERE"></a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
        type="text/javascript">
        </script>
        <br />
        
        </tr></td></table></div><div id="Step3" style="display: none"><table border="0" width="630" height="174" background="images/step3-2.jpg"><tr><td valign="top" align="left" style="padding-left: 210px; padding-top: 72px"><br />
        <center><a href="LINKHERE">Download Here</a>
        </center></tr></td></table></div><br />
       
<script type="text/javascript">
window.fbAsyncInit = function() {
   FB.init({appId: 'ID HERE', status: true, cookie: true, xfbml: true});
   FB.Event.subscribe('edge.create', function() {
      document.getElementById('Step1').style.display = 'none';
      document.getElementById('Step2').style.display = 'block';
      document.getElementById('Step3').style.display = 'none';
setTimeout('document.getElementById(\'Step1\').style.display = \'none\';document.getElementById(\'Step2\').style.display = \'none\';document.getElementById(\'Step3\').style.display = \'block\';', 7000);
   });
};

(function() {
   var e = document.createElement("script");
   e.type = 'text/javascript';
   e.src = document.location.protocol + "//connect.facebook.net/en_US/all.js"; 
   e.async = true;
   document.getElementById("fb-root").appendChild(e); 
}());
      
      </script>

Hi there,

I am totally new to jquery and did manage to design a form and check fields on values (with a little help) with jquery. Now i also have 2 radio button options (gender), and at least 1 need to be checked. So i would like to validate this too before the form will be sent.

Here is my validation now, without the radio funtion:
Code:

  //ckeck if inputs aren't empty
		var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
        var fields = $('#first_step input[type=text], #first_step textarea');
        var error = 0;
        fields.each(function(){
            var value = $(this).val();
              if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='Email' && !emailPattern.test(value) ) ) {
                $(this).addClass('error');
                     
                error++;
            } else {
                $(this).addClass('valid');
            }
        });  

		//check radio buttons
Here my radio buttons check

Does anybody know how to check if someone has filled in their gender? My radio group name ="gender". Furthermore if no radio button has been selected I would (really) like that the text within the spans, below, lights up red:

Code:

<div><label><span>Male</span><input type="radio" name="gender" id="Male" /><span>Female</span><input type="radio" name="gender" id="Female" /></label></div>

If someone could help me out with this, u would really make my day! Tried a lot, but can't figure it out..
Thanks a lot for your time.
Kind regards,
Robbert

Hi everyone,

I currently use javascript in an anchor tag to submit a form using
Code:

<a href="#" onClick="document.myformname.submit(); return false;">Submit</a>

The only problem is, JQuery doesn't acknowledge that my form has been submitted.

Has anyone come up against this problem before? If so, can you please share your work around?

Thank you!

B

Dear All,

The things needs to be work like if I click one of the NA radio button all other radio buttons and comments ,text box, span text needs to be disabled. But the code used below is disabling all the fields. Also if first question NA radio button is clicked first question all other fields should be disabled and shown with red color. If I click on the 2nd question first question fields needs to be enabled and only 2nd question needs to be enabled. The questions will be dynamically loaded based on some other conditions. I am stuck with something on the below. Could you please help to achieve the below concept?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>

<script language="javascript">
function enable_text(status)
{
status=status;
var form = document.forms[0];
var rads = form.elements.radio1;
for (var i=0; i < rads.length; i++)
{
var color = rads[i].checked? "red" : "";
document.getElementById("check"+i).style.backgroundColor = color;
document.getElementById("check"+i).disabled = status;
}
}
</script>
<body onload=enable_text(false);>
<div>
<form name="form1" method="post" action="">
<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td class="PortletText1" nowrap><strong>ALL Data</strong></td>
<td class="PortletText1" nowrap><strong>YES</strong></td>
<td class="PortletText1" nowrap><strong>NO</strong></td>
<td class="PortletText1" nowrap><strong>N/A</strong></td>
<td class="PortletText1" nowrap><strong>Comments</strong></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 1:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check0"/></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check1" /></td>
<td class="PortletText1" nowrap>
<input type="radio" name="radio1" id="check2" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text0" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 2:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check3" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check4" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check5" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text1" name="other_text"/></td>
</tr>
<tr>
<td class="PortletText1" nowrap>Data 3:</td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check6" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check7" /></td>
<td class="PortletText1" nowrap><input type="radio" name="radio1" id="check8" onClick="enable_text(this.checked)" /></td>
<td class="PortletText1" nowrap><input type="text" id="other_text2" name="other_text"/></td>
</tr>
<tr>
</div>
</form>
</body>
</html>
</body>
</html>



thanks in advance.

Regards
sona

Hey guys,

Lookin' for a little help, not sure if it can even be done? hopefully someone has the answer.

I'm trying to design myself an online portfolio; here's what I got so far...

http://www.gregorymstevens.com/testsite/site.html

As you can see my navigation is represented by each bird on the tree (every bird is a link), when you rollver one of the green birds they turn white, however, I am looking to not only have the green bird rollver to white but ALSO have the "choose a" image on the bottom right change to the corresponding page.

For instance, when the mouse rolls over a bird-- this image:



will turn into this image:



while maintaining the original "white bird" rollover.



Hopefully I'm explaining this correctly -- Any help greatly appreciated!

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

if I have an html page that uses the <style> or a <link> to call a style sheet these properties aren't available to JavaScript is there a good way to access them?
eg
Code:

<html>
<head>
	<title>expandable text area</title>
	<style type="text/css">
		#expandable{
			height: 100px;
		}
	</style>
	
</head>
<body>
<form>
	<textarea id="expandable" cols="30" rows="10"></textarea>
</form>
</body>
<script type="text/javascript">
	document.getElementById('expandable').addEventListener('click',function(){
		
		if(!this.style.height){
			this.style.height = this.scrollHeight+'px';
		}
		alert(this.style.height);
	}, true);
</script>
</html>

In this example I have the height set but I cannot access it since it is not declared in the style attribute of the html element

var s="attr"
var i=$(s)
// jQuery(elem).attr(attr,eval("elm"+attr));
jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this.

how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem".

Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this.

I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image)

I do not know how to achieve this but shouldnt be too hard.

Here are the two sources you will need to look through to help me fix the forum.

http://neoweather.com/FWFORUM.JS
http://static.websimages.com/JS/fw.js

THANKS