NimbleKit - fast iOS app development

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

Problem discussions

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

Postby 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?
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

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

Postby HalfMoon » Tue Nov 15, 2011 2:24 pm

Sure, zip it up and post it
:)
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

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

Postby Sean2122dd » Tue Nov 15, 2011 4:19 pm

see attached
Last edited by Sean2122dd on Tue Nov 15, 2011 11:05 pm, edited 1 time in total.
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

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

Postby 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>
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

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

Postby 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.
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

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

Postby 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.
:)
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

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

Postby 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 :)
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

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

Postby 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
});
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

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

Postby 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?
Sean2122dd
 
Posts: 58
Joined: Thu Oct 13, 2011 9:28 pm

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

Postby 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-)
User avatar
HalfMoon
NimbleKit Guru
 
Posts: 662
Joined: Thu Jun 04, 2009 6:21 pm
Location: Brighton, UK

Previous

Return to Troubleshooting

Who is online

Users browsing this forum: No registered users and 3 guests