devconcept's questions

I have the following problem that has me stumped. I want to place a couple of elements, one that has a series of buttons inside, and another that takes up the rest of the available size.

This image illustrates the result I want to reach

<div class="contenedor">
    <div class="contenido">
        <!-- Debe ocupar el resto del espacio -->
    </div>
    <div class="botones">
        <!-- De acuerdo al texto y los botones puede ser más ancho pero siempre es fijo -->
        <button>Ok</button>
    </div>
</div>

It seems like a simple task but it is not. The root of the problem is that the container must have width: 100%;so that it occupies all the available width and after the button or buttons occupy their size, the rest must be occupied by the other container.

I have already tried using displayandwidth: 100%

.contenedor {
  width: 100%;
}
.contenido {
  display: inline-block;
  width: 100%;
  background-color: blue;
}
.botones {
  display: inline-block;
  background-color: violet;
}

<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

It obviously didn't work since the widthen %is relative to the parent and takes up all the space.

I also tried withcalc

.contenedor {
  padding: 0;
  margin: 0;
  width: 100%;
}
.contenido {
  padding: 0;
  margin: 0;
  display: inline-block;
  width: calc(100% - 124px);
  background-color: blue;
}
.botones {
  padding: 0;
  margin: 0;
  width: 120px;
  display: inline-block;
  background-color: violet;
}

<div class="contenedor">
  <div class="contenido">
    <input>
  </div>
  <div class="botones">
    <button>Ok</button>
    <button>Cancel</button>
  </div>
</div>

But that solution does not work for me since I have to force a fixed size and the elements may not fit.

How could I achieve such a layout?

I would prefer to achieve this without using flexboxneither calc, nor any of the experimental properties to make it as compatible as possible.

I have a class that only defines some public properties but has a long chain of inheritance.

public class AgencyPaginatedQuery : SortedPaginatedQuery
{
    public string Code { get; set; }
    public string Name { get; set; }
    public string Initials { get; set; }
}

public class SortedPaginatedQuery : PaginatedQuery
{
    public string Sort { get; set; }
    public string Order { get; set; }
}


public class PaginatedQuery
{
    public int? Start { get; set; }
    public int? Size { get; set; }
}

The class I am looking at is AgencyPaginatedQueryand I am trying to get the names of said properties using LINQ and Reflection. So far I have been able to get which of these properties belong to the class in question with a simple query

var type = typeof(AgencyPaginatedQuery);
var names = from prop in type.GetProperties()
            where prop.DeclaringType.Name == type.Name &&
                  prop.MemberType == System.Reflection.MemberTypes.Property
            select prop.Name;

this brings me back

[0] = "Code" 
[1] = "Name" 
[2] = "Initials" 

But now I need to filter from that list the properties that are overridden in case I write

public class AgencyPaginatedQuery : SortedPaginatedQuery
{
    public string Code { get; set; }
    public string Name { get; set; }
    public string Initials { get; set; }
    public override string Sort { get; set; }
}

this last property Sortdoes not appear in the list.

How can I know if the property has a overrideusing my query?

PS: I know I have to mark the property in the base class as virtual for this to work.

I have a series of images that are shown in gray scale when the element has the class, disabledbut this filter is also being applied to the child elements, so the entire block appears in gray.

.item {
  background-size: cover;
  width: 400px;
  height: 200px;
  text-align: center;
  padding-top: 20px;
}
.item.disabled {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.item .status {
  background-color: green;
  bottom: 30px;
  border-radius: 6px;
  padding: 2px 5px;
  color: white;
  font-weight: bold;
}
.item.disabled .status {
  background-color: red;
}

<div class="item" style="background-image: url(http://lorempixel.com/400/200/sports)">
  <span class="status">ready</span>
</div>
<div class="item disabled" style="background-image: url(http://lorempixel.com/400/200/sports)">
  <span class="status">not ready</span>
</div>

How to make the text that says "not ready" come out in red and not in gray?

As I understand it, the css filter property is not inheritable and its initial value is noneso that it should only apply to the element it is on.

In javascript it is easy to write an array using literals

var arreglo = [1, 2, 3];

This will create an array of size 3 where I can iterate through all its elements with a for loop.

for (var i = 0; i < arreglo.lenght; i++) {
    console.log(arreglo[i]);
}

But there's a problem

I can declare an array like this

var arreglo = new Array(3);

or do something like this

delete arreglo[1];

which will create a sparse array with holes

Now when I go to test if the array has a value at that position I can do something like

for (var i = 0; i < arreglo.lenght; i++) {
    if (arreglo[i]) {
        // haz algo
    }
    // o también
    if (arreglo[i] !== undefined) {
        // haz algo
    }        
}

but then if i do

arreglo[2] = undefined;

the above will fail catastrophically even though the array has a value at that position

How can I detect if there is actually a gap or has been assigned the value of undefinedat that position?

I am using the javascript file API to read images using the readAsDataURL method and found that my images were always larger than their originals, in one case even 1MB larger.

This is the code I am using

$(function() {
  'use strict';
  $('#source').on('change', function(evt) {

    var reader = new FileReader();

    var file = evt.target.files[0];
    var reader = new FileReader();

    reader.onloadend = function() {
      $('#encoded').text('El tamaño codificado es ' + reader.result.length / 1024 + ' kb')
    }

    if (file) {
      $('#original').text('El tamaño original es ' + file.size / 1024 + ' kb')
      reader.readAsDataURL(file);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="source" type="file">
<div id="original"></div>
<div id="encoded"></div>

I don't know if I am missing something here or if there is some reason for this behavior. Does anyone know what could be the cause?

I have the following CSS animation for a promotion that should be displayed on hover.

.promo {
  position: fixed;
  right: -410px;
  top: 70px;
}
.promo:hover {
  animation-name: stick-out;
  animation-duration: 1s;
}
@keyframes stick-out {
  from {
    right: -410px;
  }
  to {
    right: 0;
  }
}

<img class="promo" src="http://oi65.tinypic.com/2qkmhvs.jpg" alt="promo">

The problem I have is that once the animation ends the logo hides again.

How can I make the animation continue showing where it last left off while the mouse is hovered over the image using only CSS?

I have a case where I want to show a text that occupies the entire width of its container and does not occupy more than a single line, but in case it has line separator characters, it does not show the consecutive lines.

I tried the following code in pure CSS:

.line-container {
  width: 230px;
  height: 20px;
}
.single-line {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="line-container">
  <div class="single-line">Lorem
    ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor
    amet Lorem ipsum dolor amet Lorem ipsum 
    dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet Lorem ipsum dolor amet
  Lorem ipsum dolor amet Lorem ipsum dolor amet</div>
</div>

This works fine but only if there are no line return characters as the property white-spacewhen set to nowrapremoves line breaks. The other possible values normal​​, pre, pre-wrapand pre-lineweren't much help since the text didn't output on 1 single line then.

I also read that there are several ways to interpret the presence of a new line with the characters \r and \n ( line return and new line ) in the following links:

What is the difference between \r and \n

https://es.wikipedia.org/wiki/New_Line

I imagine that if I am reading a text from a database or a file and receiving it from a server, this can bring me many inconveniences if it was written in different operating systems.

Is there a CSS solution that I don't know about or should I use a javascript snippet to create a component like the one I'm showing you?

Reading this question I found a reference to the so-called Elvis operator (link in English) or ?:which is very similar to the operator ||used in javascript or also called the null coalescence operator (link in English).

Investigating more about both I could not distinguish any difference between them which led me to ask myself, is there really a difference? If there isn't, then why are there two references to something that semantically means the same thing?

Examples of the elvis operator

var variable = foo ?: bar

Returns fooif fooit exists and is not null else returnsbar

Null coalescing operator

var variable = foo || bar

which does exactly the same

Note: The elvis operator is not part of the javascript language, the ternary operator is instead .

I have a form very similar to the one below. This is just a demo but it illustrates the doubt I have.

<!DOCTYPE>
<html>
<head>
    <title>Formulario</title>
</head>

<body>
    <form id="CreateForm" action="/create" method="post">
        <div>
            <label for="campo1">Campo1</label>
            <input type="text" id="campo1" name="campo1">
        </div>
        <div>
            <label for="campo2">Campo2</label>
            <input type="text" id="campo2" name="campo2">
       </div>
    </form>

    <button type="submit">
        Enviar
    </button>
 </body>

</html>

How can I do so that when I click on the button the form is submitted without using javascript?

I have this simple script that captures a button event with jQuery:

$(function() {
  $('#myButton').click(function(evt) {
    console.log(evt);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myButton" type="button">
  Enviar
</button>

When the variable evtis displayed in the console, it has several properties called:

• target
• currentTarget
• delegateTarget
• relatedTarget

All of them except relatedTargetrefer to the same object, the button that raised the event. Does anyone know what the difference between them is? If they all point to the same object, why does jQuery use them?