Logo Hover, template request. [rd]

[Welshling]

woot! now i can see the transition/hover doohicky i can play with what i want to add in there. Thanks again.

[Welshling]

actually Tumbleweed, the request isn't done yet. I have tried to add a scrollbar to each of the columns individually and failed. I can only get one to work on all three, and it doesn't scroll. And the links aren't clickable. If you can stop by one more time, then this request should be complete >.<

[Tumbleweed]

That's the nature of this particular code but without redoing everything, you can just put a image that is already semi-transparent and then we'll bring the content to the very top layer (still hidden) doing a little over-riding. I don't have a semi-transparent image as transparent as what the code is doing but if you can't make one I can whip one up for you but for now I included what I have. So remove the background color you have in the .fade_content class and then add the blue image part and z-index part. That should make your scroll bar and link work.



.fade_content{
position: relative;
top: 8px;
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/45.png);
background-repeat: repeat;
border: 1px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:600px;
height:280px;
text-align:left;
z-index:102!important;
}
.columns{
width: 33%;
float: left;
margin:4px;
z-index:102!important;
} 

Oh, and if you want the 3rd column to remain a marquee then add the scroll bar to each individual div and you should designate a height in there.

<div class="columns" style="height:230px; overflow: auto;">

[Welshling]

ah ok this is what i couldn't get my head around, the height and width's for each column. I was looking in the css, didn't think to play with the html in the wrapper. ok i will get back to you with an edit of this once i have done some more tweaks.

thanks.

[caliber13]

Hello! First of all, thank you both for coming up with this thing... I've been looking for a code like it for forever.

But I'm experiencing a problem. That is, everything works perfectly when I'm on my home page. However, once I click on a thread and try to hover over the banner, the content won't show up. It will fade to black, but there is no text or links or anything. Can you understand what I'm explaining? Sorry if this is a pathetic problem, I'm not very pro at coding in Proboards 5 yet haha. Thanks!

[Welshling]

caliber13 a link to your forum or a screen shot would help to narrow the problem down a little.

[caliber13]

Of course. Silly me, should have included a link up there. Here's the test site: calibertestforum.proboards.com/

Notice that everything works on the home page, but if you click on the 'test page,' the top banner will still fade but the content won't appear. I'm not quite sure what to do with it...

[Welshling]

Tumbleweed, i am unsure of what the issue could be here. Perhaps wrong placement of the piece of coding intended for the wrapper section?

caliber13, goodluck.

[Tumbleweed]

Try removing this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Proboards has the jquery library built in, for lack of a better description, and you don't need it. I forgot about that when I posted the code and then forgot to remove it. See if that takes care of it. 

[caliber13]

It worked!! C: Thanks so much Tumbleweed and Welshling!

[Welshling]

((didn't do much)) your welcome though xD

[Tumbleweed]

Glad that did the trick and sorry about forgetting I had that there.

[Welshling]

Jun 20, 2013 11:58:21 GMT -8 Tumbleweed said:

That's the nature of this particular code but without redoing everything, you can just put a image that is already semi-transparent and then we'll bring the content to the very top layer (still hidden) doing a little over-riding. I don't have a semi-transparent image as transparent as what the code is doing but if you can't make one I can whip one up for you but for now I included what I have. So remove the background color you have in the .fade_content class and then add the blue image part and z-index part. That should make your scroll bar and link work.



.fade_content{
position: relative;
top: 8px;
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/solid1/45.png);
background-repeat: repeat;
border: 1px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:600px;
height:280px;
text-align:left;
z-index:102!important;
}
.columns{
width: 33%;
float: left;
margin:4px;
z-index:102!important;
} 

Oh, and if you want the 3rd column to remain a marquee then add the scroll bar to each individual div and you should designate a height in there.

<div class="columns" style="height:230px; overflow: auto;">

Can you add this part to page 1 please, I am getting a lot of requests to help fix the rollover because this piece is missing from the first page. Thank you.

[?adwoman?]

Can this effect be on the first page only?

[Welshling]

I'd imagine that can be achieved by adding <script type="text/javascript">
$(function() {
$('.entry1').hover(function() {
$('.image1',this).stop().fadeTo('slow', 0.4)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$('.image1',this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});

</script>

that piece into your Main Headers. But I haven't tested it myself.