Page 4 of 11
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 12:18 pm
by 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.
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 12:41 pm
by 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]
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 12:49 pm
by 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' });
});
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 1:04 pm
by Sign
Did you clean the cache in CMS MS. I had a simalr issue and after cleaning the cache it was solved.
DCX wrote:
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' });
});
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 1:10 pm
by 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'
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 1:30 pm
by 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.
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 2:02 pm
by 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.
Re: BizBuzz - New Template
Posted: Thu Aug 05, 2010 2:23 pm
by DCX
That's it! I had to delete the uploads/BizBuzz/functions.js file and re-upload it. Now those changes do work.
Thanks
Re: BizBuzz - New Template
Posted: Wed Aug 18, 2010 5:30 am
by 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.
Re: BizBuzz - New Template
Posted: Wed Aug 18, 2010 6:27 am
by 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.
Re: BizBuzz - New Template
Posted: Wed Aug 18, 2010 6:28 am
by 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;
}
Re: BizBuzz - New Template
Posted: Wed Aug 18, 2010 12:47 pm
by DCX
That should do the trick. Thanks again.
Re: BizBuzz - New Template
Posted: Mon Aug 30, 2010 10:57 am
by 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.
Re: BizBuzz - New Template
Posted: Mon Aug 30, 2010 12:51 pm
by 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}
Re: BizBuzz - New Template
Posted: Sat Sep 04, 2010 3:46 pm
by 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