parallax in 4.5.1

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: parallax in 4.5.1

Chris Sweeney pro premium asked 7 years ago

Hi I've duplicated a test page onto another server, as I've upgraded from 4.5.0 to 4.5.1 - but the parallax isn't working properly
  1. The image isn't full width
  2. There is no parallax effect!
Working test url (4.5.0): http://tymairllandudno.co.uk/final.php Not working url (4.5.1): http://121t.co.uk/final.php Hope you can point out the changes I need to make. Many thanks Chris

Chris Sweeney pro premium answered 7 years ago

I've fixed the first issue by adding

background-repeat: no-repeat; background-size: cover; background-position: center center;

Cheers

Chris

Ollie Vincent pro answered 7 years ago

Hi, I see in your url that isn't working, you have some console errors: Uncaught TypeError: Cannot read property 'fn' of undefined at bootstrap.min.js:6 at bootstrap.min.js:6 at bootstrap.min.js:6 at bootstrap.min.js:6 mdb.min.js:1 Uncaught SyntaxError: missing ) after argument list final.php:425 Uncaught ReferenceError: WOW is not defined at final.php:425 where as your working link as none. You could also try including JQuery - I see you have it commented out when I viewed the source. Thanks

Chris Sweeney pro premium answered 7 years ago

Thanks Ollie - I wonder if I was uploading it when you looked - it's definitely there! I have re-enabled the jquery - it was commented out a the other page has a working calendar on it, which uses a different version. Other than this - and experiments with the image code, the pages are identical; one works, one doesn't! Cheers Chris

Ollie Vincent pro answered 7 years ago

Oh sorry - I see it now. It's a weird one - I downloaded a fresh version of 4.5.1 and it worked... I then copied your mdb.min.js into mine - and the parallax stopped working. They did change some of the syntax (again) for 4.5.1 so it is possible you didn't upload the new version of js? Try and redownload mdb 4.5.1 and replace mdb.min.js with the newer version because that definately broke the parallax. Thanks

Chris Sweeney pro premium answered 7 years ago

You're a genius!  Re-downloaded and it worked fine. Thanks very much for your help Cheers Chris

Chris Sweeney pro premium answered 7 years ago

Hmmnnn!!!!! I have just copied the entire working site to another location and exactly the same thing has happened! The parallax effect doesn't work until I upload a fresh copy of mdb.min.js Are changes made to this file (I haven't done anything as far as I'm aware) or is it a bug of some sort? Cheers Chris

Ollie Vincent pro commented 7 years ago

They made some syntax changes so it is possible that the parallax effect was updated.

Chris Sweeney pro premium answered 7 years ago

Earlier email: Hi Ollie
But having used the working mdb.min.js on one site, then duplicating the entire site (including the working mdb.min.js) to another location, everything should still work the same - but it doesn't until I replace with a 'fresh copy'
-------------
I've been working on the following page all day, making it dynamic with php. I noticed that the footer was missing, even though it shows in the source code on the live page.
http://sweens.uk/blue.php I wondered if it may be the same issue; I put a fresh copy of mdb.min.js in the site, refreshed the page and lo and behold, the footer appeared!  I scrolled up to the top to make sure the parallax still worked, it did, then scrolled down again - only to find the footer had disappeared again! (BTW - ignore the errors in the navbar - that's the last thing to sort, I hope!) Many thanks Chris

Ollie Vincent pro answered 7 years ago

Hi, I see you have added the wow animation class to your footer content. I also see that you have inline styles relating to the animation - added (presumably) by the JavaScript that reads visibility: hidden; animation-name: none; animation-delay: 0.3s;. Delete that and they show up correctly. Therefore again - yes - I believe its a mdb.min issue - but I have no idea as to why transferring it would do such a thing.

Chris Sweeney pro premium answered 7 years ago

Thanks Ollie - I've removed the wow stuff and it appears properly (I hadn't added it -  it was included in one of the templates). I think I only need to sort out the navbar now - should I raise that as a separate question? Thanks for all your help Cheers Chris

Ollie Vincent pro answered 7 years ago

Your jarallax has a margin-top:70px; on it which is why your navbar looks white. Remove the margin :)

Chris Sweeney pro premium answered 7 years ago

Thanks Ollie - didn't know that. Now working properly. I'd like to add the word 'Photography' below 'Sweens', in a different style - but everything I've tried so far has either put it below the logo or in line with 'Sweens' The bootstrap 3 version shows what I mean; http://sweens.uk/ Thanks again Cheers Chris

Ollie Vincent pro answered 7 years ago

So, you probably want something like this...

All of this is done in the navbar-brand

<img />
Sweens <br />
Photography

Then add a float:left to your image.

That should do it

Chris Sweeney pro premium answered 7 years ago

Thanks Ollie - that did it, indeed! Site now ready for developing further pages. Great support - thanks again Cheers Chris

Ollie Vincent pro answered 7 years ago

No problem - I will close this ticket now :)  
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Chris Sweeney
Pro User Premium support
317Support score
25Questions 51Answers
0Snippets likes 0Snippets