Re: BizBuzz - New Template

[uniqu3]

HI DCX,

Code: Select all

<__script__ type="text/javascript" src="uploads/BizBuzz/functions.js"></__script> 

This is the js file that controls Cycle or Nivo Slider plugins.

[Sign]

Hi Karma,

It only moves the slider text box. The slider picture dropdown are still shown on the bottom of the screen.

Just to get it clear.
Normally you should have 6 rows
slidertext
silder gallery dropdown
slidertext
silder gallery dropdown
slidertext
silder gallery dropdown

What is have now are three rows with slider text and the gallery dropdown is shown on the bottom of the (EDITOR) page. On the website it is working normally. The problem is in de add page section.

@Sign
Where is this part located in your template:

Code: Select all

{content block="Display Three Blocks in Content" oneline="true" size="1" default="-" assign="contentblocks"}
{if empty($contentblocks)}{assign var="contentblocks" value="+"}{/if}
{* Showing the Header Sliders *}
{capture assign='cfirst'}{content block='First Teaser Title Attribute' wysiwyg="false" oneline="true"}{/capture}
{capture assign='tfirst'}{content_image block='First Teaser' dir='BizBuzz/teaser' urlonly='true'}{/capture}
{capture assign='csecond'}{content block='Second Teaser Title Attribute' wysiwyg="false" oneline="true"}{/capture}
{capture assign='tsecond'}{content_image block='Second Teaser' dir='BizBuzz/teaser' urlonly='true'}{/capture}
{capture assign='cthird'}{content block='Third Teaser Title Attribute' wysiwyg="false" oneline="true"}{/capture}
{capture assign='tthird'}{content_image block='Third Teaser' dir='BizBuzz/teaser' urlonly='true'}{/capture}

You could try moving this code somewhere else in the template before {content} tag to see if it changes anything.
[/quote]

[DCX]

uniqu3 - I found the right functions.js file. I was trying to edit the wrong one inside the js/ folder. I still cannot seem to change the settings though? What I want to do is change the effect to "scroll right" and change the speed or delay. I am also looking at Nivo Slider website. I know you don't support their work but if anyone knows where I can do this I appreciate it.

This is my functions.js file I am playing with. var defaults near bottom have no effect

Code: Select all

// Superfish Menu

$(document).ready(function() {
        $('ul.sf-menu').superfish({
            delay:       1000,                            
            animation:   {opacity:'show',height:'show'},  
            speed:       'fast',                          
            autoArrows:  false,                           
            dropShadows: true                            
        });
    }); 

// erstes Wort im Titel orange
   $(document).ready(function()
    {$("#contentTitle").html(function(i,text){
    return text.replace(/\w+\s/, function(match){
    return '<span class="brown">' + match + '</span>'; 
    });
});
    });
    
//  headerTeaser - Nivo Slider

	$(document).ready(function() {
		$('#slider').nivoSlider();
	} );
  
// News Cycle Scroller

$(document).ready(function() {  
$('.newsCycle')
.after('<div class="newsControl">')
.cycle({ 
    fx:     'scrollLeft', 
    timeout: 6000, 
    pager:  '.newsControl',
    pause: 1,
    delay:  -3500 
}); 
});  
  
/* 

	Sitemap Styler v0.1
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	visit http://cssglobe.com/lab/sitemap_styler/
	
*/

this.sitemapstyler = function(){
	var sitemap = document.getElementById("sitemap")
	if(sitemap){
		
		this.listItem = function(li){
			if(li.getElementsByTagName("ul").length > 0){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "";
				var span = document.createElement("span");
				span.className = "expanded";
				span.onclick = function(){
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
				};
				li.appendChild(span);
			};
		};
		
		var items = sitemap.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){
			listItem(items[i]);
		};
		
	};	
};

window.onload = sitemapstyler;   

	
/*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 


this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$(".tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$(".tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};



// starting the script on page load
$(document).ready(function(){
	tooltip();
});	


// Slide to with jquery

function goToByScroll(id){
     			$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
		}
		
// Scroll to Top

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

(function($){
	$.fn.UItoTop = function(options) {

 		var defaults = {
			text: 'To Top',
			min: 200,
			inDelay:600,
			outDelay:400,
  			containerID: 'toTop',
			containerHoverID: 'toTopHover',
			scrollSpeed: 1200,
			easingType: 'linear'
 		};

 		var settings = $.extend(defaults, options);
		var containerIDhash = '#' + settings.containerID;
		var containerHoverIDHash = '#'+settings.containerHoverID;
		
		$('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');
		$(containerIDhash).hide().click(function(){
			$('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
			$('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
			return false;
		})
		.prepend('<span id="'+settings.containerHoverID+'"></span>')
		.hover(function() {
				$(containerHoverIDHash, this).stop().animate({
					'opacity': 1
				}, 600, 'linear');
			}, function() { 
				$(containerHoverIDHash, this).stop().animate({
					'opacity': 0
				}, 700, 'linear');
			});
					
		$(window).scroll(function() {
			var sd = $(window).scrollTop();
			if(typeof document.body.style.maxHeight === "undefined") {
				$(containerIDhash).css({
					'position': 'absolute',
					'top': $(window).scrollTop() + $(window).height() - 50
				});
			}
			if ( sd > settings.min ) 
				$(containerIDhash).fadeIn(settings.inDelay);
			else 
				$(containerIDhash).fadeOut(settings.Outdelay);
		});

};
})(jQuery);		


$(document).ready(function() {
			/*
			var defaults = {
	  			containerID: 'moccaUItoTop', // fading element id
				containerHoverClass: 'moccaUIhover', // fading element hover class
				scrollSpeed: 1200,
				easingType: 'linear' 
	 		};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});

[Sign]

Did you clean the cache in CMS MS. I had a simalr issue and after cleaning the cache it was solved.

uniqu3 - I found the right functions.js file. I was trying to edit the wrong one inside the js/ folder. I still cannot seem to change the settings though? What I want to do is change the effect to "scroll right" and change the speed or delay. I am also looking at Nivo Slider website. I know you don't support their work but if anyone knows where I can do this I appreciate it.

This is my functions.js file I am playing with. var defaults near bottom have no effect

Code: Select all

// Superfish Menu

$(document).ready(function() {
        $('ul.sf-menu').superfish({
            delay:       1000,                            
            animation:   {opacity:'show',height:'show'},  
            speed:       'fast',                          
            autoArrows:  false,                           
            dropShadows: true                            
        });
    }); 

// erstes Wort im Titel orange
   $(document).ready(function()
    {$("#contentTitle").html(function(i,text){
    return text.replace(/\w+\s/, function(match){
    return '<span class="brown">' + match + '</span>'; 
    });
});
    });
    
//  headerTeaser - Nivo Slider

	$(document).ready(function() {
		$('#slider').nivoSlider();
	} );
  
// News Cycle Scroller

$(document).ready(function() {  
$('.newsCycle')
.after('<div class="newsControl">')
.cycle({ 
    fx:     'scrollLeft', 
    timeout: 6000, 
    pager:  '.newsControl',
    pause: 1,
    delay:  -3500 
}); 
});  
  
/* 

	Sitemap Styler v0.1
	written by Alen Grakalic, provided by Css Globe (cssglobe.com)
	visit http://cssglobe.com/lab/sitemap_styler/
	
*/

this.sitemapstyler = function(){
	var sitemap = document.getElementById("sitemap")
	if(sitemap){
		
		this.listItem = function(li){
			if(li.getElementsByTagName("ul").length > 0){
				var ul = li.getElementsByTagName("ul")[0];
				ul.style.display = "";
				var span = document.createElement("span");
				span.className = "expanded";
				span.onclick = function(){
					ul.style.display = (ul.style.display == "none") ? "block" : "none";
					this.className = (ul.style.display == "none") ? "collapsed" : "expanded";
				};
				li.appendChild(span);
			};
		};
		
		var items = sitemap.getElementsByTagName("li");
		for(var i=0;i<items.length;i++){
			listItem(items[i]);
		};
		
	};	
};

window.onload = sitemapstyler;   

	
/*
 * Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */
 


this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$(".tooltip").hover(function(e){											  
		this.t = this.title;
		this.title = "";									  
		$("body").append("<p id='tooltip'>"+ this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$(".tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};



// starting the script on page load
$(document).ready(function(){
	tooltip();
});	


// Slide to with jquery

function goToByScroll(id){
     			$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
		}
		
// Scroll to Top

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

(function($){
	$.fn.UItoTop = function(options) {

 		var defaults = {
			text: 'To Top',
			min: 200,
			inDelay:600,
			outDelay:400,
  			containerID: 'toTop',
			containerHoverID: 'toTopHover',
			scrollSpeed: 1200,
			easingType: 'linear'
 		};

 		var settings = $.extend(defaults, options);
		var containerIDhash = '#' + settings.containerID;
		var containerHoverIDHash = '#'+settings.containerHoverID;
		
		$('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');
		$(containerIDhash).hide().click(function(){
			$('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType);
			$('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType);
			return false;
		})
		.prepend('<span id="'+settings.containerHoverID+'"></span>')
		.hover(function() {
				$(containerHoverIDHash, this).stop().animate({
					'opacity': 1
				}, 600, 'linear');
			}, function() { 
				$(containerHoverIDHash, this).stop().animate({
					'opacity': 0
				}, 700, 'linear');
			});
					
		$(window).scroll(function() {
			var sd = $(window).scrollTop();
			if(typeof document.body.style.maxHeight === "undefined") {
				$(containerIDhash).css({
					'position': 'absolute',
					'top': $(window).scrollTop() + $(window).height() - 50
				});
			}
			if ( sd > settings.min ) 
				$(containerIDhash).fadeIn(settings.inDelay);
			else 
				$(containerIDhash).fadeOut(settings.Outdelay);
		});

};
})(jQuery);		


$(document).ready(function() {
			/*
			var defaults = {
	  			containerID: 'moccaUItoTop', // fading element id
				containerHoverClass: 'moccaUIhover', // fading element hover class
				scrollSpeed: 1200,
				easingType: 'linear' 
	 		};
			*/
			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});

[uniqu3]

This is the part to edit and red is for speed change:

//  headerTeaser - Nivo Slider

$(document).ready(function() {
$('#slider').nivoSlider({
                animSpeed:500,
pauseTime:3000
      });
});

I didn't see anything in the documentation about changing the slide direction but you can change the effect.
As on the nivo website:

effect:'random', //Specify sets like: 'fold,fade,sliceDown'

[DCX]

Well, I tried that. The parts you showed in red were not there so I added them and changed them up and down, cleared cache, still no changes. Seems like it should be using defaults from nivo.slider.js if not specified.

I really hate to bother you with Nivo stuff since you already took the time to share this theme. I learned there is no slide effect for Nivo from reading their site. I am going to read more at http://nivo.dev7studios.com to learn about.

[uniqu3]

But you did the changes in ?

//  headerTeaser - Nivo Slider

  $(document).ready(function() {
      $('#slider').nivoSlider({
      animSpeed:500,
      pauseTime:3000,
      effect:'fade'
      });
  });

Try the effect fade and see if the effect has changed after it, delete functions.js and upload it again after changes weremade, maybe it didn't get overwritten.

[DCX]

That's it! I had to delete the uploads/BizBuzz/functions.js file and re-upload it. Now those changes do work.

Thanks

[DCX]

I have installed this theme twice now and have noticed one small problem with the nivo slider. I do not know if the problem is due to nivo or the theme? Here it is...

When a page with nivo slider activated loads it sometimes does not show the whole image, just a thin strip with the comments line (See attached). This only happens sometimes, maybe 1 out of 10 times. If the page is refreshed it will be OK. I think it happens in IE and FF.

Any idea if the is the nivo slider or theme might cause this and how to fix it?

Thanks again.

[gasemans]

I have noticed the samething
But it only happend to me the first time i go to the website with safari and Opera.

First time i dont see the slider
but when i refresh the page then it is there.

[uniqu3]

Hi,

this is nivo slider issue, i thought it has been solved in the version used for the template.
Try adding width="950px" height="245px" in the image tag

         
{if ($cfirst)&&($tfirst)}
{elseif ($tfirst)}{/if}
{if ($csecond)&&($tsecond)}
{elseif ($tsecond)}{/if}
{if ($cthird)&&($tthird)}
{elseif ($tthird)}{/if}                    
           

Another thing you could try is adding display:block to #slider in the stylesheet.

#slider {
position: relative;
background: url('uploads/BizBuzz/images/loading.gif') no-repeat 50% 50% #202834;
z-index: 1
display:block;
}

[DCX]

That should do the trick. Thanks again.

[Master User]

Hello.. Is there a way to stop the main navigation text from jumping in IE? http://www.i-arts.eu/bizbuzz/ I know you can't get the rounded corners that mozilla has but it would be nice to not have the text jumping like it does.

[uniqu3]

Oh i thought i fixed this.

Add this in Template after {stylesheet}

    {literal}
   
   
.sf-menu li a:hover, .sf-menu li a:active, .sf-menu li a.current {
        height:28px;
line-height: 28px;
padding:0 5px;
border: none;
}


{/literal}

[elkman]

Very nice template and great responses for assistance.  I have another question.  Can anyone tell me how to add more than three images to the slider?

Thank you,
Bill