|
JavaScript - Not Able To Order Panels
I am using the following code to rotate my banner 3 times.
I am trying to get it to order. Ive set it up so that you can choose yes/no drop down as to whether you wnat a panel to show and I have also set it up with a drop down so you can specify 1,2,3. I want to be able to randomly change the order to say 2, 1, 3 it dosent seem to work with what I have below. Any suggestions? Code: <script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$(".ui-tabs-panel > a").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
<div id="featured" >
---------------------------------------------------------
<%
String sCount="";
String stitle = "";
String iPanels = "";
String sShowPanels = "";
String sContent="";
%>
<ul class="ui-tabs-nav">
<%
for(int i=1;i<7;i++){
sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
//out.print(requestItem.getFieldValue(iPanels) + "=" + sCount);
if(requestItem.getFieldValue(iPanels).equals(sCount)){
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes")){
if(requestItem.getFieldValue(stitle)!=null && requestItem.getFieldValue(stitle).length() >2){
%>
<li class="ui-tabs-nav-item" id="nav-fragment-<%=i%>"><a href="#fragment-<%=i%>">
<%=requestItem.getFieldValue(stitle)%>
</a></li>
<%
}
}
}
}
%>
</ul>
<%
for(int i=1;i<7;i++){
sCount="" + i;
stitle = "stitle";
stitle= stitle + i;
iPanels = "iPanels";
iPanels = iPanels + i;
sShowPanels = "sShowPanels";
sShowPanels = sShowPanels + i;
sContent = "sContent";
sContent= sContent + i;
if(requestItem.getFieldValue(iPanels).equals(sCount))
{
if(requestItem.getFieldValue(sShowPanels)!=null && requestItem.getFieldValue(sShowPanels).equals("Yes"))
{
if(requestItem.getFieldValue(sContent)!=null && requestItem.getFieldValue(sContent).length() >2)
{
%>
<div id="fragment-<%=i%>" class="ui-tabs-panel ui-tabs-hide" style="">
<%=requestItem.getFieldValue(sContent)%>
</div>
<%
}
}
}
}
%>
</div>
</div> <!--content-->
Similar TutorialsHello, I created a page which has 12 collapsible panels, each can be opened and closed independently but i would like to have one button on the page that expands all the content, for printability. Below is the section of javascript that relates to the original state of the collapsible panel. When I change the this.contentIsOpen to be true all the panels expand. I would like a way of linking this function to a button. Code: Spry.Widget.CollapsiblePanel.prototype.init = function(element)
{
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
};
Many thanks Liam http://www.mainstudio.com/ Can anyone recommend a code to create an expandable panel similar the one in this link, but one which expands and collapses horizontally as opposed to vertically? Also, to include the functionality of having content inside each panel load only after its clicked. Hola! I'll give you a little background before I ask you guys my question! I have a Header, a rectangle of 800x100 and directly below that I have Spry Collabsible panels stacked on top of each other with my menu items 'Home' 'About us' etc. My question is... does anyone know of a way I could vertically center everything on the page, so that when the panels are closed it is nicely in the centre and when you open one, the header moves up to allow room for the content and the whole thing stays vertically centered on the page. I'm guessing this will need some kind of fancy javascript to make possible. Thanks in advance for any advice you can give! Adam Hi all I have created a website http://www.clickmunki.com with a jQuery vertical panel that collapses and expands in the top left of each page. In my offline code (which I have not yet uploaded to the live site) I have set the panels to display by default so the user automatically has the information available to them on each page as they scroll through the site. My problem is that the panels are not behaving independently of each other. When one panel is collapsed then they all collapse instead of just the one that the user has clicked. This is my first attempt at using javascript and jQuery and I am not sure how to resolve this. Any assistance would be very much appreciated. This is my js: Code: $(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast"); <! panel is for the panel on the home page -->
$(this).toggleClass("active");
return false;
});
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel2").toggle("fast"); <! panel2 is for the panels in the body of the site -->
$(this).toggleClass("active");
return false;
});
Kind regards Anne I am trying to place a different google map in each tabbed of a spry tabbed panel. There is a known issue with google map V3 where the map will function properly on the default tab, but when the hidden tabs are unhidden, the map on those previously hidden tabs has centred in the very top left of the container div and only fills a small part of the container. ( www.kimholt.co.uk/locations demonstrates this, the London tab is fine, but the South West tab doesn't work properly). I have spent hours on this bug so far, and tried many fixes. The only one that has got me anywhere so far is adding [CODE] google.maps.event.addListener(map, "idle", function() {google.maps.event.trigger(map, 'resize'); }); after var map = new google.maps.Map(document.getElementById(canvas), myOptions); [CODE] This doesn't resize the map automatically, but will resize it if the map is dragged slightly by the user. It also still has the marker centred in the top left of the screen rather than the centre of the canvas. The following solutions have also been suggested: Re-centrering the map around the marker [CODE] google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); [CODE] Zooming in and out again to trigger the resize: [CODE] map.setZoom( map.getZoom() ); [CODE] Or using this to do the same thing: [CODE] this.map.setZoom( this.map.getZoom() - 1); this.map.setZoom( this.map.getZoom() + 1); [CODE] Suggested for use if there are multiple markers: [CODE] map.setZoom(map.getZoom()); map.fitBounds(bounds); [CODE] I haven't been able to get any of these to work, but I'm not sure if I am using them in the right place in the javascript, and I'm also not sure if there are any parts of this code that need amending to make them work in my particular code. How can I get the map to automatically resize when the tab is selected? How can I get the map to automatically recentre around the marker when the map is opened? Being fairly new to this I really need someone to look at my actual code and help me work out exactly what to put where, in other words assume I know nothing and will be extremely grateful for any help! Hi there! I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem: I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong. First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me. When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly. My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE] The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using: [CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities"); rs_CasteAbilities.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_CasteAbilities.gallery) { return row; } return null; } rs_CasteAbilities.filter(chooseSet); var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); rs_ProfAbility.gallery = '1'; function chooseSet(dataSet, row, rowNumber) { if (row == rs_ProfAbility.gallery) { return row; } return null; } rs_ProfAbility.filter(chooseSet); [CODE] This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help! Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he www.iotheatre.com/GoldenAgeAbilities.php -Chris Blockus I have a challenge I gave to myself. I want a script that asks me to put things in order. Say I want a quiz of family, order of age. I have a table with the left cell everybody's name I want a script where I click on a name and it moves over to the right hand cell, up top, then the next clicked named is put under it and so on until all the names are moved over. So far I have this, but I know there is a lot of room for improvment. any suggestions? <HTML> <HEAD> <TITLE>Put Bible books in proper order</TITLE> </head> <body> <h1>Hello World!</h1> <TABLE BORDER=5><TR><TD> <FORM NAME="BOOKS"> <script language="javascript" type="text/javascript"> alert('This is what an alert message looks like.'); FUNCTION TESTER() { ALERT('WORKS'); VAR GOOD=0; VAR BAD=0; if (BOOKS.FONE="A") { GOOD++; } ELSE { BAD++; }; ALERT("YOU HAVE INCORRECT"); } </script> <TABLE BORDER=0><TR><TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="Adam" NAME="GONE" onClick="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Dave" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="Kile" NAME="GTHREE" ONCLICK="javascript:TEMP.value=this.value";> <TR><TD><INPUT TYPE="BUTTON" VALUE="John" NAME="GFOUR" ONCLICK="javascript:TEMP.value=this.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="Geroge" NAME="GTWO" ONCLICK="javascript:TEMP.value=this.value;"> </TABLE> <TD VALIGN="CENTER" ALIGN="CENTER" WIDTH=30> <INPUT TYPE="BUTTON" VALUE=" " NAME="TEMP"> <TD> <TABLE BORDER=1> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FONE" ONCLICK="javascript:this.value=TEMP.value;TEMP.value=' '"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTWO" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FTHREE" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFOUR" ONCLICK="javascript:this.value=TEMP.value;"> <TR><TD><INPUT TYPE="BUTTON" VALUE="?????" NAME="FFIVE" ONCLICK="javascript:this.value=TEMP.value;"> </TABLE> </TABLE> <INPUT TYPE="BUTTON" NAME="CHECK" onClick="JAVASCRIPT:ALERT()" VALUE="CORRECT???"> </FORM> </TABLE> </BODY> </HTML> Hi their, i'm trying to create an online order page i'm having probelms calculating totals from the options not sure if i've designed it correctly i have 3 select options (with 4 different products in each) a single checkbox for another single product and a final select tag for amounts (500/1000/2500/5000) i need to assign each select option a value then * it by the amount select am i best using onchange/an array or ditching select tags for something easier any help greatly appreciated Marty Hello guys, please help me in building an order form, the details. The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price. There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box. Please help me to develop this form. Thank You hi, This is my proble, I have some controls(textbox's,dropdown's),and using javascript,tab order,when i press "Enter" key the tab order 1 is not working(The cursor is focussed in the control which is tab order is 1, not moved to tab order 2) please give a solution. NARASIMHA RAO K. Hi, I need help with my javascript codes to finish my order form. The first problem I am encountering is this: I need the quantity to appear automatically in the total quantity for sub total. how is this? I have assigned TotalQuantity.value for the quantity. Thank you. You can see the image here. http://img821.imageshack.us/i/oderform.jpg/ i noticed the majority of the time when i practice coding javascript and run it, it never runs in the order i want it to. WHY?! like for example, if i want something to happen ONLY WHEN A BUTTON IS CLICKED, it would instead happen on page load :S its soooo frustrating heres one of my practice code which illustrates this problem. This code is suppose the stretch a div only wen it is clicked on. 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>
</head>
<body>
<div id="mybutton" style="height:50px; width:50px; background-color:#C00;"></div>
</body>
<script type="text/javascript">
var left = 0;
var funct = function () {
//alert("Thank you for clicking me");
left +=10;
b.style.height = left + 'px';
if(left < 100) {
var id = setTimeout(funct, 10);
}
}
var b = document.getElementById("mybutton");
b.onclick = funct();
</script>
</html>
Hello, I have to JS scripts running on a page, one is a fading slide-show acting as a header and the other is a light-box like image gallery. When I view a picture in the "light-box" mode it sits underneath the fading slide-show and I want it to be on top of everything - much like setting the z-index in css. Although I don't think this is the way to solve this. Anyway, you can check what I'm talking about here. I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers. first snippets. HTML: Code: <!-- Row 3, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr> <!-- Row 10, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> javaScript: Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formName = formField.name;
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
// Get the Quantity
itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
// Display the total
orders.total.value = orderValue;
}
Second code: Code: <!-- Row 9, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" /> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select> R215</td></tr> Java Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formValue = formField;
// Items price extracted from name
itemPrice = formField;
// Get the Quantity
itemQuantity = formField.selectedIndex;
// Update the OrderValue
if(itemQuantity > 0) {
orderValue += itemQuantity * itemPrice
}
}
// Display the total
orders.total.value = orderValue.toLocaleString();;
}
Please help its probably something simple. Hello all, I am just starting out trying to learn javascript and I am looking for a good forum to help me get through all the roadblocks I'm sure to hit. This looks like a very active place so hopefully I'll find some good help! Right now I'm going through a tutorial series at webmonkey. Here is the lesson I am currently working on: http://www.webmonkey.com/2010/02/JavaScript_Tutorial_-_Lesson_3/#Getting_Framed At the bottom of the page they give you a homework assignment which is to re-create this page using html and javascript. This page has 2 row frames. I re-created these frames and the top frame initially has a page called "navigation" loaded and the bottom page initially has a page called "explorer" loaded. If you click the monkey image at the right in the "navigation" frame, it opens a new page called "brand" in the bottom frame. This "brand" page has the same monkey image as the "navigation" page but unlike the other monkey image, this one changes when you mouseover it. If you mouseover it again, it changes to another image, and a third mouseover brings you back to the original monkey image. If you click on one of the images, it swaps the monkey image in the "navigation" frame with that image. The idea is that you have 3 images to chose from in the "brand" page that you can designate as the logo in the "navigation" page. I have no problem re-creating this effect. Here is the code I used to re-create this: I initialized these variables in the <head> of my page: Code: <script language="JavaScript"> var temp = ""; var img1 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif'; var img2 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/thau.gif'; var img3 = 'http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/sky.gif'; </script> Then I wrote this in the body of my page: Code: <a onclick="parent.navigation.document.logo.src=img1;" onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> Out of curiosity, I switched the order of onmoseover and onclick so that onmouseover came first like this: Code: <a onmouseover=" temp=img1; img1=img2; img2=img3; img3=temp; document.the_image.src=img1;" onclick="parent.navigation.document.logo.src=img1;" href="#"> <img src="http://www.wired.com/wired/webmonkey/stuff/javascript_tutorial_files/JST_homework3_files/brand_me_files/monkey.gif" name="the_image"></a> The page still worked in Firefox, but when I viewed the source (using firebug), onclick was still first and then onmouseover. I deleted my history and refreshed the page and still onclick was coming up first when I viewed the source. Does Firefox have an auto-correct feature that is forcing onclick to be first? Is there an order when using event handlers? Does onclick always have to come before onmouseover? Also, this code worked in Firefox and Safari, but it did not work in Chrome. Both with onclick and onmouseover first, I was able to mouseover and rotate through the images in Chrome, but whenever I clicked on an image the image was not swapped in the "navigation" page. Why? The "navigation" page also has a green button and a yellow button that change the background of the bottom frame to their respective color when clicked using the bgColor property. This effect also works in Firefox and Safari, but not in Chrome. Why? Do I have a setting in Chrome activated that is preventing this or does Chrome not recognize this code? I know this was long-winded but I'm a beginner so don't go too hard on me! Thanks in advance! Hey there, first time poster. I am trying to create an order with the ability to dynamically self total the sum of the selected items but also be able to add a 25% labor fee having it be at least $90. So if someone buys $300 worth of items the labor charge would be $75 but it would be automatically bumped to $90. heres the existing code: PHP Code: * Calculates the payment total with quantites * @param {Object} prices */ countTotal: function(prices){ var total = 0; $H(prices).each(function(pair){ total = parseFloat(total); var price = parseFloat(pair.value.price); if ($(pair.key).checked) { if ($(pair.value.quantityField)) { price = price * parseInt($(pair.value.quantityField).getSelected().text, 10); } total += price; } }); if (total === 0) { total = "0.00"; } if ($("payment_total")) { $("payment_total").update(parseFloat(total).toFixed(2)); } }, /** * Sets the events for dynamic total calculation * @param {Object} prices */ totalCounter: function(prices){ $H(prices).each(function(pair){ $(pair.key).observe('click', function(){ JotForm.countTotal(prices); }); if ($(pair.value.quantityField)) { $(pair.value.quantityField).observe('change', function(){ $(pair.key).checked = true; JotForm.countTotal(prices); }); } }); }, I have a script that needs extra variables added, but need some help on how to do it. I need a textbox to add shipping charges, and also a text box to add sales tax. Then these 2 amounts need to be added to the grand total. Any help appreciated. The link below is to the page that has the form and code: http://spectrum-enterprise.com/sm/smorder.html |
|||||||