Joomla Templates Club 406,261 posts

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477518

Hi seaneo,

1. To use other image, you can change it via language detect.
So the javascript code should be like this

$('<a id="wbacktop" href="" class="backtotop ' + $('html').attr('lang') + '" title=""></a>').appendTo(document.body).on('click', function () {
$('html, body').stop(true).animate({ scrollTop:0 }, 1000);
return false;
});

And the add a new rule for css just after previous rule.
.backtotop.es-es {
background-image: url(…new image for language es-es here… )
}

2. To make this button only show up when user scroll at least 300px
Just right after the block javascript code above, you should add

$('#wbacktop').hide();
$(window).on('scroll', function(){
var scrolltop = $(window).scrollTop(),
visible = $('#wbacktop').is(':visible');

if(scrolltop >= 300 && !visible){
$('#wbacktop').show();
}else if(scrolltop < 300 && visible){
$('#wbacktop').hide();
}
});

Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477566

Hi Wall Crasher,

I’m getting many unexpected results, no doubt due to my lack of coding skills – maybe becuase I don’t know where and when to use closing brackets etc…

So, for the script.js file, it should look like this? (I started copy/paste from line 516)

if(window.jtypo.length){
var css = document.createElement('link');
css.type = 'text/css';
css.rel= 'stylesheet';
css.href= JADef.tplurl + 'css/jtypo.css';
document.getElementsByTagName('head')[0].appendChild(css);

$.getScript(JADef.tplurl + 'js/jtypo.js');
}
$('<a id="wbacktop" href="" class="backtotop ' + $('html').attr('lang') + '" title=""></a>').appendTo(document.body).on('click', function () {
$('html, body').stop(true).animate({ scrollTop:0 }, 1000);
return false;
.backtotop.es-es {
background-image: url(...new image for language es-es here... )
}
$('#wbacktop').hide();
$(window).on('scroll', function(){
var scrolltop = $(window).scrollTop(),
visible = $('#wbacktop').is(':visible');

if(scrolltop >= 300 && !visible){
$('#wbacktop').show();
}else if(scrolltop < 300 && visible){
$('#wbacktop').hide();
}
});


and then for the relative code in, template.css , it should be like this?


.backtotop.es-es {
background-image: url("../images/scroll-to-top-wm-es.jpg")
}
a.backtotop {
position: fixed;
bottom: 2px;
right: 10px;
width: 73px;
height: 79px;
display: block;
background: url("../images/scroll-to-top-wm.jpg") white 0 0 no-repeat;
z-index: 99999;
}


Sorry to ask for such hand holding, but I’m trying my best! thanks

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477593

Hi

The block code should be like this

if(window.jtypo.length){
var css = document.createElement('link');
css.type = 'text/css';
css.rel= 'stylesheet';
css.href= JADef.tplurl + 'css/jtypo.css';
document.getElementsByTagName('head')[0].appendChild(css);

$.getScript(JADef.tplurl + 'js/jtypo.js');
}
$('<a id="wbacktop" href="" class="backtotop ' + $('html').attr('lang') + '" title=""></a>')
.appendTo(document.body)
.hide()
.on('click', function () {
$('html, body').stop(true).animate({ scrollTop:0 }, 1000);
return false;
});

$(window).on('scroll', function(){
var scrolltop = $(window).scrollTop(),
visible = $('#wbacktop').is(':visible');

if(scrolltop >= 300 && !visible){
$('#wbacktop').show();
}else if(scrolltop < 300 && visible){
$('#wbacktop').hide();
}
});


a.backtotop {
position: fixed;
bottom: 2px;
right: 10px;
width: 73px;
height: 79px;
display: block;
background: url("../images/scroll-to-top-wm.jpg") white 0 0 no-repeat;
z-index: 99999;
}

.backtotop.es-es {
background-image: url("../images/scroll-to-top-wm-es.jpg")
}

Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477711

Hi Wall Crasher,

thanks but after going with the above code, the effect is : http://easycaptures.com/5585687549

…sort of a reverse staircase effect of the article previews, with no sign of the scroll buttons also.

I am leaving it on overnight live so you can see the live site at http://173.254.15.37

I really appreciate your ongoing help, I need to get this resolved quickly, many thanks

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477714

Hi seaneo,

As I can see, you are miss a ‘});’ at the end of file.
Please pm ftp for me to check.
I could not login to your ftp again.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477755

I just sent you the FTP data

You mean in the script.js file? I see }); at the end of the file but maybe it’s not in the right spot? thanks for your quick attention to this matter!

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477766

Hi seaneo,

I just updated on your site.

Please make sure that you clear your browser cache.

🙂

Regards

2 users say Thank You to Wall Crasher for this useful post

1. seaneo
2. TomC

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477781

awesome!! thanks very much Wall Crasher!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#477782

<em>@seaneo 352558 wrote:</em><blockquote>awesome!! thanks very much Wall Crasher!</blockquote>
I am sorry I was not able to assist more …. and I am very glad/appreciative that my colleague, Wall Crasher, was able to successfully assist you further.

All the best with your continuing site development …. and have a SAFE and Happy New Year celebration !!!

1 user says Thank You to TomC for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477791

you too Tom, many thanks

[arucardx Friend arucardxJoin date: July 2010Posts: 346Downloads:0Uploads:10 Thanks: 21 Thanked: 138 times in 104 posts]

#477832

Actually Tom, you were not wrong. Its just that they needed to create a footer position in index.php then publish a scroll to top module in that position. Not sure if a plugin would work, but I uses a module instead so I can control where to display it.

[Author]

Posts