codaSlider hack - how do I add little triangles overlaying an image
https://stackoverflow.com/questions/7767243
-
09-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Check out CodaSlider.
I've removed the UL and opted for div's to control it but i'm running into a problem. I want to add a triangle signifying which panel its currently displaying. At the moment, I'm thinking of adding the triangle to the actual slide.jpg, but this is quite bad if someone wants to add another slide.
How would you go about adding a triangle to the current panel dynamically?
Like: http://i.imgur.com/B0BwU.jpg (It's added on the image)
My CSS:
#control {
width: 938px;
height: 65px;
border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
background: #fff url(sliderbg.jpg) repeat;
}
.button { float: left; width: 220px; height: 65px;
margin-right: 15px; border-right: 1px dotted #d1d1d1; }
.buttonInside { padding: 8px; }
.buttonLast { margin-right: 0; margin-left: 2px; border-right: 0px;}
Solution:
Include
ul.navigation a.selected {
background: url(../img/arrow.png) no-repeat top center;
position: relative;
top: -13px;
padding-top: 23px;
}
Set floating element as inline elements can't be given widths and heights
ul.navigation li {
float: left;
margin-right: 12px;
width: 220px;
height: 65px;
border-right: 1px dotted #ddd;
}
Solution
I would use a pseudoelement and CSS to add an arrow without an image: http://jsfiddle.net/blineberry/fqKHK/
The CSS with the stock CodaSlider would look like:
ul.navigation a.selected {
position: relative;
background: blue;
color: #FFF;
}
ul.navigation a.selected:before {
content: '';
position: absolute;
height: 0;
width: 0;
bottom: -9px;
left: 50%;
margin-left: -9px;
z-index: 1;
border: 10px solid transparent;
border-top: 10px solid blue;
border-bottom: none;
}
Browser support is modern browsers and IE8+. For IE 7 and lower, I would use an image as @Marco advises or just plain not worry about it.
UPDATE:
I had some time, so I played a bit more with your specific implementation.
Just to clarify, you need help getting the javascript to work with your changes in markup in addition to getting a "current slide" arrow.
Take a look at the code here: http://jsfiddle.net/blineberry/SfJzv/
Make note of these changes:
In the HTML, I added the .navigation class to your #control element. This will help keep your markup working with the CodaSlider script.
In the javascript: on line 34 of the script (referencing this script: http://jqueryfordesigners.com/demo/coda-slider.js), changed .parents('ul:first') to .parents('.navigation:first'), and on line 53 changed $('ul.navigation a:first').click(); to $('div.navigation a:first').click();.
In the CSS I made some style declarations to override some of the stock CodaSlider CSS to work with your dimensions. You may or may not need this depending on your implementation.
Here's a full screen demo: http://jsfiddle.net/blineberry/SfJzv/embedded/result/
OTHER TIPS
I would do it on the button instead of the image.
I can see you got an buttonInside.
So you could add an active state to the ACTIVE imagebutton, and then have
.active .buttonInside {margin-top:-20px; background:url(arrow.png) top center; padding-top:28px;}
or something like that :)
<script type="text/javascript" language="javascript">
function ShowHide(obj) {
document.getElementById("div1").style.display = 'none';
document.getElementById("div2").style.display = 'none';
document.getElementById("div3").style.display = 'none';
document.getElementById("div4").style.display = 'none';
document.getElementById(obj).style.display = 'inline';
return false;
}
</script>
<style type="text/css">
a
{
cursor: pointer;
background-color: Transparent;
top: 0;
vertical-align: text-top;
}
</style>
Body
<body>
<form id="form1" runat="server">
<div>
<p>
Hope this works</p>
<div style="width: 938px; height: 100px; z-index: -1; border-right: 1px solid #d1d1d1;
border-left: 1px solid #d1d1d1; border-bottom: 1px solid #d1d1d1; position: absolute;
left: 8px; top: 20px; z-index: -1; background-color: Black">
</div>
<div style="margin-top: 75px; z-index: 99; background-color: Red; height: 35px; width: 940px">
<div style="float: left; width: 50%; height: 35px; text-align: center; vertical-align: middle">
<div style="float: left; width: 50%; height: 35px; background-color: Blue; text-align: center;">
<div id="div1" style="height: 20px; width: 20px; background-color: Black; position: absolute;
margin-left: 5%;">
</div>
<a onclick="ShowHide('div1');">ClickMe1</a>
</div>
<div style="float: left; width: 50%; height: 35px; background-color: Aqua; text-align: center;
vertical-align: middle">
<div id="div2" style="height: 20px; width: 20px; background-color: Black; position: absolute;
margin-left: 5%; display: none">
</div>
<a onclick="ShowHide('div2');">ClickMe1</a>
</div>
</div>
<div style="float: left; width: 50%; height: 35px">
<div style="float: left; width: 50%; height: 35px; background-color: Fuchsia; text-align: center;
vertical-align: middle">
<div id="div3" style="height: 20px; width: 20px; background-color: Black; position: absolute;
margin-left: 5%; display: none">
</div>
<a onclick="ShowHide('div3');">ClickMe1</a>
</div>
<div style="float: left; width: 50%; height: 35px; background-color: Green; text-align: center;
vertical-align: middle">
<div id="div4" style="height: 20px; width: 20px; background-color: Black; position: absolute;
margin-left: 5%; display: none">
</div>
<a onclick="ShowHide('div4');">ClickMe1</a>
</div>
</div>
</div>
</div>
</form>
Hope this works..... u can place ur image in side the div(div1, div2, div3, div4). And sorry the code need a lil cleaning up. :)
