Develop Reference

Checkbox Strikeout text when ticked

I have been trying to get the text strikeout when it is ticked in a check box. I have been looking on the web for the last two days and finally decided to post here for help.
Basically, I would like to build a to-do list app and when a task is ticked it gets striked through.
Any help would be highly appreciated.
Thanks.

Try Like This Plan CSS/HTML no JavaScript required.
.todo-box {
border: 1px solid gray;
border-width: 1px;
}
.todo-item {
padding: 4px 4px 4px 4px;
background: gold;
border-bottom: 1px dotted green;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
input[type=checkbox]:checked+label.strikethrough {
text-decoration: line-through;
}
input[type=checkbox] {
border: 1px solid #333;
content: "\00a0";
display: inline-block;
font: 16px/1em sans-serif;
height: 20px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 20px;
}
<ul class="todo-box">
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">001 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">002 Task Item</label>
</div>
</li>
<li>
<div class="checkbox todo-item">
<input type="checkbox" name="packersOff" value="1" />
<label for="packers" class="strikethrough">003 Task Item</label>
</div>
</li>
</ul>
Fiddle

Assuming Windows Forms:
Open the form in the Windows Forms designer and add a checkbox.
Double-click the checkbox in the designer to add a handler.
In the handler, add the following code.
(assuming the checkbox is called checkBox1):
void checkBox1_CheckedChanged(object sender, System.EventArgs e)
{
checkBox1.Font = new Font(
checkBox1.Font,
checkBox1.Checked ? FontStyle.Strikeout : FontStyle.Regular);
}
Note that this does not dispose the old font handle, but code does not normally bother to do that.

How to ensure that my left div element does not change the position of my right div element, when left div element gets long?

I have two div elements that are positioned side by side. The left side div is an action link , and the right side div is an icon. The issue I am having is that, when I type a lengthy name for the action link title (example: "ActionLinkTitleNameVeryLongTitleABCDE"), it moves the position of my right side div icon - to the right. I am looking for a way where no matter how long the action link title is, the right side div icon should not move from it's original position. Even if the title is really long, it should be displayed on top of the icon(overlap), but the position of icon shouldn't change. Here is the fiddle: https://jsfiddle.net/cliffeee/f5c1xrq3/17/ .
.content {
.bottomLeft
{
height: 36px;
color: blue;
font-weight: bold;
padding-top: 10px;
}
.bottomRight {
height: 77px;
}
}
<div class="bottomLeft">
<a href=#_Functions.GetUrlValueBySchema(link) title=#link.LinkName>#linkTitle</a>
</div>
<div class="bottomRight">
<i class="fa-external-link pull-right" title="icon for link"></i>
</div>

I have modified your link. Please check it if any changes than let me know.
https://jsfiddle.net/Lbnz9qaj/
.col_wrap {
display: flex;
justify-content: space-between;
}
.bottomLeft {
height: 36px;
color: blue;
font-weight: bold;
width: 80%;
word-break: break-all;
}
.bottomRight {
padding-left: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col_wrap">
<div class="bottomLeft">
<a href=#_Functions.GetUrlValueBySchema(link) title=#link.LinkName>ActionLinkTitleNameVeryLongTitleABCDEActionLinkTitleNameVeryLongTitleABCDEActionLinkTitleNameVeryLongTitleABCDE</a>
</div>
<div class="bottomRight">
<i class="fa fa-external-link pull-right" title="icon for link"></i>
</div>
</div>

Fancybox cache issue (registered and unregistered user)

We are using a fancybox on our site. Registered users can see top panel on the fancybox, unregistered can't see it.
At first boot of images there are request to the server, create a template that displays a picture. But after the first click there is no request to the server - therefore if we click by registered user and after make log out and click again we see that top panel.
There is c# checking if user registered or not:
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
//show top panel
}
else{
//hide top panel
}
There is fancybox calling:
this.cont.find("a.imglnk").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
type: 'ajax',
ajax: { global: false, cache: false },
titleShow: false,
scrolling: 'no',
});
There is template by which we get picture (C#):
<div style="position: relative" id="mmgf_#(prefix)" class="mmgf">
#if (isOwner && Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image )
{
<div class="fancy-box-top-panel">
<div class="choose-album-cover">
<div style='min-height: 22px; display: inline-block;'>
<div class='checkbox-test cb_gray'>
<input type='checkbox' id='choose-album-cover' name='choose-album-cover' value='on' />
</div>
</div>
<div class="album-cover">
#RenderMultimediaGalleryStrings.ChooseAlbumCover</div>
</div>
<div class="dn manage-album-cont">
<div class="move-dp-btn">
#RenderMultimediaGalleryStrings.Move
<div class="dn move-drop-down-list">
#if (albums != null && albums.Any())
{
foreach (var alb in albums)
{
#alb.Name
}
}
</div>
</div>
</div>
<div class="clearfix">
</div>
</div> }
<div style="width: 630px; height: 440px; overflow: hidden; text-align: center; position: relative;">
#if (Model.MultimediaTypeId == KZStream.Web.Site.Models.Multimedia.MultimediaTypes.Image)
{
<img src="#(Html.KZStreamImagePath(Model.Id, 630, 440))" style="text-align: center;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;" />
}
else
{
<iframe width="632" height="414" src="#(Html.Action("GetVideo", new { id = Model.Id }))" frameborder="0" allowfullscreen>
</iframe>
}
</div>
<div style="margin-top: 10px; font-family: Tahoma, Verdana, Segoe, sans-serif; font-weight: normal;
font-size: 14px; color: #000000; max-width: 630px;">
#Model.Description
</div>
</div>
Finally i need that at every image showing there are carried out an inspection :) Thanks :)

Override CSS ValidationMessageFor

I can't seem to manage to put a new css in a validationMessageFor in my Ajax form...
#using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", OnSuccess = "Success", OnFailure = "Fail" }))
{
<div class="separaror">
<div class="line1">
#Html.LabelFor(m => m.Name)
<br />
#Html.TextBoxFor(m => m.Name)
#Html.ValidationMessageFor(m => m.Name)
</div>
<div class="linha2">
<br>
<input type="submit" value="Save" />
<input type="button" id="btnCancel" value="Cancel" />
</div>
</div>
}
My css
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
It doesn't override.. Why is that? Any help would be appreciated!
I copied the css directly from the default Asp MVC 4 application from visual studio,
I have no idea why this doesnt work.
The application I'm doing is not the default application from mvc 4, so there must be something I'm missing

You need to set .input-validation-error for validation for inputs
This is how you do it
.input-validation-error{ background: pink; border: 1px solid red; }
If you style up the .field-validation-error it will change the validation error message(s).
.field-validation-error{ color: red; font-weight: bold; }
Hope it helps

auto login via c# webBrowser, on a javascript based site

Ive been trying to auto login to a javascript based site using a c# webBrowser form,
after a bit of searching I came up with how to auto fill the username and password:
webBrowser1.Document.GetElementById("email Id").InnerText = "email";
webBrowser1.Document.GetElementById("password Id").InnerText = "password";
but I just couldnt find how to auto click the "enter" button.
ive tried using the same method as the auto fill with the invoke option:
webBrowser1.Document.GetElementById("btn").InvokeMember("click");
but it didnt work, so here's some of the site's source code
(a small prtion, showing the login form section)
</a>
<form id="login" name="login" action="index.php?sendPass=true" method="post" style="margin: 0; padding: 0; position: relative">
<div style="text-align: right; margin-right: 10px; margin-top: 0; padding-top: 0;">
<div style="font: 12px arial; margin: 0; text-align: center"></div>
<img src="new1/login_title_ido.jpg" alt="" />
<div style="margin:0px; margin-bottom:10px">
<div style="font: 12px arial; margin: 0px">דוא"ל :
<input type="text" name="email" class="loginInput" value="" dir="ltr" /></div>
<div style="font: 12px arial; margin-top: 1px">סיסמה:
<input type="password" name="pass" class="loginInput" style="margin-right:1px;margin-top:1px" value="" dir="ltr" /></div>
<a onmouseover="this.style.cursor='pointer';" onclick="alert('הכנס דואר אלקטרוני \n ולחץ על כפתור הכנס ');"><u>שכחתי סיסמה</u></a>
<input type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
</div>
<div style="color: #000000; padding-top:3px; direction:rtl">
</div>
</div>
</form>
I just cant seem to pinpoint the "enter" button id, any ideas?! or perhaps theres other ways to invoke the "enter" button?

You are simulating click event correctly, but I don't see any input on the form with id="btn".
Simply try to add it in your markup like this:
<input id="btn" type="image" src="new/login.jpg" align="middle" style="margin-right: 25px;" />
EDIT:
If you don't have access to source you could try something like this:
var forms = webBrowser.Document.All.GetElementsByName("login");
var form = forms[forms.Count - 1];
if(form.TagName.Equals("FORM"))
{
form.InvokeMember("Submit");
}