Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Jquery tabs.

  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Jquery tabs.

    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
    Last edited by Lennard; 09-28-2011 at 03:12 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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.

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.
    Last edited by DanInMa; 09-27-2011 at 07:42 PM.

  • #4
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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,

    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?

    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

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •