use mktoBoolean in if statement

[Anonymous]

**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.

[Grégoire_Miche2]

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

[Anonymous]

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>

[Grégoire_Miche2]

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

[Anonymous]

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 {}

[Grégoire_Miche2]

Hi Jonas,

Does main-content-id really correspond to an ID ? What does it contain ?

Run it in debug or send the URL.

-Greg

[Anonymous]

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 {}

[Grégoire_Miche2]

Try

if ('${show_sidebar}' == 'none') {

          document.getElementById("main-content-id").style.width = "100% !important";

} else {}

-Greg

[Grégoire_Miche2]

Hi Jonas,

your code is wrong. It reads

'none' == none)

instead of

'none' == 'none'

-Greg

[Anonymous]

it is constantly being updated

you can see the latest try now

[Grégoire_Miche2]

Hi Jonas,

it becomes a JS issue there: The debugger says:

"Uncaught TypeError: Cannot read property 'style' of null" on the line

Use a simple quote:

document.getElementById('main-content-id').style.width = "100% !important";

-Greg

[Anonymous]

which debugger do you use?

[Grégoire_Miche2]

Chrome's

[Grégoire_Miche2]

OK, i found out. The code is correct but the script is before the diplay of the element.

Move the script at the end of the page, before the </body>

-Greg

[Anonymous]

the error code disappeared though...

[Grégoire_Miche2]

HI Jonas,

This linked to your page and the global html error might be the reason why it does not work. I tried to run a similar code on another page, and it worked fine.

XMLHttpRequest cannot load http://www.postnord.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://pages.postnord.com' is therefore not allowed access.

-Greg

[Anonymous]

thanks, it sound strange that that error would only affect that bit of code but if that is the only thing left to try it is the logical solution.. I will check it out! thank you!

[SanfordWhiteman]

There's also a significant JS bug on your page in another area.

You have code that tries to style a Marketo form after document.ready/DOMContentLoaded fires.  You can't do this.  If you want to apply styles to the Marketo Forms 2.0 DOM, add them in the Forms 2.0 whenReady event.  Otherwise, it will never work reliably.

[Anonymous]

and thank you again, will look into this.

[SanfordWhiteman · Accepted 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')

[Anonymous]

well what do you know, thank you! I know I thought about setProperty yesterday but I didn't even try..