|
JavaScript - Is This Possible? (visible Image Sorting)
Say I have a gallery of 16 images and I have a menu for the gallery to sort the images by Most Viewed, Most Recent, Highest Rating, A-Z, Z-A..
if I were to click 1 of the menu links it will change the order of the images but is it possible to actually show the images MOVING into their new places? Looking for a jquery solution if possible.. if not still open to anythin that would work Similar TutorialsHello, I am having the problem that a javascript code runs from the start (Since I open the page). My page works by divs and not web pages so they change by the div visibility. This is the code for the divs: Code: function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
So each DIV has a function to make it visible by posting: "toggleVisibility(div);" I am trying to run a javascript code inside this function so that when a certain div becomes available the javascript code autoruns but whenever I post the javascript code inside the function it ignoresthat and runs since the web page loads. My example code would be: Code: function div(){
toggleVisibility('div2');
"RUN JAVASCRIPT CODE HERE"
}
Please help Reply With Quote 01-22-2015, 09:42 AM #2 felgall View Profile View Forum Posts Visit Homepage Master Coder Join Date Sep 2005 Location Sydney, Australia Posts 6,745 Thanks 0 Thanked 666 Times in 655 Posts Stick the code to run when a div becomes visible in a separate function. If the code is different for different divs then create separate functions. Let's assume that the function containing the code to run when div2 is visible is called func2. Let's also add func1 for when div1 is visible so you can see how it works for different functions for different divs. We'll also assume div3 can use the same function as div1 so you can see how functions can be shared We then amend the toggle function slightly as follows: Code: function toggleVisibility(selectedTab, func) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
func(selectedTab);
} else {
content[i].style.display = 'none';
}
}
}
Your code to call the toggle now gets changed to: Code: function func1(selectedTab) {
"RUN JAVASCRIPT CODE FOR WHEN selectedTab IS MADE VISIBLE HERE"
}
function func2() {
"RUN JAVASCRIPT CODE FOR WHEN div2 IS MADE VISIBLE HERE"
}
function div(){
toggleVisibility('div2', func2);
toggleVisibility('div1', func1);
toggleVisibility('div3', func1);
}
Hi, After much searching and head-scratching (JS is not my forte!), I adapted some code to do what I want - well, almost! So here I am back again. I need to have three divs on a page, with each separate div changing onClick. Below is the code so far. Two problems: 1) when I open it in a browser window both divs show, then the one disappears when I click on the second div leaving only the numbers. How can I change it so that both divs remain open? 2) Instead of the numbers [1], [2], etc. to change the divs, I'd like to have to just click on one single 'click here for more' to display the next div then return to the first after the last one. Can this be integrated or is it too late? Thank you! 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">
<html>
<head>
<title>Switching Divs</title>
<style>
#one {width: 500px; height: 100 px; border: 1px solid red; }
#two {width: 500px; height: 100px; border: 1px solid blue; }
#three {width: 500px; height: 100px; border: 1px solid purple; }
#four {width: 500px; height: 100px; border: 1px solid green; }
#five {width: 500px; height: 100 px; border: 1px solid red; }
#six {width: 500px; height: 100px; border: 1px solid blue; }
#seven {width: 500px; height: 100px; border: 1px solid purple; }
#eight {width: 500px; height: 100px; border: 1px solid green; }
#propertyfrance {float: left; color: #666666; font-family: tahoma arial, verdana, sans-serif; font-size: 11px; }
.propertytext {float: left; clear: right; width: 300px; height: 100px; border: 1px solid #000; }
.propertyphoto {float: left; width 200px; height: 100px; border: 1px solid #cceeff; text-align: center; }
#image-switch #one {
padding:0px;
}
#image-switch #two, #image-switch #three, #image-switch #four {
display:none;
}
#image-switch #five {
padding: 0px; }
#image-switch #six, #image-switch #seven, #image-switch #eight {
display:none;
}
</style>
<script type="text/javascript">
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three','four', 'five', 'six', 'seven', 'eight'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
</script>
</head>
<body>
<h4>Switching divs (javascript)</h4>
<div id="image-switch">
<br>OnClick
<br>
<div id="one">
<div class="propertytext">We'll get some text in here for property 1</div>
<div class="propertyphoto"><img src="property1.jpg" height="100" width="180" alt="Property 1"></div>
</div>
<div id="two">
<div class="propertytext">We'll get some text in here for property 2</div>
<div class="propertyphoto"><img src="property2.jpg" height="100" width="180" alt="Property 2"></div>
</div>
<div id="three">
<div class="propertytext">We'll get some text in here for property 3</div>
<div class="propertyphoto"><img src="property3.jpg" height="100" width="180" alt="Property 3"></div>
</div>
<div id="four">
<div class="propertytext">We'll get some text in here for property 4</div>
<div class="propertyphoto"><img src="property4.jpg" height="100" width="180" alt="Property 4"></div>
</div>
<br>
<a onClick="switch1('one');"> [1]</a>
<a onClick="switch1('two');"> [2]</a>
<a onClick="switch1('three');"> [3]</a>
<a onClick="switch1('four');"> [4]</a>
<br><br>
<div id="five">
<div class="propertytext">We'll get some text in here for property 5</div>
<div class="propertyphoto"><img src="property5.jpg" height="100" width="180" alt="Property 5"></div>
</div>
<div id="six">
<div class="propertytext">We'll get some text in here for property 6</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 6"></div>
</div>
<div id="seven">
<div class="propertytext">We'll get some text in here for property 7</div>
<div class="propertyphoto"><img src="property7.jpg" height="100" width="180" alt="Property 7"></div>
</div>
<div id="eight">
<div class="propertytext">We'll get some text in here for property 8</div>
<div class="propertyphoto"><img src="property6.jpg" height="100" width="180" alt="Property 8"></div>
</div>
<br>
<a onClick="switch1('five');"> [5] </a>
<a onClick="switch1('six');"> [6] </a>
<a onClick="switch1('seven');"> [7] </a>
<a onClick="switch1('eight');"> [8] </a>
</div>
</body>
</html>
hy. i have menu further construction Code: <ul id="menu" class="menu"> <li><a href="#">item 1  </a></li> <li><a href="#">item 2  </a></li> <li><a href="#">item 3</a> <ul id="submenu" class="submenu"> <li><a href="#">item 3 sub 1</a></li> <li><a href="#">item 3 sub 2</a></li> </ul> </li> </ul> and my function to open my on obscure menu then mouse over to element teg a Code: function doMenu (li){
var oli = li.childNodes;
var len = oli.length;
if (len > 1) {
for (var i = 0; i < len; i++) {
if (oli[i].nodeType == 1) {
if (oli[i].tagName == 'UL') {
return oli[i];
}}}} };
function doShow(e) {
if (e) {
var t = e.target;
console.log(t.tagName);
var pN = t.parentNode;
console.log(pN)
if (pN.tagName == 'LI') {
if (doMenu(pN)) {
var oUl = doMenu(pN);
if (oUl.style.display == "none") {
oUl.style.display = "block"
}
else {oUl.style.display = "none"}
}}}};
and my problem, then HTML page load full. I mouse over to element tag a and function at this moment not show element menu. why it so. Because then i start mouse over too, function start and menu show. who can explain me how it work. Hi - I hope someone can help me out, I've pored over this problem for hours. The site is http://www.spacemodel.com. A doctype is set. The CSS for the navmenu is: Code:
#menu
{
background:#262626 url(images/menu_bg.gif) repeat-x top;
border-bottom:1px solid #230808;
margin:0 20px;
height: 49px;
overflow: hidden;
}
#menu .mleft{background: url(images/menu_side.gif) no-repeat left; width: 100%; height: 100%;}
#menu .mright{background: url(images/menu_side.gif) no-repeat right; width: 100%; height: 100%;}
#menu ul
{
width:960px;
height:100%;
overflow:hidden;
}
#menu ul li
{
list-style:none;
font-family:Arial, sans-serif;
font-weight: 700;
line-height: 49px;
color:#E6E6E6;
font-size:11px;
text-transform:uppercase;
text-align:center;
background:url(images/menu_side.gif) no-repeat right 0;
margin:0 0 0 25px;
padding: 0 25px 0 0;
}
#menu a:link,#menu a:visited,#menu a:active,#menu a:hover
{
color:#E6E6E6;
text-decoration:none;
}
Works fine in all other browsers and versions. Affects about 5% of visitors, but one is my client All help and insight appreciated! Laurie If you goto http://jsfiddle.net/BT4Bk/ you can see that the dark bar is visible. This is padding for the #ajax div that will wrap the content inside. How do I hide the padding so its not displayed until it slides into view with the content? I have seveal flash quizzes set up for my history class. On the main page right now is just a link to quiz #1. After finishing quiz #1, I want a cookie set that is proof of a finished test. I will then redirect back to the main page that will now show a link to quiz #2. And so on after each quiz.... Any help would be greatly, greatly appreciated. I want 10 divs that have their visibility set to none. Then based on a cookie I would like to have 1 at at time become visible. Hello everyone, I have tried about 8 different variations of code to try to get this to work properly and cannot accomplish it. Please help if you can figure it out. I have 2 div's that are hidden. each div contains a FLV video, autostart=false. when button 1 is clicked, DIV 1 becomes visible and you may click on video to start playing it. When button 2 is clicked, DIV 1 goes to hidden and DIV 2 becomes visible with video 2. -- Ok so problem is this, the video that was playing in DIV 1 remains playing or at least the audio remains playing. If video 2 is started then you have 1 video source and 2 audio sources playing. I am trying to get the video in DIV 1 or DIV 2 to STOP or PAUSE when the DIV's state becomes hidden. here is the last code I tried below before frustration over come me. any suggestions would be great. Robert 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 13px;
top: 47px;
visibility: hidden;
}
#Layer2 {
position:absolute;
width:600px;
height:645px;
z-index:2;
left: 14px;
top: 47px;
visibility: hidden;
}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
//-->
</script>
</head>
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display DIV 1" width="27" height="22" onclick="MM_showHideLayers('Layer1','','show','Layer2','','hide')" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/spacer.gif" width="60" height="1" />
<img src="chastain cd landing pages/atlanta-ga-carpet-upholstery-cleaning.com/images/phone.jpg" alt="Button to Display Div 2" width="27" height="22" onclick="MM_showHideLayers('Layer1','','hide','Layer2','','show')"/>
<div id="Layer1">VIDEO 1
<object id="player1" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
<div id="Layer2">VIDEO 2
<object id="player2" type="application/x-shockwave-flash" width="600" height="600" wmode="transparent" data="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false">
<param name="movie" value="http://www.dryconcepts.com/videos/flvplayer.swf?file=http://www.dryconcepts.com/videos/video1.flv&autoStart=false" />
<param name="wmode" value="transparent" />
</object>
</div>
</body>
</html>
Hi I'm trying to create a questionnaire style series of radio buttons which are hidden and then a different set of radio buttons displayed depending on the previous answer. eg Q1 Is it a man? (if select yes then display) Q2 Is he called John? (if no then display) Q3 Is he called Gary? and so on... I've been testing using the code below but wondered if anyone had any ideas on how this could be done easily? Be grateful for any advice, Matt. Code: Is it a Man?
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
<br />
<p id="continue">
<input type="radio" name="agree" value="y" onClick="toggle(this)" /> Yes
<input type="radio" name="agree" value="n" onClick="toggle(this)" /> No
</p>
<script>
var continue_button = document.getElementById('continue');
continue_button.style.visibility = 'hidden';
function toggle(switchElement) {
if (switchElement.value == 'y')
continue_button.style.visibility = 'visible';
else
continue_button.style.visibility = 'hidden';
}
</script>
Hi As title says : "How to hide div so his content won't be loaded until he is visible?" And is it possible to add preloader for that div? Hello guys, The following excerpt is part of a very huge project(in terms of code involved). Pardon me if it lacks a bit of context. But I assume I have posted adequate information for understanding the problem. Code: var sztitlebar_specific= "<table cellpadding='0px' cellspacing='0px' width='100%'><tr>" +"<td class='tiletitle'>" "<img src='../images/alert.gif' onclick='toggleAlerts(\"#ID#\")' alt='Toggle Alerts' title='Toggle Alerts' style='cursor: hand'>" + "<input type='checkbox' name='pricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" + "<input type='checkbox' name='mypricesonlycb' onclick='parent.applyFilterPricesOnly(\"#ID#\",pricesonlycb.checked,mypricesonlycb.checked,\"#NAME#\")'>" + "<td class='tiletitle' style='text-align: center'>#NAME#</td>" + </tr></table>"; The onclick event fires without any trouble, and the following function is called. Code: function applyFilterPricesOnly(filterid, pricesonly, mypricesonly,filtername){
alert("applyFilterPricesOnly called: filterid =" + filterid + "filtername =" + filtername + "mypricesonly =" + mypricesonly + " pricesonly=" + pricesonly);
}
But when I alert the status of the checkboxes they show up as "undefined". As you can see, the first piece of code defines a titlebar with a button and a couple of checkboxes and the name of the titlebar. And it is these checkboxes that remain undefined even though I can see them and check and uncheck them. But the name of the titlebar gets passed to the function correctly when the onclick event fires and it gets alerted. Where am I going wrong? Hi, have table with 5 rows. First 2 rows visible. Last 3 rows hidden - Code: <tr id="row1" style="display: none"> <tr id="row2" style="display: none"> <tr id="row3" style="display: none"> With onclick would like to make those rows visible to user - how can I do that? thank - john Hello, months when I want all the fields will be filled submit will be visible on all but I just do what has not n'arive test Note b: there is already invisible submit send # I hope the idea is clear Maintenon. here is my code jQuery: Code: $(document).ready(function() {
//------------------ validation champ email par blur -------------
$("#email,#objet,#message").blur(function() {
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if ($("#email").val() !== "E-mail" && $("#email").val() !== "" && $("#email").val().match(filter)
&& $("#objet").val() !== "" && $("#objet").val() !== "Objet"
&& $("#message").val()!== "" && $("#message").val()!== "Votre message") {
$("#objet,#message,#email").css("border-color","#98D100");
$("#envoyer").fadeIn(2000);
alert('les champs valid');
return true;
}
else {
$("#objet,#message,#email").css("border-color","#FF0000");
$("#envoyer").fadeOut(2000);
alert('les champs not valid');
return false;
}
});
//--------------- animation de champ message -----------------
$("#message").focus(function(){
$("#message").animate({
height: "50px"
}, 1000 );
});
});
here is the html code: Code: <input id="email" type="text" value="E-mail" onFocus="if (this.value=='E-mail') {this.value=''}"/> <div class="cl"></div> <input id="objet" type="text" value="Objet" onFocus="if (this.value=='Objet') {this.value=''}"/> <div class="cl"></div> <textarea id="message" type="text" value="Votre message" onFocus="if(this.value=='Votre message') {this.value=''}">Votre message</textarea> <div class="cl"></div> <input id="envoyer" type="submit" value="Envoyer"/>
Regards. Hi everyone, I'm new to the forums. I have been coding some simple javascript but it is really new to me. I coded a segment that you can see below but the part in bold doesn't work. I need it to sort by count descending. I'm having major issues with it. Thanks for the help ahead of time Code: <html>
<head>
<title>ENGO Lab 2.1</title>
<script type="text/javascript">
var d=new Date();
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var month=new Array(12);
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
document.write("Today is " + weekday[d.getDay()] + "<br />" + d.getFullYear() + "/" + month[d.getMonth()] + "/" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds());
</script>
<script type="text/javascript">
function sort_descending_count(w){
var sorted = w.sort();
sorted.reverse();
var stuff;
var wordCounts = {};
var wordHold = {};
for(i=0; i < w.length; i ++ ){
stuff = sorted[i];
if( wordCounts[stuff] == null ){
wordCounts[stuff] = 1;
wordHold[stuff] = stuff;
}
else{
wordCounts[stuff] += 1;
}
}
var i = 1;
wordCounts.sort();
var i = 1;
var str = '<table border="1" cellspacing="1" cellpadding="5"><th>Sequence</th><th>Word</th><th>Count</th>';
for( stuff in wordCounts){
str+='<tr><td>'+i+'</td><td>'+stuff+'</td><td>'+wordCounts[stuff]+'</td></tr>';
i = i+1;
}
str+='</table>';
document.getElementById('change2').innerHTML = txt;
}
</script>
<script type="text/javascript">
function sort_descending(w){
var sorted = w.sort();
sorted.reverse();
var stuff;
var wordCounts = {};
for(i=0; i < w.length; i ++ ){
stuff = sorted[i];
if( wordCounts[stuff] == null ){
wordCounts[stuff] = 1;
}
else{
wordCounts[stuff] += 1;
}
}
var i = 1;
var str = '<table border="1" cellspacing="1" cellpadding="5"><th>Sequence</th><th>Word</th><th>Count</th>';
for( stuff in wordCounts){
str+='<tr><td>'+i+'</td><td>'+stuff+'</td><td>'+wordCounts[stuff]+'</td></tr>';
i = i+1;
}
str+='</table>';
document.getElementById('change2').innerHTML = str;
}
</script>
<script type="text/javascript">
var words;
function show_prompt()
{
var name=prompt("Please input a list of words seperated by a space","Banana Apple Orange");
if (name!=null && name!="")
{
// split input into array using space
var arrayOfWords = name.split(" ");
// construct object to save each word and its count
var wordCounts = {};
words = arrayOfWords;
for(i=0; i < arrayOfWords.length; i ++ ){
var w = arrayOfWords[i];
if( wordCounts[w] == null ){
wordCounts[w] = 1;
}
else{
wordCounts[w] += 1;
}
}
// output the result
var str = '<table border="1" cellspacing="1" cellpadding="5"><th>Word</th><th>Count</th>';
for( w in wordCounts){
str+='<tr><td>'+w+'</td><td>'+wordCounts[w]+'</td></tr>';
}
str+='</table>';
document.getElementById('change').innerHTML = str;
var button = '<input type="button" onclick="sort_descending(words)" value="Sort with word alphabetically descending">';
var button2 = '<input type="button" onclick="sort_descending_count(words)" value="Sort with word count descending">';
document.getElementById('sorting').innerHTML = button;
document.getElementById('sorting2').innerHTML = button2;
}
else
{
alert("The Input is Not Valid");
}
}
window.onload=show_prompt;
</script>
</head>
<body>
<br />
<div id="change">
</div>
<div id="sorting">
</div>
<div id="sorting2">
</div>
<div id="change2">
</div>
</body>
</html>]
Good evening all, I have a form at work that was created to allow for clients information to be inputted into this form. However when the row is inserted it is sorted oldest to newest. I would like to change this however i'm not really sure were to start. Below I have added the javascript code that refers to the addrow function. Any advice would be helpful. Code:
function addRow(id){
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td1.appendChild(document.createElement("textarea"))
var td2 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td2.appendChild(document.createElement("textarea"))
var td3 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td3.appendChild(document.createElement("textarea"))
var td4 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td4.appendChild(document.createElement("textarea"))
var td5 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td5.appendChild(document.createElement("textarea"))
var td6 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td6.appendChild(document.createElement("textarea"))
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
tbody.appendChild(row);
var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td1 = document.createElement("TD")
td1.appendChild(document.createTextNode("Remarks:"))
var td2 = document.createElement("TD")
textArea = document.createElement('TEXTAREA')
td2.colSpan="4";
td2.appendChild(document.createElement("textarea"))
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
Hi, I would like to sort a table which has inner table using Javascript. When I try to sort, both the outer table and the Inner table are getting sorted. For Eg: I have a table like this: Category1 10.20.30.40 Issue1 sample1 sample2 sample3 Code1 xyz abc The outer table contains Category1,Issue1,Code1 So, after sorting my table should look like this: Category1 10.20.30.40 Code1 xyz abc Issue1 sample1 sample2 sample3 Please provide a solution for this. Not really sure why this isn't working. I've mirrored this webpage from a friend's page - everything is literally identical, save for the references to the databases. His works, and mine doesn't. Here's an example of one of the tables I'm trying to sort: http://www.iblhoops.net/modules.php?...isplay=ratings The code in question for said table: Code: // BEGIN RATINGS TABLE
$table_ratings="<table class=\"sortable\">
<thead>
<tr bgcolor=$color1><th><font color=$color2>Pos</font></th><th><font color=$color2>Player</font></th><th><font color=$color2>Age</font></th><th><font color=$color2>Sta</font></th><th><font color=$color2>2ga</font></th><th><font color=$color2>2g%</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>ft%</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>3g%</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>drb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>tvr</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>o-o</font></th><th><font color=$color2>d-o</font></th><th><font color=$color2>p-o</font></th><th><font color=$color2>t-o</font></th><th><font color=$color2>o-d</font></th><th><font color=$color2>d-d</font></th><th><font color=$color2>p-d</font></th><th><font color=$color2>t-d</font></th><th><font color=$color2>Foul</font></th><th><font color=$color2>Inj</font></th></tr>
</thead>
<tbody>
";
$i=0;
while ($i < $num)
{
if ($yr == "")
{
$name=mysql_result($result,$i,"name");
$team=mysql_result($result,$i,"teamname");
$pid=mysql_result($result,$i,"pid");
$pos=mysql_result($result,$i,"altpos");
$p_ord=mysql_result($result,$i,"ordinal");
$age=mysql_result($result,$i,"age");
$inj=mysql_result($result,$i,"injured");
$r_2ga=mysql_result($result,$i,"r_fga");
$r_2gp=mysql_result($result,$i,"r_fgp");
$r_fta=mysql_result($result,$i,"r_fta");
$r_ftp=mysql_result($result,$i,"r_ftp");
$r_3ga=mysql_result($result,$i,"r_tga");
$r_3gp=mysql_result($result,$i,"r_tgp");
$r_orb=mysql_result($result,$i,"r_orb");
$r_drb=mysql_result($result,$i,"r_drb");
$r_ast=mysql_result($result,$i,"r_ast");
$r_stl=mysql_result($result,$i,"r_stl");
$r_blk=mysql_result($result,$i,"r_blk");
$r_tvr=mysql_result($result,$i,"r_to");
$r_sta=mysql_result($result,$i,"sta");
$r_foul=mysql_result($result,$i,"r_foul");
$r_totoff=mysql_result($result,$i,"oo")+mysql_result($result,$i,"do")+mysql_result($result,$i,"po")+mysql_result($result,$i,"to");
$r_totdef=mysql_result($result,$i,"od")+mysql_result($result,$i,"dd")+mysql_result($result,$i,"pd")+mysql_result($result,$i,"td");
$r_oo=mysql_result($result,$i,"oo");
$r_do=mysql_result($result,$i,"do");
$r_po=mysql_result($result,$i,"po");
$r_to=mysql_result($result,$i,"to");
$r_od=mysql_result($result,$i,"od");
$r_dd=mysql_result($result,$i,"dd");
$r_pd=mysql_result($result,$i,"pd");
$r_td=mysql_result($result,$i,"td");
$r_bird=mysql_result($result,$i,"bird");
$draftyear=mysql_result($result,$i,"draftyear");
$exp=mysql_result($result,$i,"exp");
$cy=mysql_result($result,$i,"cy");
$cyt=mysql_result($result,$i,"cyt");
$yearoffreeagency=$draftyear+$exp+$cyt-$cy;
} else {
$name=mysql_result($result,$i,"name");
$team=mysql_result($result,$i,"team");
$pid=mysql_result($result,$i,"pid");
$r_2ga=mysql_result($result,$i,"r_2ga");
$r_2gp=mysql_result($result,$i,"r_2gp");
$r_fta=mysql_result($result,$i,"r_fta");
$r_ftp=mysql_result($result,$i,"r_ftp");
$r_3ga=mysql_result($result,$i,"r_3ga");
$r_3gp=mysql_result($result,$i,"r_3gp");
$r_orb=mysql_result($result,$i,"r_orb");
$r_drb=mysql_result($result,$i,"r_drb");
$r_ast=mysql_result($result,$i,"r_ast");
$r_stl=mysql_result($result,$i,"r_stl");
$r_blk=mysql_result($result,$i,"r_blk");
$r_tvr=mysql_result($result,$i,"r_tvr");
$r_totoff=mysql_result($result,$i,"r_oo")+mysql_result($result,$i,"r_do")+mysql_result($result,$i,"r_po")+mysql_result($result,$i,"r_to");
$r_totdef=mysql_result($result,$i,"r_od")+mysql_result($result,$i,"r_dd")+mysql_result($result,$i,"r_pd")+mysql_result($result,$i,"r_td");
$r_oo=mysql_result($result,$i,"r_oo");
$r_do=mysql_result($result,$i,"r_do");
$r_po=mysql_result($result,$i,"r_po");
$r_to=mysql_result($result,$i,"r_to");
$r_od=mysql_result($result,$i,"r_od");
$r_dd=mysql_result($result,$i,"r_dd");
$r_pd=mysql_result($result,$i,"r_pd");
$r_td=mysql_result($result,$i,"r_td");
}
if(($i % 2)==0) {
$bgcolor="FFFFFF";
}else{
$bgcolor="EEEEEE";
}
if ($tid == 0)
{
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else {
if ($p_ord > 959)
{
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td>(<a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name)*</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} elseif ($r_bird == 0) {
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><i><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</i></a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
} else if ($fayr == "" OR $yearoffreeagency == $fayr) {
$table_ratings=$table_ratings." <tr bgcolor=$bgcolor><td>$pos</td><td><a href=\"http://www.iblhoops.net/modules.php?name=Player&pa=showpage&pid=$pid\">$name</a></td><td>$age</td><td>$r_sta</td><td>$r_2ga</td><td>$r_2gp</td><td>$r_fta</td><td>$r_ftp</td><td>$r_3ga</td><td>$r_3gp</td><td>$r_orb</td><td>$r_drb</td><td>$r_ast</td><td>$r_stl</td><td>$r_tvr</td><td>$r_blk</td><td>$r_oo</td><td>$r_do</td><td>$r_po</td><td>$r_to</td><td>$r_od</td><td>$r_dd</td><td>$r_pd</td><td>$r_td</td><td>$r_foul</td><td>$inj</td></tr>
";
}
}
$i++;
}
$table_ratings=$table_ratings."
</tbody>
</table>
";
if ($tid != 0)
{
$table_totals=$table_totals."
<table class=\"sortable\">
<thead>
<tr bgcolor=$color1><th><font color=$color2>Pos</font></th><td colspan=3><font color=$color2>Player</font></th><th><font color=$color2>g</font></th><th><font color=$color2>gs</font></th><th><font color=$color2>min</font></th><th><font color=$color2>fgm</font></th><th><font color=$color2>fga</font></th><th><font color=$color2>ftm</font></th><th><font color=$color2>fta</font></th><th><font color=$color2>3gm</font></th><th><font color=$color2>3ga</font></th><th><font color=$color2>orb</font></th><th><font color=$color2>reb</font></th><th><font color=$color2>ast</font></th><th><font color=$color2>stl</font></th><th><font color=$color2>to</font></th><th><font color=$color2>blk</font></th><th><font color=$color2>pf</font></th><th><font color=$color2>pts</font></th></tr>
</thead>
<tbody>
";
Any ideas? Got this script from the Sam's Teach Yourself Javascript In 24 Hours book, and I'm a little confused with regards to this script I came across, or more specifically, the part of the script I've outlined in red. Code: <script language="javascript" type="text/javascript">
function numcompare(a,b) {
return a-b;
}
nums = new Array (17, 902, 30, 10, 200, 4, 506);
sortednums = nums.sort(numcompare);
output = sortednums.join(", ");
document.write(output);
</script>
I really don't understand how the numcompare() function works, and the book doesn't explain it very well. Any help with deciphering this piece of code? Thanks in advance. Hashim. not sure why this wont sort in asending order... i tend to make little dumb mistakes sorry. :/ Code: <script type="text/javascript">
function sort(nums) {
var rangeStart = 0;
var rangeEnd = nums.length - 1;
var i = 0;
var minPosition = rangeStart;
while(rangeStart < rangeEnd) {
// find minumum
for(i = rangeStart; i < rangeEnd; i++) {
if(nums[i] <= nums[minPosition+1]) {
minPosition = i;
}
}
// swap
var temp = nums[rangeStart];
nums[rangeStart] = nums[minPosition];
nums[minPosition] = temp;
// change range
rangeStart++;
}
}
document.write("<h3>Examples</h3>");
first10 = [2,3,5,7,9,4,8,0,6,1];
document.write("<div>Sorting <tt>["+first10+"]</tt> with current code gives ");
sort(first10);
document.write("<tt>["+first10+"]</tt></div>");
ages = [19,34,20,66,82,53,88,74,39,13];
document.write("<div>Sorting <tt>["+ages+"]</tt> with current code gives ");
sort(ages);
document.write("<tt>["+ages+"]</tt></div>");
</script>
|
|||||||