Conditional CSS Based Upon Div Not Screen

conditional CSS based upon div not screen

There is no way to put a if condition on a div width.

I know that this could easily be done with javascript, but for it to work with other javascript/jQuery plugins, the css has to be set in the CSS stylesheet not in the element style attribute.

For this you can use 2 different classes in your stylesheet i.e.

.wide {width:90%;}
.half {width:45%;}

Now you can check with jQuery the #primary container width and set the class:

const $primary = $("#primary");
$primary
    .find(".bricks")
        .addClass($primary.width() < 915 ? "wide" : "half")

Conditional styling not being applied to a div

I would use a method for this

methods: {
  getStyleClasses() {
    let className = ''
    if (
      this.index === this.tasks.length - 2 ||
      this.index === this.tasks.length - 1
    )
      className = className.concat(' p-col-12')
    if (this.index === 0 || this.index === 1)
      className = className.concat(' dp-block')
    return className
  },
},

And use it like so

<div
  class="row"
  v-for="(task, index) in tasks"
  :class="getStyleClasses()"
  :key="task"
>
  <Card style="width: 25em; vertical-align: middle;">
        // card content
  </Card>
</div>

Can you use if/else conditions in CSS?

Not in the traditional sense, but you can use classes for this, if you have access to the HTML. Consider this:

<p class="normal">Text</p>

<p class="active">Text</p>

and in your CSS file:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

That's the CSS way to do it.

---

Then there are CSS preprocessors like Sass. You can use conditionals there, which'd look like this:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Disadvantages are, that you're bound to pre-process your stylesheets, and that the condition is evaluated at compile time, not run time.

---

A newer feature of CSS proper are custom properties (a.k.a. CSS variables). They are evaluated at run time (in browsers supporting them).

With them you could do something along the line:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

---

Finally, you can preprocess your stylesheet with your favourite server-side language. If you're using PHP, serve a style.css.php file, that looks something like this:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

In this case, you will however have a performance impact, since caching such a stylesheet will be difficult.

Conditional JQuery form that hides or displays a DIV based on the selection?

Try this fiddle
http://jsfiddle.net/2XV7w/5/

conditional css settings based on screen resolution

you can do like this-

@media-screen and (min-width: 1920px) {
.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }
  }

Javascript conditional show/hide div based on other div's content

Element.innerHTML will always return a string, try converting your innerHTML to a number using Number(level)

function myFunction()
{    
    let myDiv = document.getElementById("myDiv");
    let stringLevel = document.getElementById("level").textContent;
    const level = Number(stringLevel);
    if (level >= 2) {
        myDiv.style.display  = "block";
    } else {
        myDiv.style.display  = "none";
    }
}

(EDIT)

consider using textContent instead of innerHTML as pointed by Scott Marcus

Conditionally hide div based on if element is present on page

Yes !

if($('.someElement').length){  // returns true if element is present
  // show or hide another div
  $('.otherElement').hide();
}

---

Related Topics