Sample of What I'm trying to do...
So, my boss really likes the style of wizard navigation I've built in this demo page (above). However, when I built it, the method is somewhat static. What I mean by that is, it doesn't extend well to 5 or 6 or 10 wizard steps. However, I need to have it extend to those steps naturally.
Can I get some recommendations on how to modify the css code so that it works more flexibly? I spent a couple of hours playing around with it, with unsatisfying results.
It's possible using borders and pseudo-elements:
.selected:before, .selected:after {
position: absolute;
top: 0;
content: "";
border-top: 20px solid rgba(0, 0, 0, 0.5);
border-bottom: 20px solid rgba(0, 0, 0, 0.5);
border-left: none;
border-right: 20px solid transparent;
}
.selected:before {
left: 0;
}
.selected:after {
right: 0;
border-right: none;
border-left: 20px solid transparent;
}
Demo (Tested in Chrome and Firefox)
You'll notice I've used SASS in the example. This way, if you have three, or 12 you only have to change one variable in one place($wizard-steps)
, and it will calculate all the other values for you to keep it full width (and fluid!). This could also be accomplished with Javascript if it needs to be dynamic.
Related
I have a navbar that can be configured to be both vertical or horizontal placed on a page.
It is for a widget on a system using bootstrap 2.3.2.
I want to remove or move the triangle above the dropdown. (What is it called?)
I have tried to set the ::before to display:none , content:none, etc without any success.
Altering the css position left and top only seem to affect the border.
Is there no way to remove/hide this in a neat way? or even better, position it on the left side, towards the navbar?
.navbar .nav>li>.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, .2);
content: '';
color: rgba(0,0,0,0);}
Or is this default behavior from bootstrap?
The menu is created by reading through a JSON, so i was hoping for to use the same code for the vertical and horizontal menu, since this is just a visual "issue".
Easy solved by setting content to none on both ::before and ::after.
Should have thought of that ::Before I posted.
Not quite sure how to get around this issue, have forms nicely marked up in a CSS sheet
#forms {
width:40%;
margin: 10px auto;
padding: 10px 30px;
background: rgba(144,144,143,0.6);
border: 1px solid #e1e1e1;
box-shadow: 0px 0px 8px #85857f;
}
My problem is the smaller forms, two input text box, are looking way too large for the content, anyone know of a method to give different widths to forms that don't involve hard coding inline CSS in the html?
Am quite baffled by this one.
I know it's possible to use an image as the cursor, like this:
.module {
cursor: url('path-to-image.png'), auto;
}
Is it also possible to use a custom div element as the cursor or otherwise customize it with css properties? I'd like to use a triangle as shown here. Is that possible somehow?
How would one go about doing this?
I looked into this a bit, and while it's impossible to do with CSS, you can actually do this with jQuery.
You create a div and make it follow the cursor while also hiding the "normal" one, hence creating a bit of a cursor. It's a bit of a hack, as it's not actually a cursor, and it may or may not have some compatibility or functional problems.
Anyway, here's the code:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.pageX + 1,
top: e.pageY
});
});
#tail {
position: absolute;
float: left;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid green;
}
* {
cursor: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tail"></div>
Click me!
I had to offset the cursor by one pixel (e.pageX + 1), otherwise the cursor-div would be directly below the cursor and you'd always be clicking on that instead of the object you actually want to click on.
in my page I am using drop downs in header, my problem is that when the content is more than the size of screen the drop down breaks into another line, ,
but I like to keep it in one line,
I don't seems to find a way to solve it, I can't assign dropdowns a fixed left since not all of them are the same width and I don't want to center it, just want it to span to the left,
my current css:
header div.nav-dropdown-menu {
position: fixed;
/* left: 50%; */
padding-top: 8px;
color: #d6223b;
background-color: rgba(240, 240, 240, 1);
border-radius: 0 0 5px 5px;
min-height: 200px;
margin-top: -2px;
border: .08em solid #BEBEBE;
}
you can try it here http://www.bootply.com/6dcH6D9916
I was able to write a simple code in jQueryto achieve this, but still trying to figure out if there is a css way for it.
$("header .nav-dropdown-menu").each(function(index,elm){
elm = $(elm);
elm.css("right","inherit");
if((elm.offset().left+elm.width())>(window.outerWidth-15)){
elm.css("right","15px");
}else{
elm.css("right","inherit");
}
});
I have a div ( rectangle ), and inside it I want to have a triangular shape. I want to highlight that on hover. How do I do that?
I'm thinking of having 2 images with that same shape and different opacity and swapping them on hover. Would there be another way of doing this? can you have a non-rectangular shaped divs?
You Can try that:
http://jsfiddle.net/H42U7/
The css code is:
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #959595;}
.triangle-up:hover {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #123456;}
The html:
<div id="container">
<div class="triangle-up">
</div></div>
To rotate the triangle check this site:
http://css-tricks.com/examples/ShapesOfCSS/
It depends how far back in internet explorer you need to go and the context of your triangle as to what you are using it for, but assuming you don't care about internet explorer.
Chris Coyer over # CSS Tricks has a nice tutorial already setup.
http://css-tricks.com/triangle-with-shadow/
If you are planning to use it as an icon or button you might want to check out,
http://fortawesome.github.io/Font-Awesome/. Its totally free and pretty easy to implement. I have used it in a few projects and it was made for use with bootstrap.
Hope this helps.