**disclaimer: I can't find any docs on this but as usual, if it exists I would be delighted to get the location.**
Hi,
I am trying to get a mktoBoolean to be a trigger in a if statement but I can't get it to work.. see code below, any ideas?
<meta class="mktoBoolean" id="show_sidebar" mktoName="Show sidebar?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
<script>
if (show_sidebar === false) {
document.getElementById(main-content-id).style.width=100%;
} else {}
</script>
kundly, jonas.
Solved! Go to Solution.
Has nothing to do with XHR cross-domain security.
The problem is actually quite basic. This is not a valid style assignment:
// broken, you can't assign CSS text here
document.getElementById('main-content-id').style.width = '100% !important';
That line is valid JavaScript, but it doesn't actually do anything. You can't simply assign the CSS text '100% !important' as if it's the value of the width property. It's actually two values, one being the '100%' and the other being the special reserved priority attribute (whose only allowed value is the string 'important').
To set !important in script, use setProperty, which includes the priority:
document.getElementById('main-content-id').style.setProperty('width','100%','important')
Hi Jonas,
<meta class="mktoBoolean" id="show_sidebar" mktoName="Show sidebar?" default="true" true_value="SHOW" false_value="HIDE" false_value_name="Hide" true_value_name="Show">
<script>
if ('${show_sidebar}' == 'SHOW') {
document.getElementById(main-content-id).style.width=100%;
} else {}
</script>
-Greg
I need to have the value as "none" because I am using it in css as well in a "display:" tag.. so the meta code would need to look like below. I believe, did try your suggestion without result.. it seems there is something wrong with the if statement because the boolean works and sets "display: none;" so the sidebar disappears but the width of "main-content-id" remains the same...
below is the latest code I tried..
<meta class="mktoBoolean" id="show_sidebar" mktoName="Show sidebar?" default="true" true_value="block" false_value="none" false_value_name="Hide" true_value_name="Show">
<script>
if ('${show_sidebar}' == 'none') {
document.getElementById(main-content-id).style.width=100%;
} else {}
</script>
HI Jonas,
In the resulting LP, looking at page code, the script should show as follow:
<script>
if ('none' == 'none') {
document.getElementById(main-content-id).style.width=100%;
} else {}
</script>
or
<script>
if ('block' == 'none') {
document.getElementById(main-content-id).style.width=100%;
} else {}
</script>
Depending of the choice you made.
Pls provide the URL of the LP.
The error might be in the statement
document.getElementById(main-content-id).style.width=100%;
and more specifically with the main-content-id identifier.
-Greg
this is what is shown at the generated LP so in here lyes the problem..
if ('none' == 'none') {
document.getElementById(main-content-id).style.width=100%;
} else {}
Hi Jonas,
Does main-content-id really correspond to an ID ? What does it contain ?
Run it in debug or send the URL.
-Greg
PS: is main-content-id is the ID, then you should write it
if ('none' == 'none') {
document.getElementById("main-content-id").style.width=100%;
} else {}
-Greg
sorry..
http://pages.postnord.com/99-allmnna-test-av-mail_redone-jl.html
I know the id #main-content-id is working because the responsive tags are working. And the sidebar is set to "display: block" and "display: none" using the boolean while setting up the LP...
using this: JSHint, a JavaScript Code Quality Tool says there is nothing wrong with this below but still not working..
if ('${show_sidebar}' == 'none') {
document.getElementById("main-content-id").style.width = "100%";
} else {}
Try
if ('${show_sidebar}' == 'none') {
document.getElementById("main-content-id").style.width = "100% !important";
} else {}
-Greg
Hi Jonas,
your code is wrong. It reads
'none' == none)
instead of
'none' == 'none'
-Greg