Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #611144

    Hello,

    I’m trying to turn off the animation of progress bars on my homepage. I checked some of the previous posts and found these two CSS lines:

    .avia-progress-bar div.progress .bar { animation: none !important; }
    .avia_transform .avia-progress-bar div.progress.avia_start_animation .bar-outer { -webkit-animation: none !important; -moz-animation: none !important; animation: none !important; }

    The second one works, however the bars still show one by one in the progress bar box. In other words, animation is not slowly increasing bar, but a simple shift from no bar to bar. What do I need to do to simply show the final progress bar image?

    #611356

    Hey Iztok!

    Please add following code to Quick CSS as well

    .avia_transform #top div.progress .bar-outer {
        width: 100%;
    }

    Best regards,
    Yigit

    #611362

    Worked like a charm, thanks. I would love to keep the animation, but it becomes annoying if you need to wait for it to load each time.

    By the way, is there anything similar I can add in CSS for Google Maps pins (same page, link provided)?

    #612036

    Hey!

    are you using any plugin for your Google Maps? can you provide us admin access please? so we can take a closer look into it? post login details here as private reply.

    Best regards,
    Andy

    #613878

    No plugin for Google Maps is used. I raised the matter of providing you with admin access with colleagues, will get back to you soon. But I honestly thought some CCS can solve the issue.

    #615688

    Hi!

    You have to modify the js > shortcodes.js file. Look for this code around line 596:

    animation: google.maps.Animation.BOUNCE,
    

    Remove it.

    Regards,
    Ismael

    #615736

    Thanks, but this solves only part of my problem. The markers are now not bouncing, but they are still shown one at a time. What I’m after is a map with all the markers shown immediately when you open a page.

    #617193

    Hey!

    Replace the block of code starting from line 581 to 617:

    var marker = "";
    
    							if(!_self.$data.marker[key] || !_self.$data.marker[key].long || !_self.$data.marker[key].long)
    							{
    								$.avia_utilities.log('Latitude or Longitude for single marker missing', 'map-error');
    								return;
    							}
    
    							_self.$data.LatLng = new google.maps.LatLng(_self.$data.marker[key].lat, _self.$data.marker[key].long);
    
    							var markerArgs = {
    			        		  flat: false,
    						      position: _self.$data.LatLng,
    						      map: _self.map,
    						      title: _self.$data.marker[key].address,
    						      optimized: false
    						    };
    
    						    //set a custom marker image if available. also set the size and reduce the marker on retina size so its sharp
    						    if(_self.$data.marker[key].icon && _self.$data.marker[key].imagesize)
    						    {
    						    	var size = _self.$data.marker[key].imagesize, half = "", full = "";
    
    						    	if(_self.retina && size > 40) size = 40;			//retina downsize to at least half the px size
    						    	half = new google.maps.Point(size / 2, size ) ; 	//used to position the marker
    						    	full = new google.maps.Size(size , size ) ; 		//marker size
    						    	markerArgs.icon = new google.maps.MarkerImage(_self.$data.marker[key].icon, null, null, half, full);
    						    }
    
    			        		marker = new google.maps.Marker(markerArgs);
    
    			        		marker.setAnimation(null); _self._infoWindow(_self.map, marker, _self.$data.marker[key]);
    

    We remove the setTimeout function.

    Cheers!
    Ismael

    #617200

    Worked like a charm. Many thanks for this.

    #617224

    Hey!

    Glad it worked. Please create a note or a change log of this modification in case you update the theme.

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Progress bar animation’ is closed to new replies.