Javascript files not working? Here's how to fix the issue

by **Sean2122dd** » Tue Nov 15, 2011 3:53 am

would you like me to compress my project file to see if anyone can get to the bottom of this?

by **HalfMoon** » Tue Nov 15, 2011 2:24 pm

Sure, zip it up and post it

by **Sean2122dd** » Tue Nov 15, 2011 4:19 pm

see attached

by **HalfMoon** » Tue Nov 15, 2011 6:12 pm

Hey Sean

Try this for main3.html:

Code: Select all

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script type="text/javascript" src="NKit.js"></script>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>
<!--<script type="text/javascript" src="jquery.min.js"></script>-->


<script type="text/javascript">
var navController = new NKNavigationController();
navController.setTitle("Photo Gallery")
navController.setTintColor(51,87,24);
navController.show();
</script>

<style>
#showcase {
position: relative;
width: 700px;
height:170px;
}

#showcase li {
width: 170px;
height: 170px;
float: left;
list-style-type: none;
}

#showcase li img {
width: 100%;
height: 100%;
}
</style>

</head>

<body>

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>


<ul id="showcase">
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
</ul>

<script>
document.observe('dom:loaded', function () {
new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {duration: 0.3});
});
</script>

</body>
</html>

by **Sean2122dd** » Tue Nov 15, 2011 11:09 pm

HalfMoon wrote:Hey Sean

Try this for main3.html:

Code: Select all

<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<script type="text/javascript" src="NKit.js"></script>

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="showcase.js"></script>
<!--<script type="text/javascript" src="jquery.min.js"></script>-->


<script type="text/javascript">
var navController = new NKNavigationController();
navController.setTitle("Photo Gallery")
navController.setTintColor(51,87,24);
navController.show();
</script>

<style>
#showcase {
position: relative;
width: 700px;
height:170px;
}

#showcase li {
width: 170px;
height: 170px;
float: left;
list-style-type: none;
}

#showcase li img {
width: 100%;
height: 100%;
}
</style>

</head>

<body>

<a href="#next" class="controls" rel="next">Next</a>
<a href="#previous" class="controls" rel="previous">Previous</a>


<ul id="showcase">
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
<li><img src="bowden.png" alt="2" /></li>
<li><img src="https://www.bowdenhostas.com/product_images/j/gold_standard___30686_thumb.jpg" alt="1" /></li>
</ul>

<script>
document.observe('dom:loaded', function () {
new Showcase.Horizontal($$('#showcase li'), $$('a.controls'), {duration: 0.3});
});
</script>

</body>
</html>

Oh my goodness!!! Thank you!! So what was the issue?

Code: Select all

<script> document.observe('dom:loaded', function() { new Showcase.Horizontal($$('#showcase li), $$('a.controls), {duration: 0.3}); }); </script>

wasn't added before? If so could you explain this function please.

by **HalfMoon** » Wed Nov 16, 2011 1:44 pm

Sean2122dd wrote:Oh my goodness!!! Thank you!! So what was the issue?
Code: Select all
<script> document.observe('dom:loaded', function() { new Showcase.Horizontal($$('#showcase li), $$('a.controls), {duration: 0.3}); }); </script>
wasn't added before? If so could you explain this function please.

I've not really used the prototype library before, so this might not be 100% accurate but it seems to me that it watches for the dom to finish loading all the scripts and content, and then once everything is present, it fires the new showcase function. You had the project set up correctly (the scripts were in the right place and not in compile sources) but the showcase call wasn't quite there it seems.

by **Sean2122dd** » Wed Nov 16, 2011 1:54 pm

HalfMoon wrote:
Sean2122dd wrote:Oh my goodness!!! Thank you!! So what was the issue?
Code: Select all
<script> document.observe('dom:loaded', function() { new Showcase.Horizontal($$('#showcase li), $$('a.controls), {duration: 0.3}); }); </script>
wasn't added before? If so could you explain this function please.
I've not really used the prototype library before, so this might not be 100% accurate but it seems to me that it watches for the dom to finish loading all the scripts and content, and then once everything is present, it fires the new showcase function. You had the project set up correctly (the scripts were in the right place and not in compile sources) but the showcase call wasn't quite there it seems.

I think I see what you mean, I just have tried different approaches for photo galleries including ContentFlow, but always had the same result of a blank screen, I'll try the same method that you've used with a different js and let you know the result. thanks again

by **HalfMoon** » Wed Nov 16, 2011 2:09 pm

For a jQuery script it would be something like:

Code: Select all

$(document).ready(function() {
   // jQuery code here
 });

by **Sean2122dd** » Wed Nov 16, 2011 5:57 pm

HalfMoon wrote:For a jQuery script it would be something like:
Code: Select all
$(document).ready(function() { // jQuery code here });

You're going to have to excuse my amateur-ness. So how do I know what to type to execute the different types of js?

by **HalfMoon** » Wed Nov 16, 2011 7:44 pm

You'll generally know if a script is dependant on jQuery, prototype, mootools etc as it should be in the documentation and if you check any demo examples of a script it should show the correct usage. For a "regular" script that doesn't use a library, eg. ContentFlow you'll notice that it doesn't have a link to jQuery (or any other js library) on the page. If in doubt, check the examples and see how it is set up.
8-)

Javascript files not working? Here's how to fix the issue

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Re: Javascript files not working? Here's how to fix the issu

Who is online