问:
How to inherit privately from a base class' derivative, but implement public interface of the base class?
Suppose there are two unchangeable classes from a library, A and B, related like here:

```<code>class A
{
public:
    virtual void doCustomThings() = 0;
    virtual void doOtherThings() = 0;
    void doSomething();
private:
    SomeType1 someData;
};

class B : public A
{
public:
    void doCustomThings() override;
    void doOtherThings() override;
    void someUsefulUtility();
private:
    SomeType2 otherData;
};
</code>```

I'm trying to implement the interface of A in terms of the some available in B, so I do:

```<code>class C : public B
{
public:
    void doCustomThings() override; // uses B::someUsefulUtility()
    // leave B::doOtherThings() not overridden
private:
    SomeType3 myData;
};
</code>```

But I don't intend C to be B, i.e. I don't want references to C to be implicitly convertible to B&, although it should be convertible to A&.

First thing coming to mind is to use virtual inheritance, and then inherit public A, private B. But the A and B classes in my case are not editable, and for virtual inheritance to work here I need class B to inherit as public virtual A.

Another idea is to consider composition instead of inheritance. But if I derive from A and have B as a private member, I'll uselessly have A::someData twice, which looks inelegant.

Is there any good way to so something like class C : public A, private B, so that there'd be only one base class A, given the above mentioned constraints?

答:
Yes, use private inheritance and exposed the desired members with using.

```<code>class C : private B
{
public:
    using B::A;// to make it convertible to A
    using B::doOtherThings;

    void doCustomThings() override {
        std::cout<<"C::doCustomThings()\n";
    }
private:
    char myData;
};
</code>```

Working example.

Body:
Suppose there are two unchangeable classes from a library, A and B, related like here:

class A
{
public:
    virtual void doCustomThings() = 0;
    virtual void doOtherThings() = 0;
    void doSomething();
private:
    SomeType1 someData;
};

class B : public A
{
public:
    void doCustomThings() override;
    void doOtherThings() override;
    void someUsefulUtility();
private:
    SomeType2 otherData;
};

I'm trying to implement the interface of A in terms of the some available in B, so I do:

class C : public B
{
public:
    void doCustomThings() override; // uses B::someUsefulUtility()
    // leave B::doOtherThings() not overridden
private:
    SomeType3 myData;
};

But I don't intend C to be B, i.e. I don't want references to C to be implicitly convertible to B&, although it should be convertible to A&.

First thing coming to mind is to use virtual inheritance, and then inherit public A, private B. But the A and B classes in my case are not editable, and for virtual inheritance to work here I need class B to inherit as public virtual A.

Another idea is to consider composition instead of inheritance. But if I derive from A and have B as a private member, I'll uselessly have A::someData twice, which looks inelegant.

Is there any good way to so something like class C : public A, private B, so that there'd be only one base class A, given the above mentioned constraints?

Body:
Yes, use private inheritance and exposed the desired members with using.

class C : private B
{
public:
    using B::A;// to make it convertible to A
    using B::doOtherThings;

    void doCustomThings() override {
        std::cout<<"C::doCustomThings()\n";
    }
private:
    char myData;
};

Working example.


来源: stackexchange

问:
MFC - D3DCOLORVALUE undefined in base MFC application
I'm using Visual Studio 2013 to create a new MFC Application.
I created the application using the setup wizard, left it on all the default values.

When testing if it even runs before adding anything it gave the compile error:

IntelliSense: identifier "D3DCOLORVALUE" is undefined

followed by a lot of:

error C4430: missing type specifier - int assumed. Note: C++ does not support default-int

Why would this be happening in a stock standard application straight out of the wizard? And how would I get this working?

答:
d2dbasetypes.h was giving the error when trying to define D2D_COLOR_F.
I googled the base type (D3DCOLORVALUE) and found that it's supposed to be in "D3D9Types.h"

I added #include "D3D9Types.h" to the top of the d2dbasetypes header file and it seems to have fixed the problem.

I don't know why this isn't included in the generated code by default...

ContentLicense: CC BY-SA 3.0


问:
How to compulsory close message box for Toplevel window
image for  that
I have few lines of code here which is login system which works fine but i can click on the Toplevel button multiple times when i provide the wrong password without closing the messagebox.How can i make it so that it has to be closed messagebox before i can make attempt again.

```<code>from tkinter import *
from tkinter import messagebox

def top():
    if entry1.get() == "333":
       log.destroy()
       root.deiconify()
    else:
       messagebox.showerror("error", "try again")

root = Tk()
root.geometry("300x300")

log = Toplevel(root)
log.geometry("200x200")

label1 = Label(log, text="password")
entry1 = Entry(log)
button1 = Button(log, text="login", command=top)

label1.pack()
entry1.pack()
button1.pack(side="bottom")

lab = Label(root, text="welcome bro").pack()

root.withdraw()
root.mainloop()
</code>```

答:
With hint from @furas this how to implement this:

create another function to the call it when the entry doesn't match  and use  grab_set method  for the Toplevel window tp.grab_set().You can add your customarised image to the Toplevel window as well as message to display in the box(here: i use label to depict that)

```<code>from tkinter import *
from tkinter import messagebox

def dialog():  #  this function to call when entry doesn't match
    tp = Toplevel(log)
    tp.geometry("300x100")
    tp.title('error')
    tp.grab_set()  # to bring the focus to the window for you to close it
    tp.resizable(width=False, height=False)
    l = Label(tp, text="try again\n\n\n\n add your customarize image to the window")
    l.pack()

def top():
    if entry1.get() == "333":
    log.destroy()
    root.deiconify()
else:
    dialog()  # being called here

root = Tk()
root.geometry("300x300")

log = Toplevel(root)
log.geometry("200x200")

label1 = Label(log, text="password")
entry1 = Entry(log)
button1 = Button(log, text="login", command=top)

label1.pack()
entry1.pack()
button1.pack(side="bottom")

lab = Label(root, text="welcome bro").pack()

root.withdraw()

root.mainloop()
</code>```

Body:
image for  that
I have few lines of code here which is login system which works fine but i can click on the Toplevel button multiple times when i provide the wrong password without closing the messagebox.How can i make it so that it has to be closed messagebox before i can make attempt again.

from tkinter import *
from tkinter import messagebox

def top():
    if entry1.get() == "333":
       log.destroy()
       root.deiconify()
    else:
       messagebox.showerror("error", "try again")

root = Tk()
root.geometry("300x300")

log = Toplevel(root)
log.geometry("200x200")

label1 = Label(log, text="password")
entry1 = Entry(log)
button1 = Button(log, text="login", command=top)

label1.pack()
entry1.pack()
button1.pack(side="bottom")

lab = Label(root, text="welcome bro").pack()

root.withdraw()
root.mainloop()

Body:
With hint from @furas this how to implement this:

create another function to the call it when the entry doesn't match  and use  grab_set method  for the Toplevel window tp.grab_set().You can add your customarised image to the Toplevel window as well as message to display in the box(here: i use label to depict that)

from tkinter import *
from tkinter import messagebox

def dialog():  #  this function to call when entry doesn't match
    tp = Toplevel(log)
    tp.geometry("300x100")
    tp.title('error')
    tp.grab_set()  # to bring the focus to the window for you to close it
    tp.resizable(width=False, height=False)
    l = Label(tp, text="try again\n\n\n\n add your customarize image to the window")
    l.pack()

def top():
    if entry1.get() == "333":
    log.destroy()
    root.deiconify()
else:
    dialog()  # being called here

root = Tk()
root.geometry("300x300")

log = Toplevel(root)
log.geometry("200x200")

label1 = Label(log, text="password")
entry1 = Entry(log)
button1 = Button(log, text="login", command=top)

label1.pack()
entry1.pack()
button1.pack(side="bottom")

lab = Label(root, text="welcome bro").pack()

root.withdraw()

root.mainloop()


问:
Evaluation order of function declarations
With the following code, which is neither ES6, nor is it in "strict mode", I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one. But the outcome is 'a'!

```<code>{
  function foo() {
    console.log('a');
  }
}

function foo() {
  console.log('b');
}

foo(); // 'a' ? Why not 'b'?
</code>```

When this code is surrounded with additional curly braces, the outcome is the expected 'b'.

```<code>{ // additional curly braces

  {
    function foo() {
      console.log('a');
    }
  }

  function foo() {
    console.log('b');
  }

  foo(); // 'b' as expected!

} // end additional curly braces
</code>```

For further illustration, please consider the following additional example:

```<code>foo('before declaration'); // outcome:  from outside block :before declaration

{
  function foo(s) {
    console.log('from inside block: ' + s);
  }
}

function foo(s) {
  console.log('from outside block :' + s);
}

foo('after declaration'); // outcome:  from inside block: after declaration
</code>```

In my opinion the correct outcome should be:

```<code>// from outside block :before declaration
// from outside block :after declaration
</code>```

I'm unable to spot my misconception here.

If I again enclose the complete last example inside curly brackets like so:

```<code>{
  foo('before declaration'); // outcome:  from outside block :before declaration

  {
    function foo(s) {
      console.log('from inside block: ' + s);
    }
  }

  function foo(s) {
    console.log('from outside block :' + s);
  }

  foo('after declaration'); // outcome:  from outside block: after declaration
}
</code>```

I get the expected outcome.

答:
I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one.

No, it's not that the second declaration should overwrite the first one. The expected outcome would be 'b' because the first declaration is contained in its own (block) scope and would not affect the outer scope.

But the outcome is 'a'! Why not 'b'????

Because you are not executing the code in strict mode (you really should!). And in sloppy mode, web browsers behave weird to be compatible with older engines that treated the then-illegal function statements in ES5 specially.

So what is happening here? The block-scoped function declaration does, when the statement is evaluated, assign the function to a top-level variable of the same name. (That happens in addition to the normal scoped (and "hoisted") declaration).

Your first example therefore behaves like

```<code>var foo₀; // the top-level implicit introduction of the inner declaration
var foo₀ = function foo() { console.log('b'); } // the hoisted declaration
foo()₀; // logs 'b'
{
  let foo₁ = function foo() { console.log('a'); } // the (hoisted) inner declaration
  foo₀ = foo₁; // the weirdness!
  // a call to `foo()` in here would get you foo₁ from the local scope
}
foo()₀; // logs 'a'
</code>```

Your second example behaves as

```<code>var foo₀; // the top-level implicit introduction of the first declaration
var foo₀; // the top-level implicit introduction of the second declaration
{
  let foo₁ = function foo() { console.log('b'); } // the (hoisted) second declaration
  foo()₁; // logs 'b'
  {
    let foo₂ = function foo() { console.log('a'); } // the (hoisted) first declaration
    foo₀ = foo₂; // the weirdness!
    // a call to `foo()` in here would get you foo₂ from the local scope
  }
  foo₀ = foo₁; // the weirdness!
  foo₁() // logs 'b' (as expected) - a call in here does get you foo₁ from the local scope
}
// a call to `foo()` out here would get you foo₀ from the top scope
</code>```

ContentLicense: CC BY-SA 4.0

Body:
With the following code, which is neither ES6, nor is it in "strict mode", I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one. But the outcome is 'a'!

{
  function foo() {
    console.log('a');
  }
}

function foo() {
  console.log('b');
}

foo(); // 'a' ? Why not 'b'?

When this code is surrounded with additional curly braces, the outcome is the expected 'b'.

{ // additional curly braces

  {
    function foo() {
      console.log('a');
    }
  }

  function foo() {
    console.log('b');
  }

  foo(); // 'b' as expected!

} // end additional curly braces

For further illustration, please consider the following additional example:

foo('before declaration'); // outcome:  from outside block :before declaration

{
  function foo(s) {
    console.log('from inside block: ' + s);
  }
}

function foo(s) {
  console.log('from outside block :' + s);
}

foo('after declaration'); // outcome:  from inside block: after declaration

In my opinion the correct outcome should be:

// from outside block :before declaration
// from outside block :after declaration

I'm unable to spot my misconception here.

If I again enclose the complete last example inside curly brackets like so:

{
  foo('before declaration'); // outcome:  from outside block :before declaration

  {
    function foo(s) {
      console.log('from inside block: ' + s);
    }
  }

  function foo(s) {
    console.log('from outside block :' + s);
  }

  foo('after declaration'); // outcome:  from outside block: after declaration
}

I get the expected outcome.

Body:
I had expected an outcome of 'b' because the second declaration of foo should overwrite the first one.

No, it's not that the second declaration should overwrite the first one. The expected outcome would be 'b' because the first declaration is contained in its own (block) scope and would not affect the outer scope.

But the outcome is 'a'! Why not 'b'????

Because you are not executing the code in strict mode (you really should!). And in sloppy mode, web browsers behave weird to be compatible with older engines that treated the then-illegal function statements in ES5 specially.

So what is happening here? The block-scoped function declaration does, when the statement is evaluated, assign the function to a top-level variable of the same name. (That happens in addition to the normal scoped (and "hoisted") declaration).

Your first example therefore behaves like

var foo₀; // the top-level implicit introduction of the inner declaration
var foo₀ = function foo() { console.log('b'); } // the hoisted declaration
foo()₀; // logs 'b'
{
  let foo₁ = function foo() { console.log('a'); } // the (hoisted) inner declaration
  foo₀ = foo₁; // the weirdness!
  // a call to `foo()` in here would get you foo₁ from the local scope
}
foo()₀; // logs 'a'

Your second example behaves as

var foo₀; // the top-level implicit introduction of the first declaration
var foo₀; // the top-level implicit introduction of the second declaration
{
  let foo₁ = function foo() { console.log('b'); } // the (hoisted) second declaration
  foo()₁; // logs 'b'
  {
    let foo₂ = function foo() { console.log('a'); } // the (hoisted) first declaration
    foo₀ = foo₂; // the weirdness!
    // a call to `foo()` in here would get you foo₂ from the local scope
  }
  foo₀ = foo₁; // the weirdness!
  foo₁() // logs 'b' (as expected) - a call in here does get you foo₁ from the local scope
}
// a call to `foo()` out here would get you foo₀ from the top scope


问:
SQL Server Get only Date form column with Date and Time
I have been trying to get only date from a column with date and time.

Here is a sample:

```<code>Select BDATE
from PersonData
</code>```

Current output:

```<code>1977-12-05 15:40:54.000
</code>```

Desired output:

```<code>1977-12-05
</code>```

How can I use the CONVERT date from datetime?

Thanks in advance

答:
Just use Cast;

```<code>Select cast(BDATE as Date) BDATE from PersonData
</code>```

Also, you can use Convert function

```<code>Select convert(Date,BDATE) BDATE from PersonData
</code>```

If you don't want special conversation styles, I suggest you to use Cast instead of Convert for simple type conversations.

Body:
I have been trying to get only date from a column with date and time.

Here is a sample:

Select BDATE
from PersonData

Current output:

1977-12-05 15:40:54.000

Desired output:

1977-12-05

How can I use the CONVERT date from datetime?

Thanks in advance

Body:
Just use Cast;

Select cast(BDATE as Date) BDATE from PersonData

Also, you can use Convert function

Select convert(Date,BDATE) BDATE from PersonData

If you don't want special conversation styles, I suggest you to use Cast instead of Convert for simple type conversations.


问:
Eloquent updateOrCreate not updating
I am having trouble using updateOrCreate.

The below code is SUCCESSFULLY creating a new row; however when it comes to updating an existing row it doesn't work at all!

```<code>comm_helpful::updateOrCreate(
           ['ID' => 1],
           ['time' => 3000]
        );
</code>```

This works exactly as expected:

```<code>comm_helpful::where('ID', 1)->update(['time' => 3000]);
</code>```

I've stripped the examples above back to bare minimums (which I did as part of debugging) and it's still not working!!

答:
Ok, after almost completely pulling my hair out; I found the problem where Eloquent is setting:

```<code>protected $primaryKey = 'id';
</code>```

which is used on the update method and returned by getKeyName().

```<code>protected function setKeysForSaveQuery(Builder $query)
{

    $query->where($this->getKeyName(), '=', $this->getKeyForSaveQuery());

    return $query;
}
</code>```

I then realised my 'id' on the tale was uppercase and not lower case!

I guess that means my answer is that I need to ensure I am using lowercase 'id' for the primary key or overriding it on the Model

```<code>protected $primaryKey = 'ID';
</code>```

Title: Eloquent updateOrCreate not updating

Body:
I am having trouble using updateOrCreate.

The below code is SUCCESSFULLY creating a new row; however when it comes to updating an existing row it doesn't work at all!

comm_helpful::updateOrCreate(
           ['ID' => 1],
           ['time' => 3000]
        );

This works exactly as expected:

comm_helpful::where('ID', 1)->update(['time' => 3000]);

I've stripped the examples above back to bare minimums (which I did as part of debugging) and it's still not working!!

Body:
Ok, after almost completely pulling my hair out; I found the problem where Eloquent is setting:

protected $primaryKey = 'id';

which is used on the update method and returned by getKeyName().

protected function setKeysForSaveQuery(Builder $query)
{

    $query->where($this->getKeyName(), '=', $this->getKeyForSaveQuery());

    return $query;
}

I then realised my 'id' on the tale was uppercase and not lower case!

I guess that means my answer is that I need to ensure I am using lowercase 'id' for the primary key or overriding it on the Model

protected $primaryKey = 'ID';


问:
My content is exceeding the background color in the section
I have 3 section in the site and each section I am displaying the 100% height so that section will display full screen.

In the first and the second section I have some limited content but in the third section, I have more than 500 lines.

In the first and second section is working because of less content.
My issue is in the third section. You can check my content is exceeding the background color that.

I need whole background color to my content.

 html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section></code>```

答:
Just remove height: 100%; from section tag. check updated snippet below..

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section></code>```

Body:
I have 3 section in the site and each section I am displaying the 100% height so that section will display full screen.

In the first and the second section I have some limited content but in the third section, I have more than 500 lines.

In the first and second section is working because of less content.
My issue is in the third section. You can check my content is exceeding the background color that.

I need whole background color to my content.

 html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Body:
Just remove height: 100%; from section tag. check updated snippet below..

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
  }
  .one_bg{
    background-color: #ff0000;
  }
  .two_bg{
    background-color: #3cd515;
  }
  .three_bg{
    background-color: #0000ff;
  }

<section class="one_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>
<section class="two_bg">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>

<section class="three_bg">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</section>


问:
How can I properly exit a while loop with 'cin' in the conditional expression?(C++, CLion)
I'm pretty new to C++ and having trouble with this simple code:

```<code>#include <iostream>
using namespace std;

int main() {
  int NumberOfNonBlanks = 0;
  int NumberOfUpperCase = 0;
  char c;
  while (cin >> c) {
    ++NumberOfNonBlanks;
    if ((c>='A' && (c <= 'Z'))) {
      ++NumberOfUpperCase;
    }
  }
  cout << "Nonblank characters : " << NumberOfNonBlanks << endl
       << "Uppercase characters : " << NumberOfUpperCase << endl;
}
</code>```

My operating system is Windows, and Ctrl+D seems to exit the loop (Ctrl+Z isn't doing anything), but the problem is that it ends the whole program as well. Thus, my last line in the code isn't doing anything... For example if I put in input as:

```<code>BLUE
</code>```

then press Ctrl+D, the program finishes immediately with return value 0.

Any help would be appreciated why this keeps happening. Thanks!

-------------EDIT-----------------

There has been some arguments that ctrl + z does not indicate EOF for CLion (operating on windows) at the moment. Does anyone know any solutions for CLion in this case?

答:
Ctrl + D means EOF, but it only work in Linux, and if you want to send EOF to your program in windows or cmd, you need to use Ctrl+Z, you can see more from this question Ctrl+D doesn't stop application from executing in command window

And Ctrl+Z work fine in my windows with code::block IDE

Body:
I'm pretty new to C++ and having trouble with this simple code:

#include <iostream>
using namespace std;

int main() {
  int NumberOfNonBlanks = 0;
  int NumberOfUpperCase = 0;
  char c;
  while (cin >> c) {
    ++NumberOfNonBlanks;
    if ((c>='A' && (c <= 'Z'))) {
      ++NumberOfUpperCase;
    }
  }
  cout << "Nonblank characters : " << NumberOfNonBlanks << endl
       << "Uppercase characters : " << NumberOfUpperCase << endl;
}

My operating system is Windows, and Ctrl+D seems to exit the loop (Ctrl+Z isn't doing anything), but the problem is that it ends the whole program as well. Thus, my last line in the code isn't doing anything... For example if I put in input as:

BLUE

then press Ctrl+D, the program finishes immediately with return value 0.

Any help would be appreciated why this keeps happening. Thanks!

-------------EDIT-----------------

There has been some arguments that ctrl + z does not indicate EOF for CLion (operating on windows) at the moment. Does anyone know any solutions for CLion in this case?


问:
How to create a Android notification with support to older API levels (e.g. lvl 23)
Maybe this issue is way simpler than I expected it to be: I want to display a notification, created within the onCreate function of an Activity (for debugging reasons).

Android Studio 3.0.1, Api lvl 23 (to support older devices) and running on a Nexus5 device with Api lvl 27.

The Code to display a notification:

```<code>    PendingIntent pi = PendingIntent.getActivity(this, 0, new Intent(this, MainActivity.class), 0);
    Notification notification = new NotificationCompat.Builder(this)
            .setTicker("SomethingTicker")
            .setSmallIcon(R.drawable.someImage)
            .setContentTitle("SomeTitle")
            .setContentText("SomeText")
            .setContentIntent(pi)
            .build();

    NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    notificationManager.notify(001, notification);
</code>```

Which shows that NotificationCompat.Builder with only the the context is deprecated. I should use a Notification Channel within the newer version.

The issue: To create and register a NotificationChannel I have to use api lvl >27.

What am I missing? And what is the best way

答:
I want to display a notification, created within the onCreate function of an Activity.

Note that this is an odd time to display a Notification.

What am I missing?

You need code to create the NotificationChannel that will only run on Android 8.0+ devices:

```<code>NotificationManager mgr=
  (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.O &&
  mgr.getNotificationChannel(CHANNEL_WHATEVER)==null) {
  mgr.createNotificationChannel(new NotificationChannel(CHANNEL_WHATEVER,
    "Whatever", NotificationManager.IMPORTANCE_DEFAULT));
}
</code>```

Then, for all API levels, pass in your channel identifier (here, CHANNEL_WHATEVER) to the NotificationCompat.Builder constructor. On older devices, the channel will be ignored.

Body:
Maybe this issue is way simpler than I expected it to be: I want to display a notification, created within the onCreate function of an Activity (for debugging reasons).

Android Studio 3.0.1, Api lvl 23 (to support older devices) and running on a Nexus5 device with Api lvl 27.

The Code to display a notification:

    PendingIntent pi = PendingIntent.getActivity(this, 0, new Intent(this, MainActivity.class), 0);
    Notification notification = new NotificationCompat.Builder(this)
            .setTicker("SomethingTicker")
            .setSmallIcon(R.drawable.someImage)
            .setContentTitle("SomeTitle")
            .setContentText("SomeText")
            .setContentIntent(pi)
            .build();

    NotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    notificationManager.notify(001, notification);

Which shows that NotificationCompat.Builder with only the the context is deprecated. I should use a Notification Channel within the newer version.

The issue: To create and register a NotificationChannel I have to use api lvl >27.

What am I missing? And what is the best way

Body:
I want to display a notification, created within the onCreate function of an Activity.

Note that this is an odd time to display a Notification.

What am I missing?

You need code to create the NotificationChannel that will only run on Android 8.0+ devices:

NotificationManager mgr=
  (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

if (Build.VERSION.SDK_INT>=Build.VERSION_CODES.O &&
  mgr.getNotificationChannel(CHANNEL_WHATEVER)==null) {
  mgr.createNotificationChannel(new NotificationChannel(CHANNEL_WHATEVER,
    "Whatever", NotificationManager.IMPORTANCE_DEFAULT));
}

Then, for all API levels, pass in your channel identifier (here, CHANNEL_WHATEVER) to the NotificationCompat.Builder constructor. On older devices, the channel will be ignored.


问:
Actionscript 2 particles
I know this is old technology but I just want to an update to a flash xmas card I send out. Basically I use particles script (found below) that follows my mouse and spews out some gold particles. I would like to object this some how so that it follows behind an tweened object that goes across the screen . I was thinking it might be a case of changing the event listener to something but cant figure it out.

EDIT - My object is a movieclip called sleigh

Any help appreciated.

Script (AS2)

```<code>//import bitmap class
import flash.display.BitmapData;

//Settings
var particleMaxSpeed:Number = 3;
var particleFadeSpeed:Number = 5;
var particleTotal:Number = 5;
var particleRange:Number = 25;

/**
 * createExplosion(target X position, target Y position)
 */
function createExplosion(targetX:Number, targetY:Number):Void
{
    //run for loop based on particleTotal
    for (var i:Number = 0; i<particleTotal; i++) {
        //attach bitmap from the library with the linked name "adobe_flash"
        var myBmp:BitmapData = BitmapData.loadBitmap("fire.jpg");

        //create the "main_holder" movieclip that will hold our bitmap
        var particle_mc = _root.createEmptyMovieClip("main_holder", _root.getNextHighestDepth());

        //create an "internal_holder" movieclip inside "main_holder" that we'll use to center the bitmap data
        var internal_holder:MovieClip = particle_mc.createEmptyMovieClip("internal_holder", particle_mc.getNextHighestDepth());

        //set "internal_holder" x and y position based on bitmap size
        internal_holder._x = -myBmp.width/2;
        internal_holder._y = -myBmp.height/2;

        //finally, attach the bitmapData "myBmp" to the movieclip "internal_holder"
        internal_holder.attachBitmap(myBmp, internal_holder.getNextHighestDepth(), "never", true);

        //set position & rotation, alpha
        particle_mc._x = targetX
        particle_mc._y = targetY
        particle_mc._rotation = random(360);
        particle_mc._alpha = random(50)+50;

        //set particle boundry
        particle_mc.boundyLeft = targetX - particleRange;
        particle_mc.boundyTop = targetY - particleRange;
        particle_mc.boundyRight = targetX + particleRange;
        particle_mc.boundyBottom = targetY + particleRange;

        //set speed/direction of fragment
        particle_mc.speedX = Math.random(particleMaxSpeed)-Math.random(particleMaxSpeed);
        particle_mc.speedY = Math.random(particleMaxSpeed)-Math.random(particleMaxSpeed);
        particle_mc.speedX *= particleMaxSpeed
        particle_mc.speedY *= particleMaxSpeed

        //set fade out speed
        particle_mc.fadeSpeed = Math.random(particleFadeSpeed)*particleFadeSpeed;

        //just a visual particle counter
        numberOfParticles++;

        //make fragment move using onEnterFrame
        particle_mc.onEnterFrame = function():Void
        {
            //update alpha, x, y
            this._alpha -= this.fadeSpeed;
            this._x += this.speedX;
            this._y += this.speedY;
            //if fragment is invisible or out of bounds, remove it
            if (this._alpha <= 0 || this._x < this.boundyLeft || this._x > this.boundyRight || this._y < this.boundyTop || this._y > this.boundyBottom)
            {
                this.removeMovieClip();
                //
                numberOfParticles--;
            }
        }
    }
}

/**
* Mouse Controls
*/
//create an object that we'll listen to
mouseListener = new Object();

//on Click, createExplosion
mouseListener.onMouseDown = function() {
    //createExplosion(_xmouse, _ymouse);
}
mouseListener.onMouseMove = function() {
    createExplosion(_xmouse, _ymouse);
}

//add listener
Mouse.addListener(mouseListener);
</code>```

答:
You need to call the createExplosion function every frame and pass it the sleigh x and y coordinates instead of the mouse coordinates. Replace

```<code>mouseListener.onMouseMove = function() {
    createExplosion(_xmouse, _ymouse);
}
</code>```

with

```<code>sleigh.onEnterFrame = function() {
    createExplosion(sleigh._x, sleigh._y);
}
</code>```

and remove the other mouse listener stuff

Title: Actionscript 2 particles

Body:
I know this is old technology but I just want to an update to a flash xmas card I send out. Basically I use particles script (found below) that follows my mouse and spews out some gold particles. I would like to object this some how so that it follows behind an tweened object that goes across the screen . I was thinking it might be a case of changing the event listener to something but cant figure it out.

EDIT - My object is a movieclip called sleigh

Any help appreciated.

Script (AS2)

//import bitmap class
import flash.display.BitmapData;

//Settings
var particleMaxSpeed:Number = 3;
var particleFadeSpeed:Number = 5;
var particleTotal:Number = 5;
var particleRange:Number = 25;

/**
 * createExplosion(target X position, target Y position)
 */
function createExplosion(targetX:Number, targetY:Number):Void
{
    //run for loop based on particleTotal
    for (var i:Number = 0; i<particleTotal; i++) {
        //attach bitmap from the library with the linked name "adobe_flash"
        var myBmp:BitmapData = BitmapData.loadBitmap("fire.jpg");

        //create the "main_holder" movieclip that will hold our bitmap
        var particle_mc = _root.createEmptyMovieClip("main_holder", _root.getNextHighestDepth());

        //create an "internal_holder" movieclip inside "main_holder" that we'll use to center the bitmap data
        var internal_holder:MovieClip = particle_mc.createEmptyMovieClip("internal_holder", particle_mc.getNextHighestDepth());

        //set "internal_holder" x and y position based on bitmap size
        internal_holder._x = -myBmp.width/2;
        internal_holder._y = -myBmp.height/2;

        //finally, attach the bitmapData "myBmp" to the movieclip "internal_holder"
        internal_holder.attachBitmap(myBmp, internal_holder.getNextHighestDepth(), "never", true);

        //set position & rotation, alpha
        particle_mc._x = targetX
        particle_mc._y = targetY
        particle_mc._rotation = random(360);
        particle_mc._alpha = random(50)+50;

        //set particle boundry
        particle_mc.boundyLeft = targetX - particleRange;
        particle_mc.boundyTop = targetY - particleRange;
        particle_mc.boundyRight = targetX + particleRange;
        particle_mc.boundyBottom = targetY + particleRange;

        //set speed/direction of fragment
        particle_mc.speedX = Math.random(particleMaxSpeed)-Math.random(particleMaxSpeed);
        particle_mc.speedY = Math.random(particleMaxSpeed)-Math.random(particleMaxSpeed);
        particle_mc.speedX *= particleMaxSpeed
        particle_mc.speedY *= particleMaxSpeed

        //set fade out speed
        particle_mc.fadeSpeed = Math.random(particleFadeSpeed)*particleFadeSpeed;

        //just a visual particle counter
        numberOfParticles++;

        //make fragment move using onEnterFrame
        particle_mc.onEnterFrame = function():Void
        {
            //update alpha, x, y
            this._alpha -= this.fadeSpeed;
            this._x += this.speedX;
            this._y += this.speedY;
            //if fragment is invisible or out of bounds, remove it
            if (this._alpha <= 0 || this._x < this.boundyLeft || this._x > this.boundyRight || this._y < this.boundyTop || this._y > this.boundyBottom)
            {
                this.removeMovieClip();
                //
                numberOfParticles--;
            }
        }
    }
}

/**
* Mouse Controls
*/
//create an object that we'll listen to
mouseListener = new Object();

//on Click, createExplosion
mouseListener.onMouseDown = function() {
    //createExplosion(_xmouse, _ymouse);
}
mouseListener.onMouseMove = function() {
    createExplosion(_xmouse, _ymouse);
}

//add listener
Mouse.addListener(mouseListener);

Body:
You need to call the createExplosion function every frame and pass it the sleigh x and y coordinates instead of the mouse coordinates. Replace

mouseListener.onMouseMove = function() {
    createExplosion(_xmouse, _ymouse);
}

with

sleigh.onEnterFrame = function() {
    createExplosion(sleigh._x, sleigh._y);
}

and remove the other mouse listener stuff


问:
Check if an instance is either an Array or a Collection in Java
I want to create a method in Java that receives either an array or a collection, it does not matter, because all i do is iterate it. I don't want to create a list from the array because it would impact on the performance of the algorithm and i am really tired of always creating an overloading method for every method which accepts a List. Is there a convenient parent class for both, like "Iterable", or something? </p>

答: I didn't know about wrapping an array on a list using Arrays.asList method, i thought it would copy the array into a list. Arrays.asList is a O(1) algorithm, as the good people in the comments told me.


问:
Place an image/icon in the upper right corner of a div
I would like to place an image in the upper right corner of a div that always stays in that place and always moves (at different viewport sizes).

Here is the current status of my less code and the associated HTML:

LESS:

```<code>.selling,
.price,
.cta {
    float: left;
    width: 33.33%; min-height: @height;
    padding: 0 1%;
    .font-size(18px);

    & > div,
    & > a {
        // min-height: @height;
        height: @height;
        padding: 14px 22px;
        background-color: @black;
        color: #fff;
    }

    &.rabattaktion {
        div::after {
            position: absolute; z-index: 1;
            width: 68px; height: 65px;
            background: transparent url('../img/santa_hat.png') center top no-repeat;
            content: "";
            margin-top: -170px;
            margin-left: 351px;
            }
            div:hover:before { z-index: 4; }
        }
}
</code>```

HTML:

```<code><div class="offer">
   ...
    <div class="price sh <?php if($entry->field('rabattaktion')->value()): ?> rabattaktion<?php endif ?>">
        <div>
            <h3>Gesamtpreis:</h3>
            <p><span><?php echo $new_price_formatted; ?> € *</span></p>
            <?php if(isset($rate)): ?>
               <p>
                    <b>Ratenzahlung:</b>
            <?php echo $raten; ?> Monatsraten á <?php echo $rate_formatted; ?> € *
                </p>
            <?php endif; ?>
        </div>
    </div>
    ...
</div>
</code>```

In this way I get the picture in the upper right corner. But as soon as the viewport size changes, the position is no longer correct.

What am I doing wrong?

答:
Try to edit your css to this:</p>

```<code>.selling,
.price,
.cta {
  float: left;
  width: 33.33%;
  min-height: @height;
  padding: 0 1%;
  .font-size(18px);
  &>div,
  &>a {
    // min-height: @height;
    height: @height;
    padding: 14px 22px;
    background-color: @black;
    color: #fff;
  }
  &.rabattaktion {
    position: relative;
    div::after {
      position: absolute;
      z-index: 1;
      width: 68px;
      height: 65px;
      background: transparent url('../img/santa_hat.png') center top no-repeat;
      content: "";
      top: 0;
      right: 0;
    }
    div:hover:before {
      z-index: 4;
    }
  }
}
</code>```

Body:
I would like to place an image in the upper right corner of a div that always stays in that place and always moves (at different viewport sizes).

Here is the current status of my less code and the associated HTML:

LESS:

.selling,
.price,
.cta {
    float: left;
    width: 33.33%; min-height: @height;
    padding: 0 1%;
    .font-size(18px);

    & > div,
    & > a {
        // min-height: @height;
        height: @height;
        padding: 14px 22px;
        background-color: @black;
        color: #fff;
    }

    &.rabattaktion {
        div::after {
            position: absolute; z-index: 1;
            width: 68px; height: 65px;
            background: transparent url('../img/santa_hat.png') center top no-repeat;
            content: "";
            margin-top: -170px;
            margin-left: 351px;
            }
            div:hover:before { z-index: 4; }
        }
}

HTML:

   ...
    <div class="price sh <?php if($entry->field('rabattaktion')->value()): ?> rabattaktion<?php endif ?>">

Gesamtpreis:

<?php echo $new_price_formatted; ?> € *

            <?php if(isset($rate)): ?>

                    Ratenzahlung:
            <?php echo $raten; ?> Monatsraten á <?php echo $rate_formatted; ?> € *

            <?php endif; ?>

    ...

In this way I get the picture in the upper right corner. But as soon as the viewport size changes, the position is no longer correct.

What am I doing wrong?

Body:
Try to edit your css to this:

.selling,
.price,
.cta {
  float: left;
  width: 33.33%;
  min-height: @height;
  padding: 0 1%;
  .font-size(18px);
  &>div,
  &>a {
    // min-height: @height;
    height: @height;
    padding: 14px 22px;
    background-color: @black;
    color: #fff;
  }
  &.rabattaktion {
    position: relative;
    div::after {
      position: absolute;
      z-index: 1;
      width: 68px;
      height: 65px;
      background: transparent url('../img/santa_hat.png') center top no-repeat;
      content: "";
      top: 0;
      right: 0;
    }
    div:hover:before {
      z-index: 4;
    }
  }
}


问:
server side & end-user web application security and validation methods
I was wondering what security method everyone uses to secure a web application at bank grade if possible.

from the best of my knowledge here are the methods/technologies that i know of.

```<code>Front - End-user Section
-------------------------
SSL (128 bit encryption)
htaccess (protection against bots and using mod-rewrite to hide parameter calls)
input field cleaning
session cleaning before use
PDO access to mysql ( although oracle is better yet expensive)
not being on a shared hosting account.
using a cisco based firewall (not very familiar with these)
restricting what can be uploaded (if the site requires an upload)
blocking off directory index access with htaccess
not storing credit card information locally
encrypting user passwords with sha1 or encryption with salt
(never could figure these out)

not using hidden input fields
turn off global variables
turn off error displays
using another file extension displayed to the user rather than php , aspx, etc.
blocking ping/requests for server/apache information and version.

backend access
-------------------
not having its access being something like /admin (if you know what i mean)
"all of the above listed for end-user"
verifying if the user who logs in exists as an admin
</code>```

rather than using mysql_real_escape_string or htmlentities to clean input fields
then there is filter_input() which doesnt work that good. it kind of messes up the cleaning.
so what do you guys recommend. i know some of you might be thinking this might be a bit too much but if your working on a web application that was to be hit by over 50k users where ecommerce based transactions would occur. what would you do?

thanks

ps: this is what i have in my htaccess to protect against non-friendly bots and restricting access to important files.

```<code>#=============================================================================#
#          Deny access to hidden files
#=============================================================================#
<FilesMatch "\.(htaccess|log|sh)$">
 Order Allow,Deny
 Deny from all
</FilesMatch>

#=============================================================================#
#          Deny access to evil bots / security
#=============================================================================#

RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^JetCar.* [NC]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^GoZilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^ia_archiver.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^wget.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^HTTrack.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCapture.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Scooter-W3.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Webdupe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Pockey.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^DiscoPump.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InternetNinja.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]
RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com [OR]
RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]
RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]
RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]
RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]
RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]
RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^Express\ WebPictures [OR]
RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]
RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]
RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]
RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]
RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]
RewriteCond %{HTTP_USER_AGENT} ^HTTrack [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Stripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^Indy\ Library [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]
RewriteCond %{HTTP_USER_AGENT} ^Internet\ Ninja [OR]
RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]
RewriteCond %{HTTP_USER_AGENT} ^JOC\ Web\ Spider [OR]
RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]
RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mass\ Downloader [OR]
RewriteCond %{HTTP_USER_AGENT} ^MIDown\ tool [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mister\ PiX [OR]
RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]
RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Net\ Vampire [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Explorer [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Navigator [OR]
RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^Papa\ Foto [OR]
RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]
RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]
RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]
RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]
RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport\ Pro [OR]
RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Image\ Collector [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebGo\ IS [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ eXtractor [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ Quester [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]
RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Xaldon\ WebSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^GoZilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCapture.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Webdupe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Pockey.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^DiscoPump.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InternetSeer.com.* [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://www.hostitcheap.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.bravespider.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.bigweblist.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.weblinkvalidator.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://traffixer.com* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.youradultpaysite.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.paysiteprofits.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.hotlivewebcams.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.paysiteprofits.com/* [OR]
RewriteCond %{REQUEST_URI} FormMail.*
RewriteCond %{HTTP_REFERER} ^www.addresses.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.business-socket.com/* [OR]
RewriteCond %{HTTP_REFERER} ^www.datashaping.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://cheapweb.biz/* [OR]
RewriteCond %{HTTP_REFERER} ^http://traffixer.com* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.hostitcheap.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.weblinkvalidator.com/* [OR]
RewriteCond %{REQUEST_URI} FormMail.*
RewriteRule .* - [F,L]
</code>```

答:
Just a few things to add to this nice big list:

remove versions disclosure information from PHP as well (very verbose) : expose_php Off

rather than using mysql_real_escape_string or htmlentities to clean input fields then there is filter_input() which doesnt work that good. it kind of messes up the cleaning. so what do you guys recommend

Well the rule is not to filter one time and get with it. The rule is to filter based on the type of the output at the time you need it.

When the output is the database, escape/filter for the database (mysql_real_escape and such)

When the output is HTML escape for HTML (htmlspecialchars)

When the output is CSV escape for CSV (separators, carriage return, etc)

When the output is PDF escape for PDF (etc, ...)

And you should as well protect yourself with different policies for different types of inputs. Cast integer as ints, filter white list of values, limit lenght of string.

Filter entries (remove harmful things
for next step)

validate entries

output entries (in database or in HTML, etc)

On a big system it is hard to ensure this is always done, so try to build early your own objects which ensure the security steps are ALWAYS done. Do not let any functionnal part of the application use directly user entries ($_GET, $_POST, $_COOKIE, $_SERVER). and do not let them output on a final output directly (database,HTML, etc).

One real good read on that and on Hugarian Apps: making Wrong Code Look Wrong. Second time this week I link this page, but it's really an amazing read :-)

Then for big application I would recommend (edit: Sorry @Cray I did'nt saw you've just said it as well) using 2 database access, one read-only and one read-write. Use the read-write access only when needed (transactions, etc), you'll get a better application for scalability and a more secure one with just one idea :-).

Edit:
Some other things:

Session gives you an identity, this
is not sufficient, you need to add
ACL, access control. you must perform an acl check on each request,
set it in a low-level i.e try to
perform this check before any
application cache occurs. Try to set
an url policy in your application
that will help you with this ACL
policy. and do not forget AJAX calls in it.

Url base security is still hard to
maitain, should a user be allowed to
forge custom GET requests and search
data he were not really completly
allowed to see? Sometimes using hidden or GET tokens verified
server-side in the session data can
prevent this manual seek.

You may need to think about row level
security in the database (like the
Virtual Private Database in Oracle).
With modern databases like PostgreSQL
you could emulate it with some
triggers/rules and sessions
variables.

ContentLicense: CC BY-SA 2.5

Body:
I was wondering what security method everyone uses to secure a web application at bank grade if possible.

from the best of my knowledge here are the methods/technologies that i know of.

Front - End-user Section
-------------------------
SSL (128 bit encryption)
htaccess (protection against bots and using mod-rewrite to hide parameter calls)
input field cleaning
session cleaning before use
PDO access to mysql ( although oracle is better yet expensive)
not being on a shared hosting account.
using a cisco based firewall (not very familiar with these)
restricting what can be uploaded (if the site requires an upload)
blocking off directory index access with htaccess
not storing credit card information locally
encrypting user passwords with sha1 or encryption with salt
(never could figure these out)

not using hidden input fields
turn off global variables
turn off error displays
using another file extension displayed to the user rather than php , aspx, etc.
blocking ping/requests for server/apache information and version.

backend access
-------------------
not having its access being something like /admin (if you know what i mean)
"all of the above listed for end-user"
verifying if the user who logs in exists as an admin

rather than using mysql_real_escape_string or htmlentities to clean input fields
then there is filter_input() which doesnt work that good. it kind of messes up the cleaning.
so what do you guys recommend. i know some of you might be thinking this might be a bit too much but if your working on a web application that was to be hit by over 50k users where ecommerce based transactions would occur. what would you do?

thanks

ps: this is what i have in my htaccess to protect against non-friendly bots and restricting access to important files.

#=============================================================================#
#          Deny access to hidden files
#=============================================================================#
<FilesMatch "\.(htaccess|log|sh)$">
 Order Allow,Deny
 Deny from all
</FilesMatch>

#=============================================================================#
#          Deny access to evil bots / security
#=============================================================================#

RewriteBase /
RewriteCond %{HTTP_USER_AGENT} ^JetCar.* [NC]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^GoZilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^ia_archiver.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^wget.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^HTTrack.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCapture.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Scooter-W3.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Webdupe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Pockey.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^DiscoPump.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InternetNinja.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^BlackWidow [OR]
RewriteCond %{HTTP_USER_AGENT} ^Bot\ mailto:craftbot@yahoo.com [OR]
RewriteCond %{HTTP_USER_AGENT} ^ChinaClaw [OR]
RewriteCond %{HTTP_USER_AGENT} ^Custo [OR]
RewriteCond %{HTTP_USER_AGENT} ^DISCo [OR]
RewriteCond %{HTTP_USER_AGENT} ^Download\ Demon [OR]
RewriteCond %{HTTP_USER_AGENT} ^eCatch [OR]
RewriteCond %{HTTP_USER_AGENT} ^EirGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailSiphon [OR]
RewriteCond %{HTTP_USER_AGENT} ^EmailWolf [OR]
RewriteCond %{HTTP_USER_AGENT} ^Express\ WebPictures [OR]
RewriteCond %{HTTP_USER_AGENT} ^ExtractorPro [OR]
RewriteCond %{HTTP_USER_AGENT} ^EyeNetIE [OR]
RewriteCond %{HTTP_USER_AGENT} ^FlashGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetRight [OR]
RewriteCond %{HTTP_USER_AGENT} ^GetWeb! [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go!Zilla [OR]
RewriteCond %{HTTP_USER_AGENT} ^Go-Ahead-Got-It [OR]
RewriteCond %{HTTP_USER_AGENT} ^GrabNet [OR]
RewriteCond %{HTTP_USER_AGENT} ^Grafula [OR]
RewriteCond %{HTTP_USER_AGENT} ^HMView [OR]
RewriteCond %{HTTP_USER_AGENT} ^HTTrack [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Stripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^Image\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^Indy\ Library [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InterGET [OR]
RewriteCond %{HTTP_USER_AGENT} ^Internet\ Ninja [OR]
RewriteCond %{HTTP_USER_AGENT} ^JetCar [OR]
RewriteCond %{HTTP_USER_AGENT} ^JOC\ Web\ Spider [OR]
RewriteCond %{HTTP_USER_AGENT} ^larbin [OR]
RewriteCond %{HTTP_USER_AGENT} ^LeechFTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mass\ Downloader [OR]
RewriteCond %{HTTP_USER_AGENT} ^MIDown\ tool [OR]
RewriteCond %{HTTP_USER_AGENT} ^Mister\ PiX [OR]
RewriteCond %{HTTP_USER_AGENT} ^Navroad [OR]
RewriteCond %{HTTP_USER_AGENT} ^NearSite [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetAnts [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^Net\ Vampire [OR]
RewriteCond %{HTTP_USER_AGENT} ^NetZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Octopus [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Explorer [OR]
RewriteCond %{HTTP_USER_AGENT} ^Offline\ Navigator [OR]
RewriteCond %{HTTP_USER_AGENT} ^PageGrabber [OR]
RewriteCond %{HTTP_USER_AGENT} ^Papa\ Foto [OR]
RewriteCond %{HTTP_USER_AGENT} ^pavuk [OR]
RewriteCond %{HTTP_USER_AGENT} ^pcBrowser [OR]
RewriteCond %{HTTP_USER_AGENT} ^RealDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^ReGet [OR]
RewriteCond %{HTTP_USER_AGENT} ^SiteSnagger [OR]
RewriteCond %{HTTP_USER_AGENT} ^SmartDownload [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperBot [OR]
RewriteCond %{HTTP_USER_AGENT} ^SuperHTTP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Surfbot [OR]
RewriteCond %{HTTP_USER_AGENT} ^tAkeOut [OR]
RewriteCond %{HTTP_USER_AGENT} ^Teleport\ Pro [OR]
RewriteCond %{HTTP_USER_AGENT} ^VoidEYE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Image\ Collector [OR]
RewriteCond %{HTTP_USER_AGENT} ^Web\ Sucker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebAuto [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCopier [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebFetch [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebGo\ IS [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebLeacher [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebReaper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebSauger [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ eXtractor [OR]
RewriteCond %{HTTP_USER_AGENT} ^Website\ Quester [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebStripper [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebWhacker [OR]
RewriteCond %{HTTP_USER_AGENT} ^WebZIP [OR]
RewriteCond %{HTTP_USER_AGENT} ^Wget [OR]
RewriteCond %{HTTP_USER_AGENT} ^Widow [OR]
RewriteCond %{HTTP_USER_AGENT} ^WWWOFFLE [OR]
RewriteCond %{HTTP_USER_AGENT} ^Xaldon\ WebSpider [OR]
RewriteCond %{HTTP_USER_AGENT} ^GoZilla.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^WebCapture.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Webdupe.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^Pockey.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^DiscoPump.* [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^InternetSeer.com.* [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://www.hostitcheap.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.bravespider.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.bigweblist.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.weblinkvalidator.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://traffixer.com* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.youradultpaysite.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.paysiteprofits.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.hotlivewebcams.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.paysiteprofits.com/* [OR]
RewriteCond %{REQUEST_URI} FormMail.*
RewriteCond %{HTTP_REFERER} ^www.addresses.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.business-socket.com/* [OR]
RewriteCond %{HTTP_REFERER} ^www.datashaping.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://cheapweb.biz/* [OR]
RewriteCond %{HTTP_REFERER} ^http://traffixer.com* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.hostitcheap.com/* [OR]
RewriteCond %{HTTP_REFERER} ^http://www.weblinkvalidator.com/* [OR]
RewriteCond %{REQUEST_URI} FormMail.*
RewriteRule .* - [F,L]


问:
Drop a foreign key from a table in mysql
I have created a foreign key without giving it a name for a column in a table. Now i want to remove that column. First i've tried removing the foreign key constraint but there was an error

I've used the following sql command

```<code>ALTER TABLE passenger
DROP FOREIGN KEY bookedBy
</code>```

The error message

#1091 - Can't DROP 'bookedBy'; check that column/key exists

i've ensured that the column exist.

I have not named the foreign key constraint. Is it possible to remove the foreign key constraint without naming it. Is there any default naming given to the foreign keys.

答:
The quickest and dirtiest way is to turn off foreign key checks, drop the table and then turn the checks back on</p>

```<code>SET FOREIGN_KEY_CHECKS=0;

drop table mytable

SET FOREIGN_KEY_CHECKS=1;
</code>```

Body:
I have created a foreign key without giving it a name for a column in a table. Now i want to remove that column. First i've tried removing the foreign key constraint but there was an error

I've used the following sql command

ALTER TABLE passenger
DROP FOREIGN KEY bookedBy

The error message

#1091 - Can't DROP 'bookedBy'; check that column/key exists

i've ensured that the column exist.

I have not named the foreign key constraint. Is it possible to remove the foreign key constraint without naming it. Is there any default naming given to the foreign keys.

Body:
The quickest and dirtiest way is to turn off foreign key checks, drop the table and then turn the checks back on

SET FOREIGN_KEY_CHECKS=0;

drop table mytable

SET FOREIGN_KEY_CHECKS=1;


问:
Random JavaScript Select code fix
I have this js code

var img = {
  blue: '',
  purple: ' 0.20',
  pink: '',
  red: '',
  yellow: ''
}

function reset(){
  $('.card').remove();
  for (var i = 0; i < 210; i++){
    var element = '
'+img.blue+'
';
    var rand = random(1,10000)/100;
    if (rand < 30){
      element = '
'+img.purple+'
';
    }
    if (rand < 5){
      element = '
'+img.pink+'
';
    }
    if (rand < 2){
      element = '
'+img.red+'
';
    }
    if (rand < 0.5){
      element = '
'+img.yellow+'
';
    }

    $('#cardList').append(element);
  }

}

function openCase(){
  reset();
  var rand = random(1000,20000);
  var childNumber = Math.floor(rand/100)+4;
  //var timings = ["easeInOutBack","easeOutExpo","easeInOutBounce","easeOutQuad","swing","easeOutElastic","easeInOutElastic"];
  var timings = ["swing"];
  var timing = timings[random(0,timings.length)];
  var reward = $('#itemNumber'+childNumber).attr('data-rarity');

  $('.card').first().animate({
    marginLeft: -rand
  }, 5000, timing, function(){

    var src = $('#itemNumber'+childNumber+' img').attr('src');
    $('#itemNumber'+childNumber).css({background: "linear-gradient(#00bf09, #246b27)"});

    $('#dialog-msg').html("You have received "+reward+" game!"+"
");

    $('#dialog').dialog({
      modal: true,
      title: "New item!",
      resizeable: false,
      draggable: false,
      width: 400,
      buttons: {
        "Receive item":function(){
          $(this).dialog("close");
          // add resources
        }
      }
    });
  });

  //$('.card').css({backgroundColor: 'red'})
  //$('.card:nth-child('+(childNumber+1)+')').css({backgroundColor: 'green'})
}

function random(min, max){
  return Math.floor((Math.random()*(max - min))+min);
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;
}

#cardList {
  height: 100px;
  width: 800px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  background-color: red;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 100px;
  height: 100px;
}

.card > img {
  width: 100px;
  height: 100px;
}

.arrow-down {
  margin-left: 380px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
}
#dialog-msg > img {
  width: 150px;
  height: 150px;
}
#dialog-msg {
  text-align: center;
}</code>```

<button onclick="openCase();">Open</button>

```

This code is made to random select one image and show it up

I need help with the following question:
For example when the script choose and show the 'red' image how can I add an additional text or code only when that image is selected.

I have tried to make this by myself but it seems impossible to me, I am new in this domain.

答:
You can do this by create object with multiples properties

the image source and the related text and whatever you want.

var images = [
{red:{
  src:"url",
  text:"text"
}},
{blue:{
  src:"url2",
  text:"text blue"
}}
];

function getRandom(){
  var elem = images[Math.floor(Math.random()*images.length)];
  console.log("Element : ",elem)
}

for(var i = 0; i < 5; i++){
getRandom();
}```

Title: Random JavaScript Select code fix

Body:
I have this js code

var img = {
  blue: '',
  purple: ' 0.20',
  pink: '',
  red: '',
  yellow: ''
}

function reset(){
  $('.card').remove();
  for (var i = 0; i < 210; i++){
    var element = '
'+img.blue+'
';
    var rand = random(1,10000)/100;
    if (rand < 30){
      element = '
'+img.purple+'
';
    }
    if (rand < 5){
      element = '
'+img.pink+'
';
    }
    if (rand < 2){
      element = '
'+img.red+'
';
    }
    if (rand < 0.5){
      element = '
'+img.yellow+'
';
    }

    $('#cardList').append(element);
  }

}

function openCase(){
  reset();
  var rand = random(1000,20000);
  var childNumber = Math.floor(rand/100)+4;
  //var timings = ["easeInOutBack","easeOutExpo","easeInOutBounce","easeOutQuad","swing","easeOutElastic","easeInOutElastic"];
  var timings = ["swing"];
  var timing = timings[random(0,timings.length)];
  var reward = $('#itemNumber'+childNumber).attr('data-rarity');

  $('.card').first().animate({
    marginLeft: -rand
  }, 5000, timing, function(){

    var src = $('#itemNumber'+childNumber+' img').attr('src');
    $('#itemNumber'+childNumber).css({background: "linear-gradient(#00bf09, #246b27)"});

    $('#dialog-msg').html("You have received "+reward+" game!"+"
");

    $('#dialog').dialog({
      modal: true,
      title: "New item!",
      resizeable: false,
      draggable: false,
      width: 400,
      buttons: {
        "Receive item":function(){
          $(this).dialog("close");
          // add resources
        }
      }
    });
  });

  //$('.card').css({backgroundColor: 'red'})
  //$('.card:nth-child('+(childNumber+1)+')').css({backgroundColor: 'green'})
}

function random(min, max){
  return Math.floor((Math.random()*(max - min))+min);
}

* {
  box-sizing: border-box;
}

#cardList {
  height: 100px;
  width: 800px;
  position: relative;
  border: 2px solid black;
  overflow: hidden;
  white-space: nowrap;
}

.card {
  display: inline-block;
  background-color: red;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
  width: 100px;
  height: 100px;
}

.card > img {
  width: 100px;
  height: 100px;
}

.arrow-down {
  margin-left: 380px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;

  border-top: 20px solid #f00;
}
#dialog-msg > img {
  width: 150px;
  height: 150px;
}
#dialog-msg {
  text-align: center;
}

<button onclick="openCase();">Open</button>

This code is made to random select one image and show it up

I need help with the following question:
For example when the script choose and show the 'red' image how can I add an additional text or code only when that image is selected.

I have tried to make this by myself but it seems impossible to me, I am new in this domain.