VISIT AND LIKE OUR PAGE ON FACEBOOK
TAKE A LOOK AT OUR TWEETS ON TWITTER
SUBSCRIBE TO THE JOOMFREAK RSS FEED
VISIT OUR CHANNEL ON YOUTUBE

Account Details

Change your name, email, password or permanently delete your account. Change settings

We offer several ways you can get support from our experts: Support ForumKnowledgebaseNewsletter

Your Forum Posts

No posts to display.

Welcome, Guest
Username Password: Remember me

Again: Issue -> banner.gif-size and mobile devices
(1 viewing) (1) Guest
  • Page:
  • 1

TOPIC: Again: Issue -> banner.gif-size and mobile devices

Again: Issue -> banner.gif-size and mobile devices 30 Dec 2014 12:04 #6051

There is no solution so far for the static problem of using the calla template with mobile devices. Either the scrolling effect of the slider (banner.jpg) works on PC but not on a mobile device (the size of the banner.jpg doesn’t fit to the mobile screen), or you can switch background-attachment to local + background-size 100% 100% to fix the mobile device size problem, but then I am missing the scroll-effect of letters written above the slide.

I read all 13 pages of the calla forum but there is no solution for this problem.

I know that I can fix it to a static background, so it will scroll with the whole content, but I think this template is cool BECAUSE of the scrolling effect. Mor than 50% of the users visit internetsites with a mobile device. It would be necessary for your team (joomfreak) to keep this template alive, because it's a serious problem in my opinion!

Re: Again: Issue -> banner.gif-size and mobile devices 07 Jan 2015 13:10 #6080

No one?

Re: Again: Issue -> banner.gif-size and mobile devices 08 Jan 2015 03:10 #6084

You can try to edit:
1. templates/jf_calla-exteriors/css/template.css, edit element #jf-slideshow:

background-attachment: fixed;
background-position: center center;

to

background-attachment: scroll;
background-position: center top;

2. templates/jf_calla-exteriors/scripts/js/callaexteriors.js, in function jQuery(window).on("scroll", function(){...}) add:

 
var scrolledY = jQuery(window).scrollTop();
jQuery('#jf-slideshow').css('background-position', 'center ' + ((scrolledY)) + 'px');
 


Thank you for using our template.

joomfreak
Last Edit: 08 Jan 2015 03:18 by isupport.

  • Posts:2940
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0

Re: Again: Issue -> banner.gif-size and mobile devices 09 Jan 2015 12:04 #6091

Hello and thank you for answering,

I did it that way:

jQuery(window).on("scroll", function(){
var scrolledY = jQuery(window).scrollTop();
jQuery('#jf-slideshow').css('background-position', 'center ' + ((scrolledY)) + 'px');
if (jQuery(window).width() > 765) {
if (jQuery(window).scrollTop() > 55){
jQuery('#jf-header').addClass('transparent');
} else {
jQuery('#jf-header').removeClass('transparent');
}
}
});

Is this right? and the first step you mentioned. But please take a look at my site: www.musik-talent-box.de

It still dosn't work.

Re: Again: Issue -> banner.gif-size and mobile devices 09 Jan 2015 14:56 #6092

It works so far, but when I turn the site online (so everyone can enter my site) it doesn't work anymore. Why?

Re: Again: Issue -> banner.gif-size and mobile devices 12 Jan 2015 03:12 #6093

Your site didn't load jQuery library. Go to templates/jf_calla-exteriors/index.php, add
This image is hidden for guests. Please log in or register to see it.
above line
This image is hidden for guests. Please log in or register to see it.

"but when I turn the site online (so everyone can enter my site) it doesn't work anymore. Why?" -> now, I see your site is online.

joomfreak

  • Posts:2940
  • isupport
  • Moderator
  • OFFLINE
  • Karma: 0
  • Page:
  • 1
Time to create page: 0.92 seconds
Tuesday 16 April 2024

joomfreak is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.