So at the moment I have a literal to which I assign a value to from database. I.e an Introduction to a programme.
What I am looking to do is i.e if the text is larger than 100 Characters, to only display the first 100 Characters and then display a javascript link "Read More" which when clicked displays the rest of the content.
Any Ideas ?
Use CSS elipses is one quick easy solution:
span.ellipsis {
text-overflow:ellipsis;
}
The other in .NET would be something like:
string YourText = "rgr";
if (YourText.Length > 100)
{
YourText = YourText.Substring(0, 100);
YourText += "... Read more";
}
There are a few issues with the above though, there are lots of refinements you can make but that should get you going.
Have two Literals or Labels, one of which is hidden with style="display: none" (Visible=False won't emit the HTML so you can't interact with it from Javascript) and contains the full text.
Your first label/literal ("Read more") needs to have an onclick event that does something like :
javascript:void(show(LongerText.ClientId));
show and hide are defined as:
function show(id) {
document.getElementById(id).style.display = "block";
}
Set the text of your labels to be a cut down (substring'd) version of the text and the full text.
Should be enough to get you started, but let me know if you need anything more :)
Just to make it extra clear, the structure of the document is this:
Title of document
Read more
hidden text
Related
Setup:
Below is a tweet example appearing as an editable text:
"First words of tweet, #tweetaddress last words of tweet"
Requirement and Problem:
I'd like the user to be able to edit the text, but NOT change the #tweetaddress, which I have working. However, I also would like the #tweetAddress to be color:blue while the rest of the text is color:white. I can achieve this result initially through the use of a span wrapped around the #tweetaddress. (shown is code below.)
I'm fine on JavaScript detecting if the #tweetaddress has changed. BUT...
The problem:
...if the user starts typing right next to the #tweetaddress, the styling from the 'never-change' class applies to all the new text. Is there a way to limit my to only include the #tweetaddress, so that all new text into the div is outside it and not blue?
I've tried initially putting different spans on either side of the #tweetaddress 'never-change' span, but if the user deletes the characters in the other spans and then retypes, the new letters still come out blue.
I'd really love to hear any ideas on how I could proceed.
HTML
<div contenteditable id="text-input" placeholder="Tweet text here">First words of tweet,<span class="never-change">#tweetaddress</span> last words of tweet</div>
CSS:
.never-change{
color:blue;
}
JS:
$('#text-input').keydown(function() {
textStart = $(this).html();
tweetAddress = '#tweetaddress';
}
$('#text-input').keyup(function() {
textEnd = $(this).text();
if (textEnd.indexOf(placeholderText) > -1){
return false;
} else {
alert("Twiiter name. Cannot edit");
$(this).html(textStart);
}
Thank you in advance.
I'm attempting to make a page that allows users to input text and it will automatically format the input -- as in a screenplay format (similar to Amazon's StoryWriter).
So far I can check for text with ":contains('example text')" and add/remove classes to it. The problem is that all of the following p tags inherit that class.
My solution so far is to use .next() to remove the class I added, but that is limited since there might be need for a line break in the script (in dialogue for instance) and that will remove the dialogue class.
$('.content').on('input', function() {
$("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high");
$("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high");
});
I can't get || to work in the :contains parameter either, but that's the least of my issues.
I have a JS fiddle
I've worked on this for a while now, and if I could change only the node that contains the text (INT. or EXT. in this example) and leaves the rest alone that would work and I could apply it to the rest of the script.
Any help would be appreciated, I'm new to the stackoverflow so thank you.
See the comments in the code below for an explanation of what's going on.
Fiddle Example
JQuery
var main = function(){
var content = $('.content');
content.on('input', function() {
$("p.input").each(function() {
//Get the html content for the current p input.
var text = $(this).html();
//indexOf will return a positive value if "INT." or "EXT." exists in the html
if (text.indexOf('INT.') !== -1 || text.indexOf('EXT.') !== -1) {
$(this).addClass('high');
}
//You could include additional "if else" blocks to check and apply different conditions
else { //The required text does not exist, so remove the class for the current input
$(this).removeClass('high');
}
});
});
};//main close
$(document).ready(main);
I have the following code on my ecommerce website.
I would like to search to check whether it contains "0.00"
If it does contain "0.00" I would like to hide the parent div containing the price
This is because we want the product to appear online but even though it cannot be purchased, the price is still displayed, so we don't want people to be confused if they see the price as £0.00.
<div class="ct_pd_item_price ct_pd_item_value">
<span itemprop="price">
<span class="ct_currencyCode">GBP</span>
<span class="ct_currencySymbol">£</span>0.00</span>
</div>
Is this possible using some form of javascript?
If you can't change your HTML, it's a little tedious because the text must be cleand from the currencyCode and currencySymbol. A way to do this is to clone the div and then take the text :
$(".ct_pd_item_price.ct_pd_item_value").filter(function(){
return $(this).clone().find('.ct_currencyCode, .ct_currencySymbol').remove().end().text().trim()=="0.00"
}).hide()
Demonstration
Of course a cleaner HTML, maybe with the value in a data attribute, would be easier to deal with.
Another way with a regular expression
$('[itemprop="price"]').each(
function() {
var elem = $(this);
if (elem.text().match(/[^\d]0\.00/)) {
elem.closest(".ct_pd_item_price.ct_pd_item_value").hide();
}
}
);
Pulls out the text and it will be £0.00 so match that the price is not [anynumber]0.00
I have working on this problem for a couple weeks off and on. What I am trying to do is have placeholders to show users where they can type. When they do type, I want the placeholder to disappear, but reappear again when the div is empty.
Every thing I have found has to do with cross-browser placeholder support for inputs and textareas, and trying to apply the code for them to my issue results in failure.
I am using h1s for titles and standard divs for descriptions.
My code looks like this:
HTML
<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>
jQuery
var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);
I have more jQuery code, but it sucks. I am currently using keyup to hide the placeholder, and that's obviously not working. Can someone help me out?
I am totally open to using vanilla JavaScript as well.
You can have something like this:
$('#xdiv').html($('#xdiv').data('placeholder'));
$('#xdiv').keydown(function() {
if ($(this).html() == $(this).data('placeholder')) {
$('#xdiv').html('');
}
})
$('#xdiv').keyup(function() {
if ($(this).html() == '') {
$('#xdiv').html($('#xdiv').data('placeholder'));
}
})
Initially it sets DIV's HTML to placeholder text. Then when user begins to type (on keydown) it checks if DIV still has the placeholder text and if so - removes it. And since user can delete all the data - it checks (on keyup) if DIV is empty, and if so - restores placeholder's text.
Demo: http://jsfiddle.net/bP7RF/
there's a way to do it in css (modern browser only)
.pageDesc:empty:after {content : "Write your description here.";}
Javascript solution (not as pretty, but more cross-browser):
$("#in").keyup(function(){
if(!$(this).html()){
$(this).html($(this).attr('data-placeholder'));
$(this).attr('showing-placeholder',true);
}
});
$("#in").keydown(function(){
if($(this).attr('showing-placeholder')){
$(this).html('');
$(this).attr('showing-placeholder','');
}
});
Working Example: JSFiddle;
Why not use the Blur and Focus event handlers from jQuery and check the Text value of the Div?
Code for quick look:
$('[contenteditable="true"]').blur(function() {
var text = $.trim($(this).text());
var ph = $('<span/>',{ 'class':"placeholder"})
.text($(this).data('placeholder')||'');
if (text == '') {
$(this).html(ph);
}
}).focus(function() {
if ($(this).children('.placeholder').length > 0) {
$(this).html('<span> </span>');
}
});
Fiddle for example: http://jsfiddle.net/qvvVr/1/
Why can't you use the placeholder attribute of the input element.
It seems to do exactly what you want and it's very well supported
(http://caniuse.com/input-placeholder).
Sorry if I have missed something.
For example, i have a div which users can type into it. i would like to place shortcuts so when the user inputs the word pi. The output would be the symbol π. Or if the user inputs sqrt then they would get this symbol inf then the output would be ∞. and even when the tab button is clicked to indent a couple of lines. I have not seen a web app that does this yet so any help would be appreciated.
There's some extensive key tracking + field updating you can do to accomplish this, or you can get a jQuery plugin that already does something similar (if not exactly) and modify it to accomplish the same task.
This might be what you are looking for though:
http://code.google.com/p/js-hotkeys/wiki/about
You could simply use a replace. See JSFiddle demo here
$('.test').keydown(function (event) {
if ($('.test').val().contains("pi")) {
var newVal = $('.test').val().replace("pi", "π");
$('.test').val(newVal);
//Place Cusor at the end of the div if using editable div
}
else if ($('.test').val().contains("inf")) {
var newVal = $('.test').val().replace("inf", "∞");
$('.test').val(newVal);
//Place Cusor at the end of the div if using editable div
}
});
In this sample I am using an input. You can change that to div