Hi, I have this fiddle that works but on my website it does nothing.
http://jsfiddle.net/adishardis/r3eyD/17/
What is the best way to troubleshoot why this is?
adishardis 0 Junior Poster
JorgeM 958 Problem Solver Team Colleague Featured Poster
did you add the script reference to jQuery in your document?
adishardis 0 Junior Poster
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
JorgeM 958 Problem Solver Team Colleague Featured Poster
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.
adishardis 0 Junior Poster
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
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Does your HTML have divs with the right id?
adishardis 0 Junior Poster
Jupp, checked, doublechecked and then rechecked! :)
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
Show your complete code, can't keep guessing over it.
adishardis 0 Junior Poster
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]-->
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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.
adishardis 0 Junior Poster
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
adishardis 0 Junior Poster
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
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.