Condition within statements ?

[Siberian]

Can a else if, or else statment contain a condition ? If the condition is not meet then, nothing happens other wise one of the else if or if statements is read ?

[rproffitt]

How about an example in code for comment? In Java, C (pick any?) the if condition can have more logic, and "else if" can have same or another condition.

[Siberian]

https://jsfiddle.net/WildWind/L0z52sbL/15/

[Siberian]

I want the condition to load a different image based on screen width for a series of img tags.

The else-if should have a condition, and you can have multiple else-ifs. However, you should only have one else at the end, which is run if none of the conditions are met.

if (condition) {
    // code
} else if (condition) {
    // code
} else {
    // code
}

Media queries?

[Siberian]

diafol - This is for images, not for responsive pages ;)

[gentlemedia]

This is for images, not for responsive pages ;)

But, there is now the srcset and the sizes attributes for this? But you knew that already, so there's no need for a JS solution. Only as a fallback solution for older browsers.

[Siberian]

There is a need for JS-Library solution !

[rproffitt]

@Siberian.

I wonder if this is a variation of a prior discussion you created. Folk may not guess that there is, but the opening question without guessing you wanted to do something new or different with Lightbox would be just a guess.

Ever had a client that didn't reveal the entire specification?

[Siberian]

rp - There is somewhat a relation; I should have never shyed away from the lightbox I was using that was working how I wanted. A JS-Library type solution is the only method whereas I can have reponsive images work within the Lightbox, hoping that the Lightbox is friendly enough that it will co-operate with Js-Library and solve this problem.

[rproffitt]

@Siberian,

And that would be an entirely different question than posed here. That said, I read https://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29 again to check that Lightbox is open source. Free for you to tinker and make it do what you want it to do.

[amanjogi]

@Siberian

The code with the conditions in if and else is

if(condition)
{//code to executed if conditon gets corrected
}
elseif(condition)
{//code to be executed if elseif condition gets validate
}
else
{//code to leave the conditional statements and get out
}

[gentlemedia]

There is a need for JS-Library solution !

Do you mean a library such as jQuery? If so, then you don't need one for this.
Window.matchMedia() - part of the Web API - is especially made for using media queries in JS.

if (window.matchMedia("(min-width: 1024px)").matches) {
    // code for when viewport is at least 1024px wide
} else if (window.matchMedia("(min-width: 768px)").matches) {
    // code for when viewport is at least 768px wide
} else {
    // code for when viewport is less then 768px wide
}

But for swapping img's better to use scrset and sizes, because that's where it's for.

[Siberian]

GentleMedia most browsers don't support srcset, yet !

[rproffitt]

http://caniuse.com/#feat=srcset seems to note it's mostly an IE issue but since IE is mostly on Windows PCs of big screens you have to decide to let it be just so for IE and the rest look good to go.

-> Here's a thing. No matter what element or code you can always find a browser that has an issue.

My buddies that deal with web content learned long ago to write for the platforms they want to target and never fall into the "all browser" trap.

[gentlemedia]

Yes, IE and some other don't support scrset yet, but for them you can load (via Modernizr) the picturefill.js polyfill. Or as rproffitt suggest, just let them deal with the regular/default img.

[Siberian]

I can use Modernizer to polyfill picuturefill.js onDocument Ready, without using picturefill in the markup, correct ?

[gentlemedia]

With modernizr you can load picturefill.js only for browsers that don't support the picture element (which includes scrset and sizes attributes). So there's no unnecessary overhead for browsers that do support the picture element.

With the new version of Modernizr the Modernizr.load() method is deprecated, so you will have to create now a conditional build for the features you want to detect and polyfill.

You would do now something like this (untested and there are other ways to conditionally load scripts):

var head = document.getElementsByTagName('head')[0];
var script = document.createElement("script");

script.type = "text/javascript";

if (Modernizr.picture) {
    // Picture element is supported!
} else {
    script.src = "js/picturefill.js";
}

if (Modernizr.someotherfeature) {
    // Some other feature is supported!
} else {
    script.src = "js/someotherfeature.js";
}

// etcetera

head.appendChild(script);

[Siberian]

Modernizer puts the <picture> element in the page for browsers that don't support <picture>, correct ?

I'm not using the <picture> element, strictly <img src> & <srcset> but there is a srcet attribute.

if != (Modernizer.srcset) {
//insert srcset images based on width
}

If srcset is supported the browser will read from the mark-up. No need for extra conditions.

[gentlemedia]

Modernizer puts the <picture> element in the page for browsers that don't support <picture>, correct ?

No, Modernizr is purely for feature detection. You just write/use scrset and/or sizes attributes in your markup as recommended by W3C, you test with Modernizr and load picturefill.js for browsers/devices that don't support these attributes. That's pretty much it. You can indeed create the modernizr build with scrset attribute included and do your feature test with that to load picturefill.js

[Siberian]

If the lightbox to which I'm using doesn't support srcset, as my markup doesn't use <picture> only srcset nested within a <img src>.

I'll need to write a Js-library condition so the lightbox which doesn't support srcset will change the image based on the browser width so the lightbox will load the image based on the browser width.

I don't foresee the need for Modernizer considering the only browsers that don't support srcset, as mentioned, is, IE, excluding Edge. Since the Js-library condition for the lightbox will essentially allow IE to view the correct image based on screen width regardless !

[gentlemedia]

What you all want, that is exactly what picturefill.js does. Picturefill.js makes srcset, sizes and the picture element already work in IE, so why do you want to create your own js solution? I don't get it!
And you will need Modernizr or the likes to detect the feature, so you can load picturefill.js only for browsers/devices that don't support scrset. A library as Modernizr is pretty much inevitable in a front-end developers toolkit. It makes serving fallback solutions or loading polyfills a lot easier.

[Siberian]

I need my own JS solution because the lightbox to which I'm using doesn't understand <picture> or srcset. For the lightbox to load an image that is designed for a 320w or a 550w etc a Js solution will be needed to change the image based on the screen width so the lightbox loads the correct image, for the correct size; modernizr won't do that ;)

[gentlemedia]

Okay... understood! Then the window.matchMedia() method might do the trick for you. Browser support is great; http://caniuse.com/#feat=matchmedia

[Siberian]

I'm hoping you can do a code over view see if I'm using MatchMedia correctly in a condition.

[gentlemedia]

I thought you wanted to change the img src when a MQ is triggered. You'll have to place your default image in the HTML and replace it with another when a MQ is triggered.

<img src="img/default.jpg" id="img-01" alt="" />

<!-- this, but then in your window.matchMedia() MQ -->
<script>
    document.getElementById("img-01").src="img/medium.jpg";
</script>

<!-- or with jQuery -->
<script>
    $("#img-01").attr('src', 'img/medium.jpg');
</script>

By the way... responding to multiple media queries with window.matchMedia() goes a bit different then I thought as well.
Check out this tutorial:
http://www.javascriptkit.com/javatutors/matchmediamultiple.shtml

[Siberian]

I didn't find in the MDN develpment page that I can append .src to getElementById or getElementbyTagName ?

[Siberian]

 if (mqls[0].matches){ 
 document.getElementById("img01").src="img/small.jpg";
 }

Only a snippet of the condition. The Array method is more appealing.

[gentlemedia]

I've used in the past enquire.js which is basically a wrapper around window.matchMedia() but with some added features.
http://wicky.nillia.ms/enquire.js/