Hello - can anyone advise on the advice I was given (https://support.wix.com/en/article/wix-code-tutorial-creating-a-show-more-link) regarding my post here for truncating text?
( https://www.wix.com/code/home/forum/community-discussion/is-there-a-way-to-constrain-the-size-of-a-text-box )
To attempt this function, I’m using the following code:
$w(“#dataset1”).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 10;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dataset1’).getCurrentItem().fullAnswer;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#text1’).collapse();
$w(‘#button4’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#text1’).text = fullText;
$w(‘#button4’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#text1’).text = shortText;
}
}
});
############
The result is attached. Any advice? Do I have an error in coding somewhere?
For the second issue, it looks like you need to wrap the page onReady() around this. This is how it would look:
$w.onReady( function () {
$w(“#dataset1”).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 10;
// set the fullText variable to be the text from the collection
fullText = $w(‘#dataset1’).getCurrentItem().fullAnswer;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#text1’).collapse();
$w(‘#button4’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#text1’).text = fullText;
$w(‘#button4’).collapse();
} else {
// create the shortened version of the text and display it in the text element
shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#text1’).text = shortText;
}
}
});
});
Awesome thank you! I have added the opening and closing wrapper lines. It now tells me that ‘fullText’ and ‘shorText’ are not defined.
Am I defining them incorrectly with:
fullText = $w(‘#dataset1’).getCurrentItem().fullAnswer;
and
const shortTextLength = 10;
Looks like you declared or initiated the variable shortTextLength appropriately but then you’re calling it “shortText” in the line $w(’ #text1 ').text = shortText;
For the other one, you need to use some declarative statement like “let”. By using “let”, the variable is limited in scope to this onReady function.
let fullText = $w(’ #dataset1 ').getCurrentItem().fullAnswer;
Alright! Seeing truncated text
- thank you!!! May I ask hopefully one final question…
Might there be a reason the variable is not having any affect? As in…
const shortTextLength = 1;
const shortTextLength = 5;
const shortTextLength = 10;
const shortTextLength = 20;
These all deliver the same result
Use let or var when you have a variable that is intended for information that is expected to change. Use const (as in constant) to store information that will never change. There is no need to keep declaring them, in fact, the Wix Editor should be warning you that the variable has already been declared.
Below is an example of this point:
// Declare variable
let shortTextLength = 1;
// other code executes
// re-assign the value of the variable
shortTextLength = 5;
My apologies, I wasn’t clear. But thanks so much for hangin w me here…
In declaring the constant, in the single line of code — const shortTextLength = xyz; — whatever value I put in, is having no effect on the display whether I note the xyz value as 1, or 5, or 20 in the line of code, It is not truncating my text to 1 character, or 5 characters, or 20.
In fact, it seems like the short text command is not working at all? The text box still expands to the full length text. I thought before that it was indeed truncating but it seems it is not. this is my current code:
$w.onReady( function () {
$w(“#dataset1”).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 10;
// set the fullText variable to be the text from the collection
let fullText = $w(‘#dataset1’).getCurrentItem().fullAnswer;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#text1’).collapse();
$w(‘#button4’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#text1’).text = fullText;
$w(‘#button4’).collapse();
} else {
// create the shortened version of the text and display it in the text element
let shortTextLength = fullText.substr(0, shortTextLength) + “…”;
$w(‘#text1’).text = shortTextLength;
}
}
});
});
shortTextLength is a numeric constant. I created another variable called shortText and then assigned it to the text element. Actually, that variable does not have to be created. This line would work too:
$w(‘#text1’).text = fullText.substr(0, shortTextLength) + “…”;
Best of luck with this. I’m going to be off line for up to 24 hours.
$w.onReady( function () {
$w(“#dataset1”).onReady( function () {
// how many characters to include in the shortened version
const shortTextLength = 10;
// set the fullText variable to be the text from the collection
let fullText = $w(‘#dataset1’).getCurrentItem().fullAnswer;
// if no text to display, collapse the text element and the button
if (!fullText) {
$w(‘#text1’).collapse();
$w(‘#button4’).collapse();
} else {
// if the text has fewer or the same number of characters as shortTextLength characters, display it as is and collapse the “Show More” button
if (fullText.length <= shortTextLength) {
$w(‘#text1’).text = fullText;
$w(‘#button4’).collapse();
} else {
// create the shortened version of the text and display it in the text element
let shortText = fullText.substr(0, shortTextLength) + “…”;
$w(‘#text1’).text = shortText;
}
}
});
});
anthonyb - you rock - thanks so much for the back and forth. Your last code here did the trick!! Thank you tons!!!
