|
JavaScript - Showing An Image Inside Content Area Of Accordion?
Hi, I've create a jquery accordian using the code provided in the main accordian page. It all works brilliantly, except when I try to show an image that will link to another page, the image does not show.
For example, In one of the accordion content areas, the code shows: Code: <div> <h3><a href="#">How can I get a price quote?</a></h3> <div>Simply click on the button below to open up Power Image's all-inclusive Quick Quote tool, then follow the prompts to enter your style, color, ink colors, and quantity. <img src="images/quote.png" width="100" height="30">When you're done, click "Total" to see your all-inclusive price! Additionally, once you get a quote in the Design Center, your price quote updates live under your design as you create.</div> </div> When clicking on the header to open the content however, the image does not show. I have checked the location of the image multiple times, and it is right. There isn't even a broken image that shows where the image should be. What code do I need to add to allow images to be inside the content area of accordions? Similar TutorialsHi, I am working in Dreamweaver CS4 with both HTML and Javascript. I created a preview area and some thumbnails beneath. Each thumbnail is linked to a full size image. So far, so good. I'm attempting to follow a Javascript tutorial to make a lightbox. I added CSS rules and the javascript code (below) in the hopes of having my thumbnail show the image in the clickable preview area when hovering. However, my fullsize image does not display in the preview area. Interestingly, when I hover over the preview, I see at the bottom of my browser that it is still linked, just not displaying. The preview area is blank. Any ideas? I've put the site online artmarcsimon dot com Thanks! Javascript: Code: $(document).ready(function(){
$('.gallery_thumbnails a').click(function(e){
e.preventDefault();
$('.gallery_thumbnails a').removeClass('selected');
$('.gallery_thumbnails a').children().css('opacity','1');
$(this).addClass('selected');
var photo_caption = $(this).attr('title');
var photo_fullsize = $(this).attr('href');
var photo_preview = photo_fullsize.replace('_fullsize','_preview');
$('.gallery_preview').html('<a href="'+photo_fullsize+'" title="'+photo_caption+'" style="background-image:url('+photo_preview+');"></a>');
});
});
<area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout()"> <area shape="rect" coords="7,24,154,40" href="javascript:triggerCheckout();"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout()"> <area shape="rect" coords="7,24,154,40" onClick="triggerCheckout();"> None of these works. Why not? How can i link this hotspot area with a javascript function? udayanga0727@yahoo.comI need to a code to do the following. There is a Text Area that user can enter text. assume that user enter something and put a dot Following values should be populate in a drop down at the place where dot locate . -Hello -Hi _Test like when we get the string object using Net Beans IDE and when we put "Object." , drop down will be displayed with available methods for that particular object. idea is to build a editor using java script. can any one help me on this? Hey there everybody, Seems I need help again. Still trying to learn the ways of the javascript. So here is my dilemma: I have a text field and some buttons below it. When I click on the button it insert the text for it into the text field. However, in order for that text to display in the text field a second time in a row I have to click on the text field and then click on the button again. What I would like to be able to do is to click on the button several times in a row so that it inserts the text again and again without having to click on the text field to reselect it. What's wrong with this script that is causing it to work that way? What can I do to fix it? By the way, I will be coupling this code with a popup code. The popup code, which works perfectly fine, has buttons in it as well and insert that text into the main window text area repeatedly. I just need some buttons on my main window that do the same thing. I hope the explanation makes sense. With all of this playing around, I know I'll get the hang of it eventually. I hope. . . Any help is greatly appreciated. Code: <html>
<script type="text/javascript">
function insert(el,ins) {
window.lstText={};
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) + el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<body>
<form>
<textarea rows="20" cols="100" name="txt1" onfocus="window.lstText=this;">
This is sample text, click anywhere in here then
choose on of the buttons above to see text inserted.
</textarea><br /><br />
<input type="button" value="Hi" onclick="insert(window.lstText,'Hi')">
<input type="button" value="Bye" onclick="insert(window.lstText,'Bye')">
<br />
</form>
</body>
</html>
Hi, I wish to get the content inside a td-tag and use with JS operators. This is my source. Code: <style>
#a {
display : none;
}
</style>
<table>
<tr id="field_id-6">
<td valign="top" width="50%" style="text-align:right;">
<span style="color:#333333;">Number</span>:
</td>
<td valign="top" width="50%" style="text-align:left; overflow:hidden;">
<div class="field_uneditable">120</div>
</td>
</tr>
</table>
<img src="../image.png" id="a">
<script>
var x= ;
if(x>49) {
document.getElementById("a").style.display = "block";
}
</script>
So I need to indicate x as the number 120. But I can't just write 120 beside x, because 120 will change to a new number. I am using this JQuery tabbed viewer - http://flowplayer.org/tools/demos/tabs/skin4.htm on my home page: http://billboardfamily.com/?theme=DeepFocus The issue I am having is that the content on the "Photos" tab is not showing at all. In the "Blog" tab, I am calling some PHP code & it works fine, so that should be the case with the code called in the "Photos" tab, as well, but it's not working. Can anyone help me figure out why? Here is the source code for my home page (the tabbed area) Code: <!-- BEGIN main blog content -->
<?php
$lastposts = get_posts('numberposts=1&category=15');
foreach($lastposts as $post) :
setup_postdata($post);
?>
<div id="mainblog" style="margin-top: 15px;">
<div class="mainblog-content">
<?php endforeach; ?>
</div>
<!-- start tabs-->
<div id="panes">
<div>
<p>
<h2 style="color:#000000;"><a style="color:#000000;" href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
It is 515 feet tall with 38 stories. Severud Associates were the structural engineering consultants. It stands as one of the finest examples of the functionalist aesthetic and a masterpiece of corporate modernism. It was designed as the headquarters for the Canadian distillers Joseph E. Seagram's & Sons, thanks to the foresight of Phyllis Lambert, the daughter of Samuel Bronfman, Seagram's CEO.
</p>
</div>
<div>
<p>
<div id="portfolio-items" class="clearfix">
<?php $allCats = get_categories();
$blogCats = array();
$blogcat = get_cat_ID(get_option('deepfocus_blog_cat'));
foreach ($allCats as $category) {
if (in_subcat($blogcat, $category->cat_ID)) $blogCats[] = $category->cat_ID;
}
$args = array('category__not_in' => $blogCats,
'showposts' => get_option('deepfocus_portfolio_number'));
$i = 1;
query_posts($args);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . '/includes/gallery.php'); ?>
<?php $i++; endwhile; endif; wp_reset_query(); ?>
<div class="clear"></div>
<a href="<?php echo(get_category_link(get_cat_ID(get_option('deepfocus_portfolio_cat')))); ?>" class="readmore entergallery"><span><?php _e('Enter The Gallery','DeepFocus'); ?></span></a>
</div> <!-- end #portfolio-items -->
</p>
</div>
<div>
<p>
Contests & Specials use custom fields
</p>
</div>
<div>
<p>
Connect on Facebook, etc use custom fields
</p>
</div>
<div>
<p>
Comments
</p>
</div>
<div>
<p>
<a href="http:www.billboardfamily.com/rss">Subscribe To Our Blog</a> <br />Also, add mailing list here
</p>
</div>
<div class="clearfix"></div>
</div>
<br clear="all" />
<!-- navigator -->
<div id="nav">
<ul>
<li class="button-1">
<a href="#1">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Blog</strong>
</a>
</li>
<li>
<a href="#2">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Photos</strong>
</a>
</li>
<li>
<a href="#3">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/>
<strong>Contests & Specials</strong>
</a>
</li>
<li>
<a href="#4">
<img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />
<strong>Connect</strong>
</a>
</li>
<li>
<a href="#5">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Comments</strong>
</a>
</li>
<li>
<a href="#6">
<img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
<strong>Subscribe</strong>
</a>
</li>
</ul>
</div>
<br clear="all" />
<!-- end tabs-->
<!-- END main blog content -->
The same code is used below the tabs, and it works there....so it has something to do with the tabs. Please help. thanks Hello: I have a bit of an interesting delima: I have a form with select box which is dynamically db populated and based on the first selection, additional data populates two other linked boxes (a input and a textarea). This process happens in a table row. here is the source code of the selection process: PHP Code: <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange="switch_select(); switch_text();"> <option>-- Select an Item --</option><option>5 A Series Blades</option><option>Balls</option><option>TT Tables-Mini</option><option>Bottle Water</option><option>TT Tables -- Reg</option><option>Gatorate</option><option>Blade combo</option><option>Membership Renewal</option><option>1 hr Private Lesson (Adlt)</option><option>1 hr Private Lesson (Chld)</option><option>Group Lesson (Adlt)</option><option>Group Lesson (Chlidren)</option><option>Membership (Couples-2)</option><option>Membership (Family -Up 4)</option><option>Robot Play</option><option>Gift Certificate</option><option>Gift Card Add Value</option><option>Club T-Shirts</option><option>Member Credit</option><option>Other</option><option>Rubber - 1615 PIPS </option><option>Rubber -Volant 3</option><option>6 A Series Blades</option><option>Blades Only -China QI</option><option>Blades Only -CQ 1</option><option>Ross-Action Blade</option><option>Ross-Classic Blade</option></select> </td> <select name='select_2' onChange="switch_text();" style='display:none' disabled='true'> <option>You need to select a category</option> <option></option> <option></option> </select><td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td> <td valign='top' width='17%'><input type='text' name='qty' class="qty" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> <td valign='top' width='17%'><input type='text' name='cost' class="cost" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> </tr> The user has the option of adding an additional row which is similarily structured to give the user the option of selecting a different item (with its description an price) for each row. Now here is the problem; the adding row mechanism is done with ajax using the following code: PHP Code: $('#addrow').click(function(){ $('.item-row:last').after('[COLOR="Red"]//INSERT THE CONTENT OF THE PHP HERE//[/COLOR]'); if ($('.delete').length > 0) { $('.delete').show(); } bind(); }); I want to insert the content of an external php file containing the dynamic linked field into the ajax above in the section outlined in red. Sorry for the long post... here is the external php file: PHP Code: <?php echo" <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script> <script language='JavaScript'> ";?> var num_of_cats = 17; // This is the number of categories, including the first, blank, category. var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no. <?php include '../datalogin.php';// make sure this is available to make connection to db $result = mysql_query("SELECT * FROM products"); echo "var option_array = new Array(num_of_cats);"; $count=1; echo"option_array[0] = new Array(\"Please Select a Merchandise\");"; while($row = mysql_fetch_array($result)) { echo"option_array[".$count."] = new Array(\"--select One--\",\"\",\"\");"; $count++; } $result2 = mysql_query("SELECT * FROM products"); echo"var text_array = new Array(num_of_cats);"; $count=1; echo "text_array[0] = new Array(\"Please Select a Merchandise\");"; while($row_1 = mysql_fetch_array($result2)) { echo "text_array[".$count."] = new Array(\"".$row_1['product_desc']."\");"; $count++; } $result3 = mysql_query("SELECT * FROM products"); echo "var text_array2 = new Array(num_of_cats);"; $count=1; echo "text_array2[0] = new Array(\"Please Select a Merchandise\");"; while($row_2 = mysql_fetch_array($result3)) { echo "text_array2[".$count."] = new Array(\"".$row_2['unit_cost']."\");"; $count++; } ?> <?php echo" var options = 0; function switch_select() { for (loop = window.document.PaymentForm.select_2.options.length-1; loop > 0; loop--) { window.document.PaymentForm.select_2.options[loop] = null; } for (loop = 0; loop < option_array[window.document.PaymentForm.select_1.selectedIndex].length; loop++) { window.document.PaymentForm.select_2.options[loop] = new Option(option_array[window.document.PaymentForm.select_1.selectedIndex][loop]); } window.document.PaymentForm.select_2.selectedIndex = 0; } function switch_text() { window.document.PaymentForm.mytextarea.value = text_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; window.document.PaymentForm.cost.value = text_array2[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; //window.document.PaymentForm.gift_card.value = text_array3[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; //window.document.PaymentForm.qty.value = text_array4[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex]; } function box() { if (window.document.PaymentForm.select_2.selectedIndex == 0) { alert(\"Sorry, you have to select an item\"); } else { if (open_in_newwindow==1) window.open(url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex],\"_blank\"); else window.location=url_array[window.document.PaymentForm.select_1.selectedIndex][window.document.PaymentForm.select_2.selectedIndex] } } function set_orig() { window.document.PaymentForm.select_1.selectedIndex = 0; window.document.PaymentForm.select_2.selectedIndex = 0; } window.onload=set_orig </script> "; include '../datalogin.php'; $get_products = "select id as id_num, items as display_name2 from products order by id_num"; $get_products_res = mysql_query($get_products) or die (mysql_error()); if (mysql_num_rows($get_products_res) < 1) { // no records $display_block .="<p><em>Sorry, no records to select</em></p>"; } else { echo" <form name='PaymentForm' onSubmit='return false;'> <tr><td><select name='select_1' style='width:200px; color:#003399; text-align:center; font-size:1em' onChange=\"switch_select(); switch_text();\"> <option>-- Select an Item --</option>"; while ($recs2 = mysql_fetch_array($get_products_res)) { $id_num = $recs2['id_num']; $display_name2 = stripslashes($recs2['display_name2']); //$display_block .= "<option value=\"$id_num\">$display_name2</option>"; echo "<option>$display_name2</option>"; } } echo "</select> </td>"; echo " <select name='select_2' onChange=\"switch_text();\" style='display:none' disabled='true'> <option>You need to select a category</option> <option></option> <option></option> </select>"; echo"<td><textarea name='mytextarea' rows='2' cols='40' class='expand10-1000' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></textarea><td> <td valign='top' width='17%'><input type='text' name='qty' class=\"qty\" size='3' maxlength='3' value='' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> <td valign='top' width='17%'><input type='text' name='cost' class=\"cost\" size='6' maxlength='6' value='0.00' class='combo3' rel='code_id' title='' style='color:#003399; text-align:left; font-size:1.1em; border-left: none; border-right: none; border-bottom: none'></td> </tr> </form>"; ?> I hope this is doable and that I have describe my intention properly. Any thoughts would be appreciated! Mossa I have an image map with 6 areas. Code: <p class="center"><img src="images/car_feature.png" alt="" usemap="#car"/></p> <map id="car" name="car"> <area shape="rect" coords="172,198,195,222" href="#" alt=""/> <area shape="rect" coords="242,79,266,104" href="#" alt=""/> <area shape="rect" coords="293,124,317,149" href="#" alt=""/> <area shape="rect" coords="407,212,431,227" href="#" alt=""/> <area shape="rect" coords="430,300,453,325" href="#" alt=""/> <area shape="rect" coords="565,346,588,370" href="#" alt=""/> </map> I also have 6 DIVs that are hidden and only a single one will appear visible on mouseover of its corresponding image map area. Code: <div id="hidden"> <div class="feature"> Feature 1 </div> <div class="feature"> Feature 2 </div> <div class="feature"> Feature 3 </div> <div class="feature"> Feature 4 </div> <div class="feature"> Feature 5 </div> <div class="feature"> Feature 6 </div> </div> The roadblock I'm running into is the show function in the JavaScript. Code: window.onload = init;
function init() {
var area = document.getElementById("car").getElementsByTagName("area");
var features = document.getElementById("hidden").getElementsByTagName("div");
hide();
function show() {
for(a=0; a < area.length; a++) {
if(area[a].onmouseover) {
document.getElementById("hidden").getElementsByTagName("div")[a].style.display="block";
}
}
}
function hide() {
for(b=0; b < features.length; b++) {
document.getElementById("hidden").getElementsByTagName("div")[b].style.display="none";
}
}
for(i=0; i < area.length; i++) {
area[i].onmouseover = show;
area[i].onmouseout = hide;
}
}
I'm trying to get it so that if I hover over the first area on the image map, the first hidden DIV will appear, but none of the others. And if I hover over the fourth area, the fourth DIV will appear. I hope this makes sense, and I'd appreciate any and all help towards solving this issue and ending my headache lol Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you Hi All, Although I have done a fair bit of html coding after taking several HTML courses, I have never become involved in JavaScript beyond adding the occasional pre-made script for a particular function. Which is what I am trying to do at the moment. I want to insert a slide show into a page and have tried 2 scripts from Java Kit Scripts. Both are similar and I am having the same problem with both. The problem: Inserting the image path. They both ask for the image path (naturally) and give the following examples: =========================== Example 1: //configure the paths of the images, plus corresponding target links slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg") ============================ Example 2: //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['dinosour.gif', '', ''] ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new'] ============================= But there is no reference to an "image" folder. I have tried inserting the folder name: "images/iss-bunker-1tn.jpg", I have also tried leaving the word "images" out and also tried saving the related images in the same folder as the html coded pages. I have also tried using "shtml" pages. But nothing seems to work. My lack of JavaScript knowledge is obviously the problem, but I would greatly appreciate some help. Sincerely RufusB I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me: http://bedrockstoneanddesign.com/ It only happens in FireFox..... any help is appreciated. thanks Hi, I'm stumped at the moment trying to make something a little like seen on Google Maps where you can search the location in text box and the map corresponding to the location will be dispalyed. Can any one send me the Javascript for the following in which my image is paced in an iframe and the upon entering the loaction in a textbox it image must move to that position witin the iframe. Any help will be appreciated. Regards, Sreejith Hi All, I want an accordion menu and which is as follows 1.it should be a vertical accordion menu 2.every menu should display with image and link 3.if i click on image or link then only menu should display or open to show sub menu otherwise it should not display. Please tell the solution for the above ThanksAhead Venkat Hi All, So i have been trying over the past few weeks (among other things) to get this menu figured out. I would really appreciate some advice/help/direction with this... Please see attached pic... what i have is three elements: "Home" "Services" "Contact". What i want is on page load they are all 100px wide... now whenever user hovers over an item it expands to be 200px wide while the other two shrink to 50px... remove hover they revert to original... I am not too familiar with javascript as i mainly use C# to do the tasks normally done by javascript (i work on asp.net platform)... i have presented a similar question to this in ajax section (thinkin that what i had was an ajax work around) but upon further reading of sources i think that is not really what i want... I am unsure where to begin and what to do... i know i need to set up a function and i have the math part figured out (i think)... i guess what i am really unclear as to whether this is a modification to the accordion menu frame... the issues i see are that i do not want the menu to have a traditional "content" area that collapses; i want the menu "headers" to expand... i also need them to expand horizontally not vertically... i am not looking for someone to "do this" for me; i am looking for advice and guidance... possibly a link to a tutorial? i have tried this but it does not work right... i can revisit it (possibly type-Oed something) but i havent because it is not really what i am looking for I'm creating a Jquery UI accordion and here are my customize options... http://jqueryui.com/demos/accordion/ These options do not include how to make all the accordions start off closed or choosing which one you want open as default when a user sees the page. Right now the user sees the first accordion open. I want to keep them all closed by default or have the option to have the last one open by default. Any guidance would be great... also not sure what code to post here but I guess I'll add the javaScript used to create the accordion with Jquery.... Code: /*
* jQuery UI Accordion 1.8.16
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Accordion
*
* Depends:
* jquery.ui.core.js
* jquery.ui.widget.js
*/
(function( $, undefined ) {
$.widget( "ui.accordion", {
options: {
active: 0,
animated: "slide",
autoHeight: true,
clearStyle: false,
collapsible: false,
event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even",
icons: {
header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s"
},
navigation: false,
navigationFilter: function() {
return this.href.toLowerCase() === location.href.toLowerCase();
}
},
_create: function() {
var self = this,
options = self.options;
self.running = 0;
self.element
.addClass( "ui-accordion ui-widget ui-helper-reset" )
// in lack of child-selectors in CSS
// we need to mark top-LIs in a UL-accordion for some IE-fix
.children( "li" )
.addClass( "ui-accordion-li-fix" );
self.headers = self.element.find( options.header )
.addClass( "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" )
.bind( "mouseenter.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-hover" );
})
.bind( "mouseleave.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-hover" );
})
.bind( "focus.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).addClass( "ui-state-focus" );
})
.bind( "blur.accordion", function() {
if ( options.disabled ) {
return;
}
$( this ).removeClass( "ui-state-focus" );
});
self.headers.next()
.addClass( "ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" );
if ( options.navigation ) {
var current = self.element.find( "a" ).filter( options.navigationFilter ).eq( 0 );
if ( current.length ) {
var header = current.closest( ".ui-accordion-header" );
if ( header.length ) {
// anchor within header
self.active = header;
} else {
// anchor within content
self.active = current.closest( ".ui-accordion-content" ).prev();
}
}
}
self.active = self._findActive( self.active || options.active )
.addClass( "ui-state-default ui-state-active" )
.toggleClass( "ui-corner-all" )
.toggleClass( "ui-corner-top" );
self.active.next().addClass( "ui-accordion-content-active" );
self._createIcons();
self.resize();
// ARIA
self.element.attr( "role", "tablist" );
self.headers
.attr( "role", "tab" )
.bind( "keydown.accordion", function( event ) {
return self._keydown( event );
})
.next()
.attr( "role", "tabpanel" );
self.headers
.not( self.active || "" )
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.next()
.hide();
// make sure at least one header is in the tab order
if ( !self.active.length ) {
self.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
self.active
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
});
}
// only need links in tab order for Safari
if ( !$.browser.safari ) {
self.headers.find( "a" ).attr( "tabIndex", -1 );
}
if ( options.event ) {
self.headers.bind( options.event.split(" ").join(".accordion ") + ".accordion", function(event) {
self._clickHandler.call( self, event, this );
event.preventDefault();
});
}
},
_createIcons: function() {
var options = this.options;
if ( options.icons ) {
$( "<span></span>" )
.addClass( "ui-icon " + options.icons.header )
.prependTo( this.headers );
this.active.children( ".ui-icon" )
.toggleClass(options.icons.header)
.toggleClass(options.icons.headerSelected);
this.element.addClass( "ui-accordion-icons" );
}
},
_destroyIcons: function() {
this.headers.children( ".ui-icon" ).remove();
this.element.removeClass( "ui-accordion-icons" );
},
destroy: function() {
var options = this.options;
this.element
.removeClass( "ui-accordion ui-widget ui-helper-reset" )
.removeAttr( "role" );
this.headers
.unbind( ".accordion" )
.removeClass( "ui-accordion-header ui-accordion-disabled ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
.removeAttr( "role" )
.removeAttr( "aria-expanded" )
.removeAttr( "aria-selected" )
.removeAttr( "tabIndex" );
this.headers.find( "a" ).removeAttr( "tabIndex" );
this._destroyIcons();
var contents = this.headers.next()
.css( "display", "" )
.removeAttr( "role" )
.removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-accordion-disabled ui-state-disabled" );
if ( options.autoHeight || options.fillHeight ) {
contents.css( "height", "" );
}
return $.Widget.prototype.destroy.call( this );
},
_setOption: function( key, value ) {
$.Widget.prototype._setOption.apply( this, arguments );
if ( key == "active" ) {
this.activate( value );
}
if ( key == "icons" ) {
this._destroyIcons();
if ( value ) {
this._createIcons();
}
}
// #5332 - opacity doesn't cascade to positioned elements in IE
// so we need to add the disabled class to the headers and panels
if ( key == "disabled" ) {
this.headers.add(this.headers.next())
[ value ? "addClass" : "removeClass" ](
"ui-accordion-disabled ui-state-disabled" );
}
},
_keydown: function( event ) {
if ( this.options.disabled || event.altKey || event.ctrlKey ) {
return;
}
var keyCode = $.ui.keyCode,
length = this.headers.length,
currentIndex = this.headers.index( event.target ),
toFocus = false;
switch ( event.keyCode ) {
case keyCode.RIGHT:
case keyCode.DOWN:
toFocus = this.headers[ ( currentIndex + 1 ) % length ];
break;
case keyCode.LEFT:
case keyCode.UP:
toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
break;
case keyCode.SPACE:
case keyCode.ENTER:
this._clickHandler( { target: event.target }, event.target );
event.preventDefault();
}
if ( toFocus ) {
$( event.target ).attr( "tabIndex", -1 );
$( toFocus ).attr( "tabIndex", 0 );
toFocus.focus();
return false;
}
return true;
},
resize: function() {
var options = this.options,
maxHeight;
if ( options.fillSpace ) {
if ( $.browser.msie ) {
var defOverflow = this.element.parent().css( "overflow" );
this.element.parent().css( "overflow", "hidden");
}
maxHeight = this.element.parent().height();
if ($.browser.msie) {
this.element.parent().css( "overflow", defOverflow );
}
this.headers.each(function() {
maxHeight -= $( this ).outerHeight( true );
});
this.headers.next()
.each(function() {
$( this ).height( Math.max( 0, maxHeight -
$( this ).innerHeight() + $( this ).height() ) );
})
.css( "overflow", "auto" );
} else if ( options.autoHeight ) {
maxHeight = 0;
this.headers.next()
.each(function() {
maxHeight = Math.max( maxHeight, $( this ).height( "" ).height() );
})
.height( maxHeight );
}
return this;
},
activate: function( index ) {
// TODO this gets called on init, changing the option without an explicit call for that
this.options.active = index;
// call clickHandler with custom event
var active = this._findActive( index )[ 0 ];
this._clickHandler( { target: active }, active );
return this;
},
_findActive: function( selector ) {
return selector
? typeof selector === "number"
? this.headers.filter( ":eq(" + selector + ")" )
: this.headers.not( this.headers.not( selector ) )
: selector === false
? $( [] )
: this.headers.filter( ":eq(0)" );
},
// TODO isn't event.target enough? why the separate target argument?
_clickHandler: function( event, target ) {
var options = this.options;
if ( options.disabled ) {
return;
}
// called only when using activate(false) to close all parts programmatically
if ( !event.target ) {
if ( !options.collapsible ) {
return;
}
this.active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
this.active.next().addClass( "ui-accordion-content-active" );
var toHide = this.active.next(),
data = {
options: options,
newHeader: $( [] ),
oldHeader: options.active,
newContent: $( [] ),
oldContent: toHide
},
toShow = ( this.active = $( [] ) );
this._toggle( toShow, toHide, data );
return;
}
// get the click target
var clicked = $( event.currentTarget || target ),
clickedIsActive = clicked[0] === this.active[0];
// TODO the option is changed, is that correct?
// TODO if it is correct, shouldn't that happen after determining that the click is valid?
options.active = options.collapsible && clickedIsActive ?
false :
this.headers.index( clicked );
// if animations are still active, or the active header is the target, ignore click
if ( this.running || ( !options.collapsible && clickedIsActive ) ) {
return;
}
// find elements to show and hide
var active = this.active,
toShow = clicked.next(),
toHide = this.active.next(),
data = {
options: options,
newHeader: clickedIsActive && options.collapsible ? $([]) : clicked,
oldHeader: this.active,
newContent: clickedIsActive && options.collapsible ? $([]) : toShow,
oldContent: toHide
},
down = this.headers.index( this.active[0] ) > this.headers.index( clicked[0] );
// when the call to ._toggle() comes after the class changes
// it causes a very odd bug in IE 8 (see #6720)
this.active = clickedIsActive ? $([]) : clicked;
this._toggle( toShow, toHide, data, clickedIsActive, down );
// switch classes
active
.removeClass( "ui-state-active ui-corner-top" )
.addClass( "ui-state-default ui-corner-all" )
.children( ".ui-icon" )
.removeClass( options.icons.headerSelected )
.addClass( options.icons.header );
if ( !clickedIsActive ) {
clicked
.removeClass( "ui-state-default ui-corner-all" )
.addClass( "ui-state-active ui-corner-top" )
.children( ".ui-icon" )
.removeClass( options.icons.header )
.addClass( options.icons.headerSelected );
clicked
.next()
.addClass( "ui-accordion-content-active" );
}
return;
},
_toggle: function( toShow, toHide, data, clickedIsActive, down ) {
var self = this,
options = self.options;
self.toShow = toShow;
self.toHide = toHide;
self.data = data;
var complete = function() {
if ( !self ) {
return;
}
return self._completed.apply( self, arguments );
};
// trigger changestart event
self._trigger( "changestart", null, self.data );
// count elements to animate
self.running = toHide.size() === 0 ? toShow.size() : toHide.size();
if ( options.animated ) {
var animOptions = {};
if ( options.collapsible && clickedIsActive ) {
animOptions = {
toShow: $( [] ),
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
} else {
animOptions = {
toShow: toShow,
toHide: toHide,
complete: complete,
down: down,
autoHeight: options.autoHeight || options.fillSpace
};
}
if ( !options.proxied ) {
options.proxied = options.animated;
}
if ( !options.proxiedDuration ) {
options.proxiedDuration = options.duration;
}
options.animated = $.isFunction( options.proxied ) ?
options.proxied( animOptions ) :
options.proxied;
options.duration = $.isFunction( options.proxiedDuration ) ?
options.proxiedDuration( animOptions ) :
options.proxiedDuration;
var animations = $.ui.accordion.animations,
duration = options.duration,
easing = options.animated;
if ( easing && !animations[ easing ] && !$.easing[ easing ] ) {
easing = "slide";
}
if ( !animations[ easing ] ) {
animations[ easing ] = function( options ) {
this.slide( options, {
easing: easing,
duration: duration || 700
});
};
}
animations[ easing ]( animOptions );
} else {
if ( options.collapsible && clickedIsActive ) {
toShow.toggle();
} else {
toHide.hide();
toShow.show();
}
complete( true );
}
// TODO assert that the blur and focus triggers are really necessary, remove otherwise
toHide.prev()
.attr({
"aria-expanded": "false",
"aria-selected": "false",
tabIndex: -1
})
.blur();
toShow.prev()
.attr({
"aria-expanded": "true",
"aria-selected": "true",
tabIndex: 0
})
.focus();
},
_completed: function( cancel ) {
this.running = cancel ? 0 : --this.running;
if ( this.running ) {
return;
}
if ( this.options.clearStyle ) {
this.toShow.add( this.toHide ).css({
height: "",
overflow: ""
});
}
// other classes are removed before the animation; this one needs to stay until completed
this.toHide.removeClass( "ui-accordion-content-active" );
// Work around for rendering bug in IE (#5421)
if ( this.toHide.length ) {
this.toHide.parent()[0].className = this.toHide.parent()[0].className;
}
this._trigger( "change", null, this.data );
}
});
$.extend( $.ui.accordion, {
version: "1.8.16",
animations: {
slide: function( options, additions ) {
options = $.extend({
easing: "swing",
duration: 300
}, options, additions );
if ( !options.toHide.size() ) {
options.toShow.animate({
height: "show",
paddingTop: "show",
paddingBottom: "show"
}, options );
return;
}
if ( !options.toShow.size() ) {
options.toHide.animate({
height: "hide",
paddingTop: "hide",
paddingBottom: "hide"
}, options );
return;
}
var overflow = options.toShow.css( "overflow" ),
percentDone = 0,
showProps = {},
hideProps = {},
fxAttrs = [ "height", "paddingTop", "paddingBottom" ],
originalWidth;
// fix width before calculating height of hidden element
var s = options.toShow;
originalWidth = s[0].style.width;
s.width( parseInt( s.parent().width(), 10 )
- parseInt( s.css( "paddingLeft" ), 10 )
- parseInt( s.css( "paddingRight" ), 10 )
- ( parseInt( s.css( "borderLeftWidth" ), 10 ) || 0 )
- ( parseInt( s.css( "borderRightWidth" ), 10) || 0 ) );
$.each( fxAttrs, function( i, prop ) {
hideProps[ prop ] = "hide";
var parts = ( "" + $.css( options.toShow[0], prop ) ).match( /^([\d+-.]+)(.*)$/ );
showProps[ prop ] = {
value: parts[ 1 ],
unit: parts[ 2 ] || "px"
};
});
options.toShow.css({ height: 0, overflow: "hidden" }).show();
options.toHide
.filter( ":hidden" )
.each( options.complete )
.end()
.filter( ":visible" )
.animate( hideProps, {
step: function( now, settings ) {
// only calculate the percent when animating height
// IE gets very inconsistent results when animating elements
// with small values, which is common for padding
if ( settings.prop == "height" ) {
percentDone = ( settings.end - settings.start === 0 ) ? 0 :
( settings.now - settings.start ) / ( settings.end - settings.start );
}
options.toShow[ 0 ].style[ settings.prop ] =
( percentDone * showProps[ settings.prop ].value )
+ showProps[ settings.prop ].unit;
},
duration: options.duration,
easing: options.easing,
complete: function() {
if ( !options.autoHeight ) {
options.toShow.css( "height", "" );
}
options.toShow.css({
width: originalWidth,
overflow: overflow
});
options.complete();
}
});
},
bounceslide: function( options ) {
this.slide( options, {
easing: options.down ? "easeOutBounce" : "swing",
duration: options.down ? 1000 : 200
});
}
}
});
})( jQuery );
Hello to all, I have a little problem with my accordion menu and I CRAVE for your help! I try to make this: when you visit my page I need the menu to be all collapsed. Also the history of clicks (it remembers which menus where left opened) works fine on IE but not on firefox. Here is the js code: function add_menu_event_handlers() { var elems = document.getElementsByTagName('h3'); for (i = 0; i < elems.length; i++) { switch (elems[i].parentNode.className) { /*case 'moduletable': case 'moduletable_menu':*/ case 'left_module_title': case 'left_module_title_menu': { if (elems[i].parentNode.parentNode.parentNode.id == 'xp-left') { xplike_addEvent(elems[i], 'click', function(){menu_header_click(this);}); // menu_header_click(elems[i]); //Load status from cookies and collapse if required var cookie_array = document.cookie.split(';'); for(var j=0; j<cookie_array.length; j++) { var c = cookie_array[j]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf('xplike_menu_status_' + elems[i].firstChild.nodeValue.replace('.', '_').replace(' ', '_')) == 0) { var menu_cookie = c.split('=') if (menu_cookie.length == 2 && menu_cookie[1] == '1') { menu_header_click(elems[i]); } } } } } } } } And it also has this for the history thing. function save_menu_status(menu_title, value, how_many_days) { var date = new Date(); date.setTime(date.getTime()+(how_many_days*24*60*6 0*1000)); var expires = ""; document.cookie = 'xplike_menu_status_' + menu_title.replace('.', '_').replace(' ', '_') + '=' + value + expires + '; path=/'; } It might be easy and stupid, I know, but since I'm a designer - not a developer - all look weird to me! Any thoughts? Basically I want to have a different background image for every time of the day. The function by itself works okay with onclick or onload placed in body. Code: function changesky()
{
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
What I want to do is have my background change in addition to a message. So instead of just "Good Morning" text I also want the background to change. Code: if (time>=4 && time<12)
{
document.write ("<p>Good Morning!</p>");
document.getElementById("sky").style.background="url(back_morning.jpg) repeat-x";
}
Tried this, but it didn't work so what's the format for calling a function inside of an if statement? Or what other method should I use to do this? I’m trying to implement a JavaScript that creates an accordion menu. As the script currently stands, your able to tell the first list within the menu to expand when the page loads. You do this by adding .expandfirst into the ul class tag. My question is... Does anyone know how to edit the JavaScript so that I can also tell the menu (on some pages) to expand the second or third list? I only need one list to be expanded at any one time. Here's the script... Code: function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first).show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
Hope someone can help!? |
|||||||