问:
SQL Duplicates remove
I've a problem of duplicates in tsql. How can I remove?
This is my output:

```<code>  id          name       ref
----------- ---------- --------------
1           John       null
1           John       RE
2           Smith      null
2           Smith      DOS
3           Van        null
4           Sam        CR
5           Bob        null
</code>```

Code:

```<code> SELECT DISTINCT
    u.id,
    u.name,
    c.ref
    FROM users u
    LEFT JOIN con c on c.id=u.id
</code>```

I would like the output to be like this:

```<code>  id          name       ref
----------- ---------- --------------
1           John       RE
2           Smith      DOS
3           Van        null
4           Sam        CR
5           Bob        null
</code>```

This is just an example, I've few of them.

thanks

答:
What about using MAX and GROUP BY:</p>

```<code> SELECT
    u.id,
    u.name,
    MAX(c.ref) as Ref
 FROM users u
    LEFT JOIN con c on c.id=u.id
 GROUP BY
    u.id,
    u.name
</code>```

Title: SQL Duplicates remove

Body:
I've a problem of duplicates in tsql. How can I remove?
This is my output:

  id          name       ref
----------- ---------- --------------
1           John       null
1           John       RE
2           Smith      null
2           Smith      DOS
3           Van        null
4           Sam        CR
5           Bob        null

Code:

 SELECT DISTINCT
    u.id,
    u.name,
    c.ref
    FROM users u
    LEFT JOIN con c on c.id=u.id

I would like the output to be like this:

  id          name       ref
----------- ---------- --------------
1           John       RE
2           Smith      DOS
3           Van        null
4           Sam        CR
5           Bob        null

This is just an example, I've few of them.

thanks

Body:
What about using MAX and GROUP BY:

 SELECT
    u.id,
    u.name,
    MAX(c.ref) as Ref
 FROM users u
    LEFT JOIN con c on c.id=u.id
 GROUP BY
    u.id,
    u.name


来源: stackexchange

问:
Calling a method from jsp and using it
im trying to call a method from a jsp, in order to compare the result with null, this way:

```<code><s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!='null'}">
</code>```

But isnt working apparently, it skips always the if, like the result was always false

Full code is:

```<code>    <s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!='null'}">
        <display:column title="Archivo" headerClass="sortable"
                        defaultorder="descending" style="width:12% ;color:black">
            <s:submit id="botonDescargarNotificacion" value="Notificación"
                      cssClass="boton"
                      onclick="enviarADesde('descargarDocumentoAcuse.action#Notificaciones#', 'formNotificaciones')" />

        </display:column>
    </s:if>
</code>```

Btw:

This code works

```<code><s:property
    value="%{@registradores.utiles.enumerados.EstadoTramite@tipoMensajeSegunEstado(#attr.listaContatosTable.estado_Nue)}" />
</code>```

答:
It is a long time since I used JSP last.

Could you please try this out and let me know if it worked?

```<code><s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!=null}">
</code>```

ContentLicense: CC BY-SA 3.0

Title: Calling a method from jsp and using it

Body:
im trying to call a method from a jsp, in order to compare the result with null, this way:

<s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!='null'}">

But isnt working apparently, it skips always the if, like the result was always false

Full code is:

    <s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!='null'}">
        <display:column title="Archivo" headerClass="sortable"
                        defaultorder="descending" style="width:12% ;color:black">
            <s:submit id="botonDescargarNotificacion" value="Notificación"
                      cssClass="boton"
                      onclick="enviarADesde('descargarDocumentoAcuse.action#Notificaciones#', 'formNotificaciones')" />

        </display:column>
    </s:if>

Btw:

This code works

<s:property
    value="%{@registradores.utiles.enumerados.EstadoTramite@tipoMensajeSegunEstado(#attr.listaContatosTable.estado_Nue)}" />

Body:
It is a long time since I used JSP last.

Could you please try this out and let me know if it worked?

<s:if test="%{@registradores.utiles.enumerados.EstadoTramite.tipoMensajeSegunEstado('#attr.listaContatosTable.estado_Nue')!=null}">


问:
Open Kinect - OpenNI, NITE - Compilation issues
I am busy trying to get the kinect working using Ubuntu 15.10. I have installed Libfreenect, OpenNI, NITE as well as SensorKinect.

I am able to run the programs in the OpenNI/Platform/Linux/Bin/x64-Release/ folder, for example Sample-NiUserTracker... However I have so far been unable to compile any of my own code.

I have tried to compile the examples in the Samples folder, for example SimpleViewer.java but I just get the following error:

```<code> SimpleViewerApplication.java:34: error: cannot find symbol
    private SimpleViewer viewer;
            ^
  symbol:   class SimpleViewer
  location: class SimpleViewerApplication
SimpleViewerApplication.java:66: error: cannot find symbol
        app.viewer = new SimpleViewer();
                         ^
symbol:   class SimpleViewer
 location: class SimpleViewerApplication
2 errors
</code>```

I also tried to compile the C++ programs to no avail. Any suggestions on how to get something to compile would be awesome thanks.

答:
Ok, so unfortunately you cannot just naively compile the example programs directly as they need to be linked with a whole bunch of files. One method of compiling without worrying about creating your own makefiles is to edit one of the existing files and go the OpenNI/Platform/Linux/Build and enter make. This will compile the example programs for you. and you can go to OpenNI/Platform/Linux/Bin/x64-Release and run the compile code.

Something that makes all this easier is to install PyOpenNI. Which enables you to code for the Kinect in glorious Python.

You can see full instructions at my github page https://github.com/RobbieJKatz/Kinect.

Body:
I am busy trying to get the kinect working using Ubuntu 15.10. I have installed Libfreenect, OpenNI, NITE as well as SensorKinect.

I am able to run the programs in the OpenNI/Platform/Linux/Bin/x64-Release/ folder, for example Sample-NiUserTracker... However I have so far been unable to compile any of my own code.

I have tried to compile the examples in the Samples folder, for example SimpleViewer.java but I just get the following error:

 SimpleViewerApplication.java:34: error: cannot find symbol
    private SimpleViewer viewer;
            ^
  symbol:   class SimpleViewer
  location: class SimpleViewerApplication
SimpleViewerApplication.java:66: error: cannot find symbol
        app.viewer = new SimpleViewer();
                         ^
symbol:   class SimpleViewer
 location: class SimpleViewerApplication
2 errors

I also tried to compile the C++ programs to no avail. Any suggestions on how to get something to compile would be awesome thanks.


问:
SSL self-signed certifications to connect with Mysql with PHP
Summary: PHP gives an error when using self-signed certificates as provided by Google Cloud SQL.

Details: I am trying to connect to Google Cloud SQL's mysql instance using PHP's mysqli library.

```<code>$db = mysqli_init();
mysqli_options ($db, MYSQLI_OPT_SSL_VERIFY_SERVER_CERT, true);
$db->ssl_set('client-key.pem', 'client-cert.pem', 'server-ca.pem', NULL, NULL);
$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL);
</code>```

As I understand Google cloud allows self-signed certificates, from where I downloaded the client-key.pem, client-cert.pem, server-ca.pem files.

I get the following error from PHP when validating the certificate:

```<code>mysqli_real_connect(): Peer certificate CN=`<project_name>' did not match expected CN=`<db_IP>'
</code>```

Based on my research so far, it seems I need a way to disable Verify_Peer check, which apparently PHP doesn't allow. Can you please validate this and/or offer a way to use SSL with Google Cloud SQL from PHP?

Thank you.

答:
you need to Replace

```<code>$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL);
</code>```

With

```<code>$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL_DONT_VERIFY_SERVER_CERT);
</code>```

it is Like MYSQLI_CLIENT_SSL, but disables validation of the provided SSL certificate. This is only for installations using MySQL Native Driver and MySQL 5.6 or later.

Hope it will help.

Body:
Summary: PHP gives an error when using self-signed certificates as provided by Google Cloud SQL.

Details: I am trying to connect to Google Cloud SQL's mysql instance using PHP's mysqli library.

$db = mysqli_init();
mysqli_options ($db, MYSQLI_OPT_SSL_VERIFY_SERVER_CERT, true);
$db->ssl_set('client-key.pem', 'client-cert.pem', 'server-ca.pem', NULL, NULL);
$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL);

As I understand Google cloud allows self-signed certificates, from where I downloaded the client-key.pem, client-cert.pem, server-ca.pem files.

I get the following error from PHP when validating the certificate:

mysqli_real_connect(): Peer certificate CN=`<project_name>' did not match expected CN=`<db_IP>'

Based on my research so far, it seems I need a way to disable Verify_Peer check, which apparently PHP doesn't allow. Can you please validate this and/or offer a way to use SSL with Google Cloud SQL from PHP?

Thank you.

Body:
you need to Replace

$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL);

With

$query = mysqli_real_connect ($db, $host, $user, $pass, $dbname, 3306, NULL, MYSQLI_CLIENT_SSL_DONT_VERIFY_SERVER_CERT);

it is Like MYSQLI_CLIENT_SSL, but disables validation of the provided SSL certificate. This is only for installations using MySQL Native Driver and MySQL 5.6 or later.

Hope it will help.


问:
Read File to Print to Screen
I have a file Inventory.txt that I am trying to print to the screen. Each line from the file goes into an object array. My code compiles with no errors but when I run it, nothing prints nothing to the screen. Im using Mac and TextEdit/Terminal. </p>

```<code>import java.util.Scanner;
import java.io.*;

public class VendingMachineSimulator
{
    to be imported
    public static void main(String[] args) throws FileNotFoundException
    {

        File InventoryFile = new File("Inventory.txt");
        Scanner input = new Scanner(InventoryFile);

        //This code block will count the number of lines(products) are in the text file
        int counter = 0;
        while (input.hasNextLine())
        {
            counter = counter + 1;
        }

        Inventory[] InventoryObject = new Inventory[counter];
        String line = "";

        for (int i = 0; i < counter; i++)
        {
            String[] ProductArray = line.split("-");

            InventoryObject[i] = new Inventory(Integer.valueOf(ProductArray[0]), ProductArray[1], ProductArray[2],
                                               ProductArray[3],Double.valueOf(ProductArray[4]), ProductArray[5],
                                               Integer.valueOf(ProductArray[6]));
        }

        for (int i = 0; i < counter; i++)
        {
            System.out.println();
            InventoryObject[i].PrintInventory();
        }

    }

    public static void PrintMenu()
    {
        System.out.println();
        System.out.println("Display Inventory: <1>");
        System.out.println("Display Currency:  <2>");
        System.out.println("Purchase Item:     <3>");
        System.out.println("Exit:              <4>");
        System.out.println();
    }

}

class Inventory
{
    private int ID;
    private String Type;
    private String Name;
    private String PriceText;
    private double Cost;
    private String QuantityText;
    private int StockAmount;

    //Constructor method. values passed to it from the main method.
    public Inventory(int ID, String Type, String Name, String PriceText, double Cost, String QuantityText, int StockAmount)
    {
        this.ID = ID;
        this.Type = Type;
        this.Name = Name;
        this.PriceText = PriceText;
        this.Cost = Cost;
        this.QuantityText = QuantityText;
        this.StockAmount = StockAmount;
    }

    public void setID(int ID)
    {
        this.ID = ID;
    }

    public void setType(String Type)
    {
        this.Type = Type;
    }

    public void setName(String Name)
    {
        this.Name = Name;
    }

    public void setPriceText(String PriceText)
    {
        this.PriceText = PriceText;
    }

    public void setCost(double Cost)
    {
        this.Cost = Cost;
    }

    public void setQuantityText(String QuantityText)
    {
        this.QuantityText = QuantityText;
    }

    public void setStockAmount(int StockAmount)
    {
        this.StockAmount = StockAmount;
    }

    public int getID()
    {
        return ID;
    }

    public String getType()
    {
        return Type;
    }

    public String getName()
    {
        return Name;
    }

    public String getPriceText()
    {
        return PriceText;
    }

    public double getCost()
    {
        return Cost;
    }

    public String getQuantityText()
    {
        return QuantityText;
    }

    public int getStockAmount()
    {
        return StockAmount;
    }

    public void PrintInventory()
    {
        System.out.println(ID + " " + Type + " " + Name + " " + PriceText
                           + " " + Cost + " " + QuantityText + " " + StockAmount);
    }

}
</code>```

答:
You can remove the first while loop as its infinite loop.

Change the for loop to a while loop and do itererate as long as you have a next line and within the loop read the nextline and assign to line string and change the inventoryObject to an ArrayList and add items.

This should ideally resolve the issue.

Title: Read File to Print to Screen

Body:
I have a file Inventory.txt that I am trying to print to the screen. Each line from the file goes into an object array. My code compiles with no errors but when I run it, nothing prints nothing to the screen. Im using Mac and TextEdit/Terminal.

import java.util.Scanner;
import java.io.*;

public class VendingMachineSimulator
{
    to be imported
    public static void main(String[] args) throws FileNotFoundException
    {

        File InventoryFile = new File("Inventory.txt");
        Scanner input = new Scanner(InventoryFile);

        //This code block will count the number of lines(products) are in the text file
        int counter = 0;
        while (input.hasNextLine())
        {
            counter = counter + 1;
        }

        Inventory[] InventoryObject = new Inventory[counter];
        String line = "";

        for (int i = 0; i < counter; i++)
        {
            String[] ProductArray = line.split("-");

            InventoryObject[i] = new Inventory(Integer.valueOf(ProductArray[0]), ProductArray[1], ProductArray[2],
                                               ProductArray[3],Double.valueOf(ProductArray[4]), ProductArray[5],
                                               Integer.valueOf(ProductArray[6]));
        }

        for (int i = 0; i < counter; i++)
        {
            System.out.println();
            InventoryObject[i].PrintInventory();
        }

    }

    public static void PrintMenu()
    {
        System.out.println();
        System.out.println("Display Inventory: <1>");
        System.out.println("Display Currency:  <2>");
        System.out.println("Purchase Item:     <3>");
        System.out.println("Exit:              <4>");
        System.out.println();
    }

}

class Inventory
{
    private int ID;
    private String Type;
    private String Name;
    private String PriceText;
    private double Cost;
    private String QuantityText;
    private int StockAmount;

    //Constructor method. values passed to it from the main method.
    public Inventory(int ID, String Type, String Name, String PriceText, double Cost, String QuantityText, int StockAmount)
    {
        this.ID = ID;
        this.Type = Type;
        this.Name = Name;
        this.PriceText = PriceText;
        this.Cost = Cost;
        this.QuantityText = QuantityText;
        this.StockAmount = StockAmount;
    }

    public void setID(int ID)
    {
        this.ID = ID;
    }

    public void setType(String Type)
    {
        this.Type = Type;
    }

    public void setName(String Name)
    {
        this.Name = Name;
    }

    public void setPriceText(String PriceText)
    {
        this.PriceText = PriceText;
    }

    public void setCost(double Cost)
    {
        this.Cost = Cost;
    }

    public void setQuantityText(String QuantityText)
    {
        this.QuantityText = QuantityText;
    }

    public void setStockAmount(int StockAmount)
    {
        this.StockAmount = StockAmount;
    }

    public int getID()
    {
        return ID;
    }

    public String getType()
    {
        return Type;
    }

    public String getName()
    {
        return Name;
    }

    public String getPriceText()
    {
        return PriceText;
    }

    public double getCost()
    {
        return Cost;
    }

    public String getQuantityText()
    {
        return QuantityText;
    }

    public int getStockAmount()
    {
        return StockAmount;
    }

    public void PrintInventory()
    {
        System.out.println(ID + " " + Type + " " + Name + " " + PriceText
                           + " " + Cost + " " + QuantityText + " " + StockAmount);
    }

}


问:
Find max and second max salary for a employee table MySQL
Suppose that you are given the following simple database table called Employee that has 2 columns named Employee ID and Salary:

```<code>  Employee
  Employee ID    Salary
   3            200
   4            800
   7            450
</code>```

I wish to write a query select max(salary) as max_salary, 2nd_max_salary from employee

then it should return

```<code>  max_salary   2nd_max_salary
   800             450
</code>```

i know how to find 2nd highest salary

```<code>   SELECT MAX(Salary) FROM Employee
  WHERE Salary NOT IN (SELECT MAX(Salary) FROM Employee )
</code>```

or to find the nth

```<code>  SELECT FROM Employee Emp1 WHERE (N-1) = ( SELECT COUNT(DISTINCT(Emp2.Salary)) FROM Employee Emp2
  WHERE Emp2.Salary > Emp1.Salary)
</code>```

but i am unable to figureout how to join these 2 results for the desired result

答:
```<code>select
    e.salary
        from(
           SELECT * FROM
           Employee
             group by salary
             order by salary desc
             limit 2
          ) e
     order by salary asc
     limit 1;
</code>```

Body:
Suppose that you are given the following simple database table called Employee that has 2 columns named Employee ID and Salary:

  Employee
  Employee ID    Salary
   3            200
   4            800
   7            450

I wish to write a query select max(salary) as max_salary, 2nd_max_salary from employee

then it should return

  max_salary   2nd_max_salary
   800             450

i know how to find 2nd highest salary

   SELECT MAX(Salary) FROM Employee
  WHERE Salary NOT IN (SELECT MAX(Salary) FROM Employee )

or to find the nth

  SELECT FROM Employee Emp1 WHERE (N-1) = ( SELECT COUNT(DISTINCT(Emp2.Salary)) FROM Employee Emp2
  WHERE Emp2.Salary > Emp1.Salary)

but i am unable to figureout how to join these 2 results for the desired result

ContentLicense: CC BY-SA 4.0


问:
Python - Transform List to List of Lists with each entry containing unique combinations
I have a list of lists as follows:

```<code>mylist=[[a,b],[a,c],[b,c],[c,d],[d,e],[e,c]]
</code>```

What I would like to do is iterate through mylist and produce a new list like this:

```<code>result=[ [ [a,b],[c,d] ] , [ [a,c],[d,e] ] , [ [b,c] ], [ [e,c] ] ]
</code>```

In other words, make a list of lists, where each list contains unique combinations of entries of the initial list, so that a letter is not present twice in each entry of result list. Also each time an entry is added to result, we abstract it's sub elements from the set of available combinations of the initial list. (I guess the given example makes it more clear than the explanation).

答:
Maybe you can try to use zip:

```<code>mylist=[['a','b'],['a','c'],['b','c'],['c','d'],['d','e'],['e','c']]

print zip(mylist[:len(mylist)/2],mylist[len(mylist)/2:])
</code>```

Result:

```<code>[(['a', 'b'], ['c', 'd']), (['a', 'c'], ['d', 'e']), (['b', 'c'], ['e', 'c'])]
</code>```

If you want to iterate the result, just use for i in zip() or you can  convert the tuple to list:

```<code>print [list(i) for i in zip(mylist[:len(mylist)/2],mylist[len(mylist)/2:])]
</code>```

Output:

```<code>[[['a', 'b'], ['c', 'd']], [['a', 'c'], ['d', 'e']], [['b', 'c'], ['e', 'c']]]
</code>```

Or just use a list comprehension:

```<code>print [[mylist[i],mylist[i+len(mylist)/2]] for i in range(len(mylist)/2)]
</code>```

Body:
I have a list of lists as follows:

mylist=[[a,b],[a,c],[b,c],[c,d],[d,e],[e,c]]

What I would like to do is iterate through mylist and produce a new list like this:

result=[ [ [a,b],[c,d] ] , [ [a,c],[d,e] ] , [ [b,c] ], [ [e,c] ] ]

In other words, make a list of lists, where each list contains unique combinations of entries of the initial list, so that a letter is not present twice in each entry of result list. Also each time an entry is added to result, we abstract it's sub elements from the set of available combinations of the initial list. (I guess the given example makes it more clear than the explanation).

Body:
Maybe you can try to use zip:

mylist=[['a','b'],['a','c'],['b','c'],['c','d'],['d','e'],['e','c']]

print zip(mylist[:len(mylist)/2],mylist[len(mylist)/2:])

Result:

[(['a', 'b'], ['c', 'd']), (['a', 'c'], ['d', 'e']), (['b', 'c'], ['e', 'c'])]

If you want to iterate the result, just use for i in zip() or you can  convert the tuple to list:

print [list(i) for i in zip(mylist[:len(mylist)/2],mylist[len(mylist)/2:])]

Output:

[[['a', 'b'], ['c', 'd']], [['a', 'c'], ['d', 'e']], [['b', 'c'], ['e', 'c']]]

Or just use a list comprehension:

print [[mylist[i],mylist[i+len(mylist)/2]] for i in range(len(mylist)/2)]


问:
Recyclerview Images Misplacing and disappear while scrolling up/down
I'm retrieving Video thumbnails and displaying it in recycledview's imageview, problem that I'm facing with was Image's getting misplaced and disappeared while Scrolling Up/Down. When I'm using runnable class Recyclarview gets freezes.     </p>

```<code>private static Bitmap retrieveVideoFrameFromVideo(String videoPath) {
Bitmap bitmap = null;
MediaMetadataRetriever mediaMetadataRetriever = null;
try {
  mediaMetadataRetriever = new MediaMetadataRetriever();
  if (Build.VERSION.SDK_INT >= 14) {
    mediaMetadataRetriever.setDataSource(videoPath, new HashMap<String, String>());
  } else {
    mediaMetadataRetriever.setDataSource(videoPath);
  }
  //   mediaMetadataRetriever.setDataSource(videoPath);
  bitmap = mediaMetadataRetriever.getFrameAtTime();
} catch (Exception e) {
  e.printStackTrace();
} finally {
  if (mediaMetadataRetriever != null) {
    mediaMetadataRetriever.release();
  }
}
return bitmap;
 }

 @Override void bindData(RecyclerView.ViewHolder holder, final MediaResponse  data) {
final PhotoHolder photoHolder = (PhotoHolder) holder;
photoHolder.mTitle.setText(BasicUtils.removeDoubleQuotes(data.getTitle()));
photoHolder.mPostedBy.setText(data.getPostedby());
photoHolder.upvote.setText(String.valueOf(data.getLikes()));
photoHolder.date.setText(
        BasicUtils.parseDate(data.getDatetime(),  AppConstantsUtils.FROM_DATE_FORMAT,
                AppConstantsUtils.TO_DATE_FORMAT));

new BackTask(photoHolder.mMediaPic).execute(
       AppConstantsUtils.BASE_URL + data.getMedia());

 }

 private class BackTask extends AsyncTask<String, Void, Bitmap> {
  private ImageView imageView;
  BackTask(ImageView imageView) {
  this.imageView = imageView;
}

   @Override protected Bitmap doInBackground(String... params) {
  // return retrieveVideoFrameFromVideo(params[0]);
  Log.d("URLHARRY",params[0]);
  // return ThumbnailUtils.createVideoThumbnail(params[0],            MediaStore.Video.Thumbnails.MINI_KIND );
  return retrieveVideoFrameFromVideo(params[0]);
}

  @Override protected void onPostExecute(Bitmap bitmap) {
  super.onPostExecute(bitmap);

  if(bitmap!=null) {
    imageView.setImageBitmap(bitmap);
  }
  else{
    imageView.setImageBitmap(null);
    ToastUtils.showToast(context,"Hai");
  }

 }
</code>```

答:
Use AsynTask inside the Viewholder</p>

```<code> new AsyncTask<String, String, String>() {
    Bitmap bitmapVideo;
    String location;

    @Override
    protected String doInBackground(String... strings) {
      try {
        //Your method call here
        bitmapVideo = retrieveVideoFrameFromVideo(strings[0]);
        location=strings[0];
        //  addBitmapToMemoryCache(location, bitmapVideo);

      } catch (Throwable throwable) {
        throwable.printStackTrace();
      }
      return null;
    }

    @Override
    protected void onPostExecute(String id) {
      super.onPostExecute(id);

      if (bitmapVideo != null) {
        //Load your bitmap here
        photoHolder.mMediaPic.setImageBitmap(bitmapVideo);
        addBitmapToMemoryCache(location, bitmapVideo);

      } else {
        Bitmap largeIcon = BitmapFactory.decodeResource(context.getResources(), R.drawable.ananda);
        photoHolder.mMediaPic.setImageBitmap(largeIcon);
        addBitmapToMemoryCache(location, largeIcon);

      }
    }
  }.execute(AppConstantsUtils.BASE_URL + data.getMedia());
</code>```

Body:
I'm retrieving Video thumbnails and displaying it in recycledview's imageview, problem that I'm facing with was Image's getting misplaced and disappeared while Scrolling Up/Down. When I'm using runnable class Recyclarview gets freezes.

private static Bitmap retrieveVideoFrameFromVideo(String videoPath) {
Bitmap bitmap = null;
MediaMetadataRetriever mediaMetadataRetriever = null;
try {
  mediaMetadataRetriever = new MediaMetadataRetriever();
  if (Build.VERSION.SDK_INT >= 14) {
    mediaMetadataRetriever.setDataSource(videoPath, new HashMap<String, String>());
  } else {
    mediaMetadataRetriever.setDataSource(videoPath);
  }
  //   mediaMetadataRetriever.setDataSource(videoPath);
  bitmap = mediaMetadataRetriever.getFrameAtTime();
} catch (Exception e) {
  e.printStackTrace();
} finally {
  if (mediaMetadataRetriever != null) {
    mediaMetadataRetriever.release();
  }
}
return bitmap;
 }

 @Override void bindData(RecyclerView.ViewHolder holder, final MediaResponse  data) {
final PhotoHolder photoHolder = (PhotoHolder) holder;
photoHolder.mTitle.setText(BasicUtils.removeDoubleQuotes(data.getTitle()));
photoHolder.mPostedBy.setText(data.getPostedby());
photoHolder.upvote.setText(String.valueOf(data.getLikes()));
photoHolder.date.setText(
        BasicUtils.parseDate(data.getDatetime(),  AppConstantsUtils.FROM_DATE_FORMAT,
                AppConstantsUtils.TO_DATE_FORMAT));

new BackTask(photoHolder.mMediaPic).execute(
       AppConstantsUtils.BASE_URL + data.getMedia());

 }

 private class BackTask extends AsyncTask<String, Void, Bitmap> {
  private ImageView imageView;
  BackTask(ImageView imageView) {
  this.imageView = imageView;
}

   @Override protected Bitmap doInBackground(String... params) {
  // return retrieveVideoFrameFromVideo(params[0]);
  Log.d("URLHARRY",params[0]);
  // return ThumbnailUtils.createVideoThumbnail(params[0],            MediaStore.Video.Thumbnails.MINI_KIND );
  return retrieveVideoFrameFromVideo(params[0]);
}

  @Override protected void onPostExecute(Bitmap bitmap) {
  super.onPostExecute(bitmap);

  if(bitmap!=null) {
    imageView.setImageBitmap(bitmap);
  }
  else{
    imageView.setImageBitmap(null);
    ToastUtils.showToast(context,"Hai");
  }

 }

Body:
Use AsynTask inside the Viewholder

 new AsyncTask<String, String, String>() {
    Bitmap bitmapVideo;
    String location;

    @Override
    protected String doInBackground(String... strings) {
      try {
        //Your method call here
        bitmapVideo = retrieveVideoFrameFromVideo(strings[0]);
        location=strings[0];
        //  addBitmapToMemoryCache(location, bitmapVideo);

      } catch (Throwable throwable) {
        throwable.printStackTrace();
      }
      return null;
    }

    @Override
    protected void onPostExecute(String id) {
      super.onPostExecute(id);

      if (bitmapVideo != null) {
        //Load your bitmap here
        photoHolder.mMediaPic.setImageBitmap(bitmapVideo);
        addBitmapToMemoryCache(location, bitmapVideo);

      } else {
        Bitmap largeIcon = BitmapFactory.decodeResource(context.getResources(), R.drawable.ananda);
        photoHolder.mMediaPic.setImageBitmap(largeIcon);
        addBitmapToMemoryCache(location, largeIcon);

      }
    }
  }.execute(AppConstantsUtils.BASE_URL + data.getMedia());


问:
PHP GD - Different text offset Mac vs Linux
I'm trying to render text aligned within the center of a box using imagettftext() and a standard Arial Bold font.

I'm developing the code on a Mac and the text aligns in the center of a box just the way I would expect. But then I deploy my code to a proper linux server and it seems the origin the text is render from is different and the kerning is off.

I have confirmed I'm on the latest and greatest version of php and php gd on both machines.

See example images below:

This is what happens on mac

This is what happens on linux

My question has anyone experience this before and know of a fix or workaround for this issue with out having to resort to actually just offsetting the text a couple of pixels on the linux server. Or is there something I'm missing when it comes to rendering text with the above function?

EDIT: I do use imagettfbbox() to get the size of the text I'm rendering to center it properly (I also have tried dummy rendering using imagettftext() to get the bounding box as well, the problem seems to be the origin imagettftext() renders too is strange)

EDIT 2: Maybe its a difference between implementations in freetype? though I would hope they use the same code base

答:
I never solved this issue with the kerning being all wrong on a linux server. So I went and implemented my own kerning solution drawing each character separately with position information for spacing required between characters.

If anyone ever gets a proper solution that would be fantastic

ContentLicense: CC BY-SA 2.5


问:
Have component execute function after service http.get call is finished
I'm having real trouble wrapping my head around observables and subscriptions in angular2. The problem I am currently having is the following:

I have a service which contains methods to post and get data from an API. The service is injected into a component, which directly calls those methods in the service. The service then retrieves data and stores it itself, but I then want to process that data within the component. I cannot work out how to have the component execute a function after the service has retrieved and stored the data itself.

service.ts

```<code>import { Injectable } from 'angular2/core';
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).subscribe(
            result => this.result = result.json(),
            error => console.log(error),
            () => {}
        )
    }
}
</code>```

component.ts

```<code>import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    ...
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api')

        // How do I call format result on service.result only after it is completed?
        this.formatResult(service.result) // Need to execute this after the http call is completed

        // I want something like:
        this.service.httpGet('/api').then(() => formatResult(this.service.result));
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) // For example
    }
}
</code>```

答:
Well you could use a call back function in that case,

Taking example
consider this is the post function which triggers the post service in service module

```<code>postData(id: string, name: string) {
    console.log("Got you",id);
  this._employeeService.postServices({id: id, name: name})
    .subscribe(
      (response:Response) => this.consoleMyOutput(),
      error => console.log(error)
    );
}
</code>```

Here note the function consoleMyOutput().
This will be triggered once the response is got after the service has been called

Now,

```<code>consoleMyOutput(){console.log("Write Your call back function")};
</code>```

This function will be triggered just after that.

Body:
I'm having real trouble wrapping my head around observables and subscriptions in angular2. The problem I am currently having is the following:

I have a service which contains methods to post and get data from an API. The service is injected into a component, which directly calls those methods in the service. The service then retrieves data and stores it itself, but I then want to process that data within the component. I cannot work out how to have the component execute a function after the service has retrieved and stored the data itself.

service.ts

import { Injectable } from 'angular2/core';
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).subscribe(
            result => this.result = result.json(),
            error => console.log(error),
            () => {}
        )
    }
}

component.ts

import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    ...
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api')

        // How do I call format result on service.result only after it is completed?
        this.formatResult(service.result) // Need to execute this after the http call is completed

        // I want something like:
        this.service.httpGet('/api').then(() => formatResult(this.service.result));
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) // For example
    }
}

Body:
Well you could use a call back function in that case,

Taking example
consider this is the post function which triggers the post service in service module

postData(id: string, name: string) {
    console.log("Got you",id);
  this._employeeService.postServices({id: id, name: name})
    .subscribe(
      (response:Response) => this.consoleMyOutput(),
      error => console.log(error)
    );
}

Here note the function consoleMyOutput().
This will be triggered once the response is got after the service has been called

Now,

consoleMyOutput(){console.log("Write Your call back function")};

This function will be triggered just after that.


问:
ImportError PyQt5 Anaconda
I am trying to use PyQt5 installed via pip in an Anaconda enviroment on Windows 10 x64.
This is how i create my environemnt:

```<code>conda create --name qt python=3.6
activate qt
pip install pyqt5
</code>```

When running an example application i get an error:

File "pyqt_test.py", line 16, in
      from PyQt5.QtWidgets import QApplication, QWidget
  ImportError: DLL load failed: The specified module could not be found.

Installing Python by downloading it from python.org and then installing pyqt5 works as expected.

Thanks for the help.

答:
Just run into the same problem, Miloslav is right about the problem, actually it seems that conda should maybe provide a python3.dll as well, see here for the discussion https://github.com/ContinuumIO/anaconda-issues/issues/1394.

In short just use conda to install pyqt5 by running:

```<code>conda install pyqt
</code>```

this install the latest pyqt bindings which is currently pyqt 5.6

Title: ImportError PyQt5 Anaconda

Body:
I am trying to use PyQt5 installed via pip in an Anaconda enviroment on Windows 10 x64.
This is how i create my environemnt:

conda create --name qt python=3.6
activate qt
pip install pyqt5

When running an example application i get an error:

File "pyqt_test.py", line 16, in
      from PyQt5.QtWidgets import QApplication, QWidget
  ImportError: DLL load failed: The specified module could not be found.

Installing Python by downloading it from python.org and then installing pyqt5 works as expected.

Thanks for the help.

Body:
Just run into the same problem, Miloslav is right about the problem, actually it seems that conda should maybe provide a python3.dll as well, see here for the discussion https://github.com/ContinuumIO/anaconda-issues/issues/1394.

In short just use conda to install pyqt5 by running:

conda install pyqt

this install the latest pyqt bindings which is currently pyqt 5.6


问:
How do I write an "or" logical operator on Prometheus or Grafana
I need to write a query that use any of the different jobs I define.

```<code>{job="traefik" OR job="cadvisor" OR job="prometheus"}
</code>```

Is it possible to write logical binary operators?

答:
Prometheus has an or logical binary operator, but what you're asking about here is vector selectors.

You can use a regex for this {job=~"traefik|cadvisor|prometheus"}, however that you want to do this is a smell.

Body:
I need to write a query that use any of the different jobs I define.

{job="traefik" OR job="cadvisor" OR job="prometheus"}

Is it possible to write logical binary operators?


问:
firing both onclientclick and Client side validation from validation control on button Client click
I have few ASP Text Box controls on a Page, to which Custom Validators are added. I have Save Button, which validates these Text boxes. I have just added the Validation Group as same as that of the Text boxes.

In order to incorporate addtional requirement, I have added onClientClick function for Save button. But amused to find that Validation due to Validation Group(validator controls) is not firing instead the onClientClick function is called and server side Click event is called.

Javascript Code

```<code>function ValidateInputs(source, args) {
            var regex = /^(-{0,1}\d{1,100})$/;
            if (args.Value.length < 1) {
                $("span[id$='spn_error']").html('Please Enter ' + $(source).attr("errormessage"));
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else if (!regex.test(args.Value)) {
                $("span[id$='spn_error']").html($(source).attr("errormessage") + ' allows only numbers');
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else {
                if ($("span[id$='spn_error']").html().indexOf($(source).attr("errormessage")) >= 0)
                    $("span[id$='spn_error']").hide();
                args.IsValid = true;
                return;
            }
        }

function isValidTracker() {
//Dummy Code Say Confirm button
return(confirm('Are you sure');)

}
</code>```

HTML Code

```<code><span class="errormesg" runat="server" id="spn_error" style="display: none;
                        font-size: 9px;"></span>
<asp:TextBox ID="txtLastMonthCount" runat="server" CssClass="inputbox" Width="75px" autocomplete="off" onkeypress="return isNumberKey(event);" ValidationGroup="g1"></asp:TextBox>

<asp:CustomValidator ID="CVLastMonthCount" runat="server" ErrorMessage="Last Months Closing Count" Text="<img src='../images/alert.gif' alt='Please Enter Last Months Closing Count' title='Please Enter Last Months Closing Count' />"
    ValidationGroup="g1" ClientValidationFunction="ValidateInputs" OnServerValidate="ValidateInputs" ControlToValidate="txtLastMonthCount" ValidateEmptyText="true"></asp:CustomValidator>

<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" ValidationGroup="g1" OnClientClick="return isValidTracker();" OnClick="btnSave_Click" />
</code>```

Please help me in finding the solution to fire onclientclick and validation control of Save button click.

答:
Hello I have also face the same issue.
CausesValidation="true" property solved my problem.

Body:
I have few ASP Text Box controls on a Page, to which Custom Validators are added. I have Save Button, which validates these Text boxes. I have just added the Validation Group as same as that of the Text boxes.

In order to incorporate addtional requirement, I have added onClientClick function for Save button. But amused to find that Validation due to Validation Group(validator controls) is not firing instead the onClientClick function is called and server side Click event is called.

Javascript Code

function ValidateInputs(source, args) {
            var regex = /^(-{0,1}\d{1,100})$/;
            if (args.Value.length < 1) {
                $("span[id$='spn_error']").html('Please Enter ' + $(source).attr("errormessage"));
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else if (!regex.test(args.Value)) {
                $("span[id$='spn_error']").html($(source).attr("errormessage") + ' allows only numbers');
                $("span[id$='spn_error']").show();
                args.IsValid = false;
                return;
            }
            else {
                if ($("span[id$='spn_error']").html().indexOf($(source).attr("errormessage")) >= 0)
                    $("span[id$='spn_error']").hide();
                args.IsValid = true;
                return;
            }
        }

function isValidTracker() {
//Dummy Code Say Confirm button
return(confirm('Are you sure');)

}

HTML Code

<asp:TextBox ID="txtLastMonthCount" runat="server" CssClass="inputbox" Width="75px" autocomplete="off" onkeypress="return isNumberKey(event);" ValidationGroup="g1"></asp:TextBox>

<asp:CustomValidator ID="CVLastMonthCount" runat="server" ErrorMessage="Last Months Closing Count" Text=""
    ValidationGroup="g1" ClientValidationFunction="ValidateInputs" OnServerValidate="ValidateInputs" ControlToValidate="txtLastMonthCount" ValidateEmptyText="true"></asp:CustomValidator>

<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="button" ValidationGroup="g1" OnClientClick="return isValidTracker();" OnClick="btnSave_Click" />

Please help me in finding the solution to fire onclientclick and validation control of Save button click.


问:
What is best dojo learning material?
I just want to know what is best learning tools for learning dojo for beginner.
Also is there any video tutorials for the same.</p>

答:
Download the code, demo and docs from http://download.dojotoolkit.org/release-1.10.0/ and put it in a folder in your document root.
In the folder there must be the following folders

```<code>dijit/
dojo/
dojox/
util/
</code>```

Open the test file in a webbrowser

```<code>http://localhost/dojo-release-1.10.0-src/dijit/tests/layout/test_SplitContainer.html
</code>```

Open the file in your favorite text editor change the code and see the result.
The test files are the main resource to learn dojo.

The util folder contains some useful scripts for combining the dojo files and minifying it. This is not that useful as beginner.

Title: What is best dojo learning material?

Body:
Download the code, demo and docs from http://download.dojotoolkit.org/release-1.10.0/ and put it in a folder in your document root.
In the folder there must be the following folders

dijit/
dojo/
dojox/
util/

Open the test file in a webbrowser

http://localhost/dojo-release-1.10.0-src/dijit/tests/layout/test_SplitContainer.html

Open the file in your favorite text editor change the code and see the result.
The test files are the main resource to learn dojo.

The util folder contains some useful scripts for combining the dojo files and minifying it. This is not that useful as beginner.


问:
Uncaught TypeError: ((x.event.special[i.origType] || (intermediate value)).handle || i.handler).apply is not a function
Please help me. This is an error when I use jQuery in ASP.NET MVC.

Uncaught TypeError: ((x.event.special[i.origType] || (intermediate
  value)).handle || i.handler).apply is not a function Uncaught
  TypeError: ((x.event.special[i.origType] || (intermediate
  value)).handle || i.handler).apply is not a function

The code that causes this is:

```<code>$('#btnClick').click(function(){   //code })
</code>```

答:
In my case I had typed

```<code>$('body').click('click','.delete_item',function(e){})
</code>```

When I had meant to type:

```<code>$('body').on('click','.delete_item',function(e){})
</code>```

changing that click to on removed the error.

Body:
Please help me. This is an error when I use jQuery in ASP.NET MVC.

Uncaught TypeError: ((x.event.special[i.origType] || (intermediate
  value)).handle || i.handler).apply is not a function Uncaught
  TypeError: ((x.event.special[i.origType] || (intermediate
  value)).handle || i.handler).apply is not a function

The code that causes this is:

$('#btnClick').click(function(){   //code })

Body:
In my case I had typed

$('body').click('click','.delete_item',function(e){})

When I had meant to type:

$('body').on('click','.delete_item',function(e){})

changing that click to on removed the error.


问:
Plot frequency table of vector in ggplot
I have created a frequency of the values of a vector with the table function and plotted the distribution (over a length of 10).

```<code>x <- c(1,3,5,5,6)

plot(table(x), type = "p", pch = 20, xlim = c(1, 10), axes = FALSE)
axis(side = 1, at = c(seq(0, 10, by = 1)))
axis(side = 2)
</code>```

How can I make this plot with ggplot?

If I create a data frame from the table function, the x axis is not scaled properly (instead the values on the x axis are categorical).

```<code>library(ggplot2)

ggplot(as.data.frame(table(x)), aes(x, Freq)) +
  geom_point()
</code>```

Any ideas how to solve this?

答:
table(x) returns x as a factor, you will have to cast it back to numeric for the scale to be continuous.

```<code>ggplot(as.data.frame(table(x))) +
    geom_point(aes(x = as.numeric(as.character(x)),
                   y = Freq)) +
    scale_x_continuous()
</code>```

Or you can  let ggplot2 do the calculation for you:

```<code>ggplot(as.data.frame(x)) +
    geom_point(aes(x = x), stat = 'count')
</code>```

Body:
I have created a frequency of the values of a vector with the table function and plotted the distribution (over a length of 10).

x <- c(1,3,5,5,6)

plot(table(x), type = "p", pch = 20, xlim = c(1, 10), axes = FALSE)
axis(side = 1, at = c(seq(0, 10, by = 1)))
axis(side = 2)

How can I make this plot with ggplot?

If I create a data frame from the table function, the x axis is not scaled properly (instead the values on the x axis are categorical).

library(ggplot2)

ggplot(as.data.frame(table(x)), aes(x, Freq)) +
  geom_point()

Any ideas how to solve this?

Body:
table(x) returns x as a factor, you will have to cast it back to numeric for the scale to be continuous.

ggplot(as.data.frame(table(x))) +
    geom_point(aes(x = as.numeric(as.character(x)),
                   y = Freq)) +
    scale_x_continuous()

Or you can  let ggplot2 do the calculation for you:

ggplot(as.data.frame(x)) +
    geom_point(aes(x = x), stat = 'count')


问:
HTML5 responsive canvas: resizing the browser canvas draw disappear
I want to make a responsive canvas using size in percentage and once user will resize the window the canvas adjust relatively.
I am able to scale the canvas by using below code but the only problem is as i scale the window size the mouse drawing disappear.

```<code><style>
body{margin:0px;padding:0px;background:#a9a9a9;}
#main{
display:block;
width:80%;
padding:50px 10%;
height:300px;
}
canvas{display:block;background:#fff;}
</style>
</head>
<body>
<div id="main" role="main">
<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>
</div>

<script>

var c = document.getElementById('paint');
var ctx = c.getContext('2d');
var x = null;
var y;

c.onmousedown = function(e){
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);

}

c.onmouseup = function(e){
x=null;

}

c.onmousemove = function(e){
if(x==null) return;
x = e.pageX - c.offsetLeft;
y = e.pageY - c.offsetTop;
ctx.lineTo(x,y);
ctx.stroke();

}

$(document).ready( function(){
//Get the canvas &
var c = $('#paint');

var container = $(c).parent();

//Run function when browser resizes
$(window).resize( respondCanvas );

function respondCanvas(){
    c.attr('width', $(container).width() ); //max width
    c.attr('height', $(container).height() ); //max height

    //Call a function to redraw other content (texts, images etc)
}

//Initial call
respondCanvas();

});

</script>
</code>```

Thanks.

答:
I had the same problem. My solution is using CSS3's property zoom to the parent's container of the canvas:

```<code><div id="parent_div">
    <div id="constructor_div">
         <canvas width="600" height="900">
    </div>
</div>

<script>
    constructor_zoom();

    $(window).resize(function() {
        constructor_zoom();
    });

    function constructor_zoom()
    {
        var parent_width = $('#parent_div').width();
        var item_width = $('#constructor_div').width();
        var coef = 0.1;

        $('.constructor_image').css('zoom', parent_width/item_width - coef);
    }
</script>
</code>```

coef - coefficient to make indents of the canvas from the parent's borders. You may make it zero.

I hope it helps to somebody :-)

Body:
I want to make a responsive canvas using size in percentage and once user will resize the window the canvas adjust relatively.
I am able to scale the canvas by using below code but the only problem is as i scale the window size the mouse drawing disappear.

<canvas id="paint" width="100" height="100">
< !-- Provide fallback -->
</canvas>

Thanks.

Body:
I had the same problem. My solution is using CSS3's property zoom to the parent's container of the canvas:

<div id="parent_div">
    <div id="constructor_div">
         <canvas width="600" height="900">
    </div>
</div>

<script>
    constructor_zoom();

    $(window).resize(function() {
        constructor_zoom();
    });

    function constructor_zoom()
    {
        var parent_width = $('#parent_div').width();
        var item_width = $('#constructor_div').width();
        var coef = 0.1;

        $('.constructor_image').css('zoom', parent_width/item_width - coef);
    }
</script>

coef - coefficient to make indents of the canvas from the parent's borders. You may make it zero.

I hope it helps to somebody :-)


问:
Jquery ajax request not working in IE?
I'm experiencing a strange problem in IE with an ajax request. It works fine in FF and Chrome, but for some reason no data is added to the resultsPage, slideInResults is called, and the empty page appears. Inspecting it I can see there is nothing there. What can I do to fix this?</p>

```<code>$.ajax({
        type: "GET",
        url: "library/ajax/search.php",
        data: dataString,
        cache: false,
        dataType: "html",
        success: function(html){
            $('#resultsPage').html(html);
            slideInResults();
            }
        });
</code>```

答: Use Fiddler to verify if the request is being sent. If it is, verify that the values sent are correct and finally, verify that the PHP page is not returning a bad response.</p>

Title: Jquery ajax request not working in IE?

Body:
I'm experiencing a strange problem in IE with an ajax request. It works fine in FF and Chrome, but for some reason no data is added to the resultsPage, slideInResults is called, and the empty page appears. Inspecting it I can see there is nothing there. What can I do to fix this?

$.ajax({
        type: "GET",
        url: "library/ajax/search.php",
        data: dataString,
        cache: false,
        dataType: "html",
        success: function(html){
            $('#resultsPage').html(html);
            slideInResults();
            }
        });


问:
Scaling messes up the z-index
I have a set of absolute divs having background images which contains animation.
when i apply scale property to the divs it messes up my z-index totally
here is the link to the fiddle https://jsfiddle.net/kq2soozp/3/ (Uncomment transform:scale() line)

The HTML Code

```<code><div class='me'>

            <div class="torso">
                <div class="left leg">
                    <div class="left thigh">
                        <div class="left shin">
                            <div class="left foot">
                                <div class="left toes"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="right leg">
                    <div class="right thigh">
                        <div class="right shin">
                            <div class="right foot">
                                <div class="right toes"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="left arm">
                    <div class="left bicep">
                        <div class="left forearm">
                            <div class="kite"></div>
                        </div>
                    </div>
                </div>

                <div class="right arm">
                    <div class="right bicep">
                        <div class="right forearm"></div>
                    </div>
                </div>

            </div>
        </div>
</code>```

The CSS

```<code>.me,.me div{
    background-repeat: no-repeat;
    position: absolute;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    //-webkit-transform: scale(0.9);
}
.me{
    top: 80px;
    left: 350px;
    -webkit-animation-name: me;
}
.torso{
    height: 274px;
    width: 86px;
    background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm{
    left: 12px;
    -webkit-transform-origin: 20px 10px;
}

.kite{

    width: 395px;
    height: 424px;
    top: -115px;
    left: 0px;

    background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
    -webkit-transform: rotate(45deg) scale(0.6);

}
.right.bicep{
    width: 51px;
    height: 124px;
    background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
    width: 52px;
    : 126px;
    background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
    width: 37px;
    height: 124px;
    background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
    -webkit-transform: rotate(-45deg);
}
.right.forearm{
    width: 36px;
    height: 121px;
    background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
    -webkit-animation-name: right-forearm;
}
.left.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
    width: 53px;
    height: 173px;
    background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
    width: 67px;
    height: 34px;
    background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
    width: 28px;
    height: 25px;
    background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm{
    top: 93px;
    -webkit-animation-name: right-bicep;

}
.left.arm{
    top: 87px;
    -webkit-transform: rotate(-26deg);
}
.forearm{
    top: 108px;
    left: 14px;
    -webkit-transform-origin: 3px 7px;
}
.leg{
    left: 6px;
    -webkit-transform-origin: 30px 20px;
    -webkit-animation-name: thigh;
}
.right.leg{
    top: 235px;
    -webkit-animation-name: right-thigh;
}
.left.leg{
    top:225px;
    -webkit-animation-name: left-thigh;
}
.shin{
    top: 115px;
    -webkit-transform-origin: 30px 25px;
}
.right.shin {
    -webkit-animation-name: right-shin;
}
.left.shin {
    -webkit-animation-name: left-shin;
}
.foot{
    top: 155px;
    left: 2px;
    -webkit-transform-origin: 0 50%;
}
.right.foot {
    -webkit-animation-name: right-foot;
}
.left.foot {
    -webkit-animation-name: left-foot;
}
.toes{
    top: 9px;
    left: 66px;
    -webkit-transform-origin: 0% 100%;
}
.right.toes {
    -webkit-animation-name: right-toes;
}
.left.toes {
    -webkit-animation-name: left-toes;
}
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }

div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }

@-webkit-keyframes me {
    0% { -webkit-transform:   rotate(5deg) translate( 10px,   0px); }
    25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    50% { -webkit-transform:  rotate(5deg) translate( 10px,   0px); }
    75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    100% { -webkit-transform: rotate(5deg) translate( 10px,   0px); }
}
@-webkit-keyframes right-bicep {
    0%   { -webkit-transform: rotate(26deg); }
    50%  { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(26deg); }
}

/*@-webkit-keyframes left-bicep {
    0%   { -webkit-transform: rotate(-20deg); }
    50%  { -webkit-transform: rotate(26deg); }
    100% { -webkit-transform: rotate(-20deg); }
}*/

@-webkit-keyframes right-forearm {
    0%   { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-65deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

/*@-webkit-keyframes left-forearm {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}*/

@-webkit-keyframes right-thigh {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes left-thigh {
    0%   { -webkit-transform: rotate(10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(10deg); }
}

@-webkit-keyframes right-shin {
    0%   { -webkit-transform: rotate(30deg); }
    25%  { -webkit-transform: rotate(20deg); }
    50%  { -webkit-transform: rotate(20deg); }
    75%  { -webkit-transform: rotate(85deg); }
    100% { -webkit-transform: rotate(30deg); }
}

@-webkit-keyframes left-shin {
    0%   { -webkit-transform: rotate(20deg); }
    25%  { -webkit-transform: rotate(85deg); }
    50%  { -webkit-transform: rotate(30deg); }
    75%  { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(20deg); }
}

@-webkit-keyframes right-foot {
    0%   { -webkit-transform: rotate(-5deg); }
    25%  { -webkit-transform: rotate(-7deg); }
    50%  { -webkit-transform: rotate(-16deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-5deg); }
}

@-webkit-keyframes left-foot {
    0%   { -webkit-transform: rotate(-16deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-5deg); }
    75%  { -webkit-transform: rotate(-7deg); }
    100% { -webkit-transform: rotate(-16deg); }
}

@-webkit-keyframes right-toes {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    75%  { -webkit-transform: rotate(-25deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes left-toes {
    0%   { -webkit-transform: rotate(-10deg); }
    25%  { -webkit-transform: rotate(-25deg); }
    50%  { -webkit-transform: rotate(0deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}
</code>```

Please help me solve this issue. I looked into the other post about this  problem but I am not able to correct it.
Thank you

答:
It's not the z-index that is getting messed up, it's the relative size of the inner divs in relation to the main .me div. You resize .me to 90% of its original size, and then resize all the divs inside as well, so they end up at 81% of their original sizes.

Solution: apply the scale only to the .me and not to the divs in it.

.wrapper {
  position: relative;
}

.me,
.me div {
  background-repeat: no-repeat;
  position: absolute;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.me {
  top: 80px;
  left: 350px;
  transform: scale(0.9);   /* moved here */
}

.torso {
  height: 274px;
  width: 86px;
  background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm {
  left: 12px;
  transform-origin: 20px 10px;
}

.kite {
  width: 395px;
  height: 424px;
  top: -115px;
  left: 0px;
  background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
  transform: rotate(45deg) scale(0.6);
}

.right.bicep {
  width: 51px;
  height: 124px;
  background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}

.left.bicep {
  width: 52px;
  height: 126px;
  background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}

.left.forearm {
  width: 37px;
  height: 124px;
  background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
  transform: rotate(-45deg);
}

.right.forearm {
  width: 36px;
  height: 121px;
  background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
  animation-name: right-forearm;
}

.left.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}

.right.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}

.shin {
  width: 53px;
  height: 173px;
  background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}

.foot {
  width: 67px;
  height: 34px;
  background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}

.toes {
  width: 28px;
  height: 25px;
  background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm {
  top: 93px;
  animation-name: right-bicep;
}

.left.arm {
  top: 87px;
  transform: rotate(-26deg);
}

.forearm {
  top: 108px;
  left: 14px;
  transform-origin: 3px 7px;
}

.leg {
  left: 6px;
  transform-origin: 30px 20px;
  animation-name: thigh;
}

.right.leg {
  top: 235px;
  animation-name: right-thigh;
}

.left.leg {
  top: 225px;
  animation-name: left-thigh;
}

.shin {
  top: 115px;
  transform-origin: 30px 25px;
}

.right.shin {
  animation-name: right-shin;
}

.left.shin {
  animation-name: left-shin;
}

.foot {
  top: 155px;
  left: 2px;
  transform-origin: 0 50%;
}

.right.foot {
  animation-name: right-foot;
}

.left.foot {
  animation-name: left-foot;
}

.toes {
  top: 9px;
  left: 66px;
  transform-origin: 0% 100%;
}

.right.toes {
  animation-name: right-toes;
}

.left.toes {
  animation-name: left-toes;
}

div.right.arm {
  z-index: 1;
}

div.left.arm {
  z-index: -3;
}

div.arm>div.bicep>div.forearm {
  z-index: -1;
}

div.right.leg {
  z-index: -1;
}

div.left.leg {
  z-index: -2;
}

div.leg>div.thigh>div.shin {
  z-index: -1;
}

@keyframes me {
  0% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  25% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  50% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  75% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  100% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
}

@keyframes right-bicep {
  0% {
    transform: rotate(26deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(26deg);
  }
}

/*@keyframes left-bicep {
    0%   { transform: rotate(-20deg); }
    50%  { transform: rotate(26deg); }
    100% { transform: rotate(-20deg); }
}*/

@keyframes right-forearm {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-65deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

/*@keyframes left-forearm {
    0%   { transform: rotate(-45deg); }
    50%  { transform: rotate(-10deg); }
    100% { transform: rotate(-45deg); }
}*/

@keyframes right-thigh {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes left-thigh {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes right-shin {
  0% {
    transform: rotate(30deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(85deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes left-shin {
  0% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(85deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

@keyframes right-foot {
  0% {
    transform: rotate(-5deg);
  }
  25% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(-16deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes left-foot {
  0% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(-16deg);
  }
}

@keyframes right-toes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes left-toes {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="wrapper">

  <div class='me'>

    <div class="torso">
      <div class="left leg">
        <div class="left thigh">
          <div class="left shin">
            <div class="left foot">
              <div class="left toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="right leg">
        <div class="right thigh">
          <div class="right shin">
            <div class="right foot">
              <div class="right toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="left arm">
        <div class="left bicep">
          <div class="left forearm">
            <div class="kite"></div>
          </div>
        </div>
      </div>

      <div class="right arm">
        <div class="right bicep">
          <div class="right forearm"></div>
        </div>
      </div>

    </div>
  </div>
</div></code>```

By the way, some remarks:

// for a comment is an error in CSS. Don't do this. It happens to have no effect in your fiddle, but just look at this fiddle where it goes wrong.

You don't need the vendor prefixes during testing. Remove them and the code works in all browsers. If you want to be backwards compatible with older ones, fine, you can add in the prefixed properties (above the unprefixed ones), but do that after you're done twiddling with them.

Title: Scaling messes up the z-index

Body:
I have a set of absolute divs having background images which contains animation.
when i apply scale property to the divs it messes up my z-index totally
here is the link to the fiddle https://jsfiddle.net/kq2soozp/3/ (Uncomment transform:scale() line)

The HTML Code

The CSS

.me,.me div{
    background-repeat: no-repeat;
    position: absolute;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    //-webkit-transform: scale(0.9);
}
.me{
    top: 80px;
    left: 350px;
    -webkit-animation-name: me;
}
.torso{
    height: 274px;
    width: 86px;
    background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm{
    left: 12px;
    -webkit-transform-origin: 20px 10px;
}

.kite{

    width: 395px;
    height: 424px;
    top: -115px;
    left: 0px;

    background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
    -webkit-transform: rotate(45deg) scale(0.6);

}
.right.bicep{
    width: 51px;
    height: 124px;
    background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
    width: 52px;
    : 126px;
    background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
    width: 37px;
    height: 124px;
    background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
    -webkit-transform: rotate(-45deg);
}
.right.forearm{
    width: 36px;
    height: 121px;
    background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
    -webkit-animation-name: right-forearm;
}
.left.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
    width: 69px;
    height: 144px;
    background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
    width: 53px;
    height: 173px;
    background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
    width: 67px;
    height: 34px;
    background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
    width: 28px;
    height: 25px;
    background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm{
    top: 93px;
    -webkit-animation-name: right-bicep;

}
.left.arm{
    top: 87px;
    -webkit-transform: rotate(-26deg);
}
.forearm{
    top: 108px;
    left: 14px;
    -webkit-transform-origin: 3px 7px;
}
.leg{
    left: 6px;
    -webkit-transform-origin: 30px 20px;
    -webkit-animation-name: thigh;
}
.right.leg{
    top: 235px;
    -webkit-animation-name: right-thigh;
}
.left.leg{
    top:225px;
    -webkit-animation-name: left-thigh;
}
.shin{
    top: 115px;
    -webkit-transform-origin: 30px 25px;
}
.right.shin {
    -webkit-animation-name: right-shin;
}
.left.shin {
    -webkit-animation-name: left-shin;
}
.foot{
    top: 155px;
    left: 2px;
    -webkit-transform-origin: 0 50%;
}
.right.foot {
    -webkit-animation-name: right-foot;
}
.left.foot {
    -webkit-animation-name: left-foot;
}
.toes{
    top: 9px;
    left: 66px;
    -webkit-transform-origin: 0% 100%;
}
.right.toes {
    -webkit-animation-name: right-toes;
}
.left.toes {
    -webkit-animation-name: left-toes;
}
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }

div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }

@-webkit-keyframes me {
    0% { -webkit-transform:   rotate(5deg) translate( 10px,   0px); }
    25% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    50% { -webkit-transform:  rotate(5deg) translate( 10px,   0px); }
    75% { -webkit-transform:  rotate(5deg) translate(-5px, -14px); }
    100% { -webkit-transform: rotate(5deg) translate( 10px,   0px); }
}
@-webkit-keyframes right-bicep {
    0%   { -webkit-transform: rotate(26deg); }
    50%  { -webkit-transform: rotate(-20deg); }
    100% { -webkit-transform: rotate(26deg); }
}

/*@-webkit-keyframes left-bicep {
    0%   { -webkit-transform: rotate(-20deg); }
    50%  { -webkit-transform: rotate(26deg); }
    100% { -webkit-transform: rotate(-20deg); }
}*/

@-webkit-keyframes right-forearm {
    0%   { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-65deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

/*@-webkit-keyframes left-forearm {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}*/

@-webkit-keyframes right-thigh {
    0%   { -webkit-transform: rotate(-45deg); }
    50%  { -webkit-transform: rotate(10deg); }
    100% { -webkit-transform: rotate(-45deg); }
}

@-webkit-keyframes left-thigh {
    0%   { -webkit-transform: rotate(10deg); }
    50%  { -webkit-transform: rotate(-45deg); }
    100% { -webkit-transform: rotate(10deg); }
}

@-webkit-keyframes right-shin {
    0%   { -webkit-transform: rotate(30deg); }
    25%  { -webkit-transform: rotate(20deg); }
    50%  { -webkit-transform: rotate(20deg); }
    75%  { -webkit-transform: rotate(85deg); }
    100% { -webkit-transform: rotate(30deg); }
}

@-webkit-keyframes left-shin {
    0%   { -webkit-transform: rotate(20deg); }
    25%  { -webkit-transform: rotate(85deg); }
    50%  { -webkit-transform: rotate(30deg); }
    75%  { -webkit-transform: rotate(20deg); }
    100% { -webkit-transform: rotate(20deg); }
}

@-webkit-keyframes right-foot {
    0%   { -webkit-transform: rotate(-5deg); }
    25%  { -webkit-transform: rotate(-7deg); }
    50%  { -webkit-transform: rotate(-16deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-5deg); }
}

@-webkit-keyframes left-foot {
    0%   { -webkit-transform: rotate(-16deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-5deg); }
    75%  { -webkit-transform: rotate(-7deg); }
    100% { -webkit-transform: rotate(-16deg); }
}

@-webkit-keyframes right-toes {
    0%   { -webkit-transform: rotate(0deg); }
    25%  { -webkit-transform: rotate(-10deg); }
    50%  { -webkit-transform: rotate(-10deg); }
    75%  { -webkit-transform: rotate(-25deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@-webkit-keyframes left-toes {
    0%   { -webkit-transform: rotate(-10deg); }
    25%  { -webkit-transform: rotate(-25deg); }
    50%  { -webkit-transform: rotate(0deg); }
    75%  { -webkit-transform: rotate(-10deg); }
    100% { -webkit-transform: rotate(-10deg); }
}

Please help me solve this issue. I looked into the other post about this  problem but I am not able to correct it.
Thank you

Body:
It's not the z-index that is getting messed up, it's the relative size of the inner divs in relation to the main .me div. You resize .me to 90% of its original size, and then resize all the divs inside as well, so they end up at 81% of their original sizes.

Solution: apply the scale only to the .me and not to the divs in it.

.wrapper {
  position: relative;
}

.me,
.me div {
  background-repeat: no-repeat;
  position: absolute;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.me {
  top: 80px;
  left: 350px;
  transform: scale(0.9);   /* moved here */
}

.torso {
  height: 274px;
  width: 86px;
  background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}

.arm {
  left: 12px;
  transform-origin: 20px 10px;
}

.kite {
  width: 395px;
  height: 424px;
  top: -115px;
  left: 0px;
  background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
  transform: rotate(45deg) scale(0.6);
}

.right.bicep {
  width: 51px;
  height: 124px;
  background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}

.left.bicep {
  width: 52px;
  height: 126px;
  background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}

.left.forearm {
  width: 37px;
  height: 124px;
  background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
  transform: rotate(-45deg);
}

.right.forearm {
  width: 36px;
  height: 121px;
  background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
  animation-name: right-forearm;
}

.left.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}

.right.thigh {
  width: 69px;
  height: 144px;
  background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}

.shin {
  width: 53px;
  height: 173px;
  background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}

.foot {
  width: 67px;
  height: 34px;
  background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}

.toes {
  width: 28px;
  height: 25px;
  background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}

.right.arm {
  top: 93px;
  animation-name: right-bicep;
}

.left.arm {
  top: 87px;
  transform: rotate(-26deg);
}

.forearm {
  top: 108px;
  left: 14px;
  transform-origin: 3px 7px;
}

.leg {
  left: 6px;
  transform-origin: 30px 20px;
  animation-name: thigh;
}

.right.leg {
  top: 235px;
  animation-name: right-thigh;
}

.left.leg {
  top: 225px;
  animation-name: left-thigh;
}

.shin {
  top: 115px;
  transform-origin: 30px 25px;
}

.right.shin {
  animation-name: right-shin;
}

.left.shin {
  animation-name: left-shin;
}

.foot {
  top: 155px;
  left: 2px;
  transform-origin: 0 50%;
}

.right.foot {
  animation-name: right-foot;
}

.left.foot {
  animation-name: left-foot;
}

.toes {
  top: 9px;
  left: 66px;
  transform-origin: 0% 100%;
}

.right.toes {
  animation-name: right-toes;
}

.left.toes {
  animation-name: left-toes;
}

div.right.arm {
  z-index: 1;
}

div.left.arm {
  z-index: -3;
}

div.arm>div.bicep>div.forearm {
  z-index: -1;
}

div.right.leg {
  z-index: -1;
}

div.left.leg {
  z-index: -2;
}

div.leg>div.thigh>div.shin {
  z-index: -1;
}

@keyframes me {
  0% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  25% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  50% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
  75% {
    transform: rotate(5deg) translate(-5px, -14px);
  }
  100% {
    transform: rotate(5deg) translate( 5px, 0px);
  }
}

@keyframes right-bicep {
  0% {
    transform: rotate(26deg);
  }
  50% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(26deg);
  }
}

/*@keyframes left-bicep {
    0%   { transform: rotate(-20deg); }
    50%  { transform: rotate(26deg); }
    100% { transform: rotate(-20deg); }
}*/

@keyframes right-forearm {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-65deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

/*@keyframes left-forearm {
    0%   { transform: rotate(-45deg); }
    50%  { transform: rotate(-10deg); }
    100% { transform: rotate(-45deg); }
}*/

@keyframes right-thigh {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes left-thigh {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes right-shin {
  0% {
    transform: rotate(30deg);
  }
  25% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(85deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes left-shin {
  0% {
    transform: rotate(20deg);
  }
  25% {
    transform: rotate(85deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(20deg);
  }
}

@keyframes right-foot {
  0% {
    transform: rotate(-5deg);
  }
  25% {
    transform: rotate(-7deg);
  }
  50% {
    transform: rotate(-16deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes left-foot {
  0% {
    transform: rotate(-16deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(-16deg);
  }
}

@keyframes right-toes {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes left-toes {
  0% {
    transform: rotate(-10deg);
  }
  25% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

<div class="wrapper">

  <div class='me'>

    <div class="torso">
      <div class="left leg">
        <div class="left thigh">
          <div class="left shin">
            <div class="left foot">
              <div class="left toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="right leg">
        <div class="right thigh">
          <div class="right shin">
            <div class="right foot">
              <div class="right toes"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="left arm">
        <div class="left bicep">
          <div class="left forearm">
            <div class="kite"></div>
          </div>
        </div>
      </div>

      <div class="right arm">
        <div class="right bicep">
          <div class="right forearm"></div>
        </div>
      </div>

    </div>
  </div>
</div>

By the way, some remarks:

// for a comment is an error in CSS. Don't do this. It happens to have no effect in your fiddle, but just look at this fiddle where it goes wrong.

You don't need the vendor prefixes during testing. Remove them and the code works in all browsers. If you want to be backwards compatible with older ones, fine, you can add in the prefixed properties (above the unprefixed ones), but do that after you're done twiddling with them.


问:
SVG circle animation
I am trying to make a circle animation,

I currently have this: http://jsfiddle.net/gf327jxu/1/

```<code><svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="40" />
</svg>
</code>```

css:

```<code>.circle{
stroke:green;
stroke-width:10;
fill:none;
}
</code>```

I want it animated like a circle progress, something like this: http://jsfiddle.net/andsens/mLA7X/  but in SVG,
And I need it to be clockwise, how can I achieve this, and is this even possible?

答:
```<code><!DOCTYPE html>
<html>
    <head>
        <title>svg circle animation</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #XMLID_4_{
                stroke-dasharray: 1000;
                stroke-dashoffset: 2000;
                fill: #FFFFFF;
                stroke: #000000;
            }
            svg:hover #XMLID_4_{
                -webkit-animation: draw 3s forwards;
                animation: draw 3s;
            }
            @keyframes draw{
                from{
                    stroke-dashoffset: 1000;
                    fill:#efefef;
                    stroke:#ff5535;
                }
                to{
                    stroke-dashoffset: 0;
                }
            }
            @-webkit-keyframes draw{
                from{
                    stroke:#ff5535;
                    stroke-dashoffset: 1000;
                }
                to{
                    stroke-dashoffset: 0;
                }
            }
        </style>
    </head>
    <body>
        <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
        <g>
        <circle id="XMLID_4_"  stroke-width="3" stroke-miterlimit="10" cx="366.5" cy="135.6" r="44.7"/>
        </g>
        </svg>
    </body>
</html>
</code>```

Title: SVG circle animation

Body:
I am trying to make a circle animation,

I currently have this: http://jsfiddle.net/gf327jxu/1/

<svg width="100" height="100" class="circle">
   <circle cx="50" cy="50" r="40" />
</svg>

css:

.circle{
stroke:green;
stroke-width:10;
fill:none;
}

I want it animated like a circle progress, something like this: http://jsfiddle.net/andsens/mLA7X/  but in SVG,
And I need it to be clockwise, how can I achieve this, and is this even possible?


问:
Use composer based library without composer wrapped in class of same name?
I'm trying to use the PHPMoney library, wrapped in my own class called Money. The main application does not use namespaces and I have no desire to. I've placed the src files for PHPMoney in a folder, and am trying to include them in a way that their money class doesn't interfere with my money class, and without modifying any of their code. I'm not using composer.

I'm trying this:

```<code>require __APP_PATH_VAR.'MoneyPHP/Money.php';
require __APP_PATH_VAR.'MoneyPHP/Currency.php';

use Money\Currency;
use Money\Money;

// Create my own wrapper class called Money
class Money {

   protected $oPHPMoney;

   public function __construct($Amount,$Currency='USD'){
      $this->oPHPMoney =new Money\Money($Amount, new Currency($Currency));
   }

}
</code>```

Which tells me I Cannot declare class Money because the name is already in use.

How do I include their library without it interfering with my global namespace classes?

答:
Import Money\Money with an aliased name.

E.g.:

```<code>use Money\Money as Money2;
</code>```

And then:

```<code>public function __construct($amount, $currency='USD'){
  $this->oPHPMoney =new Money2($amount, new Currency($currency));
}
</code>```

Body:
I'm trying to use the PHPMoney library, wrapped in my own class called Money. The main application does not use namespaces and I have no desire to. I've placed the src files for PHPMoney in a folder, and am trying to include them in a way that their money class doesn't interfere with my money class, and without modifying any of their code. I'm not using composer.

I'm trying this:

require __APP_PATH_VAR.'MoneyPHP/Money.php';
require __APP_PATH_VAR.'MoneyPHP/Currency.php';

use Money\Currency;
use Money\Money;

// Create my own wrapper class called Money
class Money {

   protected $oPHPMoney;

   public function __construct($Amount,$Currency='USD'){
      $this->oPHPMoney =new Money\Money($Amount, new Currency($Currency));
   }

}

Which tells me I Cannot declare class Money because the name is already in use.

How do I include their library without it interfering with my global namespace classes?

Body:
Import Money\Money with an aliased name.

E.g.:

use Money\Money as Money2;

And then:

public function __construct($amount, $currency='USD'){
  $this->oPHPMoney =new Money2($amount, new Currency($currency));
}


问:
How to insert an imageView to a tableView, so that the image view scrolls as I scroll the tableview
How to insert an imageView to a tableView, so that the image view scrolls as I scroll the tableview?
I added a imageview to tableview using the method tableview.addsubview, but when I scroll the tableview, the image view is floating. It will not move as I scroll these cells. Otherwise, the image is created by UIGraphics.

```<code>let image = UIGraphicsGetImageFromCurrentImageContext()
tableview.addSubview(UIImageView(image: image))
</code>```

enter image description here

The image is about all cells. There are some lines in the image. Each line is from the point of last label in cell to the point of next label in next cell. So, I hope that the image is cover all cells.

答:
You need to add the image to a cell, not to the tableview. If you add it to the tableview it will float because you are actually scrolling the Cells and not the tableview itself.

So in your tableView delegate method where you are constructing your cells you should add the imageview.

Body:
How to insert an imageView to a tableView, so that the image view scrolls as I scroll the tableview?
I added a imageview to tableview using the method tableview.addsubview, but when I scroll the tableview, the image view is floating. It will not move as I scroll these cells. Otherwise, the image is created by UIGraphics.

let image = UIGraphicsGetImageFromCurrentImageContext()
tableview.addSubview(UIImageView(image: image))

enter image description here

The image is about all cells. There are some lines in the image. Each line is from the point of last label in cell to the point of next label in next cell. So, I hope that the image is cover all cells.


问:
Angular2: HammerJS swipe for md-tab-group
I've implemented HammerJS in my Angular2 webapp and I've also tested the example code out. This code uses an Array of objects and seems to work flawlessly. However, I've been trying to implement the same system for @angular2-material/tabs. Therefore I have a <md-tab-group> with multiple <md-tab>'s which should swipe from tab to tab. Problem is that I can't even trigger the swipe function.

HTML-File:

```<code><md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
      <div class="swipe-box" (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
        <md-tab>
           (...) //Content Tab 1
        </md-tab>
        <md-tab>
           (...) //Content Tab 2
        </md-tab>
      </div>
</md-tab-group>
</code>```

In the example can be seen that *ngFor is used like *ngFor="let avatar of avatars; let idx=index" for the  swipe-box-
. But since I'm getting my index from the <md-tab-group> it doesn't seem neccesary and even when I include it, my event isn't triggered but my <md-tab>-content becomes hidden. Therefore I left it out. I did leave the idx parameter in the function because the swipe method expects a number (second parameter is optional). Documentation

For the TypeScript-file I've implemented the following code (some code might not work but haven't been able to test it since the swipe method doesn't get called).

TS-File:

```<code>export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("event triggered INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    console.log("swiped"); //DOES NOT GET TRIGGERD
    // Out of range
    if (selectedIndex < 0 || selectedIndex > 1 ) return;

    let nextIndex = 0;
    // Swipe right, next tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isLast = selectedIndex === 1;
      nextIndex = isLast ? 0 : selectedIndex + 1;
      console.log("swipe right");
    }

    // Swipe left, previous tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isFirst = selectedIndex === 0;
      nextIndex = isFirst ? 1 : selectedIndex - 1;
      console.log("swipe left");
    }
  }
}
</code>```

Live demo of what HammerJS does and yes, I've implemented the script needed in the index.html

```<code><!-- Hammer JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
</code>```

答:
The problem appeared to be that the swipe-event is used in the wrong
. The event needs to be triggered in the parent
. here's the working code:

HTML-File:

```<code><div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
   <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
           <md-tab>
              (...) //Content Tab 1
           </md-tab>
           <md-tab>
              (...) //Content Tab 2
           </md-tab>
   </md-tab-group>
</div
</code>```

TS-File:

```<code>export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("Selected INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    // Out of range
    if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return;

    // Swipe left, next tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isLast = this.selectedIndex === 1;
      this.selectedIndex = isLast ? 0 : this.selectedIndex + 1;
      console.log("Swipe right - INDEX: " + this.selectedIndex);
    }

    // Swipe right, previous tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isFirst = this.selectedIndex === 0;
      this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1;
      console.log("Swipe left - INDEX: " + this.selectedIndex);
    }
  }
}
</code>```

Body:
I've implemented HammerJS in my Angular2 webapp and I've also tested the example code out. This code uses an Array of objects and seems to work flawlessly. However, I've been trying to implement the same system for @angular2-material/tabs. Therefore I have a <md-tab-group> with multiple <md-tab>'s which should swipe from tab to tab. Problem is that I can't even trigger the swipe function.

HTML-File:

<md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">

        <md-tab>
           (...) //Content Tab 1
        </md-tab>
        <md-tab>
           (...) //Content Tab 2
        </md-tab>

</md-tab-group>

In the example can be seen that *ngFor is used like *ngFor="let avatar of avatars; let idx=index" for the  swipe-box-
. But since I'm getting my index from the <md-tab-group> it doesn't seem neccesary and even when I include it, my event isn't triggered but my <md-tab>-content becomes hidden. Therefore I left it out. I did leave the idx parameter in the function because the swipe method expects a number (second parameter is optional). Documentation

For the TypeScript-file I've implemented the following code (some code might not work but haven't been able to test it since the swipe method doesn't get called).

TS-File:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("event triggered INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    console.log("swiped"); //DOES NOT GET TRIGGERD
    // Out of range
    if (selectedIndex < 0 || selectedIndex > 1 ) return;

    let nextIndex = 0;
    // Swipe right, next tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isLast = selectedIndex === 1;
      nextIndex = isLast ? 0 : selectedIndex + 1;
      console.log("swipe right");
    }

    // Swipe left, previous tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isFirst = selectedIndex === 0;
      nextIndex = isFirst ? 1 : selectedIndex - 1;
      console.log("swipe left");
    }
  }
}

Live demo of what HammerJS does and yes, I've implemented the script needed in the index.html

Body:
The problem appeared to be that the swipe-event is used in the wrong <div>. The event needs to be triggered in the parent <div>. here's the working code:

HTML-File:

<div class="md-content" flex md-scroll-y (swipeleft)="swipe(idx, $event.type)" (swiperight)="swipe(idx, $event.type)">
   <md-tab-group md-stretch-tabs [(selectedIndex)]="selectedIndex" (selectedIndexChange)="selectChange()">
           <md-tab>
              (...) //Content Tab 1
           </md-tab>
           <md-tab>
              (...) //Content Tab 2
           </md-tab>
   </md-tab-group>
</div

TS-File:

export class HomeComponent {

  selectedIndex: number = 1;

  selectChange(): void{
    console.log("Selected INDEX: " + this.selectedIndex);
  }

  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };

  // Action triggered when user swipes
  swipe(selectedIndex: number, action = this.SWIPE_ACTION.RIGHT) {
    // Out of range
    if (this.selectedIndex < 0 || this.selectedIndex > 1 ) return;

    // Swipe left, next tab
    if (action === this.SWIPE_ACTION.LEFT) {
      const isLast = this.selectedIndex === 1;
      this.selectedIndex = isLast ? 0 : this.selectedIndex + 1;
      console.log("Swipe right - INDEX: " + this.selectedIndex);
    }

    // Swipe right, previous tab
    if (action === this.SWIPE_ACTION.RIGHT) {
      const isFirst = this.selectedIndex === 0;
      this.selectedIndex = isFirst ? 1 : this.selectedIndex - 1;
      console.log("Swipe left - INDEX: " + this.selectedIndex);
    }
  }
}


问:
Java ArrayList Index
```<code>int[] alist = new int [3];
alist.add("apple");
alist.add("banana");
alist.add("orange");
</code>```

Say that I want to use the second item in the ArrayList. What is the coding in order to get the following output?

output:

banana

答:
Read more about  Array and ArrayList

```<code>List<String> aList = new ArrayList<String>();
aList.add("apple");
aList.add("banana");
aList.add("orange");
String result = alist.get(1);  //this will retrieve banana
</code>```

Note: Index starts from 0 i.e. Zero

Resource

Title: Java ArrayList Index

Body:
int[] alist = new int [3];
alist.add("apple");
alist.add("banana");
alist.add("orange");

Say that I want to use the second item in the ArrayList. What is the coding in order to get the following output?

output:

banana

Body:
Read more about  Array and ArrayList

List<String> aList = new ArrayList<String>();
aList.add("apple");
aList.add("banana");
aList.add("orange");
String result = alist.get(1);  //this will retrieve banana

Note: Index starts from 0 i.e. Zero

Resource