Quick Question

[commonwealthgaming]

I have a question about something I see on this website currently.

At the bottom of the forums, I see a "slider" that does not look like the db slider. It is labeled as "DragonByte Tech Software Also Runs On" and it shows several different websites with their own logos and such. I was wondering if this was something that DB sells or is it something else, and if so what is it? Thank you for taking the time to read this. If what I am asking is a bit confusing, please let me know and I will try to rephrase it better.

 

[Fillip H.]

It's not a mod we sell - it's a bespoke customisation for this site. With enough demand we may just turn it into a full-featured mod, though

 

[commonwealthgaming]

Is there any way to get help on how to add something like that to my site? I would love to use it to show off affiliates and other things.

 

[Fillip H.]

What level of HTML/CSS/JS competence do you have?

It's not very dynamic at the moment, but if I just need to paste the HTML, CSS and relevant JS for you to implement then that can certainly be done - might be trickier otherwise

 

[commonwealthgaming]

I have absolutely 0 skill when it comes to implementing any of it, however I have a few friends that are very good at working with it so they could most likely help if you gave me the info for it.

 

[Fillip H.]

The following is presented 100% as-is and we cannot give tutorials or guides for how to set it up / implement it on another site.


HTML:

<h2 class="blocksubhead" id="runson" style="border:{vb:stylevar blocksubhead_border};">Block Title Text
<div id="siterotator" class="siterotator">
	<img src="path/to/left/image/rotate_left.png" class="sitearrow left" alt="" />
	<div class="sites">
		<div class="siteHolder">
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
		</div>
		<div class="siteHolder">
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
			<a href="http://www.example.com"><img src="path/to/logo.png" alt="Site Title" border="0" title="Site Title"></a>
		</div>
	</div>
	<img src="path/to/right/image/rotate_right.png" class="sitearrow right" alt="" />
</div>
</h2>

CSS:

.siterotator {
	background:rgba(000,000,000,0.1);
	box-shadow:inset 0px 0px 12px rgba(000,000,000,0.2);
	padding:12px 60px;
	position:relative;
	min-height:38px;
	margin-bottom:12px;
	border-radius:8px;
	clear:both;
	overflow: hidden;
	width:88%;
}

.siterotator .sites {
	width:1000%;
	position:relative;
	z-index:1;
}

.siterotator .sites .siteHolder {
	float:{vb:stylevar left};
	position:relative;
}

img.sitearrow {
	opacity:0.6;
	display:block;
	z-index:2;
	text-indent:-50000em;
	position:absolute;
	top:35px;
}

img.sitearrow:hover {
	opacity:1;
}

img.sitearrow.left {
	{vb:stylevar left}: 6px;
}

img.sitearrow.right {
	{vb:stylevar right}: 6px;
}

JS (jQuery):

	$('#siterotator > img.sitearrow.right').click(function(e)
	{
		e.preventDefault();
		var rotator = $('#siterotator .sites');
		rotator.children('.siteHolder').first().animate({marginLeft:"-=" + rotator.children('.siteHolder').first().width() + "px"}, function()
		{
			$(this).appendTo(rotator).removeAttr("style");
		});
	});
	
	$('#siterotator > img.sitearrow.left').click(function(e)
	{
		e.preventDefault();
		var rotator = $('#siterotator .sites');
		rotator.children('.siteHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-" + rotator.children('.siteHolder').first().width() + "px").animate({marginLeft:"0"});
	});

Images:



As indicated, this is not something we will be able to support, it's entirely provided to illustrate how we achieve this particular effect on our site.

 

[commonwealthgaming]

Yes that is totally understandable. Thank you for posting this, I will see if we can get to work on it and have one working. Again thank you for providing the code for me.