Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Template Questions /

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba

Jquery doesn work without error message


Go to End
Reply


6 Posts   1860 Views

Avatar
gieske

Community Member, 4 Posts

3 December 2011 at 2:03pm

Hello,

I hope someone has an answer to this problem.

I you look at this link you will see an error message: http://www.deltazuid.nl/communicatie/portfolio/corporate/album/tom-van-zeeland

I know there is a </div> to much, but when i remove that </div> the Jquery slider wont load the images anymore.

Pagecode:

<head>
<% base_tag %>
<link rel="stylesheet" type="text/css" href="themes/deltazuid/css/layout.css" />
<link rel="stylesheet" type="text/css" href="themes/deltazuid/css/typography.css" />
<link rel="stylesheet" type="text/css" href="themes/deltazuid/css/form.css" />

<link rel="stylesheet" type="text/css" href="themes/deltazuid/css/global.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="themes/deltazuid/js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
preload: true,
preloadImage: 'themes/deltazuid/img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});
</script>

</head>

OtherTemplateCode:

<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">

$GalleryLayout

</div>
<a href="#" class="prev"><img src="themes/deltazuid/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="themes/deltazuid/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="themes/deltazuid/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
</div>
</div>
</div>

Avatar
stallain

Community Member, 64 Posts

3 December 2011 at 10:19pm

Hello, it seems that http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js is not accessible. Maybe try another CDN ?

Avatar
gieske

Community Member, 4 Posts

4 December 2011 at 10:02am

I saved the .JS code in my own root, so i don't have to load it from an other site.

But when is look at this javascript: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Is see this message in chrome: jquery.min.js:16 Uncaught TypeError: Object#<Object> has not methos 'slides'

What do I have to do to let it work?

Avatar
gieske

Community Member, 4 Posts

4 December 2011 at 12:22pm

I think the following thing is the problem.

I try to comine a Jquery .JS from a slider with the .JS code of the image-gallery module. When the page loaded, the .JS from the image-gallery shows up at the bottom in the html page and overwrite the Jquery .JS.

When I look at other pages than the image-gallery, then the Jquery .JS works normally.

See the differents:

http://www.deltazuid.nl/communicatie/portfolio/corporate/
http://www.deltazuid.nl/communicatie/portfolio/corporate/album/tom-van-zeeland

Do someone knows how I delete the .JS links of the image-gallery module, so they won't show up?

Avatar
stallain

Community Member, 64 Posts

4 December 2011 at 1:20pm

You can block any js requirement from your page controller :

public function init() { 
      parent::init(); 
      Requirements::block('path-to-the-js-file.js'); 
   }

Another thing to do is replace all your "$" selectors by "jQuery" : jQuery('#s4') instead of $('#s4')
The use of the $ selector may conflict with other js libraries.

Avatar
gieske

Community Member, 4 Posts

5 December 2011 at 8:27am

I solved the problem. I find the .JS in the lightbox of the image-gallery and removed them all, because i don't need them for the website.

So the other custom .JS works without problem of the lightbox .JS.

Thnx for the feedback Stallain!