|
JavaScript - Jquery Ui, How To Select First Tab Automatically?
I'm no javascript expert, in fact i know very little. I Design wordpress themes in photoshop and I'm looking to add a little more "spice" to my themes using jQuery UI so i made a theme with this tabbed horizontal navigation with the sub menu showing horizontally under the menu when you hover over it.
So i searched google on how to do this jQuery menu and got this. Code:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#main_nav li a.main").hover(function(){
$("#main_nav li a.main").removeClass("active");
$(this).addClass("active");
$(this).queue(function() {
$(".sub_nav").fadeOut();
$(this).siblings(".sub_nav").fadeIn();
$(this).dequeue();
});
});
});
</script>
The other part Code: <div class="menu">
<ul id="main_nav">
<li><a href="" class="main">ALL</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">XBOX30</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">PS3</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">Wii U</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">Wii</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">PC</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">VITA</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">PSP</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
<li><a href="" class="main">DS</a>
<ul class="sub_nav">
<li><a href="">HOME</a></li>
<li><a href="">NEWS</a></li>
<li><a href="">ARTICLES</a></li>
<li><a href="">PREVIEWS</a></li>
<li><a href="">REVIEWS</a></li>
<li><a href="">MEDIA</a></li>
<li><a href="">GAME WIKI</a></li>
<li><a href="">FORUMS</a></li>
<li><a href="">SUBMIT CONTENT</a></li>
<li><a href="">Journalist Pro</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I'm needing the first tab (the "ALL" tab) to be selected by default, but i don't have the first clue on how to do this. You can paste the code in notepadd++ and you can see what i mean. Similar TutorialsHi all Just curious how I might be able to target an anchor class with jQuery. For example, If my anchor class is: #nav a.activeSlide { } How can I target it for a fadeTo() ? Not sure of the syntax. Tried variations of: $('#nav a.activeSlide').fadeTo(1000,.5); To no avail. Thanks for your help. When my page loads, it automatically jumps down as if it were jumping to a named anchor. It's more apparent on longer pages (doesn't replicate if page fills screen). Happening in Win FF/IE/Chrome Disabling stylish-select.js (from http://www.prismstudio.co.uk/2009/05...x-replacement/ where he used to allow comments but not anymore) fixes it, but I don't know enough Javascript to debug, would really appreciate if somebody could have a look. Good example at http://studiohodson.com/projects/Bea...restaurant.php Script is at http://studiohodson.com/projects/Bea...lish-select.js Thank you thank you! 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 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 chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> hello .. i have some problem while while working on a script.. i want to use confirmation() function to confirm submit button and if its true ...then submit form... else keep on same page (thats logic) am using php as server scripting .. and i wrote ..in php PHP Code: <form action="del_cat.php\" name=\"myform\" method=\"post\"> "; Delete: <input type="submit\" name=\"delete\" onclick=\"confirmation()\" value=\"Delete\" > <br> Edit:<input type=\"submit\" name=\"edit\" value=\"Edit\" > </form>"; and used a javascript in head PHP Code: <script type="text/javascript\"> function confirmation() { var r=confirm(\"Are you ready to delete?\"); if (r==true) { document.myform.submit(); } else { alert(\"check twise before submitting \") } } </script> my problem is if i click "OK" or "Cancel" both case the form is automatically submitting ... see i used PHP Code: if (isset($_POST['delete'])) { mysql_query("DELETE FROM ********* WHERE id='{$_POST['cid']}'"); } this code to invoke the function .. Is there some javascript that will make a link in a page be clicked on page load?
I have a welcome message on my site and would like to automatically hide it after several seconds. I can't find anything usable after searching over the internet. Can anyone help? Thanks in advance. How are you guys? Is there a possible thing? I've got 16 pages, one for each of 16 days. Then I've got index page. Where will be mine usual stuff but I want to add 16 visible buttons and under each button will be its content, let say for example a picture with some text. I need automatically when user open mine index for example 3rd to show 3rd picture with some text. Is that possible? To be more specific. I need some content to be automatically changed from 1st of January 2010 to 17th of January 2010. I have a lightbox pop up on my homepage. I'm curious if there's a way to automatically close the pop up after 5 seconds or so. For some readon onClose kept popping in my head, but I'm pretty sure that's not correct. Thanks. 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>Lightbox Example</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/lightbox/
jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/lightbox/
jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/lightbox/fancybox/
jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("a#onload").fancybox({
'frameHeight': 390,
'frameWidth': 640,
'hideOnContentClick': false,
'easingIn': 2000
}).trigger('click');
});
</script>
<div id="lightbox_content" style="display:none">
<div id="data">
<img src="/lightbox/donate.jpg" alt="Support Today!">
<h1>Pledge Your Support Today!!</h1>
</div>
</div>
<a id="onload" href="#data"></a>
</body>
</html>
I have this slideshow, that twirls around but i'm trying to center it within the browser so the middle picture stays in the middle and the side pictures have about a 10px padding from the browsers border. The weird thing is that it adjusts itself when you first open the link, but if you have it open and resize your browser, it won't adjust to the width. Can't figure what i'm doing wrong. I already posted in the HTML/CSS forum but nobody could help. Thanks guys. Check it out he jonathaneiger.com Hi,
I have a form in my site.when the form is submit successfully it's go to another page, which shows "submission is success".
and that page has a link to go back to a page which is viewing previously(before to form)
this is the code for it Code: <a href="javascript:history.go(-2)">Go back to previous</a> I want to know, how to go to previous page by automatically ??? this should be happen after 10 seconds! please help me.... I have 3 divs (boxes) next to each other, I can input text via a textarea to each. I need all 3 to resize - be the same size on text overflow - so if box a gets 100 lines of code and resizes, the other 2 should follow. I have written this js, and added it to the button which moves the text to the boxes (to the onclick) Code: // JavaScript Document
function adjust()
{
if (document.getElementById('section1').style.height != 380 + "px")
{
document.getElementById('section2').style.height === document.getElementById('section1').style.height;
document.getElementById('section3').style.height === document.getElementById('section1').style.height;
}
else if (document.getElementById('section2').style.height != 380 + "px")
{
document.getElementById('section1').style.height === document.getElementById('section2').style.height;
document.getElementById('section3').style.height === document.getElementById('section2').style.height;
}
else if (document.getElementById('section3').style.height != 380 + "px")
{
document.getElementById('section1').style.height === document.getElementById('section3').style.height;
document.getElementById('section2').style.height === document.getElementById('section3').style.height;
}
}
any ideas what's wrong here? |
|||||||