Docs

[Lindy_1]

Hi

The stats I am trying to display don’t go over 30% so I was hoping I could change the parameters to 50% instead of 100%, that way the bars will travel further along. Is this possible?

cheers Kinnear

[Rupok]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Lindy_1]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the very detailed information. What you want needs to have a custom JS code to handle this. It might look like this:

If this is something that you need, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
 $(window).load(function(){
  $('.x-skill-bar .bar').each(function(){
	var W = $(this).width();
	var totalwidth = $('.x-skill-bar').width()/2;
	var thewidth = 'calc(' + W + 'px + ' + totalwidth + 'px)';
	console.log(thewidth);
  	$(this).css({ 'width' : '' + thewidth + '', 'background-color' : 'green !important' });  
  });
 });
})(jQuery);

Hope this would work out.

[Lindy_1]

Hi very close it works however it reverts back to the original look, basically it doesn’t stay like the example you gave me. Other thank that is it great, we seem to be so close if there anyway of fixing this?

cheers, fingers crossed

Kinnear

[Rue Nel]

Hello There,

Could please update the code and use this instead:

(function($){
  $('.x-skill-bar').each(function(){
    $(this).waypoint(function() {
    	var W = $(this).width();
		var totalwidth = $('.x-skill-bar').width()/2;
		var thewidth = 'calc(' + W + 'px + ' + totalwidth + 'px)';
		console.log(thewidth);

    	$(this).find('.bar').animate({ 'width' : thewidth }, 750, 'easeInOutExpo');
  	}, { offset : '95%', triggerOnce : true });
  });
})(jQuery);

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Lely]

Hi Kinnear,

Can you try this code instead:

(function($){
   $(window).load(function(){
   $('.x-skill-bar .bar').each(function(){
	var W = $(this).width(); 
	var totalwidth = $('.x-skill-bar').width()/2;
	var thewidth = 'calc(' + W + 'px + ' + totalwidth + 'px)';
        var percent = parseInt($(this).children( ".percent" ).html().replace('%', '')) -50;
        $(this).children( ".percent" ).html(percent+'%');  
    	 }); });
 })(jQuery);  

Instead of just 28% on the percent value, add 50 to make 78% to adjust the skillbar. Then above code will just update the displayed value.

Hope this helps.

[Lindy_1]

Thanks

I had to a little creative but it worked, pity you don’t have a pie chart as that would have been great. One other thing where the logo is can the white space be increased between the logo and the main menu?

I also need to increase the space between the text in the Counter and the button, I tried to add space but when you checked all devices the buttons weren’t even.

Thanks for your help it is really appreciated

Kinnear

[Christian]

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Lindy_1]

Hi, I just noticed that when I go to the front end the Skilsbar looks like this (the information on the bar is not displaying correctly, see attached screen shot. It looks fine in Cornerstone

cheers

Kinnear

[Christian]

I removed the code in your Appearance > Customize > Custom > Javascript and it was fixed.

(function($){
   $(window).load(function(){
   $('.x-skill-bar .bar').each(function(){
	var W = $(this).width(); 
	var totalwidth = $('.x-skill-bar').width()/2;
	var thewidth = 'calc(' + W + 'px + ' + totalwidth + 'px)';
        var percent = parseInt($(this).children( ".percent" ).html().replace('%', '')) -50;
        $(this).children( ".percent" ).html(percent+'%');  
    	 }); });
 })(jQuery);  

Hope that helps. 🙂

[Lindy_1]

Thanks, greatly appreciated

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts