In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.
Here is what I do:
#Html.ActionLink("Lire la suite...", "Details", new { slug = #post.Slug } , new { #class = "dotted-link" } )
The CSS:
.dotted-link
{
text-decoration: none;
border-bottom-style:dotted;
border-bottom-width: 1px;
}
The result:
The result when hover it:
As you can see, I have a dotted border and a plain border ?!
What is the best way to achieve this?
Thanks.
a.dotted-link {
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a.dotted-link:hover {
border-bottom-style: none;
}
Related
My application have a menu options and I need to change the color of a menu option depend of the selection of a textbox.
In the controller file I wrote this:
[HttpPost]
public ActionResult Rise(int rise)
{
Session["Var1"] = rise;
if (rise != 0)
{
ViewBag.Var1= "class = active";
}
else
{
ViewBag.Var1 = "class = visited";
}
return View();
}
In my css file I wrote this:
a:visited
{
font-size: large;
color: green;
}
a:active {
font-size: large;
color: blue;
}
a:link {
font-size: large;
color: #ffffff;
}
a:hover {
background-color: lightblue;
}
And in my view I wrote this:
<li>Option1</li>
When I execute the application and I write a value in the textbox and click on the submit button I see that the menu option change the colour and change to Green colour again.
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
I'm searching for a simple solution to build a toolbar to insert textile markup.
No parser is needed, I only miss a toolbar / buttons to insert. Like quicktags for bbcode.
Is there a textile editor / toolbar or a universal js class?
Insert markup like "*" around selected text
Toogle markup (remove if inserted before
With some examples and hints I could try to build it myself.
I know MarkitUp, but would like to use a minimal and simple toolbar.
Maybe something like used here...
Found a solution to insert markup. Should do it!
Basic example found with google
JSFiddle demo
I put together a JSFiddle demo with a contenteditable div and simple insert B-tag "button".
var selected = '';
var before = '<b>';
var after = '</b>';
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
function insert(element, selection, before, after) {
$(element).html($(element).html().replace(selection, before+selection+after));
}
$(document).ready(function (){
$('.editable').bind('mouseup touchend', function (e){
selected = getSelectionText();
});
$('#insertB').click(function(e) {
insert('.editable', selected, before, after);
$('.editable').focus();
});
$('#toggleEditor').click(function() {
var editable = $('.editable');
if (editable.attr('contenteditable') == 'false') {
editable.attr('contenteditable','true').addClass('wysiwyg').focus();
}
else {
editable.attr('contenteditable','false').removeClass('wysiwyg');
}
});
});
.editable {
border: dashed black 2px;
padding: 10px;
margin-bottom: 20px;
}
.wysiwyg {
border: solid red 2px;
}
span {
padding: 5px;
border: solid black 1px;
margin-right: 20px;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<body >
<div class="editable" contenteditable=false>
Just a simple text...
</div>
<span id="insertB">insert Bold</span><span id="toggleEditor">Toggle editor</span>
</body>
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
background-color: #ffeeee;
border:1px groove;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
How lighted field in a green color with succesfull validation? Add new option ".input-validation-valid" dont help. May be used special jQuery plugins? Thanks in advance for all your help
Assuming you using query validation and unobtrusive validation, when a field is valid the error message is removed from the DOM so there's nothing to style! A typical error renders this (note the <span> within a <span>
<span class="field-validation-error" data-valmsg-for="Account.Description" data-valmsg-replace="true">
<span for="Account_Description" generated="true" class="">Please enter a description</span>
</span>
When its valid, the inner span is removed and the class name changes to 'field-validation-valid'
<span class="field-validation-valid" data-valmsg-for="Account.Description" data-valmsg-replace="true"></span>
I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.
My listbox:
#Html.ListBoxFor(m => m.selectedCharts, new SelectList(#Model.Graphs.ToList() )
, new { #class = "select_change" }
)
Or maybe I should use different control for this purpose?
Many thanks
I've used Bootstrap Multiselect before, with great success.
If it cannot be a drop down, use this Checkbox list instead.
I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.
My View Code
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { #class="styled_list" });
#Html.CheckBoxListFor(model => model.ReportSettings.Ids,
model => model.AvailableGraphs,
graph => graph.Id,
graph => graph.Name,
model => model.SelectedGraphs,
new { #class="styled_checkbox" },
htmlListInfo,
null,
x => x.Name)
}
My CSS:
input.styled_checkbox, input[type="checkbox"]
{
visibility: hidden;
width: 0px;
}
.styled_list
{
background: #aeeefb;
border-radius:5px;
padding: 10px 10px 10px 0;
color: White;
font-weight: bold;
}
.styled_checkbox
{
background: #69D2E7;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin: 3px 0 3px 0;
padding: 5px;
position: relative;
width: 250px;
border-radius:5px;
}
.styled_checkbox:hover
{
opacity: 0.7;
}
.styled_checkbox:checked+label
{
background: #1a9eed;
}
The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.
Hope that helps anyone