Hi,
Am simply trying to blur out a text box if a user isn’t logged in.
Wix has the functionality to do this: https://www.wix.com/velo/reference/$w/focusmixin/blur
However, when using the below code it says “property type ‘blur’ does not exist on ‘text’”
$w("#totalVolume").blur();
What am I doing wrong? Any help is hugely appreciated
“Am simply trying to blur out a text box if a user isn’t logged in”
Do you mean something like this?
$w('#textBoxinput').onFocus(() => {
if(!user.loggedIn){
$w('#textBoxinput').blur();
}
})
I can’t see a reason why it wouldn’t work for you (unless you didn’t really used textBox input element, but a different element).
Thanks JD, have tried the above and luck, still getting the same error message (see screengrab below). I’ve done this on multiple different elements on the page from text boxes to containers to buttons and all have the same issue.
Is it possible to provide one of the team access to the site to see what’s going on?
The blur() method only exists in inputs elements. The error is quite clear, a Text element does not have a method that blurs, as boxes, containers and buttons, because there is no need to blur from an element that is not an input.
Try it on input elements.
That makes sense now Bruno - thank you. If i wanted to blur the text on a text element so that if you’re not logged in you can’t see certain elements - how would I go about doing that?
Have this function:
const bulrText = ($element, blurry, tag = 'p') => {
$element.html = blurry ? `<${tag} style="color: transparent;text-shadow: 0 0 5px rgba(0,0,0,0.5);">${$element.text}</${tag}>` : `<${tag}>${$element.text}</${tag}>`;
}
$w.onReady(() => {
//when you wish to make it blurry, for example here or inside a button click event handler:
bulrText($w('#text1'), true, 'p');//or h1, h2 etc.. instead of p if you want it to be a title and not a paragraph.
//when you wish to cancel the blurry effect:
bulrText($w('#text1'), false, 'p');
})
@jonatandor35 Got you! That’s working now, thanks. How would I do the same if I wanted to blur out the contents of an iFrame as well?
@gilesgun123 Lets say you have an iframe with this html code:
<html>
<body>
<p id="text1" class="blurred">This is my text</p>
</body>
</html>
And you want to have it blurred, so add styling:
<html>
<head>
<style>
p {
color: black;
font-size: 14px;
}
.blurred{
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<p id="text1" class="blurred">This is my text</p>
</body>
</html>
Now, let’s say you want to trigger the blur in the iframe from the page Velo code:
<html>
<head>
<style>
p {
color: black;
font-size: 14px;
}
.blurred{
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<p id="text1" class="blurred">This is my text</p>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
const text = document.getElementById('text1');
if(event.data === 'blur'){
text.className = 'blurred';
} else if(event.data === 'deblur'){
text.classList.remove('blurred');
}
}
}
</script>
</body>
</html>
and on the parent page when you want to blur or remove the blur:
//inside $w.onReady:
//To make it blur:
$w('#iframe1').postMessage('blur');
//to remove the blurry effect:
$w('#iframe1').postMessage('deblur');
@jonatandor35 I love you. All working. Thank you!
@gilesgun123 You’re welcome.
And if you want the blurred text to be unselected (so the user want be able to select it and copy-pate it. You can do the following:
For text element on page - put a transparent shape over it.
For text in the iframe, set it in the style. like this:
.blurred {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
(but of course it still can be copied from the dev tools > Elements)