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.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Template Questions /

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

Jquery doesn work without error message


Go to End


6 Posts   2301 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, 68 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, 68 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!