Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

74
January 01, 2020, at 7:50 PM

I have code where i dynamically add custom css to my html on the application side like this:

C# code:

html = html + string.Format("<div id='{0}' class='sectioncon SectionComp 
responsiveSectionClass_{0}'>", sectionGUID);

This html variable gets returned to the UI and i then use (someselector).append(html)

Then client side i retrieve this information and spit out the media query using jquery like this:

Jquery code:

var stylesheetXS = $("<style id='" + this.responsiveClass + "'>")
var txtAll = "";
txtAll += "@@media screen and (max-width : 480px) {";
txtAll += "." + this.responsiveClass;
txtAll += "{";
txtAll += this.Style;
txtAll += "}";
txtAll += "}";
$(stylesheetXS).html(txtAll);
$("head").append(stylesheetXS);

So this.responsiveClass is the reference to responsiveSectionClass_{0} where {0} is a GUID.

The Jquery code gets added first before the c# code gets appended to the UI, so why is my Dynamically generated Media query not taking affect to the class in the html code?

Also when i select the element using chrome developer tool i cant see the media query that has been generated thats why i think that im doing something wrong here.

This is the generated html or part of it:

Media Query:

@media screen and (max-width : 480px) {.responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0{padding-top:30px;padding-bottom:30px;width:auto;height:auto;}}

HTML:

<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>

This is all i see in the code inspector:

element.style {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}
.sectioncon {
    padding-top: 30px;
    padding-bottom: 30px;
    width: auto;
    height: auto;
}

To Nathans response i tried this:

var txtAll = "";
                txtAll += "@@media screen and (max-width : 480px) {";
                txtAll += "." + this.responsiveClassXS;
                txtAll += "{";
                txtAll += this.Style;
                txtAll += "}";
                txtAll += "}";
                var css;
                css = document.createElement("style");
                css.id = this.responsiveClassXS
                css.type = 'text/css';
                css.media = "all";
                css.textContent = txtAll;
                document.getElementsByTagName("head")[0].appendChild(css);

but still not recognising the media query.

Answer 1

For some reason I can't get it to work in a stack snippet, but you can view a live demo here (or just save the code below as .html file and open it in a browser..) I made the background blue so that it would stand out more..

Here is a video of this working:

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
 
<body> 
 
</body> 
<script> 
    let iframeEl = document.createElement("iframe"); 
    iframeEl.setAttribute("style", "height: 100%; width: 100%;"); 
    document.body.appendChild(iframeEl); 
    iframeEl.contentDocument.open(); 
    iframeEl.contentDocument.write('<div class="sectioncon SectionComp responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0" style="padding-top:30px;padding-bottom:30px;width:auto;height:auto;"></div>'); 
    iframeEl.contentDocument.close(); 
    let styleSheet = ` 
        @media only screen and (max-width : 480px) { 
            .responsiveSectionClass_d7099673a3924894bec0bdb59f6ad0b0 { 
                padding-top: 30px; 
                padding-bottom:30px; 
                width:auto; 
                height:auto; 
                background-color: blue; 
            } 
        }`; 
    let style = '<style type="text/css">' + styleSheet + "</style>"; 
    iframeEl.contentDocument.head.innerHTML += style; 
</script> 
 
</html>

READ ALSO
Setting src for image inside an li selected using .eq?

Setting src for image inside an li selected using .eq?

I am trying to set the src of of the first image in the first li to the combination of two variables each containing a stringI tried using:

78
How to grab the values from a slider with jquery

How to grab the values from a slider with jquery

I have a slider that I grabbed from Codepenio here is the link to the slider I am using

94
node.js (npm) openlayers application will behave badly attempting to read a file

node.js (npm) openlayers application will behave badly attempting to read a file

I'm gaining experience with openlayers v6 and NPM (and experience is what you get when you did not get what you wanted)

70
How can I convert lightbox image gallery jquery code to Next.js code?

How can I convert lightbox image gallery jquery code to Next.js code?

I have a landing page applicationI preferred Next

71