问:
How to make this block correctly in html?

<!DOCTYPE html>

 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

```

Please, help with this UI. I have got this UI picture. I don't know how to make these lines. Used more 1200px. Maybe you've seen similar examples? How do it? Thank you!!!

答:
You can use pseudo elements on the paragraphs to draw the lines.

.line.col-md-4 {
  position: relative;
  background: white;
}
.line.col-md-4:before {
  content: '';
  background: purple;
  width: 1px;
  height: 200%;
  position: absolute;
  z-index: -1;
}
.tr:before {
  top: 50%;
  left: 0;
}
.tl:before {
  right: 0;
  top: 50%;
}
.bl:before {
  bottom: 50%;
  right: 0;
}
.br:before {
  bottom: 50%;
  left: 0;
}
.tr:before, .bl:before {
  transform: rotate(45deg);
}

.tl:before, .br:before {
  transform: rotate(-45deg);
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="background-image: url(http://images.vfl.ru/ii/1496527996/5dd30ca7/17453438.png); background-repeat: no-repeat; background-position: 50% 0%;">
 <div class="container" style="margin-bottom: 292px;">
  <div class="row">
   <div class="col-md-4 line tl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
   <div class="col-md-4"></div>
   <div class="col-md-4 line tr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
  </div>
 </div>
 <div class="container circle">
  <div class="row">
   <div class="col-md-4 line bl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
   <div class="col-md-4"></div>
   <div class="col-md-4 line br">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
  </div>
 </div>
</body>
</html></code>```

Body:
<!DOCTYPE html>

 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!

Please, help with this UI. I have got this UI picture. I don't know how to make these lines. Used more 1200px. Maybe you've seen similar examples? How do it? Thank you!!!

Body:
You can use pseudo elements on the paragraphs to draw the lines.

.line.col-md-4 {
  position: relative;
  background: white;
}
.line.col-md-4:before {
  content: '';
  background: purple;
  width: 1px;
  height: 200%;
  position: absolute;
  z-index: -1;
}
.tr:before {
  top: 50%;
  left: 0;
}
.tl:before {
  right: 0;
  top: 50%;
}
.bl:before {
  bottom: 50%;
  right: 0;
}
.br:before {
  bottom: 50%;
  left: 0;
}
.tr:before, .bl:before {
  transform: rotate(45deg);
}

.tl:before, .br:before {
  transform: rotate(-45deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body style="background-image: url(http://images.vfl.ru/ii/1496527996/5dd30ca7/17453438.png); background-repeat: no-repeat; background-position: 50% 0%;">
 <div class="container" style="margin-bottom: 292px;">
  <div class="row">
   <div class="col-md-4 line tl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
   <div class="col-md-4"></div>
   <div class="col-md-4 line tr">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
  </div>
 </div>
 <div class="container circle">
  <div class="row">
   <div class="col-md-4 line bl">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
   <div class="col-md-4"></div>
   <div class="col-md-4 line br">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corrupti distinctio, doloribus quia facilis mollitia fugiat expedita dignissimos consectetur culpa illo et, inventore ipsam deserunt odit quaerat sed sunt? Eius!</div>
  </div>
 </div>
</body>
</html>


来源: stackexchange

问:
Intellij plugin: get stored procedure from database
I'm working on an Intellij (all products: phpStorm, Rider, Idea, etc) plugin to generate code from a data source (database tool window).

I get the needed data like this:

```<code>// Get all data sources
ProjectManager pm = ProjectManager.getInstance();
Project[] projects = pm.getOpenProjects();
Arrays.stream(projects).map(project ->
       DbPsiFacade.getInstance(project).getDataSources())
       .flatMap(Collection::stream).collect(Collectors.toList());
// Get Tables
DasUtil.getTables(source);
// Get columns
DasUtil.getColumns(table);
</code>```

But I did not find any way to get a list of DbRoutine, which seems to represent the stored procedure.

Anyone knows how to get it?

Thank you

答:
I finally did it using a different method:</p>

```<code>DbDataSource dataSource = ...;
dataSource.getModel().traverser().forEach(dasObject ->
    {
        if (dasObject instanceof DasTable) {
        }
        else if (dasObject instanceof DasColumn) {
        }
        else if (dasObject instanceof DasIndex) {
        }
        else if (dasObject instanceof DasConstraint) {
        }
        else if (dasObject instanceof DasRoutine) {
        }
    });
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I'm working on an Intellij (all products: phpStorm, Rider, Idea, etc) plugin to generate code from a data source (database tool window).

I get the needed data like this:

// Get all data sources
ProjectManager pm = ProjectManager.getInstance();
Project[] projects = pm.getOpenProjects();
Arrays.stream(projects).map(project ->
       DbPsiFacade.getInstance(project).getDataSources())
       .flatMap(Collection::stream).collect(Collectors.toList());
// Get Tables
DasUtil.getTables(source);
// Get columns
DasUtil.getColumns(table);

But I did not find any way to get a list of DbRoutine, which seems to represent the stored procedure.

Anyone knows how to get it?

Thank you

Body:
I finally did it using a different method:

DbDataSource dataSource = ...;
dataSource.getModel().traverser().forEach(dasObject ->
    {
        if (dasObject instanceof DasTable) {
        }
        else if (dasObject instanceof DasColumn) {
        }
        else if (dasObject instanceof DasIndex) {
        }
        else if (dasObject instanceof DasConstraint) {
        }
        else if (dasObject instanceof DasRoutine) {
        }
    });


问:
How to rearrange a two dimensional array
I want to assign the values in one array to another, but in a different
order. For example the original array would be:

```<code>1  2  3  4  5  6  7
8  9  10 11 12 13 14
15 16 17 18 19 20 21
</code>```

And the desired array is:

```<code>8  11 14 3 6  16 19
9  12 1  4 7  17 20
10 13 2  5 15 18 21
</code>```

How would I do this? In the code below I moved a selected row to the center, then assigned each array individually. I can't figure out a better way.

```<code>int main()
{
int decide, i, j, k;
int save[3][7];
int shuffle[3][7];
int arr[3][7] = {
                {1, 2, 3, 4, 5, 6, 7},
                {8, 9, 10, 11, 12, 13, 14},
                {15, 16, 17, 18, 19, 20, 21}
            };

printf("Select a number between 1 and 21\n\n0-GroupA (1 - 7))\n1-GroupB ( 8 - 14)\n2-GroupC (15 - 21)\n\n");

for(k = 0 ; k < 1 ; ++k)
{
    printf("Select which group the number falls into:");
    scanf("%d", &decide);

    for(j = 0 ; j < 7 ; ++j)
    {/*moves selected row to middle row of array*/
        save[0][j] = arr[1][j];
        arr[1][j] = arr[decide][j];
        arr[decide][j] = save[0][j];
    }

    /*this is a horrible method*/
    shuffle[0][0] = arr[0][0];
    shuffle[1][0] = arr[0][1];
    shuffle[2][0] = arr[0][2];
    shuffle[0][1] = arr[0][3];
    shuffle[1][1] = arr[0][4];
    shuffle[2][1] = arr[0][5];
    shuffle[0][2] = arr[0][6];
    shuffle[1][2] = arr[1][0];
    shuffle[2][2] = arr[1][1];
    shuffle[0][3] = arr[1][2];
    shuffle[1][3] = arr[1][3];
    shuffle[2][3] = arr[1][4];
    shuffle[0][4] = arr[1][5];
    shuffle[1][4] = arr[1][6];
    shuffle[2][4] = arr[2][0];
    shuffle[0][5] = arr[2][1];
    shuffle[1][5] = arr[2][2];
    shuffle[2][5] = arr[2][3];
    shuffle[0][6] = arr[2][4];
    shuffle[1][6] = arr[2][5];
    shuffle[2][6] = arr[2][6];

}
</code>```

答:
You can't transpose a matrix in place. That is to say, it is not possible to write a function which will take a matrix and modify it so that it is its transpose, without creating a temporary matrix of equal size. At least without some very fancy programming.

Now your task isn't exactly the transpose, but it seems to be very similar. So I wouldn't expect there to be a nice, in place solution. You must simply create a temporary, apply the mapping from input to temporary, and write the values back.

What might help is this.

```<code>/* swap two rows of a matrix */
void swaprows(int *mtx, int width, int height, int rowa, int rowb)
{
   int i;

   for(i=0;i<width;i++)
   {
      int temp = mtx[rowa*width+i];
      mtx[rowa*width+i] = mtx[rowb*width+i];
      mtx[rowa*width+i] = temp;
   }
}

/* transpose a matrix */
int transpose(int *mtx, int width, int height)
{
    int *tmtx = malloc(width*height*sizeof(int));
    if(!tmtx)
       return -1;
    for(y=0;y<width;y++)
      for(x=0;x<height;x++)
        tmtx[y*height+x] = mtx[x*width+y];

    mempy(mtx, tmtx, width * height * sizeof(int));
    free(tmtx);
}

/* your logic  */

int arr[3][7] = {
            {1, 2, 3, 4, 5, 6, 7},
            {8, 9, 10, 11, 12, 13, 14},
            {15, 16, 17, 18, 19, 20, 21}
        };

 swaprows((int *) arr, 7, 3, 0, 1);
 transpose(int *) arr, 7, 3);
</code>```

This seems to be what you are trying to do.

Body:
I want to assign the values in one array to another, but in a different
order. For example the original array would be:

1  2  3  4  5  6  7
8  9  10 11 12 13 14
15 16 17 18 19 20 21

And the desired array is:

8  11 14 3 6  16 19
9  12 1  4 7  17 20
10 13 2  5 15 18 21

How would I do this? In the code below I moved a selected row to the center, then assigned each array individually. I can't figure out a better way.

int main()
{
int decide, i, j, k;
int save[3][7];
int shuffle[3][7];
int arr[3][7] = {
                {1, 2, 3, 4, 5, 6, 7},
                {8, 9, 10, 11, 12, 13, 14},
                {15, 16, 17, 18, 19, 20, 21}
            };

printf("Select a number between 1 and 21\n\n0-GroupA (1 - 7))\n1-GroupB ( 8 - 14)\n2-GroupC (15 - 21)\n\n");

for(k = 0 ; k < 1 ; ++k)
{
    printf("Select which group the number falls into:");
    scanf("%d", &decide);

    for(j = 0 ; j < 7 ; ++j)
    {/*moves selected row to middle row of array*/
        save[0][j] = arr[1][j];
        arr[1][j] = arr[decide][j];
        arr[decide][j] = save[0][j];
    }

    /*this is a horrible method*/
    shuffle[0][0] = arr[0][0];
    shuffle[1][0] = arr[0][1];
    shuffle[2][0] = arr[0][2];
    shuffle[0][1] = arr[0][3];
    shuffle[1][1] = arr[0][4];
    shuffle[2][1] = arr[0][5];
    shuffle[0][2] = arr[0][6];
    shuffle[1][2] = arr[1][0];
    shuffle[2][2] = arr[1][1];
    shuffle[0][3] = arr[1][2];
    shuffle[1][3] = arr[1][3];
    shuffle[2][3] = arr[1][4];
    shuffle[0][4] = arr[1][5];
    shuffle[1][4] = arr[1][6];
    shuffle[2][4] = arr[2][0];
    shuffle[0][5] = arr[2][1];
    shuffle[1][5] = arr[2][2];
    shuffle[2][5] = arr[2][3];
    shuffle[0][6] = arr[2][4];
    shuffle[1][6] = arr[2][5];
    shuffle[2][6] = arr[2][6];

}

Body:
You can't transpose a matrix in place. That is to say, it is not possible to write a function which will take a matrix and modify it so that it is its transpose, without creating a temporary matrix of equal size. At least without some very fancy programming.

Now your task isn't exactly the transpose, but it seems to be very similar. So I wouldn't expect there to be a nice, in place solution. You must simply create a temporary, apply the mapping from input to temporary, and write the values back.

What might help is this.

/* swap two rows of a matrix */
void swaprows(int *mtx, int width, int height, int rowa, int rowb)
{
   int i;

   for(i=0;i<width;i++)
   {
      int temp = mtx[rowa*width+i];
      mtx[rowa*width+i] = mtx[rowb*width+i];
      mtx[rowa*width+i] = temp;
   }
}

/* transpose a matrix */
int transpose(int *mtx, int width, int height)
{
    int *tmtx = malloc(width*height*sizeof(int));
    if(!tmtx)
       return -1;
    for(y=0;y<width;y++)
      for(x=0;x<height;x++)
        tmtx[y*height+x] = mtx[x*width+y];

    mempy(mtx, tmtx, width * height * sizeof(int));
    free(tmtx);
}

/* your logic  */

int arr[3][7] = {
            {1, 2, 3, 4, 5, 6, 7},
            {8, 9, 10, 11, 12, 13, 14},
            {15, 16, 17, 18, 19, 20, 21}
        };

 swaprows((int *) arr, 7, 3, 0, 1);
 transpose(int *) arr, 7, 3);

This seems to be what you are trying to do.


问:
SweetAlert: Missing title argument
I'm using sweet alert and i've got the following error when the error function is called from sweet alert. It works fine when the operation from the php files is successful. How can solve this problem? Many thanks

```<code>SweetAlert: Missing "title" argument!
</code>```

This is my javascript code

```<code>function DeletePost() {
    swal({
        title: "Sei Sicuro?",
        text: "Questa operazione non è reversibile ed eliminerà la comunicazione i commenti ad essa connessi dal database!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Si, elimina comunicazione!",
        cancelButtonClass: "btn btn-danger",
        cancelButtonText: "No, non procedere!",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function(isConfirm) {
        if (isConfirm) {

            $.ajax({
                url: "../delete_all.php",
                method: "POST",
                dataType: 'json',

                success: function(response) {
                  // swal('Deleted!', response.message, response.status);
                    swal({

                      title: response.title,
                      text: response.message,
                      type: response.status

                    },

                    function(){

                      location.reload();

                    }

                  );

                },

                error: function(response) {

                  swal({

                      title: response.title,
                      text: response.message,
                      type: response.status

                    });

                }

            });

        } else {
            swal("Annulato!", "Operazione annullata con successo!", "error");
        }
    });
}
</code>```

And this is my php file

```<code>if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Prelevo l'id dell'amministratore e lo passo ad una variabile
    $userid = $_SESSION['user_id'];

    if($delete_inbox  = mysqli_prepare($conn, "DELETE FROM user_inbox where user_inbox_user=? AND user_inbox_status = 'trash'")){

           mysqli_stmt_bind_param($delete_inbox, 'i', $userid);
           mysqli_stmt_execute($delete_inbox);
           mysqli_stmt_close($delete_inbox);

    // Passo messaggio di risposta se l'operazione è andata a buon fine
    $response['title']  = 'Messaggi eliminati!';
    $response['message'] = 'Tutti i messaggi sono stati eliminati con successo.';
    $response['status']  = 'success';

    }else{

    // Passo messaggio di risposta se l'operazione non è andata a buon fine
    $response['title']  = 'Si è verificato un errore!';
    $response['message'] = 'Non è stato possibile eliminare i messaggi. Per favore contatta amministratore di sistema';
    $response['status']  = 'error';

    }

    echo json_encode($response);

}
</code>```

答:
```<code>swal({
  title: response.title || 'TITLE IS NOT SET',
  text: response.message || 'MESSAGE IS NOT SET',
  type: response.status || 'STATUS IS NOT SET'
}, function() {

});
</code>```

what about

```<code>swal({
  title: JSON.parse(response.respoonseText).title
  // ...
}, function() {

});
</code>```

```<code>response = JSON.parse(response.responseText);
swal({
  title: response.title || 'TITLE IS NOT SET',
  text: response.message || 'MESSAGE IS NOT SET',
  type: response.status || 'STATUS IS NOT SET'
}, function() {

});
</code>```

Title: SweetAlert: Missing title argument

Body:
I'm using sweet alert and i've got the following error when the error function is called from sweet alert. It works fine when the operation from the php files is successful. How can solve this problem? Many thanks

SweetAlert: Missing "title" argument!

This is my javascript code

function DeletePost() {
    swal({
        title: "Sei Sicuro?",
        text: "Questa operazione non è reversibile ed eliminerà la comunicazione i commenti ad essa connessi dal database!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Si, elimina comunicazione!",
        cancelButtonClass: "btn btn-danger",
        cancelButtonText: "No, non procedere!",
        closeOnConfirm: false,
        closeOnCancel: false
    }, function(isConfirm) {
        if (isConfirm) {

            $.ajax({
                url: "../delete_all.php",
                method: "POST",
                dataType: 'json',

                success: function(response) {
                  // swal('Deleted!', response.message, response.status);
                    swal({

                      title: response.title,
                      text: response.message,
                      type: response.status

                    },

                    function(){

                      location.reload();

                    }

                  );

                },

                error: function(response) {

                  swal({

                      title: response.title,
                      text: response.message,
                      type: response.status

                    });

                }

            });

        } else {
            swal("Annulato!", "Operazione annullata con successo!", "error");
        }
    });
}

And this is my php file

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Prelevo l'id dell'amministratore e lo passo ad una variabile
    $userid = $_SESSION['user_id'];

    if($delete_inbox  = mysqli_prepare($conn, "DELETE FROM user_inbox where user_inbox_user=? AND user_inbox_status = 'trash'")){

           mysqli_stmt_bind_param($delete_inbox, 'i', $userid);
           mysqli_stmt_execute($delete_inbox);
           mysqli_stmt_close($delete_inbox);

    // Passo messaggio di risposta se l'operazione è andata a buon fine
    $response['title']  = 'Messaggi eliminati!';
    $response['message'] = 'Tutti i messaggi sono stati eliminati con successo.';
    $response['status']  = 'success';

    }else{

    // Passo messaggio di risposta se l'operazione non è andata a buon fine
    $response['title']  = 'Si è verificato un errore!';
    $response['message'] = 'Non è stato possibile eliminare i messaggi. Per favore contatta amministratore di sistema';
    $response['status']  = 'error';

    }

    echo json_encode($response);

}

Body:
swal({
  title: response.title || 'TITLE IS NOT SET',
  text: response.message || 'MESSAGE IS NOT SET',
  type: response.status || 'STATUS IS NOT SET'
}, function() {

});

what about

swal({
  title: JSON.parse(response.respoonseText).title
  // ...
}, function() {

});

response = JSON.parse(response.responseText);
swal({
  title: response.title || 'TITLE IS NOT SET',
  text: response.message || 'MESSAGE IS NOT SET',
  type: response.status || 'STATUS IS NOT SET'
}, function() {

});


问:
Remove duplicates from sql query for reservation select
I have the following tables:

rtable

reservation

Now rtable has the following columns:

id int primary key

seats int

position varchar(10)

And reservation has the following columns:

reservation_id int primary key

table_id int foreign key(references rtable.id)

reservation_date date

start_hour

Now I want to perform the following query:
use restaurant;

```<code>select id,position,seats from rtable,reservation
            where (seats >= 6 and position = 'Indoors')
            and (not exists(select * from reservation where table_id = id) or(
            (exists(select 1 from reservation where table_id = id) and
                (reservation_date != '2017-05-23' or reservation.start_hour != 16))))
</code>```

However this query returns duplicates for rtable.id.
Is there any way to remove these duplicates

Here is an example output:

答:
If you are using foreign key then why you are not using joins. And why you are checking so much condition, please check this:

```<code>    SELECT rt.id, rt.position, rt.seats FROM rtable rt LEFT JOIN reservation res
    ON rt.id = res.table_id AND rt.seats >=6 AND rt.position = 'Indoors' AND
    (res.reservation_date != '2017-05-23' AND res.start_hour != 16)
</code>```

Tell me if this solved your issue or give me dataset and condition, I will help you out.

Body:
I have the following tables:

rtable

reservation

Now rtable has the following columns:

id int primary key

seats int

position varchar(10)

And reservation has the following columns:

reservation_id int primary key

table_id int foreign key(references rtable.id)

reservation_date date

start_hour

Now I want to perform the following query:
use restaurant;

select id,position,seats from rtable,reservation
            where (seats >= 6 and position = 'Indoors')
            and (not exists(select * from reservation where table_id = id) or(
            (exists(select 1 from reservation where table_id = id) and
                (reservation_date != '2017-05-23' or reservation.start_hour != 16))))

However this query returns duplicates for rtable.id.
Is there any way to remove these duplicates

Here is an example output:

Body:
If you are using foreign key then why you are not using joins. And why you are checking so much condition, please check this:

    SELECT rt.id, rt.position, rt.seats FROM rtable rt LEFT JOIN reservation res
    ON rt.id = res.table_id AND rt.seats >=6 AND rt.position = 'Indoors' AND
    (res.reservation_date != '2017-05-23' AND res.start_hour != 16)

Tell me if this solved your issue or give me dataset and condition, I will help you out.


问:
Calculate number of UITableViewCells that will fit in fixed space
I have a fixed amount of space where I will have a UITableView. I don't want the UITableView to scroll so I want to calculate the number of cells that will fit without scrolling. The cells are all different sizes and use UITableViewAutomaticDimension to determine size. What is the best way to go about this?</p>

答:
You can use this method and keep your cells heights in a dictionary then you can run a cicle over your dictionary values and sum all your keeped values, and do what you need with the values, let see some example code,

first define dictionary to keep your values

```<code>var automaticDimensionsHeightRows : [Int:CGFloat] = [:]
</code>```

I defined this var automaticDimensionsHeightRows variable because I have 2 types of cells ones with fixed height and others with UITableViewAutomaticDimensionheight

Then with this method we get, and keep the values

```<code>func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    if((self.tableView.delegate?.tableView!(self.tableView, heightForRowAt: indexPath))! == UITableViewAutomaticDimension)
    {
        self.automaticDimensionsHeightRows[indexPath.row] = cell.frame.size.height
    }
}
</code>```

Finally you can run a cicle over your dictionary values and check your values or do whatever you need to do

Hope this helps

Body:
You can use this method and keep your cells heights in a dictionary then you can run a cicle over your dictionary values and sum all your keeped values, and do what you need with the values, let see some example code,

first define dictionary to keep your values

var automaticDimensionsHeightRows : [Int:CGFloat] = [:]

I defined this var automaticDimensionsHeightRows variable because I have 2 types of cells ones with fixed height and others with UITableViewAutomaticDimensionheight

Then with this method we get, and keep the values

func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
    if((self.tableView.delegate?.tableView!(self.tableView, heightForRowAt: indexPath))! == UITableViewAutomaticDimension)
    {
        self.automaticDimensionsHeightRows[indexPath.row] = cell.frame.size.height
    }
}

Finally you can run a cicle over your dictionary values and check your values or do whatever you need to do

Hope this helps


问:
Using Angular CLI with the latest AspNetCore Angular 4 Spa template
I am attempting to use Angular CLI with the latest JavaScriptServices AspNetCore Angular Spa template.

I used to simply just copy and pase a .angular-cli.json file in the root directory of my project and change "root": to "ClientApp" and would be good to go.

However, now with this new version of the template when I run 'ng g component mycomponent' it fails because it can't find app.module.ts. The reason for this is because in this new template they split app.module.ts into 3:

app.module.client.ts, app.module.server.ts, app.module.shared.ts

Any ideas on how to still make this work?

答:
[SOLUTION]

Rename app.module.client.ts to app.client.module.ts

Open app.client.module.ts: prepend the declaration with 3 dots “...” and wrap the declaration in brackets.

For example: [...sharedConfig.declarations, <MyComponent>]

Open  boot-client.ts: update your import to use the new
app.client.module reference.

For example: import { AppModule } from './app/app.client.module';

Now try to generate the new component: ng g component my-component

[EXPLANATION]

Angular CLI looks for a file named app.module.ts in your project, and tries to find a references for the declarations property to import the component. This should be an array (as the sharedConfig.declarations is), but the changes do not get applied

[SOURCES]

https://github.com/angular/angular-cli/issues/2962

https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (section 3.33 lecture contributor Bryan Garzon)


问:
Javascript toggle class on element
Say I have this HTML structure

```<code><div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>
</code>```

How do I use JavaScript to toggle class on sType_click div with the customText span BUT without adding it on other sType_click divs?

For example if I click on one of the customText class I want to toggle class on its parent sType_click div and not adding on any others.

I currently use this

```<code>var sType_click = document.querySelector(".sType_click"),
customText = document.querySelector(".customText"),
if (null !== document.querySelector(".customText")) {
    customText.onclick = function() {
        sType_click.classList.toggle("sOpen");
    };
}
</code>```

But this toggles all sType_click divs on the page
I'm okay with jQuery but i prefer pure javascript,
Thanks in advance.

答:
You can use simple JS to do that getting all the elements and accessing the parent element you want to:

Array.from(document.querySelectorAll(".fw_customText")).forEach((el) => {
  el.addEventListener('click', (event) => {
  event.currentTarget.parentElement.parentElement.classList.toggle("sType_click");
  });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>.sType_click{
   background-color: yellow;
}</code>```

      Custom text

      Custom text

      Custom text

```

Title: Javascript toggle class on element

Body:
Say I have this HTML structure

      Custom text

      Custom text

      Custom text

How do I use JavaScript to toggle class on sType_click div with the customText span BUT without adding it on other sType_click divs?

For example if I click on one of the customText class I want to toggle class on its parent sType_click div and not adding on any others.

I currently use this

var sType_click = document.querySelector(".sType_click"),
customText = document.querySelector(".customText"),
if (null !== document.querySelector(".customText")) {
    customText.onclick = function() {
        sType_click.classList.toggle("sOpen");
    };
}

But this toggles all sType_click divs on the page
I'm okay with jQuery but i prefer pure javascript,
Thanks in advance.

Body:
You can use simple JS to do that getting all the elements and accessing the parent element you want to:

Array.from(document.querySelectorAll(".fw_customText")).forEach((el) => {
  el.addEventListener('click', (event) => {
  event.currentTarget.parentElement.parentElement.classList.toggle("sType_click");
  });
});

.sType_click{
   background-color: yellow;
}

<div class="sType_click">
    <div class="Switcher">
      <span class="fw_customText">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="fw_customText ">Custom text</span>
    </div>
</div>

<div class="sType_click">
    <div class="Switcher">
      <span class="customText">Custom text</span>
    </div>
</div>


问:
How to call APIs in containers and pass response to presentational props, in React/Redux?
I'm following davezuko's react-redux sample: https://github.com/davezuko/react-redux-starter-kit

Great starter kit for sure, but I'm facing some issues considering the next simple task.

I have a REST API sending json data via GET. I want to take the data, and pass it to the presentational component via props. I have no problem sending the ajax call action function via props, and execute it, but cannot find the optimal (and best practice) way to pass only retrieved json data on success.

I'm following Redux docs and examples, but there're some changes with my starter-kit.

ACTION:

```<code>export const getDetectedPersonList = () => {
  return (dispatch, getState) => {
    //return {
      dispatch({
        type  : GET_DETECTED_PERSON_LIST,
        payload : fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
          .then(function(response) {
            if (response.status >= 400) {
              console.log("Error " + response.status + " in the AJAX call")
              throw new Error("Bad response from server");
            }
              return response.json();
            })
            //.then(function(detections) {  })
        })
      //}
    }
  }
</code>```

答:
The correct way of doing this would be</p>

```<code>export const getDetectedPersonList = () => {
    return (dispatch, getState) => {
        return fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
                    .then(function(response) {
                        if (response.status >= 400) {
                            console.log("Error " + response.status + " in the AJAX call")
                            throw new Error("Bad response from server");
                        }
                        dispatch({
                            type  : GET_DETECTED_PERSON_LIST,
                            payload : response.json()
                        });
                    })
                    .catch(function(error) {
                        dispatch({
                            type  : ERROR_PERSON_LIST,
                            payload : error
                        });
                    });
    });
}
</code>```

Body:
I'm following davezuko's react-redux sample: https://github.com/davezuko/react-redux-starter-kit

Great starter kit for sure, but I'm facing some issues considering the next simple task.

I have a REST API sending json data via GET. I want to take the data, and pass it to the presentational component via props. I have no problem sending the ajax call action function via props, and execute it, but cannot find the optimal (and best practice) way to pass only retrieved json data on success.

I'm following Redux docs and examples, but there're some changes with my starter-kit.

ACTION:

export const getDetectedPersonList = () => {
  return (dispatch, getState) => {
    //return {
      dispatch({
        type  : GET_DETECTED_PERSON_LIST,
        payload : fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
          .then(function(response) {
            if (response.status >= 400) {
              console.log("Error " + response.status + " in the AJAX call")
              throw new Error("Bad response from server");
            }
              return response.json();
            })
            //.then(function(detections) {  })
        })
      //}
    }
  }

Body:
The correct way of doing this would be

export const getDetectedPersonList = () => {
    return (dispatch, getState) => {
        return fetch("http://localhost:8080/FacialVideoDetector/detectedPersonsListWS")
                    .then(function(response) {
                        if (response.status >= 400) {
                            console.log("Error " + response.status + " in the AJAX call")
                            throw new Error("Bad response from server");
                        }
                        dispatch({
                            type  : GET_DETECTED_PERSON_LIST,
                            payload : response.json()
                        });
                    })
                    .catch(function(error) {
                        dispatch({
                            type  : ERROR_PERSON_LIST,
                            payload : error
                        });
                    });
    });
}


问:
Projectile Motion Simulation in HTML5 JavaScript canvas
I'm looking to simulate projectile motion (off the ground with a certain velocity, continuing until the ball lands on the ground again) ignoring air resistance. I'm using the canvas feature of HTML5 and JavaScript to do it. I'm a novice with JavaScript, so any help is appreciated.

This is my code so far. I'm running into the same error again and again: unexpected end of input. I'm also trying to include start, stop, and reset buttons, as well as the option for the user to input their own angle, so they can see the final horizontal distance change.

I've tried many different ways to get rid of this error; what am I missing?

```<code><html>

<head>
    <title>
    Projectile Motion
    </title>
</head>

<body>

<button onclick=settimer()>Start</button><br>
<button onclick=reset()>Reset</button><br>
<button onclick=cleartimer()>Stop</button><br>
Angle=<input type="text" id="Angle in Degrees" value=45></input>
<canvas id="mycanvas" height="600" width="600"></canvas>

<script>

function rectang() {
co.beginPath();
co.rect(0,0,600,600);
co.stroke();
}

var gravity
var Angle
var velocity
var velocityx
var velocityy
var distance
var co
var inc
var time
var x
var y
var radius

//list variables

function init() {
    var can;
    can = document.getElementById("mycanvas");
    co = can.getContext("2d");
    reset();
}

function reset() {
    gravity = 5;
    Angle = (45*(Math.PI)/180);
    velocity = 10;
    velocityx = velocity*Math.cos(Angle);
    velocityy = velocity*Math.sin(Angle);
    time = 0;
    distance = velocityx*time;
    inc = 0.5;
    x = 0;
    y = 600;
    radius = 10;
}

function draw() {
    co.clearRect(0,0,600,600);
    circle(co,x,y,radius,"yellow",false)

    time = time + inc;
    x = x + velocityx*time;
    y = y + velocityy*time;
    velocityx = velocityx;
    velocityy = velocityy + velocityy*time;
}

function settimer() {
    if (timer == null) timer = setInterval(draw,time);
    Angle = document.getElementById("Angle").value;
}
function cleartimer(){
    clearInterval(timer);
    timer = null;
}

init();

function circle(context,x,y,r,color,fill) {
    if (fill == true) {
        //if fill is true, fill the circle
        var temp = context.fillStyle;
        context.fillStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.fill();
        context.fillStyle = temp;
    }
    else {
        //if fill is false, don't fill the circle
        var temp = context.strokeStyle;
        context.strokeStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.stroke();
        context.strokeStyle = temp;
    }

</script>

</body>

</html>
</code>```

答:
There are some issues, mainly some kind of double-incrementing, where "time" was getting  larger each loop, and x/y values were incrementing itself too. Also, for "velocityy" you should rather use negative value at start (bullet getting higher) and then add something based on gravity. And yellow isn't very readable here.

function rectang() {
co.beginPath();
co.rect(0,0,600,600);
co.stroke();
}

var gravity
var Angle
var velocity
var velocityx
var velocityy
var distance
var co
var inc
var time
var x
var y
var radius

//list variables

function init() {
    var can;
    can = document.getElementById("mycanvas");
    co = can.getContext("2d");
    reset();
}

function reset() {
    gravity = 5;
    Angle = (45*(Math.PI)/180);
    velocity = 10;
    velocityx = velocity*Math.cos(Angle);
    velocityy = velocity*Math.sin(Angle)*-1;
    time = 0;
    distance = velocityx*time;
    inc = 0.5;
    x = 0;
    y = 300;
    radius = 10;
}

function draw() {
//console.log(x,y)
    co.clearRect(0,0,600,300);
    circle(co,x,y,radius,"yellow",false)

    time = time + inc;
    x = x + velocityx*inc;
    y = y + velocityy*inc;
    velocityx = velocityx;
    velocityy = velocityy + gravity*inc*0.1;
}

var timer = null;
function settimer() {
    if (timer == null) timer = setInterval(draw,time);
    Angle = document.getElementById("Angle").value;
}
function cleartimer(){
    clearInterval(timer);
    timer = null;
}

init();

function circle(context,x,y,r,color,fill) {
x = Math.round(x)
y = Math.round(y)
//console.log(x,y,r,color,fill)
    if (fill == true) {
        //if fill is true, fill the circle
        var temp = context.fillStyle;
        context.fillStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.fill();
        context.fillStyle = temp;
    }
    else {
        //if fill is false, don't fill the circle
        var temp = context.strokeStyle;

        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.strokeStyle = color;
        context.lineWidth = 4;
        context.stroke();
        context.strokeStyle = temp;
    }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><button onclick=settimer()>Start</button><br>
<button onclick=reset()>Reset</button><br>
<button onclick=cleartimer()>Stop</button><br>
Angle=<input type="text" id="Angle" value=45></input>
<canvas id="mycanvas" height="300" width="600"></canvas></code>```

Body:
I'm looking to simulate projectile motion (off the ground with a certain velocity, continuing until the ball lands on the ground again) ignoring air resistance. I'm using the canvas feature of HTML5 and JavaScript to do it. I'm a novice with JavaScript, so any help is appreciated.

This is my code so far. I'm running into the same error again and again: unexpected end of input. I'm also trying to include start, stop, and reset buttons, as well as the option for the user to input their own angle, so they can see the final horizontal distance change.

I've tried many different ways to get rid of this error; what am I missing?

    <title>
    Projectile Motion
    </title>

<button onclick=settimer()>Start</button>

<button onclick=reset()>Reset</button>

<button onclick=cleartimer()>Stop</button>

Angle=<input type="text" id="Angle in Degrees" value=45></input>
<canvas id="mycanvas" height="600" width="600"></canvas>

Body:
There are some issues, mainly some kind of double-incrementing, where "time" was getting  larger each loop, and x/y values were incrementing itself too. Also, for "velocityy" you should rather use negative value at start (bullet getting higher) and then add something based on gravity. And yellow isn't very readable here.

function rectang() {
co.beginPath();
co.rect(0,0,600,600);
co.stroke();
}

var gravity
var Angle
var velocity
var velocityx
var velocityy
var distance
var co
var inc
var time
var x
var y
var radius

//list variables

function init() {
    var can;
    can = document.getElementById("mycanvas");
    co = can.getContext("2d");
    reset();
}

function reset() {
    gravity = 5;
    Angle = (45*(Math.PI)/180);
    velocity = 10;
    velocityx = velocity*Math.cos(Angle);
    velocityy = velocity*Math.sin(Angle)*-1;
    time = 0;
    distance = velocityx*time;
    inc = 0.5;
    x = 0;
    y = 300;
    radius = 10;
}

function draw() {
//console.log(x,y)
    co.clearRect(0,0,600,300);
    circle(co,x,y,radius,"yellow",false)

    time = time + inc;
    x = x + velocityx*inc;
    y = y + velocityy*inc;
    velocityx = velocityx;
    velocityy = velocityy + gravity*inc*0.1;
}

var timer = null;
function settimer() {
    if (timer == null) timer = setInterval(draw,time);
    Angle = document.getElementById("Angle").value;
}
function cleartimer(){
    clearInterval(timer);
    timer = null;
}

init();

function circle(context,x,y,r,color,fill) {
x = Math.round(x)
y = Math.round(y)
//console.log(x,y,r,color,fill)
    if (fill == true) {
        //if fill is true, fill the circle
        var temp = context.fillStyle;
        context.fillStyle = color;
        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.fill();
        context.fillStyle = temp;
    }
    else {
        //if fill is false, don't fill the circle
        var temp = context.strokeStyle;

        context.beginPath();
        context.arc(x,y,r,0,2*Math.PI);
        context.strokeStyle = color;
        context.lineWidth = 4;
        context.stroke();
        context.strokeStyle = temp;
    }
}

<button onclick=settimer()>Start</button><br>
<button onclick=reset()>Reset</button><br>
<button onclick=cleartimer()>Stop</button><br>
Angle=<input type="text" id="Angle" value=45></input>
<canvas id="mycanvas" height="300" width="600"></canvas>


问:
SearchView in fragment Android
I have a toolbar into fragment and i want to add searchView for this toolbar

I have this:

```<code> public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    menu.clear();
    getActivity().getMenuInflater().inflate(R.menu.menu_principal, menu);
    MenuItem item = menu.findItem(R.id.buscar);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
            return true;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            try {
                ArrayList<Producto> listaFiltrada = filter(list,newText);
                adapterProductos.setFilter(listaFiltrada);
            }catch (Exception r) {
                r.printStackTrace();
            }
            return true;
        }
    });

    MenuItemCompat.setOnActionExpandListener(item, new MenuItemCompat.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            adapterProductos.setFilter(list);
            return true;
        }
    });
}
</code>```

and this item menu:

```<code><item android:title="Buscar"
    android:id="@+id/buscar"
    android:icon="@drawable/ic_search_white_24dp"
    app:actionViewClass= "android:support.v7.widget.SearchView"
    app:showAsAction="ifRoom|collapseActionView"
    />
</code>```

But i have a null pointer...

FATAL EXCEPTION: main
                                                                                Process: jaimeperezpedraza.org.tienda, PID: 15971
                                                                                java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.SearchView.setOnQueryTextListener(android.widget.SearchView$OnQueryTextListener)' on a null object reference

I think I'm not catching searchView well...

help?

答:
Your NullPointerException is due to the searchView being null. This is because your XML has app:actionViewClass="android:support.v7.widget.SearchView" - note the : in the middle of the class name.

It should instead be android.support.v7.widget.SearchView:

```<code><item android:title="Buscar"
  android:id="@+id/buscar"
  android:icon="@drawable/ic_search_white_24dp"
  app:actionViewClass= "android.support.v7.widget.SearchView"
  app:showAsAction="ifRoom|collapseActionView"
  />
</code>```

Title: SearchView in fragment Android

Body:
I have a toolbar into fragment and i want to add searchView for this toolbar

I have this:

 public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    menu.clear();
    getActivity().getMenuInflater().inflate(R.menu.menu_principal, menu);
    MenuItem item = menu.findItem(R.id.buscar);
    SearchView searchView = (SearchView) MenuItemCompat.getActionView(item);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String query) {
            return true;
        }

        @Override
        public boolean onQueryTextChange(String newText) {
            try {
                ArrayList<Producto> listaFiltrada = filter(list,newText);
                adapterProductos.setFilter(listaFiltrada);
            }catch (Exception r) {
                r.printStackTrace();
            }
            return true;
        }
    });

    MenuItemCompat.setOnActionExpandListener(item, new MenuItemCompat.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            adapterProductos.setFilter(list);
            return true;
        }
    });
}

and this item menu:

<item android:title="Buscar"
    android:id="@+id/buscar"
    android:icon="@drawable/ic_search_white_24dp"
    app:actionViewClass= "android:support.v7.widget.SearchView"
    app:showAsAction="ifRoom|collapseActionView"
    />

But i have a null pointer...

FATAL EXCEPTION: main
                                                                                Process: jaimeperezpedraza.org.tienda, PID: 15971
                                                                                java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.SearchView.setOnQueryTextListener(android.widget.SearchView$OnQueryTextListener)' on a null object reference

I think I'm not catching searchView well...

help?

Body:
Your NullPointerException is due to the searchView being null. This is because your XML has app:actionViewClass="android:support.v7.widget.SearchView" - note the : in the middle of the class name.

It should instead be android.support.v7.widget.SearchView:

<item android:title="Buscar"
  android:id="@+id/buscar"
  android:icon="@drawable/ic_search_white_24dp"
  app:actionViewClass= "android.support.v7.widget.SearchView"
  app:showAsAction="ifRoom|collapseActionView"
  />


问:
how can I use coffeescript with jquery?
I am using the 'Koala' program for CoffeeScript. I will write a coffescript with jQuery. I am writing the following code. Not working

```<code>$ ->
</code>```

Output code

```<code>(Function () {
        $ (function () {});
    }). Call (this);

</code>```

This does not work in SW. Do I make a mistake? Or how can I use coffeescript with jquery?

答:
Here's an example…

HTML

```<code><!DOCTYPE html>
  <body>
    <a class='button' href='#'>Click Me</a>
  </body>
</html>
</code>```

CoffeeScript

```<code>$ ->
  $('.button').click (event) ->
    console.log 'button clicked'
</code>```

Click here for live example

Title: how can I use coffeescript with jquery?

Body:
I am using the 'Koala' program for CoffeeScript. I will write a coffescript with jQuery. I am writing the following code. Not working

$ ->

Output code

(Function () {
        $ (function () {});
    }). Call (this);

This does not work in SW. Do I make a mistake? Or how can I use coffeescript with jquery?

Body:
Here's an example…

HTML

<!DOCTYPE html>
  <body>
    <a class='button' href='#'>Click Me</a>
  </body>
</html>

CoffeeScript

$ ->
  $('.button').click (event) ->
    console.log 'button clicked'

Click here for live example


问:
generate tag file from .net librarys(c#) using ctags
is there a way to generate a tag file from i.e system.dll ?
maybe some actionscript ones too like Display or Sprite.</p>

答:
c# is a supported language -- at least under 'exuberant ctags' --  but the nature of the tool is that it generates tags from source files.  I don't think ctags can generate tags from .dll's in any language.  Is the source for system.dll included with .net?

You may want to read more about what exactly ctags is and how it works:

Wikipedia entry for ctags

ContentLicense: CC BY-SA 2.5


问:
How to change the color of row in table (SAPUI5)?
I have a table in which data is coming from back end. Based on particular condition(data coming from back end (gateway service)), if that condition is true then that particular row will have different color and will have a link on full row. And if condition is false then it will be a normal row.

So how to achieve it ?

答:
Semantic colors for rows are now supported which can be leveraged by using the property highlight

on sap.m.ColumnListItem when using sap.m.Table (since 1.44):

  <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />

```
</li>
<li><p>on <code>sap.ui.table.RowSettings</code> when using <code>sap.ui.table.Table</code> (since 1.48):</p>
<pre class="lang-xml prettyprint-override"><code><table:Table xmlns:table="sap.ui.table">
  <table:rowSettingsTemplate>
    <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  </table:rowSettingsTemplate>
  <!-- ... -->
</table:Table>
</code>```

Samples

Demo Kit sample (sap.ui.table.Table)

JSBin sample with indication colors (sap.m.Table and sap.ui.table.Table)

How to switch applying a property binding using ternary operator in Expression Binding?

Body:
Semantic colors for rows are now supported which can be leveraged by using the property highlight

on sap.m.ColumnListItem when using sap.m.Table (since 1.44):

<Table xmlns="sap.m">
  <!-- ... -->
  <ColumnListItem highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
</Table>

on sap.ui.table.RowSettings when using sap.ui.table.Table (since 1.48):

<table:Table xmlns:table="sap.ui.table">
  <table:rowSettingsTemplate>
    <table:RowSettings highlight="{= ${odataModel>foo} > 50 ? 'Error' : undefined }" />
  </table:rowSettingsTemplate>
  <!-- ... -->
</table:Table>

Samples

Demo Kit sample (sap.ui.table.Table)

JSBin sample with indication colors (sap.m.Table and sap.ui.table.Table)

How to switch applying a property binding using ternary operator in Expression Binding?

ContentLicense: CC BY-SA 4.0


问:
Apollo Client React container add created element to paginated list of elements without refetching
This title is quite confusing, but I will try to explain the best that I can.  I have a situation where I am collecting and displaying a list of data elements from the server in React Native.  It uses a query that sends a GraphQL parameter to the server to limit the initial request to the first 15 elements.

```<code>query GetElements ($count: Int) {
    elements (count: $count) {
            id
            name
            tye
    }
}
</code>```

As previously stated, this will query the main list with an initial count of 15 elements.

I have another page of the app that a user can create a new element on the backend using a different GraphQL query.

My question is: Is there a way to easily update the main list of elements to include the newly created element without performing any addition network requests?  In other words, I want to be able to simply add the new element to the main list of elements whenever the create command is successful.

The problem is: Apollo's readQuery command on the update proxy will not return to me the appropriate data set to update unless I know the variables that were send with the initial query; this includes the pagination count variable.

答: if you would just like to receive the added item, it seems like you want subscriptions :: http://dev.apollodata.com/react/subscriptions.html</p>

Body:
This title is quite confusing, but I will try to explain the best that I can.  I have a situation where I am collecting and displaying a list of data elements from the server in React Native.  It uses a query that sends a GraphQL parameter to the server to limit the initial request to the first 15 elements.

query GetElements ($count: Int) {
    elements (count: $count) {
            id
            name
            tye
    }
}

As previously stated, this will query the main list with an initial count of 15 elements.

I have another page of the app that a user can create a new element on the backend using a different GraphQL query.

My question is: Is there a way to easily update the main list of elements to include the newly created element without performing any addition network requests?  In other words, I want to be able to simply add the new element to the main list of elements whenever the create command is successful.

The problem is: Apollo's readQuery command on the update proxy will not return to me the appropriate data set to update unless I know the variables that were send with the initial query; this includes the pagination count variable.


问:
VBA save value from cell before it changes
I have a spreadsheet where i implement a score board.
The behavior i need is when the cell that has the score value rises the cell near it, on column b, changes it's color to green, when the the cell score value goes down the cell near it changes it's color to red.

The cell range where the score is changing is e5:e67

In short:
When the user inputs a number in column f, the score raises in column e, and in column b (on same row) the color must change to green or red

I made this VBA code, but without luck.

```<code>Private Sub Worksheet_Change(ByVal Target As Range)
 If Not Intersect(Target, Range("e5:e67")) Is Nothing Then
 If Target.Column = 5 Then
  thisRow = Target.Row
  Dim OldValue As Variant
  Application.EnableEvents = False
  Application.Undo
  OldValue = Target.Value
  Application.Undo
  Application.EnableEvents = True
 If OldValue < Target.Value Then
  Range("b" & thisRow).Interior.ColorIndex = 4
 ElseIf OldValue > Target.Value Then
  Range("b" & thisRow).Interior.ColorIndex = 3
 End If
 End If
End If
End Sub
</code>```

Here is a screen capture of my ranking sheet:

答:
Try  by intercepting the Worksheet_Calculate event. You need to save the old value in a static local array, that I call oldVal.

```<code>Private Sub Worksheet_Calculate()
  Static oldVal
  If IsEmpty(oldVal) Then
    oldVal = Application.Transpose(Range("e5:e67").Value2)
    ReDim Preserve oldVal(5 To 67)
    Exit Sub
  End If
  Dim i As Long
  For i = LBound(oldVal) To UBound(oldVal)
    If oldVal(i) > Cells(i, "E").Value2 Then Cells(i, "B").Interior.ColorIndex = 3
    If oldVal(i) < Cells(i, "E").Value2 Then Cells(i, "B").Interior.ColorIndex = 4
    oldVal(i) = Cells(i, "E").Value2
  Next
End Sub
</code>```

Body:
I have a spreadsheet where i implement a score board.
The behavior i need is when the cell that has the score value rises the cell near it, on column b, changes it's color to green, when the the cell score value goes down the cell near it changes it's color to red.

The cell range where the score is changing is e5:e67

In short:
When the user inputs a number in column f, the score raises in column e, and in column b (on same row) the color must change to green or red

I made this VBA code, but without luck.

Private Sub Worksheet_Change(ByVal Target As Range)
 If Not Intersect(Target, Range("e5:e67")) Is Nothing Then
 If Target.Column = 5 Then
  thisRow = Target.Row
  Dim OldValue As Variant
  Application.EnableEvents = False
  Application.Undo
  OldValue = Target.Value
  Application.Undo
  Application.EnableEvents = True
 If OldValue < Target.Value Then
  Range("b" & thisRow).Interior.ColorIndex = 4
 ElseIf OldValue > Target.Value Then
  Range("b" & thisRow).Interior.ColorIndex = 3
 End If
 End If
End If
End Sub

Here is a screen capture of my ranking sheet:

Body:
Try  by intercepting the Worksheet_Calculate event. You need to save the old value in a static local array, that I call oldVal.

Private Sub Worksheet_Calculate()
  Static oldVal
  If IsEmpty(oldVal) Then
    oldVal = Application.Transpose(Range("e5:e67").Value2)
    ReDim Preserve oldVal(5 To 67)
    Exit Sub
  End If
  Dim i As Long
  For i = LBound(oldVal) To UBound(oldVal)
    If oldVal(i) > Cells(i, "E").Value2 Then Cells(i, "B").Interior.ColorIndex = 3
    If oldVal(i) < Cells(i, "E").Value2 Then Cells(i, "B").Interior.ColorIndex = 4
    oldVal(i) = Cells(i, "E").Value2
  Next
End Sub


问:
not able to get rid of white gap below and after a div in html
I am working on designing a webpage. Here is my jsfiddle.

In my jsfiddle if you see there is a white gap just above INSURANCE black image and there is a white gap just below that INSURANCE as well. I am not able to figure out how I can get rid of that. I tried so many things but no luck so far. What is the issue here?

Here is my HTML and CSS:

@font-face {
 font-family: AvantGarde Demi;
 src: url(AvantGarde Demi.woff);
}
@font-face {
 font-family: AvantGarde;
 src: url(AvantGarde.woff);
}
@font-face {
 font-family: ITC Avant Garde Gothic;
 src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/

.topnav {
 position: relative;
 top: -902px;
 background-color: rgba(0, 0, 0, 0.5);
 height: 89px;
 border-bottom: 3px solid #EF7440;
 /*overflow: hidden;*/
}
.topnav ul>li {
 float: left;
 display: block;
 text-align: center;
 padding: 14px 16px;
 width: 15%;
}
.topnav a {
 text-decoration: none;
 font-size: 17px;
 color: white;
 display: block;
}
/* dropdown menus hidden initially */

.topnav ul>li>ul {
 display: none;
 margin-top: 30px;
 width: 200px;
 padding: 0;
 position: absolute;
 background-color: #f76c38;
}
.topnav ul>li>ul>li {
 float: left;
 clear: left;
 display: block;
 text-align: left;
}
body {
 border: 0;
 margin: 0;
 height: 100%;
 min-height: 100%;
 overflow-x: hidden;
}
.header {
 position: relative;
 height: 769px;
}
.header-background {
 height: 769px;
 width: 100%;
}
.orange-bar {
 position: relative;
 padding-left: 150px;
 top: -430px;
 left: -160px;
}
.header h1 {
 padding-left: 110px;
 color: white;
 font-family: AvantGarde;
 text-align: center;
 font-size: 35px;
 left: -420px;
 letter-spacing: .24em;
 position: relative;
 top: -615px;
 font-family: "AvantGarde";
 text-transform: uppercase;
}
.header p {
 padding-left: 290px;
 text-align: center;
 padding-right: 210px;
 font-size: 22px;
 letter-spacing: .12em;
 font-family: "Adelle PE";
 color: white;
 position: relative;
 top: -700px;
}
.header h2 {
 font-family: "Adelle PE";
 font-style: italic;
 text-transform: uppercase;
 top: -490px;
 font-weight: normal;
 font-size: 21px;
 position: relative;
 margin-left: 630px;
 color: white;
 letter-spacing: 0.24em;
}
.header a {
 color: white;
 text-decoration: none;
}
#worldofnorthman {
 background-size: cover;
 background-image: url("our_story.png");
 /*width: 404px;*/

 height: 768px !important;
}
.login {
 display: inline;
 padding-left: 15px;
 letter-spacing: .25em;
 color: white;
 font-size: 11.433px;
 font-family: AvantGarde;
}
.login a {
 color: white;
 text-decoration: none;
}
.login a:hover {
 color: #fe5b1f;
 text-decoration: none;
}
.container {
 width: 100% !important;
}
li.insurance {
 padding-top: 30px !important;
}
li.our-story {
 padding-top: 30px !important;
}
li.login-signup {
 padding-top: 30px !important;
}
li.get-covered {
 margin-top: 15px;
 padding-bottom: 10px !important;
 padding-top: 10px !important;
}
li.our-story {
 /*margin-right: 200px !important;*/
 font-family: AvantGarde;
 letter-spacing: .30em;
 color: white;
}
li.login-signup {
 font-style: italic;
 font-size: 12px;
 font-family: Adelle PE;
 letter-spacing: .30em;
 color: white;
}
li.get-covered {
 border-color: #EF7440;
 border-style: solid;
 color: white;
 letter-spacing: .30em;
 font-family: Adelle PE;
}
li.get-covered:hover {
 background-color: #EF7440;
}
li.insurance {
 margin-right: 80px;
 margin-left: 80px;
 color: white;
 font-family: AvantGarde;
 letter-spacing: .30em;
}
#adventure {p
 background-size: cover;
 background-image: url("https://s15.postimg.org/57rlzm6ij/insurance.png");
 /* width: 404px; */
 height: 768px !important;
}

#worldofnorthman {
 background-size: cover;
 background-image: url("https://s9.postimg.org/3vae4upan/our_story.png");
 /*width: 404px;*/
 height: 768px !important;
}
.container {
 width: 100% !important;
}
.catagories h3 {
 position: relative;
 top: 135px;
 font-size: 25px;
 font-weight: bold;
 color: #fe5b1f;
 letter-spacing: .24em;
 line-height: 1.187;
 text-align: center;
}
.catagories h3:after {
 content: "";
 height: 5px;
 width: 12%;
 background-color: #fe5b1f;
 position: absolute;
 bottom: -.8em;
 left: 50%;
 transform: translate(-50%);
}
#no-line {
 position: relative;
 top: 405px;
 font-family: AvantGarde;
 font-size: 25px;
 font-weight: bold;
 color: #fe5b1f;
 letter-spacing: .24em;
 text-align: center;
}
.catagories a {
 text-decoration: none;
 color: #fe5b1f;
 font-family: AvantGarde;
}

.catagories a:hover {
 text-decoration: none;
 color: #fe5b1f;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta name="robots" content="noindex, nofollow">
 <meta name="googlebot" content="noindex, nofollow">
 <script type="text/javascript" src="/js/lib/dummy.js"></script>
 <link rel="stylesheet" type="text/css" href="/css/result-light.css">
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 <script type="text/javascript" src="https://ajax.googleapis.com;
 color: white;
 font-family: AvantGarde;
 letter-spacing: .30em;
}
  </style>

<script type=" text/javascript ">//<![CDATA[
window.onload=function(){
$(document).ready(function() {
  $(".dropdown>
  a ").click(function() {
  var $dropdownContent = $(this).siblings('.dropdown-content');

  $(this)
   .closest("ul")
   .find("li.dropdown ul.dropdown-content")
   .not($dropdownContent)
   .slideUp(200);

  $dropdownContent.slideToggle(200);
  });
  });

  } //]]>
 </script>

</head>

<body>
 <div class="header"> <img class="header-background" src="https://s30.postimg.org/3q4ox3s81/background-image-chrisdavenport.png">
  <div class="orange-bar">
   <img class="orange-bar-image" src="https://s9.postimg.org/sdrolfjan/orange-bar.png">
  </div>
  <div class="topnav">
   <ul>
    <li class="home"><img src="https://s2.postimg.org/nhr4xxqcp/northman_wordmark_CMYK.png"></li>
    <li class="dropdown" style="margin-left: 10%;margin-top: 1.7%;">
     <b>INSURANCE</b> <i class="fa fa-angle-down" aria-hidden="true"></i>
     <ul class="dropdown-content" style="display: none;">
      <li><i>INDIVIDUAL</i>
      </li>
      <li><i>CORPORATE</i>
      </li>
     </ul>
    </li>
    <li class="our-story">OUR STORY</li>
    <li class="login-signup">Log In | Sign up</li>
    <li class="get-covered" style="width: 10%;">GET <strong style="font-style:italic">COVERED</strong>
    </li>
   </ul>
  </div>
  <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
 </div>

 <div class="catagories" id="catagories">
  <div class="container">
   <div class="row">
    <div id="adventure" class="col-lg-6">
     <h3 id="no-line">INSURANCE </h3>
    </div>
    <div id="worldofnorthman" class="col-lg-6">
     <h3 id="no-line">OUR STORY </h3>
    </div>
   </div>
  </div>
 </div>

 <script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent) {
   window.parent.parent.postMessage(["resultsFrame", {
    height: document.body.getBoundingClientRect().height,
    slug: "tne4zh8h"
   }], "*")
  }
 </script>

</body>
</html></code>```

Any thoughts what I did wrong?

答:
That's called "margin collapse" https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent and first/last child - If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

You need to remove the top margin on the h3 that is the first child of that section.

$(document).ready(function() {
  $(".dropdown > a").click(function() {
   var $dropdownContent = $(this).siblings('.dropdown-content');

    $(this)
     .closest("ul")
      .find("li.dropdown ul.dropdown-content")
      .not($dropdownContent)
      .slideUp(200);

    $dropdownContent.slideToggle(200);
  });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>@font-face {
    font-family: AvantGarde Demi;
    src: url(AvantGarde Demi.woff);
}
@font-face {
    font-family: AvantGarde;
    src: url(AvantGarde.woff);
}
@font-face {
    font-family: ITC Avant Garde Gothic;
    src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/

.topnav {
    position: relative;
    top: -902px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    /*overflow: hidden;*/
}
.topnav ul>li {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    width: 15%;
}
.topnav a {
    text-decoration: none;
    font-size: 17px;
    color: white;
    display: block;
}
/* dropdown menus hidden initially */

.topnav ul>li>ul {
    display: none;
    margin-top: 30px;
    width: 200px;
    padding: 0;
    position: absolute;
    background-color: #f76c38;
}
.topnav ul>li>ul>li {
    float: left;
    clear: left;
    display: block;
    text-align: left;
}
body {
    border: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}
.header {
    position: relative;
    height: 769px;
}
.header-background {
    height: 769px;
    width: 100%;
}
.orange-bar {
    position: relative;
    padding-left: 150px;
    top: -430px;
    left: -160px;
}
.header h1 {
    padding-left: 110px;
    color: white;
    font-family: AvantGarde;
    text-align: center;
    font-size: 35px;
    left: -420px;
    letter-spacing: .24em;
    position: relative;
    top: -615px;
    font-family: "AvantGarde";
    text-transform: uppercase;
}
.header p {
    padding-left: 290px;
    text-align: center;
    padding-right: 210px;
    font-size: 22px;
    letter-spacing: .12em;
    font-family: "Adelle PE";
    color: white;
    position: relative;
    top: -700px;
}
.header h2 {
    font-family: "Adelle PE";
    font-style: italic;
    text-transform: uppercase;
    top: -490px;
    font-weight: normal;
    font-size: 21px;
    position: relative;
    margin-left: 630px;
    color: white;
    letter-spacing: 0.24em;
}
.header a {
    color: white;
    text-decoration: none;
}
#worldofnorthman {
    background-size: cover;
    background-image: url("our_story.png");
    /*width: 404px;*/

    height: 768px !important;
}
.login {
    display: inline;
    padding-left: 15px;
    letter-spacing: .25em;
    color: white;
    font-size: 11.433px;
    font-family: AvantGarde;
}
.login a {
    color: white;
    text-decoration: none;
}
.login a:hover {
    color: #fe5b1f;
    text-decoration: none;
}
.container {
    width: 100% !important;
}
li.insurance {
    padding-top: 30px !important;
}
li.our-story {
    padding-top: 30px !important;
}
li.login-signup {
    padding-top: 30px !important;
}
li.get-covered {
    margin-top: 15px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
li.our-story {
    /*margin-right: 200px !important;*/
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white;
}
li.login-signup {
    font-style: italic;
    font-size: 12px;
    font-family: Adelle PE;
    letter-spacing: .30em;
    color: white;
}
li.get-covered {
    border-color: #EF7440;
    border-style: solid;
    color: white;
    letter-spacing: .30em;
    font-family: Adelle PE;
}
li.get-covered:hover {
    background-color: #EF7440;
}
li.insurance {
    margin-right: 80px;
    margin-left: 80px;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
#adventure {p
    background-size: cover;
    background-image: url("https://s15.postimg.org/57rlzm6ij/insurance.png");
    /* width: 404px; */
    height: 768px !important;
}

#worldofnorthman {
    background-size: cover;
    background-image: url("https://s9.postimg.org/3vae4upan/our_story.png");
    /*width: 404px;*/
    height: 768px !important;
}
.container {
    width: 100% !important;
}
.catagories h3 {
    position: relative;
    top: 135px;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    line-height: 1.187;
    text-align: center;
}
.catagories h3:after {
    content: "";
    height: 5px;
    width: 12%;
    background-color: #fe5b1f;
    position: absolute;
    bottom: -.8em;
    left: 50%;
    transform: translate(-50%);
}
#no-line {
    position: relative;
    top: 405px;
    font-family: AvantGarde;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    text-align: center;
}
.catagories a {
    text-decoration: none;
    color: #fe5b1f;
    font-family: AvantGarde;
}

.catagories a:hover {
    text-decoration: none;
    color: #fe5b1f;
}

#no-line {
  margin-top: 0;
}</code>```

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">

    <link rel="stylesheet" type="text/css" href="/css/result-light.css">

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

                    INSURANCE

INDIVIDUAL

CORPORATE

OUR STORY

Log In | Sign up

GET COVERED

INSURANCE FOR THE WILD

INSURANCE

OUR STORY

```

Body:
I am working on designing a webpage. Here is my jsfiddle.

In my jsfiddle if you see there is a white gap just above INSURANCE black image and there is a white gap just below that INSURANCE as well. I am not able to figure out how I can get rid of that. I tried so many things but no luck so far. What is the issue here?

Here is my HTML and CSS:

@font-face {
 font-family: AvantGarde Demi;
 src: url(AvantGarde Demi.woff);
}
@font-face {
 font-family: AvantGarde;
 src: url(AvantGarde.woff);
}
@font-face {
 font-family: ITC Avant Garde Gothic;
 src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/

.topnav {
 position: relative;
 top: -902px;
 background-color: rgba(0, 0, 0, 0.5);
 height: 89px;
 border-bottom: 3px solid #EF7440;
 /*overflow: hidden;*/
}
.topnav ul>li {
 float: left;
 display: block;
 text-align: center;
 padding: 14px 16px;
 width: 15%;
}
.topnav a {
 text-decoration: none;
 font-size: 17px;
 color: white;
 display: block;
}
/* dropdown menus hidden initially */

.topnav ul>li>ul {
 display: none;
 margin-top: 30px;
 width: 200px;
 padding: 0;
 position: absolute;
 background-color: #f76c38;
}
.topnav ul>li>ul>li {
 float: left;
 clear: left;
 display: block;
 text-align: left;
}
body {
 border: 0;
 margin: 0;
 height: 100%;
 min-height: 100%;
 overflow-x: hidden;
}
.header {
 position: relative;
 height: 769px;
}
.header-background {
 height: 769px;
 width: 100%;
}
.orange-bar {
 position: relative;
 padding-left: 150px;
 top: -430px;
 left: -160px;
}
.header h1 {
 padding-left: 110px;
 color: white;
 font-family: AvantGarde;
 text-align: center;
 font-size: 35px;
 left: -420px;
 letter-spacing: .24em;
 position: relative;
 top: -615px;
 font-family: "AvantGarde";
 text-transform: uppercase;
}
.header p {
 padding-left: 290px;
 text-align: center;
 padding-right: 210px;
 font-size: 22px;
 letter-spacing: .12em;
 font-family: "Adelle PE";
 color: white;
 position: relative;
 top: -700px;
}
.header h2 {
 font-family: "Adelle PE";
 font-style: italic;
 text-transform: uppercase;
 top: -490px;
 font-weight: normal;
 font-size: 21px;
 position: relative;
 margin-left: 630px;
 color: white;
 letter-spacing: 0.24em;
}
.header a {
 color: white;
 text-decoration: none;
}
#worldofnorthman {
 background-size: cover;
 background-image: url("our_story.png");
 /*width: 404px;*/

 height: 768px !important;
}
.login {
 display: inline;
 padding-left: 15px;
 letter-spacing: .25em;
 color: white;
 font-size: 11.433px;
 font-family: AvantGarde;
}
.login a {
 color: white;
 text-decoration: none;
}
.login a:hover {
 color: #fe5b1f;
 text-decoration: none;
}
.container {
 width: 100% !important;
}
li.insurance {
 padding-top: 30px !important;
}
li.our-story {
 padding-top: 30px !important;
}
li.login-signup {
 padding-top: 30px !important;
}
li.get-covered {
 margin-top: 15px;
 padding-bottom: 10px !important;
 padding-top: 10px !important;
}
li.our-story {
 /*margin-right: 200px !important;*/
 font-family: AvantGarde;
 letter-spacing: .30em;
 color: white;
}
li.login-signup {
 font-style: italic;
 font-size: 12px;
 font-family: Adelle PE;
 letter-spacing: .30em;
 color: white;
}
li.get-covered {
 border-color: #EF7440;
 border-style: solid;
 color: white;
 letter-spacing: .30em;
 font-family: Adelle PE;
}
li.get-covered:hover {
 background-color: #EF7440;
}
li.insurance {
 margin-right: 80px;
 margin-left: 80px;
 color: white;
 font-family: AvantGarde;
 letter-spacing: .30em;
}
#adventure {p
 background-size: cover;
 background-image: url("https://s15.postimg.org/57rlzm6ij/insurance.png");
 /* width: 404px; */
 height: 768px !important;
}

#worldofnorthman {
 background-size: cover;
 background-image: url("https://s9.postimg.org/3vae4upan/our_story.png");
 /*width: 404px;*/
 height: 768px !important;
}
.container {
 width: 100% !important;
}
.catagories h3 {
 position: relative;
 top: 135px;
 font-size: 25px;
 font-weight: bold;
 color: #fe5b1f;
 letter-spacing: .24em;
 line-height: 1.187;
 text-align: center;
}
.catagories h3:after {
 content: "";
 height: 5px;
 width: 12%;
 background-color: #fe5b1f;
 position: absolute;
 bottom: -.8em;
 left: 50%;
 transform: translate(-50%);
}
#no-line {
 position: relative;
 top: 405px;
 font-family: AvantGarde;
 font-size: 25px;
 font-weight: bold;
 color: #fe5b1f;
 letter-spacing: .24em;
 text-align: center;
}
.catagories a {
 text-decoration: none;
 color: #fe5b1f;
 font-family: AvantGarde;
}

.catagories a:hover {
 text-decoration: none;
 color: #fe5b1f;
}

 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <meta name="robots" content="noindex, nofollow">
 <meta name="googlebot" content="noindex, nofollow">

 <link rel="stylesheet" type="text/css" href="/css/result-light.css">

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

     INSURANCE

INDIVIDUAL

CORPORATE

OUR STORY

Log In | Sign up

GET COVERED

INSURANCE FOR THE WILD

INSURANCE

OUR STORY

Any thoughts what I did wrong?

Body:
That's called "margin collapse" https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Parent and first/last child - If there is no border, padding, inline content, block_formatting_context created or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

You need to remove the top margin on the h3 that is the first child of that section.

$(document).ready(function() {
  $(".dropdown > a").click(function() {
   var $dropdownContent = $(this).siblings('.dropdown-content');

    $(this)
     .closest("ul")
      .find("li.dropdown ul.dropdown-content")
      .not($dropdownContent)
      .slideUp(200);

    $dropdownContent.slideToggle(200);
  });
});

@font-face {
    font-family: AvantGarde Demi;
    src: url(AvantGarde Demi.woff);
}
@font-face {
    font-family: AvantGarde;
    src: url(AvantGarde.woff);
}
@font-face {
    font-family: ITC Avant Garde Gothic;
    src: url(ITC Avant Garde Gothic.woff);
}
/******************For Top Nav****************************/

.topnav {
    position: relative;
    top: -902px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 89px;
    border-bottom: 3px solid #EF7440;
    /*overflow: hidden;*/
}
.topnav ul>li {
    float: left;
    display: block;
    text-align: center;
    padding: 14px 16px;
    width: 15%;
}
.topnav a {
    text-decoration: none;
    font-size: 17px;
    color: white;
    display: block;
}
/* dropdown menus hidden initially */

.topnav ul>li>ul {
    display: none;
    margin-top: 30px;
    width: 200px;
    padding: 0;
    position: absolute;
    background-color: #f76c38;
}
.topnav ul>li>ul>li {
    float: left;
    clear: left;
    display: block;
    text-align: left;
}
body {
    border: 0;
    margin: 0;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}
.header {
    position: relative;
    height: 769px;
}
.header-background {
    height: 769px;
    width: 100%;
}
.orange-bar {
    position: relative;
    padding-left: 150px;
    top: -430px;
    left: -160px;
}
.header h1 {
    padding-left: 110px;
    color: white;
    font-family: AvantGarde;
    text-align: center;
    font-size: 35px;
    left: -420px;
    letter-spacing: .24em;
    position: relative;
    top: -615px;
    font-family: "AvantGarde";
    text-transform: uppercase;
}
.header p {
    padding-left: 290px;
    text-align: center;
    padding-right: 210px;
    font-size: 22px;
    letter-spacing: .12em;
    font-family: "Adelle PE";
    color: white;
    position: relative;
    top: -700px;
}
.header h2 {
    font-family: "Adelle PE";
    font-style: italic;
    text-transform: uppercase;
    top: -490px;
    font-weight: normal;
    font-size: 21px;
    position: relative;
    margin-left: 630px;
    color: white;
    letter-spacing: 0.24em;
}
.header a {
    color: white;
    text-decoration: none;
}
#worldofnorthman {
    background-size: cover;
    background-image: url("our_story.png");
    /*width: 404px;*/

    height: 768px !important;
}
.login {
    display: inline;
    padding-left: 15px;
    letter-spacing: .25em;
    color: white;
    font-size: 11.433px;
    font-family: AvantGarde;
}
.login a {
    color: white;
    text-decoration: none;
}
.login a:hover {
    color: #fe5b1f;
    text-decoration: none;
}
.container {
    width: 100% !important;
}
li.insurance {
    padding-top: 30px !important;
}
li.our-story {
    padding-top: 30px !important;
}
li.login-signup {
    padding-top: 30px !important;
}
li.get-covered {
    margin-top: 15px;
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
li.our-story {
    /*margin-right: 200px !important;*/
    font-family: AvantGarde;
    letter-spacing: .30em;
    color: white;
}
li.login-signup {
    font-style: italic;
    font-size: 12px;
    font-family: Adelle PE;
    letter-spacing: .30em;
    color: white;
}
li.get-covered {
    border-color: #EF7440;
    border-style: solid;
    color: white;
    letter-spacing: .30em;
    font-family: Adelle PE;
}
li.get-covered:hover {
    background-color: #EF7440;
}
li.insurance {
    margin-right: 80px;
    margin-left: 80px;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
#adventure {p
    background-size: cover;
    background-image: url("https://s15.postimg.org/57rlzm6ij/insurance.png");
    /* width: 404px; */
    height: 768px !important;
}

#worldofnorthman {
    background-size: cover;
    background-image: url("https://s9.postimg.org/3vae4upan/our_story.png");
    /*width: 404px;*/
    height: 768px !important;
}
.container {
    width: 100% !important;
}
.catagories h3 {
    position: relative;
    top: 135px;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    line-height: 1.187;
    text-align: center;
}
.catagories h3:after {
    content: "";
    height: 5px;
    width: 12%;
    background-color: #fe5b1f;
    position: absolute;
    bottom: -.8em;
    left: 50%;
    transform: translate(-50%);
}
#no-line {
    position: relative;
    top: 405px;
    font-family: AvantGarde;
    font-size: 25px;
    font-weight: bold;
    color: #fe5b1f;
    letter-spacing: .24em;
    text-align: center;
}
.catagories a {
    text-decoration: none;
    color: #fe5b1f;
    font-family: AvantGarde;
}

.catagories a:hover {
    text-decoration: none;
    color: #fe5b1f;
}

#no-line {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <script type="text/javascript" src="/js/lib/dummy.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <script type="text/javascript" src="https://ajax.googleapis.com;
    color: white;
    font-family: AvantGarde;
    letter-spacing: .30em;
}
  </style>

<script type=" text/javascript ">//<![CDATA[
window.onload=function(){
$(document).ready(function() {
  $(".dropdown>
        a ").click(function() {
        var $dropdownContent = $(this).siblings('.dropdown-content');

        $(this)
            .closest("ul")
            .find("li.dropdown ul.dropdown-content")
            .not($dropdownContent)
            .slideUp(200);

        $dropdownContent.slideToggle(200);
        });
        });

        } //]]>
    </script>

</head>

<body>
    <div class="header"> <img class="header-background" src="https://s30.postimg.org/3q4ox3s81/background-image-chrisdavenport.png">
        <div class="orange-bar">
            <img class="orange-bar-image" src="https://s9.postimg.org/sdrolfjan/orange-bar.png">
        </div>
        <div class="topnav">
            <ul>
                <li class="home"><img src="https://s2.postimg.org/nhr4xxqcp/northman_wordmark_CMYK.png"></li>
                <li class="dropdown" style="margin-left: 10%;margin-top: 1.7%;">
                    <a href="#"><b>INSURANCE</b> <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-content" style="display: none;">
                        <li><a href="#"><i>INDIVIDUAL</i></a>
                        </li>
                        <li><a href="#"><i>CORPORATE</i></a>
                        </li>
                    </ul>
                </li>
                <li class="our-story">OUR STORY</li>
                <li class="login-signup">Log In | Sign up</li>
                <li class="get-covered" style="width: 10%;">GET <strong style="font-style:italic">COVERED</strong>
                </li>
            </ul>
        </div>
        <h1 class="text-inside-orange">INSURANCE FOR THE WILD</h1>
    </div>

    <div class="catagories" id="catagories">
        <div class="container">
            <div class="row">
                <div id="adventure" class="col-lg-6">
                    <h3 id="no-line"><a href="#">INSURANCE</a> </h3>
                </div>
                <div id="worldofnorthman" class="col-lg-6">
                    <h3 id="no-line"><a href="#">OUR STORY</a> </h3>
                </div>
            </div>
        </div>
 </div>

    <script>
        // tell the embed parent frame the height of the content
        if (window.parent && window.parent.parent) {
            window.parent.parent.postMessage(["resultsFrame", {
                height: document.body.getBoundingClientRect().height,
                slug: "tne4zh8h"
            }], "*")
        }
    </script>

</body>
</html>


问:
Javascript countdown and Timezones
enter image description here

basically I insert a row with a datetime + interval (something in the future) with a SQL query.

```<code>    $interval = new DateInterval('PT'.$H.'H'.$i.'M'.$s.'S');
    $date = new DateTime(); $date->add($interval);
    $query = $conn->prepare("INSERT INTO profiles_in_missions (id_pim, id_profile, id_mission, time) VALUES (NULL, :idprofile, :idmission,:time)");
    $query->bindValue(':idprofile', $tableau[0]);
    $query->bindValue(':idmission', $id);
    $query->bindValue(':time', $date->format('Y-m-d H:i:s'));
    $query->execute();
</code>```

If my pc shows: 23:40, and if i insert DateTime with interval of +8minutes, this query will store 21:48 in the database. Till now okay,  my database is GTM+00 and my pc default browser is GTM+2.

Once stored, i am trying to pick this date who got (in that case) -2h+8m and and make a countdown.

Now the problem: To make the countdown, i am using javascript and i do 21:48-now(); BUT he will always end 2h faster than normal, because the stored date (21:48) in MYSQL with GTM+00 BUT Javascript now(); is getting my default browser time GTM+2.

Is there a way to make Javascript work with server Timezone GTM+00? How can i fix my problem? There is all my code for the countdown:

```<code><script>

var t = document.getElementById('myInputTimer').value;
var countDownDate = new Date(t).getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>
</code>```

答:
new Date().getTime() (which can be replaced with Date.now()) simply returns the number of milliseconds from date zero. Timezone isn't a factor here, where timezone becomes a factor is here:

```<code>var t = document.getElementById('myInputTimer').value;
var countDownDate = new Date(t).getTime();
</code>```

If the string you use to create the date object doesn't contain any timezone information, it assumes the timezone of the browser.

I'm assuming this string is the date you have in UTC time?

One solution is to make sure this string contains timezone information, which means it would look like this: 2017-06-03T22:23:00+00:00

Another solution is to correct for the timezone offset after you've parsed the date. So if new Date("2017-06-03 22:23:00") gives you Sat Jun 03 2017 22:23:00 GMT+0200 (CEST) which is 20:23 you can correct it by subtracting the timezone offset:

```<code>var countDownDate = new Date(t).getTime() - (new Date().getTimezoneOffset() * 60 * 1000);
</code>```

.getTimezoneOffset() returns the timezone offset in minutes, we calculate how many milliseconds it is and then subtract it from the milliseconds returned by .getTime()

Using a string to create a date isn't the best idea however since it's implementation dependent and unreliable. It's better to parse out the various components (year, month, day, hours, and so on) and construct the date with those. You can use a regexp to parse out the components like this:

```<code>var dateParts = t.match(/\d+/g);
</code>```

And the best part is that now you can use Date.UTC() instead of new Date(t).getTime() to get the time in UTC directly:

```<code>var countDownDate = Date.UTC.apply(null, dateParts);
</code>```

Title: Javascript countdown and Timezones

Body:
enter image description here

basically I insert a row with a datetime + interval (something in the future) with a SQL query.

    $interval = new DateInterval('PT'.$H.'H'.$i.'M'.$s.'S');
    $date = new DateTime(); $date->add($interval);
    $query = $conn->prepare("INSERT INTO profiles_in_missions (id_pim, id_profile, id_mission, time) VALUES (NULL, :idprofile, :idmission,:time)");
    $query->bindValue(':idprofile', $tableau[0]);
    $query->bindValue(':idmission', $id);
    $query->bindValue(':time', $date->format('Y-m-d H:i:s'));
    $query->execute();

If my pc shows: 23:40, and if i insert DateTime with interval of +8minutes, this query will store 21:48 in the database. Till now okay,  my database is GTM+00 and my pc default browser is GTM+2.

Once stored, i am trying to pick this date who got (in that case) -2h+8m and and make a countdown.

Now the problem: To make the countdown, i am using javascript and i do 21:48-now(); BUT he will always end 2h faster than normal, because the stored date (21:48) in MYSQL with GTM+00 BUT Javascript now(); is getting my default browser time GTM+2.

Is there a way to make Javascript work with server Timezone GTM+00? How can i fix my problem? There is all my code for the countdown:

Body:
new Date().getTime() (which can be replaced with Date.now()) simply returns the number of milliseconds from date zero. Timezone isn't a factor here, where timezone becomes a factor is here:

var t = document.getElementById('myInputTimer').value;
var countDownDate = new Date(t).getTime();

If the string you use to create the date object doesn't contain any timezone information, it assumes the timezone of the browser.

I'm assuming this string is the date you have in UTC time?

One solution is to make sure this string contains timezone information, which means it would look like this: 2017-06-03T22:23:00+00:00

Another solution is to correct for the timezone offset after you've parsed the date. So if new Date("2017-06-03 22:23:00") gives you Sat Jun 03 2017 22:23:00 GMT+0200 (CEST) which is 20:23 you can correct it by subtracting the timezone offset:

var countDownDate = new Date(t).getTime() - (new Date().getTimezoneOffset() * 60 * 1000);

.getTimezoneOffset() returns the timezone offset in minutes, we calculate how many milliseconds it is and then subtract it from the milliseconds returned by .getTime()

Using a string to create a date isn't the best idea however since it's implementation dependent and unreliable. It's better to parse out the various components (year, month, day, hours, and so on) and construct the date with those. You can use a regexp to parse out the components like this:

var dateParts = t.match(/\d+/g);

And the best part is that now you can use Date.UTC() instead of new Date(t).getTime() to get the time in UTC directly:

var countDownDate = Date.UTC.apply(null, dateParts);


问:
Make bold text inside element (jQuery)
I'm trying to make text (fat) bold. Curretly I managed to do this whit code below:

```<code>Movie <b>fat</b> was been added
</code>```

But this bold tags won't work. Now the question is how to enable html for only (fat), to be bold like this: Movie fat was been added

My code so far:

```<code>var boldy = (Movie[0].title)
var fat = boldy.bold()

$("div.container div:first").text("Movie " + (fat) + " was been added")
</code>```

I also tried whit this:

```<code>$("div.container div:first").html("Hello <b>"+(boldy)+"</b>")
</code>```

答:
You can use the following:

```<code>$("div.container div:first").css("font-weight","Bold");
</code>```

That will change the property font-weight from that div to bold.

@EDIT: You can make a div with an ID and set that ID on the jQuery mention:

```<code>$("div.container div:first div#text").css("font-weight","Bold");
</code>```

Title: Make bold text inside element (jQuery)

Body:
I'm trying to make text (fat) bold. Curretly I managed to do this whit code below:

Movie fat was been added

But this bold tags won't work. Now the question is how to enable html for only (fat), to be bold like this: Movie fat was been added

My code so far:

var boldy = (Movie[0].title)
var fat = boldy.bold()

$("div.container div:first").text("Movie " + (fat) + " was been added")

I also tried whit this:

$("div.container div:first").html("Hello "+(boldy)+"")

Body:
You can use the following:

$("div.container div:first").css("font-weight","Bold");

That will change the property font-weight from that div to bold.

@EDIT: You can make a div with an ID and set that ID on the jQuery mention:

$("div.container div:first div#text").css("font-weight","Bold");


问:
PDFsharp image to XImage
I created a barcode as an image in my ASP.NET MVC app.

```<code>BarcodeLib.Barcode barcode = new BarcodeLib.Barcode()
{
    IncludeLabel = false,
    Alignment = AlignmentPositions.LEFT,
    Width = element.BarcodeWidth,
    Height = element.BarcodeHeight,
    RotateFlipType = RotateFlipType.RotateNoneFlipNone,
    BackColor = Color.Transparent,
    ForeColor = Color.Black,
    ImageFormat = System.Drawing.Imaging.ImageFormat.Png
 };
</code>```

This will create a barcode with the BarcodeLib.

How do I convert it to an XImage of PDFsharp?

```<code>Image img = barcode.Encode(TYPE.CODE128, "123456789");
gfx.DrawImage(xImage, 0, 0, 100, 100);
</code>```

答:
Solved it this way:    </p>

```<code>Image img = barcode.Encode(TYPE.CODE128, Name); // this is the image

MemoryStream strm = new MemoryStream();
img.Save(strm, System.Drawing.Imaging.ImageFormat.Png);

XImage xfoto = XImage.FromStream(strm);
</code>```

Title: PDFsharp image to XImage

Body:
I created a barcode as an image in my ASP.NET MVC app.

BarcodeLib.Barcode barcode = new BarcodeLib.Barcode()
{
    IncludeLabel = false,
    Alignment = AlignmentPositions.LEFT,
    Width = element.BarcodeWidth,
    Height = element.BarcodeHeight,
    RotateFlipType = RotateFlipType.RotateNoneFlipNone,
    BackColor = Color.Transparent,
    ForeColor = Color.Black,
    ImageFormat = System.Drawing.Imaging.ImageFormat.Png
 };

This will create a barcode with the BarcodeLib.

How do I convert it to an XImage of PDFsharp?

Image img = barcode.Encode(TYPE.CODE128, "123456789");
gfx.DrawImage(xImage, 0, 0, 100, 100);

Body:
Solved it this way:

Image img = barcode.Encode(TYPE.CODE128, Name); // this is the image

MemoryStream strm = new MemoryStream();
img.Save(strm, System.Drawing.Imaging.ImageFormat.Png);

XImage xfoto = XImage.FromStream(strm);