JavaScript - Jquery Sortable List Shows Empty

http://74.220.207.105/~torasmos/shiurim/testsort.html

this works in firefox but in ie I get an error
Webpage error details


Message: 'this.className' is null or not an object
Line: 94
Char: 11
Code: 0
URI: http://74.220.207.105/~torasmos/shiurim/sorttable.js

I am using the script from
http://www.kryogenix.org/code/browser/sorttable/

does anyone have any idea what the issue is?

Hello!

Im very limited in my skills with html/JS/CSS and can only understand the concept of the varius coding but ot much more than that.

Now i really need a sortable table like the one you can find on this site:

Jämför & Hitta Billiga Små Lån

Has anyone come across a tutorial or similar on how to build stuff like this? Or have any other hints for me to get started with?

Any help is much appriciated





Reply With Quote




12-25-2014, 06:27 PM #2
Wieli View Profile View Forum Posts

New to the CF scene Join Date Dec 2014 Posts 5 Thanks 5 Thanked 0 Times in 0 Posts

Hmm, cant find the option to clean the link, wasnt supposed to have a title like that.





Reply With Quote

12-26-2014, 06:08 AM #3
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

No problem, the post worked.

I don't have time tonight, but will try to show you this tomorrow.

Question: How do you *create* the <table>?? From PHP? From AJAX?

Hello Everyone,

I am facing problem with divs indexes persistancy on sorting when browser refreshing. checkout this fiddle once and help me.

Sortable-arindam - JSFiddle

Here how can i maintain the divs persistancy on sorting when page refreshing.

Thanks in Advance

Satish Chandragiri

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


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

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

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

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

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

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

Heres the structure of the menu/content
Code:

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

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

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

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

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

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

hi, i have a jquery problem...

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

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


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

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

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

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

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

i keep getting the error

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

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

thanx in advance

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

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

Hi all,

I have a photo gallery on a page, when viewed in IE it will show nothing after it hits this gallery.

The error that is produced is - "'null' is null or not an object"

The code I have for my photo gallery is below, I have a feeling (though it is only a hunch) that it maybe to do with the IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules; line.

I have tried swapping the styleSheets[3] for different values 0-5 but to no effect.

Code:

var thumbProportion = .17 // thumbnails are 32% of their full size;
	var IE = false; 
	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

	function swapImg(nImg,nSwapImgClass,nFullSizeImg){		
		
		var thumbImg = nImg;
		var thumbImgAlt = thumbImg.alt;
		var origFullWidth = nFullSizeImg.width; 		
		var origFullHeight = nFullSizeImg.height;		
		var tempImgHolder = nFullSizeImg.src;
		var origFullAlt = nFullSizeImg.alt;
		nFullSizeImg.src = thumbImg.src;
		thumbImg.src = tempImgHolder;
		nSwapImgClass.style.width = nFullSizeImg.width + "px";
		thumbImg.style.width =  Math.round(origFullWidth * thumbProportion) + "px";	
		thumbImg.style.height =  Math.round(origFullHeight * thumbProportion) + "px";	
		thumbImg.alt = origFullAlt;
		thumbImg.title = origFullAlt;
		nFullSizeImg.alt = thumbImgAlt;
		nFullSizeImg.title = thumbImgAlt;
		nCaption.firstChild.data = thumbImgAlt;
	}

	function init(){

		var nImg = document.getElementById('fullSizeContainer');
		var fullSizeImg = nImg.getElementsByTagName('img')[0];
		nCaption = nImg.getElementsByTagName('div')[0];		
		IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
		for (i=0; i<nRule.length; i++)
			{
		 	 if (nRule[i].selectorText == ".swapImg")
				{	
				 var swapImgClass = nRule[i];
				 nRule[i].style.width = fullSizeImg.width + "px";				 
				}		
			}	
		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
			 	 swapImg(this.firstChild,swapImgClass,fullSizeImg);
			 	 return false;
				}			
		 	nGallery[i].href = "#";			
			}	
	}

	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

If anyone can help I would really appreciate it!

Hi Guys
I'm trying to find a way to insert a dropdown eg:


<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>

...place the dropdown to the left and have an information panel to the right.
i.e. if a user chooses Volvo a panel to the right would appear saying eg "Volvo is a strong car"
and so on for other selections eg "Audi is a fast car" if the user selects Audi in the dropdown.

THANKS

The code that I have below has three different buttons: When you click then name of each button the image of the button will appear. What I am trying to do is
create a mini slide show. Instead of having 3 buttons, I just want one button called "tools" that you click and every time you click the button a different image of a tool will appear. I have heard you can use just about all my code below but add in the modulus operator somehow to achieve this... Does anybody have any suggestions or know how to do this???



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img {display: block;
margin-left: auto;
margin-right: auto; }




</style>
</head>

<body>



<img id="shown" src="/tools/hoe.jpg" alt="hoe">


<script>
function imageView(saw)
{
document.getElementById("shown").src="/tools/"+saw+".jpg";
}
imageView('saw');
</script>





<p><input type="button" value="Saw" onclick="imageView('saw')">
</p>
<p><input type="button" value="Hoe" onclick="imageView('hoe')">
</p>

<p><input type="button" value="Tree Trimmer" onclick="imageView('tree_trimmer')">
</p>


</body>
</html>

I have a 'show more' link on my page and wish to allow users who disable javascript to automatically see this normally hidden div as the link obviously will not work.

is this possible ?

the info in the hidden div will be taken from MySQL databases.

Code:

<div><!-- start of div2 -->
	<div class="floatleft"><a href="#" id="textbox-show" class="showLink" onclick="showHide('textbox');return false;">Show more</a>
	</div>
			<div><!-- start of div3 -->
				<div id="textbox" class="more">
					<div class="formtitles">Show more&nbsp;&nbsp;<a href="#" id="textbox-hide" class="hideLink" onclick="showHide('textbox');return false;">Hide this content</a>
					</div>

					<div>

						<div class="containercolour3">
							<div class="rtopcolour3">
								<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div>
							</div>
			
							<div class="formspacer">Hidden text</div>
			
							<div class="rbottomcolour3">
								<div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
							</div>
						</div>

					</div>

			</div>
			<!-- end of div3 --></div>
<!-- end of div2 --></div>

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

I know this is a common problem, and each slide show script is a bit different and I can't get this to work exactly right:

http://www.javascriptkit.com/script/...ifferent.shtml

I've got two tables containing mouseover image "slide" shows - numbered sequentially but both are on the same index.html page. One image show comes up with the first navigation link, the second image show comes up with the second navigation link. The first image show works, the second doesn't - could you tell me what is causing that.

there is a javascript glider that requires them both to be on the same page. link to the page here . . .

http://www.sunupdesignbuild.com/NEW/index.html

appreciate your help
thank you
T