How can I add a placeholder to a contenteditable div like allowed in a input or textarea field?
<textarea placeholder="Enter content here..."></textarea>
Javascript:
<script type="text/javascript">
function checkNoLabel(divId,type) {
if (type == "off") {
if (document.getElementById(divId).innerHTML == "" || document.getElementById(divId).innerHTML == "<br>") {
document.getElementById(divId).style.color = "silver";
document.getElementById(divId).innerHTML = "Enter content here...";
}
}
if (type == "on") {
if (document.getElementById(divId).innerHTML == "Enter content here...") {
document.getElementById(divId).innerHTML = "";
document.getElementById(divId).style.color = "black";
}
}
}
</script>
HTML:
<div contenteditable="true" id="theDivId" style="color:silver" onFocus="checkNoContent(this.id,'on')" onBlur="checkNoContent(this.id,'off')">Enter content here...</div>
This will put a placeholder on blur (on click/tab away) if the field is empty and will remove the placeholder on focus (click/tab).
Related
I am trying to convert an #Html.Textbox image button to submit button with the onclick calling a Javascript function but I can't seem to figure out the validation part. I believe it does need to be a submit button.
I am basically trying to get rid of the image but keep the functionality.
Here's what's working today.
#Html.TextBox("Next", null, new {type = "image", src = #Url.Content("../App_Themes/icons/button_next.png"), #class = "imgbottom", onclick = "javascript: ValidateSelection ($(\"[name$='selectedItems']:checked\"))"})
function ValidateSelection(item) {
if (item == null || item.length == 0) {
var validationSummary = $('.validation-summary-errors ul');
if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) {
validationSummary.append('<li>' + "Please select at least one item" + '</li>');
}
var errors = $("[name='ErrorMessage']");
if (errors.length > 0) {
errors.hide();
}
var buttonGenerateReport = $("#GenerateReport");
if (buttonGenerateReport.length > 0) {
buttonGenerateReport.hide();
}
event.preventDefault();
}
}
<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');">
<img src="#Url.Content("~/App_Themes/icons/button_next.png")" alt="Next" /><br />
Next
</button>
The "~/" part of the Url Content string represents your project root, so adjust it to fit your correct file address later.
Or you could just use FontAwesome and replace your image entirely by that. It's size scalable because of CSS and has a simpler syntax.
<button type="submit" class="imgbottom" onclick="ValidateSelection('selectedItems');">
<i class="fa fa-angle-double-right" aria-hidden="true"></i> Next
</button>
Then in your jQuery function:
function ValidateSelection(elementName){
var selectedItems = $("[name='" + elementName + "']:checked");
if (selectedItems === null || selectedItems.length === 0) {
var validationSummary = $('.validation-summary-errors ul');
if (validationSummary.length > 0 && $('.validation-summary-errors ul li').length == 0) {
validationSummary.append('<li>' + "Please select at least one item" + '</li>');
}
var errors = $("[name='ErrorMessage']");
if (errors.length > 0) {
errors.hide();
}
var buttonGenerateReport = $("#GenerateReport");
if (buttonGenerateReport.length > 0) {
buttonGenerateReport.hide();
}
event.preventDefault();
}
}
Here I am validating a field in my jquery-mobile form:
$("#contactForm").submit(function (e)
{
e.preventDefault();
if($("#name").val() == '')
{
alert("Fill in name");
}
});
Obviously I don't want to do this using an alert box. How might I convey to the user instead that the field is invalid? I would like to have a solution that works on all typical mobile platforms.
Create a custom class.
.required {
border: 1px solid red;
}
Add / remove it to fields:
Text input
$(document).on('blur', 'textarea, input', function (e) {
if (!$(this).val() && e.target.localName == 'input') {
$(this).closest('div').addClass('required');
}
if (!$(this).val() && e.target.localName == 'textarea') {
$(this).addClass('required');
}
});
Textarea
$(document).on('focus', 'textarea, input', function (e) {
if (e.target.localName == 'input') {
$(this).closest('div').removeClass('required');
}
if (e.target.localName == 'textarea') {
$(this).removeClass('required');
}
});
Demo
Im trying to apply the JQuery UI highlight effect to an element when an item that is bound to a knockout observablearray is updated.
The highlight effect is applied but the highlight color used is always the elements current background color. even if I specify the highlight color using the { color: 'XXXXXXX' } option.
any ideas what might be happening?
Thanks,
Steve.
Code below: The element is the span.tag
<div class="row">
<div class="span12">
<div class="tagsinput favs span12" style="height: 100%;" data-bind="foreach: favs, visible: favs().length > 0">
<span class="tag" data-bind="css: $root.selectedFav() == userPrefID() ? 'selected-fav' : '', attr: { id: 'fav_' + userPrefID() }">
<span data-bind="text: name, click: $root.loadFav.bind($data)"></span>
<a class="tagsinput-fav-link"><i class="icon-trash" data-bind="click: $root.delFav.bind($data)"></i></a>
<a class="tagsinput-fav-link-two" data-bind="visible: $root.selectedFav() == userPrefID()"><i class="icon-save" data-bind=" click: $root.saveFav.bind($data)""></i></a>
</span>
</div>
</div>
</div>
// This is the code that does a save via ajax then highlights the element when done.
$.getJSON('#Url.Action("SaveFav","User")', { id: item.userPrefID(), fav: window.JSON.stringify(fav) }, function (result) {
var savedFav = ko.utils.arrayFirst(self.favs(), function (aFav) {
return aFav.userPrefID() == result.userPrefID; // <-- is this the desired fav?
});
// Fav found?
if (savedFav) {
// Update the fav!
savedFav.value(result.value);
}
}).done(function () {
var elementID = "#fav_" + item.userPrefID();
highlightElement(elementID);
});
// Function to highlight the element
function highlightElement(element) {
$(element).effect("highlight", {}, 1500);
}
I would do this the 'knockout' way... use a custom bindingHandler. You shouldn't be directly manipulating DOM in your viewModel, but only touching properties of your viewModel.
Taking this approach, you simply set a boolean value to true when your save is complete... this triggers the highlight effect (the jquery/dom manipulation neatly hidden away from your viewmodel) and when highlight effect completes, the handler sets the boolean back to false. Nice and tidy.
HTML:
<div id="#fav" data-bind="highlight: done">This is a test div</div>
<br />
<button data-bind="click: save">Simulate Save</button>
Javascript:
ko.bindingHandlers.highlight = {
update: function(element, valueAccessor) {
var obs = valueAccessor();
var val = ko.unwrap(obs);
if (val) {
$(element).effect("highlight", {}, 1500, function() {
obs(false);
});
}
}
};
var vm = function() {
var self = this;
self.done = ko.observable(false);
self.save = function() {
self.done(true);
};
}
ko.applyBindings(new vm());
Fiddle:
http://jsfiddle.net/brettwgreen/pd14q4f5/
My Requirement:
My string should be break after some words and at place we need to place "+more" option. when user click the "+more" need to show entire text. after end of the text need to show "-hide". when user click the "-hide" then it should be show previous. means some text with "+more" option. can any one help this.
my code:
var fullString= "string with above 150 charecters here";
var compressedString = TotalNews.fullString(150);
<div class="Temphide">
#compressedString
</div>
<a class="show" id="#newsItem.ApplicationNewsId">+More</a>
var Continues = fullString.Substring(150, TotalNews.Length - 150);
<div style="display:none;" >
#fullString <a class="hide">-Hide</a>
</div>
script:
<script type="text/javascript">
$(document).ready(function () {
$('.show').click(function () {
$(this).next('div').slideToggle();
});
$('.hide').click(function () {
$(this).parent().slideUp();
});
});
</script>
My problem:
Here when i click "+more" option i am showing "+more" with "-hide". requirement is when click "+more" need to show fullstring with "-hide" option. but i am doing showing "+more" and "-hide". please can any one help this.
Script:
$.fn.truncate = function(options) {
$(this).append('<span class="truncate_lh" style="display:none;"> </span>')
var defaults = {
maxlines: 2,
moreText: 'More',
lessText: 'Less',
ellipsis: '...'
};
$.extend(options, {
lineheight: ($('.truncate_lh').css('height').replace('px', ''))
});
$.extend(options, {
maxheight: (options.maxlines * options.lineheight)
});
options = $.extend(defaults, options);
return this.each(function() {
var text = $(this);
if (text.height() > options.maxheight) {
text.css({
'overflow': 'hidden',
'height': options.maxheight + 'px'
});
var link = $('' + options.moreText + '');
var wrapDiv = $('<div class="truncate_wrap" />');
text.wrap(wrapDiv);
text.after(link);
link.click(function() {
if (link.text() == options.moreText) {
link.text(options.lessText);
text.css('height', 'auto');
} else {
link.text(options.moreText);
text.css('height', options.maxheight + 'px');
}
return false;
});
}
});
};
$().ready(function() {
$('.truncate').truncate( {
maxlines: 4
});
});
View
<p class="truncate">//Here text...</p>
I have done this with help of
http://jsfiddle.net/Pjgzq/1/
visit this link
I am building an app using jquerymobile in phonegap. I am using he following code to achieve fixed header, footer, scrollable content using iscroll.js. The problem is that I am unable to scroll the content div. Pls help me.
enter code here<body onload="loaded()">
<div data-role="page" id="detail">
<div class="fixedHeader">
</div>
<div id="wrapper" >
<div id="scroll-content">
<div data-role="content">
<!-- dynamic content goes here -->
dynamic content goes here
</div>
</div>
</div>
<div class="fixedFooter" ></div>
</div>
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
float:left;
width:100%;
padding:0;
}
Javascript code
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
i got iscroll working in jquerymobile by editing js as
var myScroll = [];
$(document).delegate('[data-role="page"]', 'pageshow', function () {
var $page = $(this);
// setup iScroll
$($page.find('#wrapper')).each(function(index) {
var scroller_id = $(this).get(0);
myScroll.push(
new iScroll(scroller_id, {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT'&& target.tagName !='option'&& target.tagName !='option' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
e.stopPropagation();
}
}));
});
});
$(document).delegate('[data-role="page"]', 'pagehide', function () {
// unset and delete iScroll
for (x in myScroll)
{
myScroll[x].destroy();
myScroll[x] = null;
myScroll.splice(x, 1);
}
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);