Jquery tabs.

Lennard · 09-27-2011, 01:28 PM

Hiiya guys, im have a strange thing over here

Im working with Jquery and got 2 different versions, 1 is working and the other one aint..

There using both the same code and loading the same JS files

Is this something with google friendly url? already did chance .httacces.. but still it aint working

Thanks anyway hope im figuring this one out.

*EDIT*

Code:

<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/standard.js"></script>

   <script type="text/javascript">

// ----------------------------------------------------------------------------------------- //
// ------------------------------------- Rekenmachine -------------------------------------- //
// ----------------------------------------------------------------------------------------- //

function Rekenen()
{
	with (document.Rekenmachine){
		Resultaat.value = parseFloat (Getal1.value) * parseFloat(Getal2.value) * parseFloat(Getal3.value)
		}
}
	
// ----------------------------------------------------------------------------------------- //
// ------------------------------------ Animatie ------------------------------------------- //
// ----------------------------------------------------------------------------------------- //

function slide(){
var n=Number(document.getElementById('Getal1').value)

if (n>=101 && n<201)
 openDiv1();
 
else if(n>200)
openDiv2();

else if(n>=0 && n<101)
closeDiv();

else
  {alert("You did not enter a number!")}
}

function start(){
	$("#midden").animate({"width": "show"}, { duration: 0 });
	$("#midden2").animate({"width": "hide"}, { duration: 0 });
	$("#midden3").animate({"width": "hide"}, { duration: 0 });
}

// tussen 101 en 201
function openDiv1(){
	$("#midden").animate({"width": "hide"}, { duration: 1000 });
	$("#midden2").animate({"width": "show"}, { duration: 1000 });
	$("#midden3").animate({"width": "hide"}, { duration: 1000 });
}

// groter dan 200
function openDiv2(){
	$("#midden").animate({"width": "hide"}, { duration: 1000 });
	$("#midden2").animate({"width": "hide"}, { duration: 1000 });
	$("#midden3").animate({"width": "show"}, { duration: 1000 });

}

//tussen 0 en 101
function closeDiv(){
	$("#midden").animate({"width": "show"}, { duration: 1000 });
	$("#midden2").animate({"width": "hide"}, { duration: 1000 });
	$("#midden3").animate({"width": "hide"}, { duration: 1000 });
}

// ----------------------------------------------------------------------------------------- //
// ------------------------------------- window.onload ------------------------------------- //
// ----------------------------------------------------------------------------------------- //

window.onload=start;

// ----------------------------------------------------------------------------------------- //
// ------------------------------------- Red ----------------------------------------------- //
// ----------------------------------------------------------------------------------------- //

	$(function() {
		$( "#red" ).click(function() {
			$( "#midden" ).addClass( "newClassred", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden" ).removeClass( "newClassblue newClassyellow" );
			}, 0 );
		}
	});

	$(function() {
		$( "#red" ).click(function() {
			$( "#midden2" ).addClass( "newClassred", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden2" ).removeClass( "newClassblue newClassyellow" );
			}, 0 );
		}
	});

	$(function() {
		$( "#red" ).click(function() {
			$( "#midden3" ).addClass( "newClassred", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden3" ).removeClass( "newClassblue newClassyellow" );
			}, 0 );
		}
	});
	
	
// ----------------------------------------------------------------------------------------- //
// ------------------------------------- Blue ---------------------------------------------- //
// ----------------------------------------------------------------------------------------- //

	$(function() {
		$( "#blue" ).click(function() {
			$( "#midden" ).addClass( "newClassblue", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden" ).removeClass( "newClassred newClassyellow" );
			}, 0 );
		}
	});

	$(function() {
		$( "#blue" ).click(function() {
			$( "#midden2" ).addClass( "newClassblue", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden2" ).removeClass( "newClassred newClassyellow" );
			}, 0 );
		}
	});

	$(function() {
		$( "#blue" ).click(function() {
			$( "#midden3" ).addClass( "newClassblue", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden3" ).removeClass( "newClassred newClassyellow" );
			}, 0 );
		}
	});


// ----------------------------------------------------------------------------------------- //
// ------------------------------------- Yellow -------------------------------------------- //
// ----------------------------------------------------------------------------------------- //

	$(function() {
		$( "#yellow" ).click(function() {
			$( "#midden" ).addClass( "newClassyellow", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden" ).removeClass( "newClassblue newClassred" );
			}, 0 );
		}
	});

	$(function() {
		$( "#yellow" ).click(function() {
			$( "#midden2" ).addClass( "newClassyellow", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden2" ).removeClass( "newClassblue newClassred" );
			}, 0 );
		}
	});

	$(function() {
		$( "#yellow" ).click(function() {
			$( "#midden3" ).addClass( "newClassyellow", 1000, callback );
			return false;
		});

		function callback() {
			setTimeout(function() {
				$( "#midden3" ).removeClass( "newClassblue newClassred" );
			}, 0 );
		}
	});
	
	
// ----------------------------------------------------------------------------------------- //
// ------------------------------------- Tabs ---------------------------------------------- //
// ----------------------------------------------------------------------------------------- //

	$(function(){
	
		$('#tabs').tabs();
	});

// ----------------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------------- //


		</script>     


 <div id="tabs">
        <div id="boxsteps">
                <span>Bouw uw radiator:</span> 
			<ul>

				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
        
        <div id="boxcontent">
            <div id="tabs-1">
                <form action="javascript:Rekenen();" name="Rekenmachine">

                Lengte: <INPUT TYPE="text" NAME="numeric" onKeyup="slide()" id="Getal1" onKeyPress="return checkIt(evt)">
                x Hoogte: <input type="text" ID="Getal2" onKeyPress="return checkIt(evt)">
                x Diepte: <input type="text" ID="Getal3" onKeyPress="return checkIt(evt)">
                </form></div>
        
			<div id="tabs-2">
                <a href="#"><div class="choose" id="red"></div></a>
                <a href="#"><div class="choose" id="blue"></div></a>

                <a href="#"><div class="choose" id="yellow"></div></a>   	
            </div>
        </div> 
        </div>

just placed mine code

SB65 · 09-27-2011, 06:38 PM

This link:

http://radiatorombouwopmaat.nl/nl/radiator

has jQuery loaded twice:

Code:

<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/standard.js"></script>
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-1.6.2.min.js"></script>

Get rid of one of them and give it another go.

DanInMa · 09-27-2011, 07:36 PM

and dont forget that the one you choose to keep should be referenced before jquery ui

oh and you have mutiple events binded to the same elements like #yellow and so forth.

also all those functions you have that start with $(function(){ , could all just be put in a $(document).ready() section and accomplish the same thing with much less coding involved.

Lennard · 09-28-2011, 08:15 AM

Hiiya all, good morning

Thanks for the reply's so far i deleted
<script type="text/javascript" src="http://radiatorombouwopmaat.nl/include/js/jquery-1.4.2.min.js"></script>

Didn't approve anything.. But thanks didnt noticed,

Quote:

DanInMa: oh and you have mutiple events binded to the same elements like #yellow and so forth.

Should that be the problem? since in mine demo im using the same code with also mutiple events and thats working?

Quote:

also all those functions you have that start with $(function(){ , could all just be put in a $(document).ready() section and accomplish the same thing with much less coding involved.

Im pretty new to javascript / Jquery, so can you explain the $(document).ready() ?

Thanks anyway Greetz Lennard

Lennard · 09-28-2011, 10:28 AM

The problem im having atm is, when youre clicking on one of the tabs its getting in mine url #tabs-3 or any number, but its not getting nice in the tabs what im having in mine demo. Thats why i thought it was something about the google friendly url.

More problems im finding when im in the live version is the callback on the remove class