moving module

[Hunterer]

Hi everybody. I was just wondering if there was an easy way to make a module scroll down with the page. I have a long page with jump to titles on a little module on the top right of the page, however, it would be a lot more useful if it moved with the page.
Thanks in advance.

I will say now though, that I have no experiences with Flash and very limited CSS/html experience.

Ross

[jvezina]

If you'd like the module to always stay at the top right corner of the page, then you'll want to edit the /css/template.css file in your template. The rule would look something like:

...your module...
{ position:absolute;
top:0px;
right:0px;
}

You'll need the reference to your module at the top so the browser knows what object to apply the styling rule to.
If you'd rather it further down on the browser, you can adjust the top.

[Hunterer]

thankyou, I'll try that and let you know how I get on.

[jvezina]

if you can't get it to work, just put the URL in your next post and what module you're dealing with.

[Hunterer]

Hello, I waited until I had done another similar page before trying what you suggested. the /css/template.css file seems to only contain the following

""""/* template.css, Copyright (C) 2007 - 2010 YOOtheme GmbH */

@import url(reset.css);
@import url(layout.css);
@import url(typography.css);
@import url(menus.css);
@import url(modules.css);
@import url(joomla.css);
@import url(extensions.css);
"""

You can see that the template that I'm using is yoo_explorer. the following two url's are the two (long) pages and the module on the top right with all the links to the anchors are the modules I'd like to scroll down with the page.

http://www.pollen-lp.net/telisma2/index ... Itemid=103

http://www.pollen-lp.net/telisma2/index ... Itemid=104

Thanks for any further help you can give me.

Ross

[Hunterer]

hiya jvezina, any new thoughts on this topic?

[ranjani]

an extension like this might help : Absolute Floating Menu

[jvezina]

Hi,

I didn't notice you responded. Add this to the bottom of the CSS file:

#right .module {position:fixed: top:400px;}

Change the "400px" to whatever position you'd like it to stay at.

It'll work since you only have one module in the right hand column. You will need to add a module class suffix (by going into the module manager) if you're going to add another module in that column.

[Hunterer]

hi, I still can't get it to work, I did as you said and nothing happened, as for adding a suffix, I tried and failed. I gave my module the suffix 91 and I tried

#right .moduleclass_sfx, 91 {position:fixed: top:400px;}

I also tried adding a few curly brackets to see if I could get it to work, but I couldn't. sorry to bother you with this, I'm sure it would help if I had any idea with what I was doing concerning css.

[Closer]

I think your syntax is not quite correct...
after fixed it should be a semi-colon not a colon

and you have suffix, 91 ... I've not seen a comma used like this before, but then I am not an expert.... maybe it should be something like moduleclass_sfx_91 or whatever you called your module ?

not sure if I follow the rest of it, but try that

[Hunterer]

now my template css looks like this

/* template.css, Copyright (C) 2007 - 2010 YOOtheme GmbH */

@import url(reset.css);
@import url(layout.css);
@import url(typography.css);
@import url(menus.css);
@import url(modules.css);
@import url(joomla.css);
@import url(extensions.css);

#right .moduleclass_sfx_91 {position:fixed; top:400px;}


but nothing has changed.
I don't understand this at all, to be honest with youo guys. I've played around in the layout css and got the site looking as I want, but this is different.

Also, in layoutcss earlier, by accident I changed one of (not sure which right now) the parameters to absolute instead of relative, that disrupted where my logo went (and it wasn't the logo parameters that I changed), I managed to change whatever it was back to relative, but my logo was still way out, I've put the logo where I want it to be with rapor to everything else, and now I have an inch thick space between the top of the logo and the top menu. suffice to say, it's been a long day. thanks for the help.

@ranjani: thanks for the suggestion but it's not really what I'm looking for as it seems to b e for menu's (though I could make altercations to make it useful) and also, it's a commercial product, for which I have to wait a decade before my boss gives me the goahead to buy.

[jvezina]

Rather than:
#right .moduleclass_sfx_91 {position:fixed; top:400px;}

just add the following to the template file and I'll take a look:


#right .module {position:fixed; top:400px;}

[Hunterer]

excellent, thanks. it works, tomorrow morning I'll try and regulate different modules like this. thanks a lot.

[jvezina]

great.

Now if you're going to have different modules in the right column, you'll need to give them class suffices. Do that and then check the page source to see how they appear to be sure you're putting the right css rule in.

[Hunterer]

hi again, this morning, I came into work, and have tried for the last couple of hours to add a class sfx so that it only works for a couple of modules. For the moment, all the modules that are on the right of any page, if there are multiples, are all on top of each other, I'm sure this is normal since I've just changed the position of all modules that are one the "right", however, I still cannot get it to work for just one module. Could you perhaps talk me through it.
I've given the class suffix of my module the name "partners", what should the line look like to only work for this module.

I've already tried

#right .module_partners {position:fixed; top:250px;}
and
#right .moduleclass_sfx_partners {position:fixed; top:250px;}
and
#right .moduleclass_sfx__partners {position:fixed; top:250px;}

but to no avail.

Also, am I right in assuming that (once we've managed to get it to work for this module) I can just copy this line and change the module suffix to another one to have it working for other modules?

Thanks in advance

Ross

[Hunterer]

as a follow up, I'd like to say that I'm currently looking at this page here

http://docs.joomla.org/Tutorial:Using_C ... ass_Suffix

and I'm also using the firebud add-on for firefox, which I've used for months now, so, I decided to try and find my class suffix, and I couldn't. for the particular module I have the following

CropperCapture[6].jpg

any idea's are greatly appreciated, also, I'm using the yoo_explorer template.

Thanks again

[jvezina]

I'm not seeing the class suffix on the module at all. You'll need to go into the module manager and add it.

Using firefox is a great way to make sure you have the right class name and it also allows you to change the html and/or css to see how it'd look. It is very handy.

Yes you can use the same style rule. You just need to change the class and the location where the item appears.

[Markstein]

You may find this tutorial informative as it written by and for YOOtheme templates using the Warp5 framework.

http://www.yootheme.com/docs/home/item/ ... own-module

I believe the above is for Warp 5, the one below is for Warp 5.5.

http://www.yootheme.com/docs/home/item/ ... yle-warp55

Mark