I need a jQuery Mobile flipswitch with custom width & height. I managed to change the size of it by wrapping the flipswitch in a div and applying the following CSS:
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
}
However the text is not positioned correctly. Check the jsfiddle here:
https://jsfiddle.net/dinkoivanov/8czs4qzn/
I think I might not be doing the correct thing. Can you advise if that is possible in jQuery Mobile?
As exemplified here you might need to introduce in CSS
custom indentations
custom widths
because the length of custom labels differs from the length of the
standard labels
You can position the text by correcting the indentation in the CSS
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on,
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on{
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
}
Updated: https://jsfiddle.net/8czs4qzn/1/
Position the text in the middle (see comment below):
#flipswitchWrapper .ui-flipswitch {
position:absolute;
width:400px;
height:100px;
line-height: 100px;
}
#flipswitchWrapper .ui-flipswitch-active {
padding-left:0px;
}
#flipswitchWrapper .ui-flipswitch .ui-flipswitch-on, #flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
width:98px;
height:98px;
text-indent: -20em;
}
#flipswitchWrapper .ui-flipswitch.ui-flipswitch-active .ui-flipswitch-on {
padding-top:0px;
margin-left:300px;
text-indent: -18em;
line-height: inherit;
}
#flipswitchWrapper .ui-flipswitch-off {
line-height: inherit;
}
With vertical alignment of labels: https://jsfiddle.net/8czs4qzn/3/
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'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>
I want to avoid duplication in my code. Is it possible to write something like this in LESS?
.print when (#media print = true) {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
.header-month {
.print
background: #heading-background-color;
font-weight: bold;
}
Instead of:
#media print {
.header-month {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
}
.header-month {
background: #heading-background-color;
font-weight: bold;
}
It doesn't look like an improvement here. But I'm working with multiple classes and need to do this for all of them.. So maybe an alternative if this is not possible?
Less #media can be nested in a rule so you can define such .print mixin as:
.print() {
#media print {
background: #heading-background-color !important;
-webkit-print-color-adjust: exact;
}
}
// usage:
.header-month {
.print();
background: #heading-background-color;
font-weight: bold;
}
Also see "Passing Rulesets to Mixins" for a more complex stuff.
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;
}
Did someone create a nice stylesheet for this:
http://mvccontrib.codeplex.com/wikipage?title=Grid&referringTitle=Documentation&ProjectName=mvccontrib
Thanks.
Christian
I have made a start - no css expert though:
table.grid
{
margin:0.5em;
}
tr.gridrow
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
background-color: #e8eef4;
}
.gridrow td
{
padding:1em;
font-size:smaller;
text-align:center;
max-width: 300px; /*or whatever*/
word-wrap: break-word;
}
.gridrow_alternate td
{
padding:1em;
text-align:center;
}
tr.gridrow_alternate
{
font-family:Verdana,Arial,Helvetica,sans-serif,"MS sans serif";
padding-top:0.5em;
padding-bottom:0.5em;
margin:0.5em;
}