The hardest bit of this blog to code was editing the width of the jFlow block. The jFlow block is a jquery add on which lets you create sliding content in WordPress. The benefit of using this slider over the others is that is comes as part of this out of the box theme for testing.
The problem with this code is that the Javascript using some inline sizing meaning that you can’t easily edit the block to fit nicely in your theme.
I wanted to write this blog post to show you how I figured out how to change the width to help anyone else in the same predicament.
First step is to get into the Javascript file – this is called jquery.flow.1.2.js. The way that the script is coded means that some of the internal div classes are stored within the Javascript and outputted as HTML. The difficulty is going which bits of code relate to which divs.
There are three divs which contain inline widths:
- jFlowSlide
- mySlides
- jFlowSlideContainer
jFlowSlideContainer mirrors the width of jFlowSlide. mySlides is used to hide all the additional slides that you want to animate into view during user interaction with the script. So what I had to find was the width element within the script that controlled the inline CSS. This was more difficult that I had thought because the jFlowSlide is actually multiplied 4 times to give the length for mySlides.
First port of call was to test edit the following lines (approx line 77):
// jFlowSlideContainer
$(opts.slides).children().css({
position:”relative”,
width: $(jFS).width()+”px”,
“float”:”left”,
overflow:”auto”
});
Into:
// jFlowSlideContainer
$(opts.slides).children().css({
position:”relative”,
width: “800px”
“float”:”left”,
overflow:”auto”
});
That line of code adds swaps out the variable into a static width.
Problem is you can’t do the same with the jFlowSlide. Instead you have to add it to the bottom of the function (approx line 62).
$(opts.slides).before(‘<div id=”‘+jFS.substring(1, jFS.length)+’”></div>’).appendTo(jFS);
//driven by the name jFlowSlide at the bottom of the script
$(opts.slides).find(“div”).each(function(){
$(this).before(‘<div></div>’).appendTo($(this).prev());
});
//initialize the controller
$(jFC).eq(cur).addClass(jSel);
var resize = function (x){
$(jFS).css({
position:”relative”,
width: opts.width,
overflow: “hidden”,
width: “810px”
//additional width – keeps code intact and controls the CSS width
});
Obviously you can change the width to whatever size you want now and the function will continue to work.
The hardest bit of this blog to code was editing the width of the jFlow block. The jFlow block is a jquery add on which lets you create sliding content in WordPress. The benefit of using this slider over the others is that is comes as part of this out of the box theme {http://wordpress.org/extend/themes/wordousel-lite} for testing. The problem with this code is that the Javascript using some inline sizing meaning that you can’t easily edit the block to fit nicely in your theme.I wanted to write this blog post to show you how I figured out how to change the width to help anyone else in the same predicament. First step is to get into the Javascript file – this is called jquery.flow.1.2.js. The way that the script is coded means that some of the internal div classes are stored within the Javascript and outputted as HTML. The difficulty is going which bits of code relate to which divs.There are three divs which contain inline widths:• jFlowSlide• mySlides• jFlowSlideContainerjFlowSlideContainer mirrors the width of jFlowSlide. mySlides is used to hide all the additional slides that you want to animate into view during user interaction with the script. So what I had to find was the width element within the script that controlled the inline CSS. This was more difficult that I had thought because the jFlowSlide is actually multiplied 4 times to give the length for mySlides. First port of call was to test edit the following lines (approx line 77):// jFlowSlideContainer $(opts.slides).children().css({ position:”relative”, width: $(jFS).width()+”px”, “float”:”left”, overflow:”auto” });Into:// jFlowSlideContainer $(opts.slides).children().css({ position:”relative”, width: “800px” “float”:”left”, overflow:”auto” });That line of code adds swaps out the variable into a static width. Problem is you can’t do the same with the jFlowSlide. Instead you have to add it to the bottom of the function (approx line 62).$(opts.slides).before(‘<div id=”‘+jFS.substring(1, jFS.length)+’”></div>’).appendTo(jFS); //driven by the name jFlowSlide at the bottom of the script $(opts.slides).find(“div”).each(function(){ $(this).before(‘<div></div>’).appendTo($(this).prev()); }); //initialize the controller $(jFC).eq(cur).addClass(jSel); var resize = function (x){ $(jFS).css({ position:”relative”, width: opts.width,
overflow: “hidden”, width: “810px” //additional width – keeps code intact and controls the CSS width });Obviously you can change the width to whatever size you want now and the function will continue to work.