Highlighted

Widget is breaking my webpage

Explorer ,
Aug 09, 2018

Copy link to clipboard

Copied

I have made this MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="Form" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="250" defaultHeight="50" isResizable="true" minWidth="50" minHeight="50" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth" maxHeight="50">

<pageItemHTML>

<![CDATA[<div class="form"> <form class="form-inline" action="https://app.99inbound.com/api/e/oAqXPKz_" method="post">

<label>

E-mail:

<input id="e-mail" name="E-mail" type="email" required/>

</label>

<input type="submit" value="Update">

</form>]]>

</pageItemHTML>

</HTMLWidget>

Yeah, it's a very basic HTML form tht's just collecting users' e-mail address. I know I could have added that code as an HTML object, but, I want it's height to be 50px only. Muse is generating previews and it's loading the cookie consent from my <head> which is changing the 50px height that I'm setting to 68px or 70px. If anyone knows how to turn these previews off, my problem would be easily solved. So, to overcome this problem, I had to create the MuCow widget.

Now, I have 4 breakpoints: 1200px. (expandable), 960px., 770px. and 420px. (min. width is 320px.). The widget is loading and working fine in the 961-1200px.+ breakpoint, however, as soon as I touch 960px. and below, the webpage hides all the text and other elements from it and displays only the imager resized to their original size, that too all aligned vertically in the left. The webpage stays in the same layout even if I then resize my browser to 961px.+. The only way out of this is to set my browser width to 961px.+ and refresh the page, however, that doesn't solve the problem of the breakpoints below that.

That's how it's looking. The problem goes away when I delete the MuCow widget.

This is the CSS styling for the widget in my A-Master page's <head>:

<style>

input[type=email]

{

    padding: 10px 10px;

    margin: 25px 0px;

    box-sizing: border-box;

}

input[type=submit]

{

    background-color: #000000;

    border: none;

    color: white;

    padding: 10px 10px;

    text-decoration: none;

    margin: 25px 0px;

    cursor: pointer;

}

.form

{

float: right;

}

</style>

This is the cookie consent again in my A-Master page's <head>:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>

<script>

window.addEventListener("load", function(){

window.cookieconsent.initialise({

  "palette": {

    "popup": {

      "background": "#000"

    },

    "button": {

      "background": "#f1d600"

    }

  },

  "theme": "edgeless",

  "content": {

    "message": "Broken Hearts' website and app stores cookies on your device. ",

    "dismiss": "Got it.",

    "link": "Why?",

    "href": "https://www.brokenhearts.ml/privacy-policy.html"

  }

})});

</script>

Can anyone point why this is happening? As I said before, disabling the preview in Muse's Design mode can help me already, but, I can't find such an option. Thus, can someone left me know what's wrong with the MuCow widget?

Just so everyone knows, there's another MuCow widget on the same page but that's not creating any issues. I had to create it also because of the same preview thing. I wanted its height to be just 16px., but, it was being rezised to 68px. automatically.

This is the other MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="OneSignal" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="100" defaultHeight="16" isResizable="true" minWidth="50" minHeight="16" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth">

<pageItemHTML>

<![CDATA[<center><a href="#" id="notification-button" style="display: none;">Subscribe</a>

    <script>

    function onManageWebPushSubscriptionButtonClicked(event) {

        getSubscriptionState().then(function(state) {

            if (state.isPushEnabled) {

                OneSignal.setSubscription(false);

            } else {

                if (state.isOptedOut) {

                    OneSignal.setSubscription(true);

                } else {

                    OneSignal.registerForPushNotifications();

                }

            }

        });

        event.preventDefault();

    }

    function updateMangeWebPushSubscriptionButton(buttonSelector) {

        var hideWhenSubscribed = false;

        var subscribeText = "Subscribe";

        var unsubscribeText = "Unsubscribe";

        getSubscriptionState().then(function(state) {

            var buttonText = !state.isPushEnabled || state.isOptedOut ? subscribeText : unsubscribeText;

            var element = document.querySelector(buttonSelector);

            if (element === null) {

                return;

            }

            element.removeEventListener('click', onManageWebPushSubscriptionButtonClicked);

            element.addEventListener('click', onManageWebPushSubscriptionButtonClicked);

            element.textContent = buttonText;

            if (state.hideWhenSubscribed && state.isPushEnabled) {

                element.style.display = "none";

            } else {

                element.style.display = "";

            }

        });

    }

    function getSubscriptionState() {

        return Promise.all([

          OneSignal.isPushNotificationsEnabled(),

          OneSignal.isOptedOut()

        ]).then(function(result) {

            var isPushEnabled = result[0];

            var isOptedOut = result[1];

            return {

                isPushEnabled: isPushEnabled,

                isOptedOut: isOptedOut

            };

        });

    }

    var OneSignal = OneSignal || [];

    var buttonSelector = "#notification-button";

    OneSignal.push(function() {

        if (!OneSignal.isPushNotificationsSupported()) {

            return;

        }

        updateMangeWebPushSubscriptionButton(buttonSelector);

        OneSignal.on("subscriptionChange", function(isSubscribed) {

            updateMangeWebPushSubscriptionButton(buttonSelector);

        });

    });

    </script>]]>

</pageItemHTML>

</HTMLWidget>

TOPICS
Mucow development

Views

506

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Widget is breaking my webpage

Explorer ,
Aug 09, 2018

Copy link to clipboard

Copied

I have made this MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="Form" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="250" defaultHeight="50" isResizable="true" minWidth="50" minHeight="50" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth" maxHeight="50">

<pageItemHTML>

<![CDATA[<div class="form"> <form class="form-inline" action="https://app.99inbound.com/api/e/oAqXPKz_" method="post">

<label>

E-mail:

<input id="e-mail" name="E-mail" type="email" required/>

</label>

<input type="submit" value="Update">

</form>]]>

</pageItemHTML>

</HTMLWidget>

Yeah, it's a very basic HTML form tht's just collecting users' e-mail address. I know I could have added that code as an HTML object, but, I want it's height to be 50px only. Muse is generating previews and it's loading the cookie consent from my <head> which is changing the 50px height that I'm setting to 68px or 70px. If anyone knows how to turn these previews off, my problem would be easily solved. So, to overcome this problem, I had to create the MuCow widget.

Now, I have 4 breakpoints: 1200px. (expandable), 960px., 770px. and 420px. (min. width is 320px.). The widget is loading and working fine in the 961-1200px.+ breakpoint, however, as soon as I touch 960px. and below, the webpage hides all the text and other elements from it and displays only the imager resized to their original size, that too all aligned vertically in the left. The webpage stays in the same layout even if I then resize my browser to 961px.+. The only way out of this is to set my browser width to 961px.+ and refresh the page, however, that doesn't solve the problem of the breakpoints below that.

That's how it's looking. The problem goes away when I delete the MuCow widget.

This is the CSS styling for the widget in my A-Master page's <head>:

<style>

input[type=email]

{

    padding: 10px 10px;

    margin: 25px 0px;

    box-sizing: border-box;

}

input[type=submit]

{

    background-color: #000000;

    border: none;

    color: white;

    padding: 10px 10px;

    text-decoration: none;

    margin: 25px 0px;

    cursor: pointer;

}

.form

{

float: right;

}

</style>

This is the cookie consent again in my A-Master page's <head>:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>

<script>

window.addEventListener("load", function(){

window.cookieconsent.initialise({

  "palette": {

    "popup": {

      "background": "#000"

    },

    "button": {

      "background": "#f1d600"

    }

  },

  "theme": "edgeless",

  "content": {

    "message": "Broken Hearts' website and app stores cookies on your device. ",

    "dismiss": "Got it.",

    "link": "Why?",

    "href": "https://www.brokenhearts.ml/privacy-policy.html"

  }

})});

</script>

Can anyone point why this is happening? As I said before, disabling the preview in Muse's Design mode can help me already, but, I can't find such an option. Thus, can someone left me know what's wrong with the MuCow widget?

Just so everyone knows, there's another MuCow widget on the same page but that's not creating any issues. I had to create it also because of the same preview thing. I wanted its height to be just 16px., but, it was being rezised to 68px. automatically.

This is the other MuCow widget:

<?xml version="1.0" encoding="UTF-8"?>

<HTMLWidget name="OneSignal" formatNumber="6" localization="none" creator="Ananya Mangwani" defaultWidth="100" defaultHeight="16" isResizable="true" minWidth="50" minHeight="16" supportedSizePolicies="fixed,fluidWidth,fluidWidthHeight,browserWidth">

<pageItemHTML>

<![CDATA[<center><a href="#" id="notification-button" style="display: none;">Subscribe</a>

    <script>

    function onManageWebPushSubscriptionButtonClicked(event) {

        getSubscriptionState().then(function(state) {

            if (state.isPushEnabled) {

                OneSignal.setSubscription(false);

            } else {

                if (state.isOptedOut) {

                    OneSignal.setSubscription(true);

                } else {

                    OneSignal.registerForPushNotifications();

                }

            }

        });

        event.preventDefault();

    }

    function updateMangeWebPushSubscriptionButton(buttonSelector) {

        var hideWhenSubscribed = false;

        var subscribeText = "Subscribe";

        var unsubscribeText = "Unsubscribe";

        getSubscriptionState().then(function(state) {

            var buttonText = !state.isPushEnabled || state.isOptedOut ? subscribeText : unsubscribeText;

            var element = document.querySelector(buttonSelector);

            if (element === null) {

                return;

            }

            element.removeEventListener('click', onManageWebPushSubscriptionButtonClicked);

            element.addEventListener('click', onManageWebPushSubscriptionButtonClicked);

            element.textContent = buttonText;

            if (state.hideWhenSubscribed && state.isPushEnabled) {

                element.style.display = "none";

            } else {

                element.style.display = "";

            }

        });

    }

    function getSubscriptionState() {

        return Promise.all([

          OneSignal.isPushNotificationsEnabled(),

          OneSignal.isOptedOut()

        ]).then(function(result) {

            var isPushEnabled = result[0];

            var isOptedOut = result[1];

            return {

                isPushEnabled: isPushEnabled,

                isOptedOut: isOptedOut

            };

        });

    }

    var OneSignal = OneSignal || [];

    var buttonSelector = "#notification-button";

    OneSignal.push(function() {

        if (!OneSignal.isPushNotificationsSupported()) {

            return;

        }

        updateMangeWebPushSubscriptionButton(buttonSelector);

        OneSignal.on("subscriptionChange", function(isSubscribed) {

            updateMangeWebPushSubscriptionButton(buttonSelector);

        });

    });

    </script>]]>

</pageItemHTML>

</HTMLWidget>

TOPICS
Mucow development

Views

507

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 09, 2018 0
Guide ,
Aug 09, 2018

Copy link to clipboard

Copied

Unfortunately, there's no way to disable previews in design mode and it varies, depending on your default browser, which Muse uses to render the page items. One thing I did notice is you don't have a closing div tag on your form wrapper. That might explain some things.

I hope this helps,

David

Creative Muse

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 09, 2018 0
Explorer ,
Aug 09, 2018

Copy link to clipboard

Copied

Oh, yeah! That seems to have fixed it! Thanks for pointing it out. It's odd

that at first, I had tried without writing

at all and it still wasn't
working. However, adding the

worked!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 09, 2018 0