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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascripts and Jquery not working

    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 http://jsfiddle.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 changed Chan2.js to correct code im using
    Last edited by Gilera; 10-19-2013 at 03:11 PM.

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts


  •  

    Posting Permissions

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