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 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Something wrong and I don't know what

    So the problems I'm currently having are:

    1) The stock ticker at the top is meant to stay in a fixed position and when one times out the next appears in its place. Instead, when one times out the next one appears underneath. If I run this javascript in a separate file it works perfectly. However, in here it doesn't. I take it that is because I have a bunch of other javascripts running and one of them is interfering with the functions/variables.

    2) In IE the colours for 'Trade Volume' and 'Best and Worst Trade' don't work.

    Please help.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Tarek El Shabrawy - Performance</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />


    <link rel="shortcut icon" href="favicon.ico" >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body,td,th {
    font-family: Georgia, serif;
    color: #FFF;
    }
    a:link {
    color: #000;
    }
    a:visited {
    color: #000;
    }
    a:hover {
    color: #F00;
    background-color: #56bcf1;
    }
    a:active {
    color: #000;
    }
    .amazon1 {
    margin: 0px;
    padding: 0px;
    float: left;
    }
    .amazon2 {
    margin: 0px;
    padding: 0px;
    }

    body {
    <!-- background: url(images/background2.jpg) repeat-x; -->
    <!-- position: inherit;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    -->
    ; background-color: #000;
    }
    </style>
    <link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    <div id="wrapper">


    <p>

    <div id="clocks">
    <div style="float:left; padding-right:10px"><label>
    <div align="center">Tokyo</div>
    </label><p>&nbsp;</p><iframe src="http://free.timeanddate.com/clock/i2q73eby/n248/szw110/szh110/hoc000/hbw4/cf100/hgr0/fav0/fiv0/mqc000/mqs3/mql25/mqw6/mqd96/mhc000/mhs3/mhl20/mhw6/mhd96/mmc000/mms3/mml10/mmw2/mmd96/hhw16/hmw16/hmr4/hsc000/hss3/hsl90" frameborder="0" width="112" height="112"></iframe>
    </div>
    <div style="float:left; padding-right:10px"><label>
    <div align="center">London</div>
    </label><p>&nbsp;</p><iframe src="http://free.timeanddate.com/clock/i2q6xlxs/n136/szw110/szh110/hoc000/hbw4/cf100/hgr0/fav0/fiv0/mqc000/mqs3/mql25/mqw6/mqd96/mhc000/mhs3/mhl20/mhw6/mhd96/mmc000/mms3/mml10/mmw2/mmd96/hhw16/hmw16/hmr4/hsc000/hss3/hsl90" frameborder="0" width="112" height="112"></iframe>
    </div>
    <div style="float:left"><label>
    <div align="center">New York</div>
    </label><p>&nbsp;</p><iframe src="http://free.timeanddate.com/clock/i2q73jg1/n179/szw110/szh110/hoc000/hbw4/cf100/hgr0/fav0/fiv0/mqc000/mqs3/mql25/mqw6/mqd96/mhc000/mhs3/mhl20/mhw6/mhd96/mmc000/mms3/mml10/mmw2/mmd96/hhw16/hmw16/hmr4/hsc000/hss3/hsl90" frameborder="0" width="112" height="112"></iframe>
    </div>
    </div>
    <p><br class="clearfloat" />
    </p>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="categories">
    <ul>
    <li><a href="index.html" id="category1" class="filter">Home</a></li>
    <li><a href="category2.html" id="category2" class="current">Performance</a></li>
    <li><a href="category5.html" id="category6" class="filter">Calendar</a></li>
    <li><a href="category5.html" id="category6" class="filter">Tarek El Shabrawy Daily</a></li>
    <li><a href="category3.html" id="category3" class="filter">About</a></li>
    <li><a href="category4.html" id="category5" class="filter">Resources</a></li>
    <li><a href="category5.html" id="category6" class="filter">Contact</a></li>
    </ul>
    </div>

    <div><div id="Ticker1">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Forex_Majors9.js'></script>

    <script type='text/javascript'>
    var k = (EXk_Forex_Majors9('0009801297','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>
    </div>

    <div id="Ticker2" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Forex_Eur_ME_Af.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker2()", 45000);
    function ticker2() {
    document.getElementById("Ticker2").style.display="block";
    document.getElementById("Ticker1").style.display="none";
    }
    var k =(EXk_Forex_Eur_ME_Af('0005501279','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>

    </div><div id="Ticker3" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Index_Majors.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker3()", 113000);
    function ticker3() {
    document.getElementById("Ticker3").style.display="block";
    document.getElementById("Ticker2").style.display="none";
    }
    var k =(EXk_Index_Majors('0008601295','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>
    </div><div id="Ticker4" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Commodity_Majors.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker4()", 162000);
    function ticker4() {
    document.getElementById("Ticker4").style.display="block";
    document.getElementById("Ticker3").style.display="none";
    }
    var k =(EXk_Commodity_Majors('0006701289','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>
    </div><div id="Ticker5" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_MajorST.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker5()", 228000);
    function ticker5() {
    document.getElementById("Ticker5").style.display="block";
    document.getElementById("Ticker4").style.display="none";
    }
    var k =(EXk_Interest_MajorST('0050701341','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>
    </div><div id="Ticker6" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_TBills.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker6()", 256000);
    function ticker6() {
    document.getElementById("Ticker6").style.display="block";
    document.getElementById("Ticker5").style.display="none";
    }
    var k =(EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7'));
    document.write(k);
    </script>
    </div><div id="Ticker7" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_RigCounts.js'></script>

    <script type='text/javascript'>
    setTimeout("ticker7()", 281000);
    function ticker7() {
    document.getElementById("Ticker7").style.display="block";
    document.getElementById("Ticker6").style.display="none";
    }
    var k =(EXk_RigCounts('0166103913','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'373737'));
    document.write(k);
    </script>
    </div><div id="Ticker8" style="display:none">
    <script type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_EconomicStats_US.js'></script>

    <script type="text/javascript">
    setTimeout("ticker8()", 320000);
    function ticker8() {
    document.getElementById("Ticker8").style.display="block";
    document.getElementById("Ticker7").style.display="none";
    }
    var k =(EXk_EconomicStats_US('0199604514','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'3737 37'));
    document.write(k);
    </script>
    </div>
    </div>

    <!-- floating page sharers End --></div>
    <div id="gallery">
    <script src="../../SpryAssets/SpryEffects.js" type="text/javascript"></script>
    <script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup" style="margin-left:25%;">
    <li class="TabbedPanelsTab" tabindex="0" style="border-radius:7px 7px 0px 0px">Profit</li>
    <li class="TabbedPanelsTab" tabindex="0" style="border-radius:7px 7px 0px 0px">Statistics</li>
    <li class="TabbedPanelsTab" tabindex="0" style="border-radius:7px 7px 0px 0px">Monthly Performance</li>
    <li class="TabbedPanelsTab" tabindex="0" style="border-radius:7px 7px 0px 0px">Pairs</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"> <div id="profit" style="width: 800px; height: 400px; margin: 0 auto">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/themes/gray.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>
    <script type="text/javascript">

    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'profit',
    zoomType: 'x',
    spacingRight: 20
    },
    title: {
    text: ''
    },
    subtitle: {
    text: document.ontouchstart === undefined ?
    'Click and drag in the plot area to zoom in' :
    'Drag your finger over the plot to zoom in'
    },
    xAxis: {
    type: 'datetime',
    maxZoom: 14 * 24 * 3600000, // fourteen days
    title: {
    text: null
    }
    },
    yAxis: {
    title: {
    text: 'Profit (£)'
    },
    min: 0.6,
    startOnTick: false,
    showFirstLabel: false
    },
    tooltip: {
    shared: true
    },
    legend: {
    enabled: false
    },
    plotOptions: {
    area: {
    fillColor: {
    linearGradient: [0, 0, 0, 300],
    stops: [
    [0, Highcharts.getOptions().colors[1]],
    [1, 'rgba(2,0,0,0)']
    ]
    },
    lineWidth: 1,
    marker: {
    enabled: false,
    states: {
    hover: {
    enabled: true,
    radius: 5
    }
    }
    },
    shadow: false,
    states: {
    hover: {
    lineWidth: 1
    }
    }
    }
    },

    series: [{
    type: 'area',
    name: '',
    color: '#0000FF',
    pointInterval: 24*3600*36000,
    pointStart: Date.UTC(2011, 09, 01),
    data: [
    0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258
    ]
    }]
    });


    });

    </script></div></div>

    <div class="TabbedPanelsContent" style="width: 800px; height: 400px;
    margin: 0 auto; font-color: black;">
    <script type="text/javascript">
    function OnProductClick1(arg) {
    if (arg.value == "Stats") {
    document.getElementById('St').style.display = "block";
    document.getElementById('TrdH').style.display = "none";;
    }
    else if (arg.value == "Tradinghistory") {
    document.getElementById('TrdH').style.display = "block";
    document.getElementById('St').style.display = "none";
    }
    }
    </script>
    <style type="text/css">
    .hidden{display:none;backgroundColor:white;}

    </style>
    <p>&nbsp;</p>

    <form name="form1" action="" onsubmit="return false;">
    <p align="center">
    <input type="radio" name="product1" onclick="OnProductClick1(this)"
    value="Stats" />Statistics
    <input type="radio" name="product1" onclick="OnProductClick1(this)"
    value="Tradinghistory" /> Trading History
    </p>
    </form>
    <p>&nbsp;</p>
    <div class="hidden" id="St">
    <table width="100%" border="1" cellpadding="0">
    <tr>
    <td bgcolor="#000099" align="center">Trades</td>
    <td bgcolor="#000099" align="center">20</td>
    </tr>
    <tr>
    <td bgcolor="#000099" align="center">Winning Trades</td>
    <td bgcolor="#000099" align="center">10(50%)</td>
    </tr>
    <tr>
    <td bgcolor="#000099" align="center">Maximum Drawdown</td>
    <td> </td>
    </tr>
    <tr>
    <td bgcolor="#000099" align="center">Worst Trade</td>
    <td> </td>
    </tr>
    <tr>
    <td bgcolor="#000099" align="center">Best Trade</td>
    <td> </td>
    </tr>
    <tr>
    <td bgcolor="#000099" align="center">Last Updated</td>
    <td bgcolor="#000099" align="center">15/09/2011</td>
    </tr></table></div>

    <div class="hidden" id="TrdH">
    <table width="100%" border="0" cellpadding="5">
    <tr>
    <td bgcolor="#000099" align="center">Type</td>
    <td bgcolor="#000099" align="center">Description</td>
    <td bgcolor="#000099" align="center">Size</td>
    <td bgcolor="#000099" align="center">Date Opened</td>
    <td bgcolor="#000099" align="center">Date Closed</td>
    <td bgcolor="#000099" align="center">Open/Close</td>
    <td bgcolor="#000099" align="center">Profit</td>
    <td bgcolor="#000099" align="center">Total</td>
    </tr>
    <tr>
    <td bgcolor="#00FF00" align="center">BUY</td>
    <td bgcolor="#00FF00" align="center">FTSE</td>
    <td bgcolor="#00FF00" align="center">1</td>
    <td bgcolor="#00FF00" align="center">15/09/2011 7:34am</td>
    <td bgcolor="#00FF00" align="center">15/09/2011 8:05am</td>
    <td bgcolor="#00FF00" align="center">5275/5328</td>
    <td bgcolor="#00FF00" align="center">£10</td>
    <td bgcolor="#00FF00" align="center">£12</td>
    </tr>
    </table></div>

    </div>

    <div class="TabbedPanelsContent">

    <p align="center">
    <input type="radio" name="product" onclick="OnProductClick(this)" value="MonthlyPnL">Monthly PnL
    <input type="radio" name="product" onclick="OnProductClick(this)" value="TradeVolume"> Trade Volume
    <input type="radio" name="product" onclick="OnProductClick(this)" value="BestndWorst">Best and Worst Trade
    </p>

    <div id="monthly" style="width: 800px; height: 400px; margin: 0 auto">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <script type="text/javascript" src="js/themes/gray.js"></script>
    <script type="text/javascript" src="js/modules/exporting.js"></script>

    <script type="text/javascript">

    var c = true;
    var b = true;
    var t = true;

    function OnProductClick(product) {
    if ((c) && (product.value == "MonthlyPnL")) {
    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'monthly',
    defaultSeriesType: 'column'
    },
    title: {
    text: ''
    },
    subtitle: {
    text: ''
    },
    xAxis: {
    categories: [
    'Oct 2011',
    // 'Nov 2011',
    // 'Dec 2011',
    // 'Jan 2012',
    // 'Feb 2012',
    // 'Mar 2012',
    // 'Apr 2012',
    // 'May 2012',
    // 'Jun 2012',
    // 'Jul 2012',
    // 'Aug 2012',
    // 'Sep 2012'
    ]
    },
    yAxis: {
    min: 0,
    title: {
    text: 'pips'
    }
    },
    // legend: {
    // layout: 'vertical',
    // backgroundColor: '#FFFFFF',
    // align: 'left',
    // verticalAlign: 'top',
    // x: 100,
    // y: 70,
    // floating: true,
    // shadow: true
    // },
    tooltip: {
    formatter: function() {
    return ''+
    this.x +': '+ this.y +' pips/Month';
    }
    },
    plotOptions: {
    column: {
    pointPadding: 0.2,
    borderWidth: 0
    }
    },
    series: [{
    name: '',
    color: '#0000FF',
    data: [48.9, 38.8]

    },
    // {
    // name: 'Berlin',
    // data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

    // }
    ]
    });


    });

    c = false; b = true; t = true;
    }

    else if ((b) &&(product.value == "TradeVolume")) {
    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'monthly',
    defaultSeriesType: 'column'
    },
    title: {
    text: ''
    },
    xAxis: {
    categories: ['Oct 2011', 'Nov 2011', 'Dec 2011', 'Jan 2012', 'Feb 2012']
    },
    yAxis: {
    min: 0,
    title: {
    text: 'Number of Trades'
    },
    stackLabels: {
    enabled: false,
    style: {
    fontWeight: 'bold',
    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
    }
    }
    },
    // legend: {
    // align: 'center',
    // x: -100,
    // verticalAlign: 'top',
    // y: 20,
    // floating: false,
    // backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
    // borderColor: '#CCC',
    // borderWidth: 1,
    // shadow: false
    // },
    tooltip: {
    formatter: function() {
    return '<b>'+ this.x +'</b><br/>'+
    this.series.name +': '+ this.y +'<br/>'+
    'Total: '+ this.point.stackTotal;
    }
    },
    plotOptions: {
    column: {
    stacking: 'normal',
    dataLabels: {
    enabled: true,
    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
    }
    }
    },
    series: [{
    name: 'Win',
    color: '00FF00',
    data: [5, 3, 4, 7, 2]
    }, {
    name: 'Lose',
    color: 'FF0000',
    data: [2, 2, 3, 2, 1]
    }, {
    name: 'Brea-keven',
    color: 'FFFF00',
    data: [3, 4, 4, 2, 5]
    }]
    });


    });

    c = true; b = false; t = true;
    }

    else if ((t) && (product.value == "BestndWorst")) {
    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'monthly',
    defaultSeriesType: 'column'
    },
    title: {
    text: ''
    },
    xAxis: {
    categories: ['Oct 2011', 'Nov 2011', 'Dec 2011']
    },
    yAxis: {
    title: {
    text: 'Pips'
    },
    stackLabels: {
    enabled: false,
    style: {
    fontWeight: 'bold',
    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
    }
    }
    },

    tooltip: {
    formatter: function() {
    return ''+
    this.series.name +': '+ this.y +'';
    }
    },
    credits: {
    enabled: false
    },
    series: [{
    name: 'Best Trade',
    color: '00FF00',
    data: [5, 3, 4, 7, 2]
    }, {
    name: 'Worst Trade',
    color: 'FF0000',
    data: [2, -2, -3, 2, 1]
    }]
    });


    });
    c = true; b = true; t = false;
    }

    }
    </script>
    </div>
    </div>
    <div class="TabbedPanelsContent">
    <div id="pairs" style="width: 800px; height: 400px; margin: 0 auto"><script type="text/javascript">

    var chart;
    $(document).ready(function() {
    chart = new Highcharts.Chart({
    chart: {
    renderTo: 'pairs',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
    },
    title: {
    text: ''
    },
    tooltip: {
    formatter: function() {
    return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
    }
    },
    plotOptions: {
    pie: {
    allowPointSelect: true,
    cursor: 'pointer',
    dataLabels: {
    enabled: false
    },
    showInLegend: true
    }
    },
    series: [{
    type: 'pie',
    name: 'Pairs',
    data: [
    ['GBP/USD', 45.0],
    ['USD/CHF', 26.8],
    //{
    // name: 'Chrome',
    // y: 12.8,
    // sliced: true,
    // selected: true
    // },
    ['EUR/USD', 8.5],
    ['AUD/USD', 6.2],
    ['FTSE', 0.7]
    ]
    }]
    });
    });

    </script></div>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Other .js files

    The source code calls up 6 other .js files:
    SpryEffects.js
    SpryTabbedPanels.js
    jquery.min.js
    highcharts.js
    gray.js
    exporting.js

    If you think the fault might exist in one of these, please let me know and I'll try and post it. The problem is that they are all above 20000 characters long so I'd have to email it.

    Many Thanks

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,142
    Thanks
    203
    Thanked 2,547 Times in 2,525 Posts
    With the best will in the world, I do not see how it is possible to assist you when you have so many different .js files.

    There are two basic reasons why scripts will not work together.

    a) duplication of function and/or variable names between the scripts - the second will over-write the first.
    b) multiple onload statements.
    See:- http://www.javascriptkit.com/javatut...iplejava.shtml
    http://www.dyn-web.com/tutorials/combine.php

    My suggestion is to strip down the code, and introduce your .js files one at a time to try to identify where the problem lies.

    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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