#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2013
    Posts
    5
    Rep Power
    0

    Javascripting and Jquery not working correctly


    Greetings,

    Firstly let me start off by saying i dont have much knowledge on javascript and especially JQuery

    I am having some issue with some javascript and Jquery loading on my page.

    1) I have created some code here on JS fiddle jsfiddle(dot)net/Gilera/mT9pV/1/, There is some javascript for the timezone converter and the JQuery function for the sliding of the hide/show div.

    The code runs fine when using jsfiddle onDomready and displays both the time and the sliding of the hidden div works. But when using onLoad the hidden div works but not timezone converter. Any idea how i can get both to run when using onload mode on js fiddle?

    2) Also if i compile the code and test website in browser i get the opposite that the Times load but not the hidden divs when clicking on them. how can i then maybe change the chan2.js script to run maybe as onDomready or do i need to add a script above the </head> to find the Jquery Libary?

    I apologise for the lengthy post with te code but this is all new to me and any help would be greatly appreciated.

    Below is the code im using

    HTML

    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>
    <link href="style2.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    
    <div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">Team A vs Team B</li></ul></div><div class="place"><ul class="venue"><li class="field">Field A</li></ul></div></div>
    
    <div class="schedule"><div class="event"><ul class="guides"><li class="icon"><img src="" alt="" width="26" height="27" class="icon"/></li><li class="time"><span data-utc="9:05"></span></li><li class="game">player A vs Player B</li></ul></div><div class="place"><ul class="venue"><li class="field">Court 3</li></ul></div></div>
      
    <div id='out'></div>  
     <script type='text/javascript' src='times2.js'></script>
     <script type='text/javascript' src='chans2.js'></script>
    <body>
    </body>
    </html>
    CSS style2.css

    Code:
    @charset "utf-8";
    .event {
    	width: 600px;
    	height: 38px
    }
    
    .place{
    	display: none;
    	width: 590px;
    	height: 38px;
    	text-align: center;
    	font-size: 12px;
    	font-weight: bold;
    	color: #EB1D2D;
    	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    
    ul.guides {
    	width: 570px;
    	height: 34px;
    	list-style: none;
    	display: block;
    	background-color: #D1E5FD;
    	border-style: solid;
    	border-width: 1px;
    	border-radius: 2px;
    	border-color: black;
    	border-spacing: 5px;
    	padding-top:1px;
    	border-radius:5px
    }
    ul.guides a, ul.guides a:visted, ul.guides a:link {
    	display: block;
    	text-decoration: none;
    	background-color: #8090AB;
    	color: black;
    }
    ul.guides a:hover, ul.guides a:active, ul.guides a:focus {
    	background-color: #FFFFFF;
    }
    
    li.icon {
    	
    	display: inline-block;
    	width: 24px;
    	height: 24px;
    	padding-left: 10px;
    		
    }
    img.icon{
    	display:inline-block;
    	padding-top:3px;
    }
    li.time{
    	display:inline-block;
    	text-align:center;
    	font-size: 12px;
    	width: 70px;
    	padding-left: 5px;
    	color: #0000FF;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-weight: bold;
    	
    	
    }
    li.game{
    	display: inline-block;
    	text-align:center;
    	font-size: 12px;
    	padding-left: 10px;
    	background-color: #D1E5FD;
    	text-decoration: none;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-weight: bold;
    }
    ul.guides a, ul.nav a:visted{
    	display: block;
    	text-decoration: none;
    	background-color: #8090AB;
    	color: #000;
    }
    
    ul.guides a:hover, ul.guides a:active, ul.guides a:focus{
    	background-color: #6F7D94;
    	color: #000;
    }
    
    ul.venue {
    	width: 550px;
    	height: 34px;
    	list-style: none;
    	display: block;
    	background-color: #D1E5FD;
    	border-style: solid;
    	border-width: 1px;
    	border-radius: 2px;
    	border-color: black;
    	border-spacing: 5px;
    	padding-top:1px;
    	border-radius:5px
    }
    
    li.field{
    	width: 150px;
    	display: inline-block;
    	text-align:center;
    	font-size: 12px;
    	padding-left: 10px;
    	background-color: #D1E5FD;
    	text-decoration: none;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-weight: bold;
    }
    Javascript times.js
    Code:
    window.onload = init;
    
    function init(){
    DisplayTimes();
    }
    
    function DisplayTimes(){
    //legal formats: 1/10-13:00 for date and time
    //             : 13:00 for time - presumes utc date is same as local date
    var dd = new Date();
    var list = document.getElementsByTagName('span');
    var mon, date, hr, min;
    for (var i=0 ; i<list.length ; i++){
    if (list[i].hasAttribute('data-utc')){
    var str = list[i].getAttribute('data-utc');
    if(str.indexOf('/') < 0){
    mon = dd.getMonth()+1;
    date = dd.getDate();
    hr = str.substring(0,str.indexOf(':'));
    }else{
    mon = str.substring(0,str.indexOf('/'));
    date = str.substring(str.indexOf('/')+1,str.indexOf('-'));
    hr = str.substring(str.indexOf('-')+1,str.indexOf(':'));
    }
    
    min = str.substring(str.indexOf(':')+1);
    
    dd.setUTCDate(mon);//date of month
    dd.setUTCHours(hr); //24hour hour
    dd.setUTCMinutes(min); //minutes
    dd.setUTCSeconds(0); //seconds
    
    var h = leadzero( dd.getHours() ); 
    var m = leadzero( dd.getMinutes() );
    var s = leadzero( dd.getSeconds() );
    
    list[i].innerHTML += ' '+ h +':'+ m;
    }
    }
    }
    
    function leadzero(n){
    var str1 = n.toString();
    if(str1.length < 2){
    str1 = '0'+ str1;
    }
    return str1;
    }
    Jquery chans2.js
    Code:
    $(".event").click(function(){
       //hide all rrshow
       $(".place").hide();
    
       //show only required rrshow
       $(this).parent().find(".place").show();
    });
    Thank you

    EDIT: Sorry posted some wrong code, Have edited chan2.js to correct code im using
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    you need to load the jQuery library file before you load the chans2.js file (file using the jQuery code)

IMN logo majestic logo threadwatch logo seochat tools logo