3
Contributors
11
Replies
14
Views
5 Years
Discussion Span
Last Post by adishardis
0

I have the script in my document

<script type="text/javascript">
$(document).ready(function(){
      // Toggle the visibility of all divs when one is clicked.
    $("#input").click(function() {
        $("#one").toggle();
        $("#two").toggle();
        $("#three").toggle();
    });
});​​</script>

Do I need something else as well?

Cheers
/Adam

0

Sorry for not being specific... what I meant was do you have a reference in your code to the jQuery library? The code you posted depends on jQuery. Therefore you have to reference it.

For example, in the <head> section of your page, you need to include this for example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Please note that this is not hte latest version of jQuery and also this is not the only location where you can point to on the Internet. You can download it to your site and reference a local copy if you wish. The advantage to using one stored on a CDN is that chances are someone else visited a site that had this reference and when they get to yours its already cached in the users' browser.

you may want to visit jquery.com for more documentation.

Edited by JorgeM

0

Ok, yes I have a refernce in my <head>. And other working jquerys. I just dont know how to troubleshoot jqeury when it's not working. I've checked out their homepage but couldn't find anything related to this... (maybe because I don't know what to look after :)

Thanks for replying!
/Adam

0

Well here's the code, hope you can make sense of it :)

        <head>       


    <!-------------------------------- scrolleffekten --------------------------->
            <link rel="stylesheet" type="text/css" href="css/demo.css" />
            <link rel="stylesheet" type="text/css" href="css/style_common.css" />
            <link rel="stylesheet" type="text/css" href="css/style10.css" />

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <link rel="stylesheet" href="css/external/jquery-ui-1.8.16.custom.css">  <!-- PLUGIN: jQuery UI styling -->
            <link type="text/css" href="css/smoothness/jquery-ui-1.8.22.custom.css" rel="stylesheet" />

            <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
            <script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
            <script type="text/javascript" src="js/modernizr.custom.69142.js"></script> 

    <!----- the mousewheel plugin - optional to provide mousewheel support ---------->
            <script type="text/javascript" src="script/jquery.mousewheel.js"></script>

            </head>

        <div id="rightdiv"style="min-height:360px;max-width:50%; width:460px; background-color:#8f8f8f; float:right; border-radius:5px;">

            <div id="leftpart" style="float:left;width:90px;margin-right:5px;" >

                <div id="visa"style="height:25px;width:85px;background-color:#fff;f loat:left; margin:5px 5px 0px 5px;border-radius:5px;"><p style="margin:5px;text-align:center;">Hide</p></div>

                <div id="snitt"style="height:347px;width:85px;background-color:#fff;float:left;border-radius:5px;margin:5px;"><p style="margin:5px;text-align:center;">Snitt:</p><img src="/portalen/img/agg.png" style="margin-top:20px;"alt="XXXyyy" wIdth="83" height="258" border="0"></div>
            </div>

            <div id="ett"style="float:left;margin-right:0px;width:365px;" > 
              <div id="one"style="height:25px;width:360px;background-color:#fff;float:left;margin:5px 5px 0px 0px;border-radius:5px;"><p style="margin:5px;text-align:center;">XXXyyy > Mobilt bredband > Oadresserat</p></div>

              <div id="two" style="height:160px;background-color:white;border-radius:5px;padding:5px;width:350px;margin-top:5px;margin-right:5px;float:right;">
                <div class="content ">
                                    <div  class="graph small tab-content" id="plotarea2" ></div>
                                    <?PHP 

     $sql156 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result156 = mysql_fetch_array($sql156))
      {
         $user_data6[] = array(count($user_data6),$result156['Kampanj']);
      }
        $TEST6 = json_encode(($user_data6), JSON_NUMERIC_CHECK);
    ?><?php
         $sql151876 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result151876 = mysql_fetch_array($sql151876))
      {
         $user_data11876[] = array(count($user_data11876),$result151876['Preferens_efter']);
      }
        $TEST36 = json_encode(($user_data11876), JSON_NUMERIC_CHECK); 
    ?><?php
         $sql1518716 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result1518716 = mysql_fetch_array($sql1518716))
      {
         $user_data118716[] = array(count($user_data118716),$result1518716['Utformning']);
      }
        $TEST46 = json_encode(($user_data118716), JSON_NUMERIC_CHECK); 
    ?><?php

     $sql15716 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");
      while($result15716 = mysql_fetch_array($sql15716))
      {
         $user_data16[] = array(count($user_data16),$result15716['Matningsnamn']);
      } 
        $TEST16 = json_encode(($user_data16), JSON_NUMERIC_CHECK);
    ?>
                                </div> <!-- End of graph.content --></div>

                                <div id="three"class="contentsa "style="float:right;height:160px;background-color:white;border-radius:5px;padding:5px;width:350px;margin-top:5px;margin-right:5px;">
            <div class="content ">
                                    <div  class="graph small tab-content" id="plotarea" ></div>
                                    <?PHP 

     $sql15 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result15 = mysql_fetch_array($sql15))
      {
         $user_data[] = array(count($user_data),$result15['Kampanj']);
      }
        $TEST = json_encode(($user_data), JSON_NUMERIC_CHECK);
    ?><?php
         $sql15187 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result15187 = mysql_fetch_array($sql15187))
      {
         $user_data1187[] = array(count($user_data1187),$result15187['Preferens_efter']);
      }
        $TEST3 = json_encode(($user_data1187), JSON_NUMERIC_CHECK); 
    ?><?php
         $sql151871 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");

      while($result151871 = mysql_fetch_array($sql151871))
      {
         $user_data11871[] = array(count($user_data11871),$result151871['Utformning']);
      }
        $TEST4 = json_encode(($user_data11871), JSON_NUMERIC_CHECK); 
    ?><?php

     $sql1571 = mysql_query("SELECT *
                               FROM XXXyyy
                               ORDER BY Id_kund");
      while($result1571 = mysql_fetch_array($sql1571))
      {
         $user_data1[] = array(count($user_data1),$result1571['Matningsnamn']);
      } 
        $TEST1 = json_encode(($user_data1), JSON_NUMERIC_CHECK);
    ?>
                                </div> <!-- End of graph.content -->
                                </div>       
            </div></div>

            <div id="filter"style="height:30px;width:100%;background-color:#8f8f8f;float:left;Margin-top:10px;border-radius:1px;"></div>
    <ul  id="container" class="main" style="bottom: 0px;">
    <?php
        $sql26 = "SELECT * FROM XXXyyy ORDER BY Id_kund desc";  // WHERE AND matningstyp ='XXXyyy' AND affarsomrade ='$affarsomrade'
            $result26 = mysql_query($sql26) or die (mysql_error());  
            while ($row26 = mysql_fetch_array($result26)) 
            { 
            if($row26["Kampanj"] <= 20){
                $star = 1;
            }
            elseif($row26["Kampanj"] <= 30){
                $star = 2;
            }
                    elseif($row26["Kampanj"] <= 40){
                $star = 3;
            }
                    elseif($row26["Kampanj"] <= 50){
                $star = 4;
            }
            else{
                $star = 5;
            }  
            echo "<il data-id='{$row26[Id]}' class='viewer view-tenth'><img src=\"foretag/XXXyyy/Presentationer/{$test}/".$row26["Matningsnamn"]."/enheter/1.png\" wIdth=\"150\" height=\"120\" style=\"position: absolute;\">
                    <div style=\"background:black;opacity:0.6;width:200px;height:30px;\"></div>
                    <img src=\"img/stars/STARS2/3/$star.png\" style=\"position: absolute;  top: 5px; left: 3px;width:90px;z-index:1111;\"> <H6 style=\"font-size:11px;color:white;position: absolute;top: 9px; left: 106px;z-index:3311;\">".date("M,Y", strtotime($row26['Datum_formatning']))."</H6>
                        <div class='mask'>
                            <h2 style=\"text-transform: uppercase;color: WHITE;width:120px;text-align: LEFT;position: relative;font-size: 15px;border-bottom: 1px solid rgba(0, 0, 0, 0.3);background: transparent;margin: 0px 10px;padding: 5px;\">".$row26["Matningsnamn"]."</h2>
                            <p>Kanal: <b>".$row26['Kanal']."</b></p>
                            <p>Intentionsförflyttning: <br \><b>".$row26['Nyfikenhet']." enheter</b> </p>
                            <a class='info' href='http://adam.synology.me/portalen/main.php?id=3&scroll=".$row26[Id]."'>Gå vidare</a>
                        </div>
            </il>";
            } ;
            ?>
    </ul></div></div>


            <!-- JavaScript at the bottom for fast page loading -->

    <script type="text/javascript">
    $(document).ready(function(){
          // Toggle the visibility of all divs when one is clicked.
        $("#visa").click(function() {
            $("#ett").animate({width:'toggle'},1500)
        });
    });
    </script>    
              <script type="text/javascript">
        $(window).load(function () {
                var data1 = [{
                        "label": "Varumärke",
                        "data": <?php echo $TEST6; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 1,
                            lineWidth : 2,
                        }},
                        {
                        "label": "Intention",
                        "data": <?php echo $TEST36; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 2,
                            lineWidth : 2,
                        }},
                        {
                        "label": "Respons",
                        "data": <?php echo $TEST46; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 3,
                            lineWidth : 2,
                        }
                    }];
    $.plot($('#plotarea'), data1,{
                        grid : {hoverable : true, tickColor: '#DDDDDD',labelMargin: 10, verticalLines: false, horizontalLines: false, outlineWidth: 0},
                        xaxis: { ticks: <?php echo $TEST16; ?>},
                        yaxis: {  position: "left"}, // or "right" 
                        colors: ["#00eb0b", "#eea0a0", "#f6ff00"],
                        series : { lines: { show: true,fill: false, fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.01 } ] } }},
                        points: { show: true }
                    });
                    });
       </script> 
            <!-- JavaScript at the bottom for fast page loading -->
              <script type="text/javascript">
        $(window).load(function () {
                var data2 = [{
                        "label": "Kampanjbetyg",
                        "data": <?php echo $TEST; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 1,
                            lineWidth : 2,
                        }},
                        {
                        "label": "Preferens",
                        "data": <?php echo $TEST3; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 2,
                            lineWidth : 2,
                        }},
                        {
                        "label": "Utformning",
                        "data": <?php echo $TEST4; ?>,
                        bars: {
                            barWidth: 0.2, 
                            order: 3,
                            lineWidth : 2,
                        }
                    }];
    $.plot($('#plotarea2'), data2,{
                        grid : {hoverable : true, tickColor: '#DDDDDD',labelMargin: 10, verticalLines: false, horizontalLines: false, outlineWidth: 0},
                        xaxis: { ticks: <?php echo $TEST1; ?>},
                        yaxis: {  position: "left"}, // or "right" 
                        colors: ["#00eb0b", "#eea0a0", "#f6ff00"],
                        series : { lines: { show: true,fill: false, fillColor: { colors: [ { opacity: 0.3 }, { opacity: 0.01 } ] } }},
                        points: { show: true }
                    });
                    });
       </script> 
            <!-- Grab Google CDN's jQuery + jQueryUI, with a protocol relative URL; fall back to local -->       


            <link rel="stylesheet" href="css/plugin.charts.css"> 
            <script defer src="js/mylibs/flot/jquery.flot.js"></script> <!-- REQUIRED for chart -->
            <script defer src="js/mylibs/flot/jquery.flot.pie.js"></script> <!-- REQUIRED for pie chart -->
            <script defer src="js/mylibs/flot/jquery.flot.orderBars.js"></script> <!-- REQUIRED for bar chart -->
            <script defer src="js/script.js"></script> <!-- REQUIRED: Generic scripts -->



            <!-- scripts concatenated and minified via build script -->
            <script defer src="js/plugins.js"></script> <!-- REQUIRED: Different own jQuery plugnis -->
            <script defer src="js/mylibs/jquery.ba-resize.js"></script> <!-- RECOMMENDED when using sidebar: page resizing -->
            <script defer src="js/mylibs/jquery.easing.1.3.js"></script> <!-- RECOMMENDED: box animations -->
            <script defer src="js/mylibs/jquery.ui.touch-punch.js"></script> <!-- RECOMMENDED: touch compatibility -->
            <script defer src="js/mylibs/jquery.tipsy.js"></script> <!-- REQUIRED for chart tooltips -->
            <script defer src="js/mylibs/flot/excanvas.js"></script> <!-- Canvas for IE7 -->
            <script defer src="js/script.js"></script> <!-- REQUIRED: Generic scripts -->
            <script defer src="js/mylibs/jquery.prettyPhoto.js"></script>

            <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to
            support IE 6.
            chromium.org/developers/how-tos/chrome-frame-getting-started -->
            <!--[if lt IE 7 ]><script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
            <scriptdefer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
            <![endif]-->

            <!--[if lt IE 7 ]>
            <script defer
            src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
            <script
            defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
            <![endif]-->
0

Let's start of with the missing doctype, html and body opening and closing tags. Not sure what you use for testing, but IE is very sensitive to this.

0

this page is included in the main page and I for some reason put the <head> tags in the code above but on my site the head tags are on the main page. This page has no html, head or body tag...

Sorry for the confusion!

/Adam

0

In firebug i noticed a warning of "illegal characters" in the script. The strange thing was that notepad++ didn't show the illegal characters.

The problem was solved by me retyping the function instead of pasting it from my jsfiddle.

Strange :)
Take care
/Adam

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.