问:
PHP Magic faster than simply setting the class attribute?
Well, not exactly that, but here is an example. Can anyone explain the difference between B and C? How can it be faster to use a magic function to dynamically set a value instead of simply setting the value in the attribute definition?

Here is some code:

```<code>[root@vm-202-167-238-17 ~]# cat test.php; for d in A B C; do echo "------"; ./test.php $d; done;
#!/usr/bin/php
<?php

$className = $argv[1];

class A
{
    public function __get($a)
    {
        return 5;
    }
}

class B
{
    public $a = 5;
}

class C
{
    public function __get($a)
    {
        $this->a = 5;

        return 5;
    }
}

$a = new $className;

$start = microtime(true);

for ($i=0; $i < 1000000; $i++)
    $b = $a->a;

$end = microtime(true);

echo (($end - $start) * 1000) ." msec\n";

------
598.90794754028 msec
------
205.48391342163 msec
------
189.7759437561 msec
</code>```

答:
Magic functions are definitely slower than anything else in PHP, and should be used carefully. This would actually be a good blog subject (auto-creating attributes with magic functions to speed things up... anyway). As El Yobo stated, I modified your PHP script so the tests are more accurate :

```<code><?php

class A {
    public function __get($a) {
        return 5;
    }
}

class B {
    public $a = 5;
}

class C {
    private $a = 5;
    public function __get($a) {
        return $this->a;
    }
}

$classes = array('A','B','C');

header('Content-type: text/plain; charset=utf-8');
foreach ($classes as $className) {
   $a = new $className;

   $start = microtime(true);

   for ($i=0; $i < 1000000; $i++) {
      $b = $a->a;
   }

   $end = microtime(true);

   echo 'Class ' . get_class($a) . ' = ' . (($end - $start) * 1000) ." msec\n";
}
</code>```

Resulting in

```<code>Class A = 378.85212898254 msec
Class B = 109.26413536072 msec
Class C = 423.51794242859 msec
</code>```

So, there you have it. You can clearly see that magic functions, when used, take about 4 times more to execute than public methods.

** EDIT **

Now, if you dynamically create new class attribute, the magic method will be called only the first time, then any subsequent call will access the dynamically created public attribute (public for backward compatibility). Change class C to :

```<code>class C {
    public function __get($a) {
        $this->a = 5;
        return 5;
    }
}
</code>```

Will output

```<code>Class A = 392.09413528442 msec
Class B = 110.16988754272 msec
Class C = 96.771955490112 msec
</code>```

So this why you say : "Hey! It's faster!" However, look if we reduce the iterations from 1000000 to 10 (for example):

```<code>Class A = 0.033140182495117 msec
Class B = 0.0078678131103516 msec
Class C = 0.01215934753418 msec
</code>```

Class C is now slower than B because it's initial call to the magic method. My best guess would be that PHP handles dynamically created attributes different than declared ones. But after further research, these results may vary depending on OS, CPU arch, memory, PHP version, etc. Therefore these results cannot be taken for granted, and, generally speaking, magic methods will always take longer to execute than using declared public attributes or calling declared public methods.

** EDIT 2 **

Here's the class D test, skipping the magic method whatsoever with dynamic attribute creation :

```<code>class D {
   public function __construct() {
      $this->a = 5;
   }
}
</code>```

Yields these results for 1000 iterations :

```<code>Class A = 1.3999938964844 msec
Class B = 0.42200088500977 msec
Class C = 0.3960132598877 msec
Class D = 0.37002563476562 msec       <-- faster
</code>```

Let's increase our iterations about to 1'000'000 :

```<code>Class A = 380.80310821533 msec
Class B = 109.7559928894 msec
Class C = 91.224908828735 msec        <-- faster ???
Class D = 96.340894699097 msec
</code>```

If magic methods have a great overhead cost, the real question now is : Why, when accessing a same attribute repeatedly many times, is

```<code>public function __get($a) {
   $this->a = 5;
   return 5;
}
</code>```

faster than

```<code>public function __construct() {
   $this->a = 5;
}
</code>```

when creating and accessing dynamic attributes?

Body:
Well, not exactly that, but here is an example. Can anyone explain the difference between B and C? How can it be faster to use a magic function to dynamically set a value instead of simply setting the value in the attribute definition?

Here is some code:

[root@vm-202-167-238-17 ~]# cat test.php; for d in A B C; do echo "------"; ./test.php $d; done;
#!/usr/bin/php
<?php

$className = $argv[1];

class A
{
    public function __get($a)
    {
        return 5;
    }
}

class B
{
    public $a = 5;
}

class C
{
    public function __get($a)
    {
        $this->a = 5;

        return 5;
    }
}

$a = new $className;

$start = microtime(true);

for ($i=0; $i < 1000000; $i++)
    $b = $a->a;

$end = microtime(true);

echo (($end - $start) * 1000) ." msec\n";

------
598.90794754028 msec
------
205.48391342163 msec
------
189.7759437561 msec

Body:
Magic functions are definitely slower than anything else in PHP, and should be used carefully. This would actually be a good blog subject (auto-creating attributes with magic functions to speed things up... anyway). As El Yobo stated, I modified your PHP script so the tests are more accurate :

<?php

class A {
    public function __get($a) {
        return 5;
    }
}

class B {
    public $a = 5;
}

class C {
    private $a = 5;
    public function __get($a) {
        return $this->a;
    }
}

$classes = array('A','B','C');

header('Content-type: text/plain; charset=utf-8');
foreach ($classes as $className) {
   $a = new $className;

   $start = microtime(true);

   for ($i=0; $i < 1000000; $i++) {
      $b = $a->a;
   }

   $end = microtime(true);

   echo 'Class ' . get_class($a) . ' = ' . (($end - $start) * 1000) ." msec\n";
}

Resulting in

Class A = 378.85212898254 msec
Class B = 109.26413536072 msec
Class C = 423.51794242859 msec

So, there you have it. You can clearly see that magic functions, when used, take about 4 times more to execute than public methods.

** EDIT **

Now, if you dynamically create new class attribute, the magic method will be called only the first time, then any subsequent call will access the dynamically created public attribute (public for backward compatibility). Change class C to :

class C {
    public function __get($a) {
        $this->a = 5;
        return 5;
    }
}

Will output

Class A = 392.09413528442 msec
Class B = 110.16988754272 msec
Class C = 96.771955490112 msec

So this why you say : "Hey! It's faster!" However, look if we reduce the iterations from 1000000 to 10 (for example):

Class A = 0.033140182495117 msec
Class B = 0.0078678131103516 msec
Class C = 0.01215934753418 msec

Class C is now slower than B because it's initial call to the magic method. My best guess would be that PHP handles dynamically created attributes different than declared ones. But after further research, these results may vary depending on OS, CPU arch, memory, PHP version, etc. Therefore these results cannot be taken for granted, and, generally speaking, magic methods will always take longer to execute than using declared public attributes or calling declared public methods.

** EDIT 2 **

Here's the class D test, skipping the magic method whatsoever with dynamic attribute creation :

class D {
   public function __construct() {
      $this->a = 5;
   }
}

Yields these results for 1000 iterations :

Class A = 1.3999938964844 msec
Class B = 0.42200088500977 msec
Class C = 0.3960132598877 msec
Class D = 0.37002563476562 msec       <-- faster

Let's increase our iterations about to 1'000'000 :

Class A = 380.80310821533 msec
Class B = 109.7559928894 msec
Class C = 91.224908828735 msec        <-- faster ???
Class D = 96.340894699097 msec

If magic methods have a great overhead cost, the real question now is : Why, when accessing a same attribute repeatedly many times, is

public function __get($a) {
   $this->a = 5;
   return 5;
}

faster than

public function __construct() {
   $this->a = 5;
}

when creating and accessing dynamic attributes?


来源: stackexchange

问:
Is it possible to get native element for formControl?
I've got Angular reactive form. I created formControls and assigned it to input fields by[formControl]=.... As I understand it creates nativeElement <-> formControl link.

My question: is it possible to get nativeElement for formControl? I want to do something like myFormControl.nativeElement.focus()

答:
I can share one terrible solution but it works for me.

In reactive forms we can use either

1) FormControlDirective

ts

myControl = new FormControl('')
```

<p><strong>template</strong></p>

<pre class="lang-typescript prettyprint-override"><code><input type="text" [formControl]="myControl">
</code>```

or

2) FormControlName

ts

myForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    foo: ''
  });
}
```

<p><strong>template</strong></p>

<pre class="lang-typescript prettyprint-override"><code><form [formGroup]="myForm">
  <input type="text" formControlName="foo">
</form>
</code>```

So for these directives i could write some patch like

1) FormControlDirective

const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
FormControlDirective.prototype.ngOnChanges = function() {
  this.form.nativeElement = this.valueAccessor._elementRef.nativeElement;
  return originFormControlNgOnChanges.apply(this, arguments);
};
```

<p><strong>2) FormControlName</strong></p>

<pre class="lang-typescript prettyprint-override"><code>const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
FormControlName.prototype.ngOnChanges = function() {
  const result =  originFormControlNameNgOnChanges.apply(this, arguments);
  this.control.nativeElement = this.valueAccessor._elementRef.nativeElement;
  return result;
};
</code>```

After that we can easily access to native element having FormControl instance

1) FormControlDirective

focusToFormControl() {
  (<any>this.myControl).nativeElement.focus();
}
```

<p><strong>2) FormControlName</strong></p>

<pre class="lang-typescript prettyprint-override"><code>focusToFormControlName(name) {
  (<any>this.myForm.get(name)).nativeElement.focus();
}
</code>```

Plunker Example

ContentLicense: CC BY-SA 4.0

Body:
I can share one terrible solution but it works for me.

In reactive forms we can use either

1) FormControlDirective

ts

myControl = new FormControl('')

template

<input type="text" [formControl]="myControl">

or

2) FormControlName

ts

myForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    foo: ''
  });
}

template

<form [formGroup]="myForm">
  <input type="text" formControlName="foo">
</form>

So for these directives i could write some patch like

1) FormControlDirective

const originFormControlNgOnChanges = FormControlDirective.prototype.ngOnChanges;
FormControlDirective.prototype.ngOnChanges = function() {
  this.form.nativeElement = this.valueAccessor._elementRef.nativeElement;
  return originFormControlNgOnChanges.apply(this, arguments);
};

2) FormControlName

const originFormControlNameNgOnChanges = FormControlName.prototype.ngOnChanges;
FormControlName.prototype.ngOnChanges = function() {
  const result =  originFormControlNameNgOnChanges.apply(this, arguments);
  this.control.nativeElement = this.valueAccessor._elementRef.nativeElement;
  return result;
};

After that we can easily access to native element having FormControl instance

1) FormControlDirective

focusToFormControl() {
  (<any>this.myControl).nativeElement.focus();
}

2) FormControlName

focusToFormControlName(name) {
  (<any>this.myForm.get(name)).nativeElement.focus();
}

Plunker Example

ContentLicense: CC BY-SA 3.0


问:
Enable Tableview Scrolling but disable touches
I want to disable my tableview. Means that no button,TextFields and other controls can be touched but also i want that my tableview scroll should be working properly.

```<code>self.tableView.userInteractionEnabled=true;
</code>```

I have used this but this made scrolling also disable.

答:
You should set the individual userInteractionEnabled property of the elements you want disabled of your UITableView cells to NO, rather than the entire UITableView.

For example, myButton.userInteractionEnabled = NO;

Setting that to NO on the entire UITableView disables any gesture recognizers that are used to scroll.

Body:
I want to disable my tableview. Means that no button,TextFields and other controls can be touched but also i want that my tableview scroll should be working properly.

self.tableView.userInteractionEnabled=true;

I have used this but this made scrolling also disable.


问:
gulpfile: Task 'default' is not in your gulpfile , with a default does not watch
I have a simple gulp file that when i have no default task it gives me an error, but when i add a default task it does not watch.

here is what I have in the file:

```<code>'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'default', ['sass'] );

gulp.task('sass', function () {
  return gulp.src('./sass/theme.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
</code>```

答:
You can achieve this with gulpfile like this:</p>

```<code>'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('default', ['watch']);

gulp.task('sass', function () {
  return gulp.src('./sass/theme.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', ['sass'], function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});
</code>```

Body:
I have a simple gulp file that when i have no default task it gives me an error, but when i add a default task it does not watch.

here is what I have in the file:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task( 'default', ['sass'] );

gulp.task('sass', function () {
  return gulp.src('./sass/theme.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});

Body:
You can achieve this with gulpfile like this:

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('default', ['watch']);

gulp.task('sass', function () {
  return gulp.src('./sass/theme.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', ['sass'], function () {
  gulp.watch('./sass/**/*.scss', ['sass']);
});


问:
Add Dynamic field in Contact form 7
I have a query related to Dynamic hidden field to be set in Contact form 7

I want to set current date as dynamic hidden field in contact form. Any Help.

My code is  "[dynamichidden post_date "post_date"]"

I am using contact form7 and Contact Form 7 - Dynamic Text Extension

Thank you

答:
I thing you to get current date you have to create shortcode...

put this function in functions.php

```<code>function displaydate(){
return date('F jS, Y');
}
add_shortcode('date', 'displaydate');
</code>```

you can change date format as you wanted...

put this date shortcode without bracket in dynamic value field in dynamichidden input field..

check this image http://dev.savivatech.com/sa/wp-content/uploads/2017/07/current-date.png

```<code>[dynamichidden dynamichidden-693 "date"]
</code>```

this dynamichidden-693 is dynamic name...

Hopes this will help you

Title: Add Dynamic field in Contact form 7

Body:
I thing you to get current date you have to create shortcode...

put this function in functions.php

function displaydate(){
return date('F jS, Y');
}
add_shortcode('date', 'displaydate');

you can change date format as you wanted...

put this date shortcode without bracket in dynamic value field in dynamichidden input field..

check this image http://dev.savivatech.com/sa/wp-content/uploads/2017/07/current-date.png

[dynamichidden dynamichidden-693 "date"]

this dynamichidden-693 is dynamic name...

Hopes this will help you


问:
What is the best free JavaScript obfuscator that is available as a Java library?
I know this question has been asked many times, but here are my specific needs. The obfuscator needs to come in a form of a java library, so I can make an Ant task in order to automate the build process. IE7, 8, Firefox and Chrome must be able to interpret the resulting js very fast (original js file is pretty big - 18k lines of code). If none exist which satisfy these requirements I'm willing to consider a commercial solution.</p>

答: I still believe that jsutility.pjoneil.net provides the best compression of any program available except for gzip.   It's obfuscation support is avoids most of the problems with obfuscation.   It also now support batch operations.</p>

ContentLicense: CC BY-SA 2.5


问:
Label not displaying as expected with select box
I am tired of searching for the solution all day but can't find why my label is not working.
When I write only HTML then it works but as soon I applied CSS in it, it stopped working.
Talking about "Section Start" label it should be linked with "selectbox".Other labels work fine.
I want that when i click on "section start" label it should autofocus on selectbox(New Page).

    .wrap
    {
     width: 393px;
     height: 545px;
     border: 1px solid #0855DD;
     border-top: 1px solid #0734DA;
     border-color: #004DE3 #00138C #00138C #0855DD;
     -webkit-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     -moz-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     margin: 20px;
    }
    .outline, .wrap
    {
     -webkit-border-radius: 8px 8px 0 0;
     -moz-border-radius: 8px 8px 0 0;
     border-radius: 8px 8px 0 0;
    }
    .outline
    {
     height: 26px;
     width: 391px;
     border-bottom: none;
     background: #3d95ff;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d95ff), color-stop(4%,#2b90ff), color-stop(8%,#0372ff), color-stop(12%,#0365f1), color-stop(16%,#005cec), color-stop(20%,#0058e6), color-stop(28%,#0054e3), color-stop(48%,#0055e5), color-stop(60%,#0058ee), color-stop(68%,#0160f5), color-stop(72%,#0060f9), color-stop(76%,#0164f9), color-stop(80%,#026afe), color-stop(88%,#036eff), color-stop(96%,#0368fa), color-stop(100%,#0060f9));
     background: -webkit-linear-gradient(top,  #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%);
     background: -moz-linear-gradient(top,  #3d95ff 0%, #2b90ff 4%, #0372ff 8%, #0365f1 12%, #005cec 16%, #0058e6 20%, #0054e3 28%, #0055e5 48%, #0058ee 60%, #0160f5 68%, #0060f9 72%, #0164f9 76%, #026afe 80%, #036eff 88%, #0368fa 96%, #0060f9 100%);
     background: linear-gradient(to bottom,  #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%);
    }
    .outline, .container, .page_set_form, .out_heading
    {
     margin: auto;
    }
    .out_heading
    {
     line-height: 27px;
     height: 14px;
     width: 385px;
     margin: 3px;
    }
    .container, .preview
    {
     width: 357px;
    }
    .container
     {
     height: 427px;
     padding: 9px;
     padding-left: 7px;
     margin-top: 1px;
     background-image: -webkit-gradient(
     linear,
     left top,
     left bottom,
     color-stop(0, #FCFCFE),
     color-stop(1, #F4F3EE),
     color-stop(1, #FBFBFD),
     color-stop(1, #FBFBFC),
     color-stop(1, #FBFAFB),
     color-stop(1, #FAFBFB),
     color-stop(1, #FAFAFA),
     color-stop(1, #F9FAF9),
     color-stop(1, #F9F8F9),
     color-stop(1, #F9F9F8),
     color-stop(1, #F8F8F7),
     color-stop(1, #F8F7F5),
     color-stop(1, #F7F6F4),
     color-stop(1, #F6F5F2),
     color-stop(1, #F5F5F1),
     color-stop(1, #F5F4EF),
     color-stop(1, #F5F3F0),
     color-stop(1, #F4F3EF)
     );
     background-image: -webkit-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
     background-image: -moz-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
     background-image: linear-gradient(to bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
    }
    .heading
    {
     width: 300px;
     color: #ffffff;
     font: 600 13px arial;
    }
    .right_img
    {
     margin-right: 0;
     width: 12%;
    }
    .help_img, .cross_img
    {
     width: 21px;
     -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
     border-radius: 1px;
    }
    .help_img
    {
     background: url("image/help2.png") no-repeat;
    }
    .cross_img
    {
     background: url("image/cross2.png") no-repeat;
    }
    .page_set_form
    {
     height: 503px;
     width: 379px;
     padding: 6px 5px;
     background-color: #ECE9D8;
     border-top: 1px solid #3879D9;
    }
    .block_one
     {
     width: 196px;
     right: 37px;
     bottom: 10px;
     text-align: center;
    }
    .tab
    {
     width: 203px;
    }
    .tab_new, .tab_form_file, .tab_layout, .container
    {
     border: 1px solid #919B9C;
    }
    .tab_new, .tab_form_file, .tab_layout
    {
     -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;
    }
    .tab_new
    {
     width: 50px;
    }
    .tab_form_file
    {
     width: 51px;
    }
    .right_img, .help_img, .cross_img, .sup_endnote, .div_block
    {
     height: 21px;
    }
    .tab_new, .tab_form_file
    {
     height: 18px;
     background: #e3e9ec;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ec), color-stop(7%,#fdfdfc), color-stop(27%,#f6f6f4), color-stop(100%,#f0f0eb));
     background: -webkit-linear-gradient(top,  #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
     background: -moz-linear-gradient(top,  #e3e9ec 0%, #fdfdfc 7%, #f6f6f4 27%, #f0f0eb 100%);
     background: linear-gradient(to bottom,  #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
    }
    .tab_layout
    {
     width: 53px;
     padding-right: 3px;
     line-height: 23px;
     border-top: 1px solid #E68B2C;
     border-bottom-width: 0;
     -webkit-box-shadow: 0 2px 0 0 #FFC83C inset;
     -moz-box-shadow: 0 2px 0 0 #FFC83C inset;
     box-shadow: 0 2px 0 0 #FFC83C inset;
     border-left-width: 0;
     bottom: 2px;
     background-color: #FCFCFE;
    }
    .tab_new, .tab_form_file, .tab_layout, .section, .type_checkbox:checked:after
    {
     display: block;
    }
    .one_label, .supress_label, .pos, .new_page_select, .div_block
    {
     position: relative;
    }
    .one_label, .firstpage_label, .supress_label
    {
     right: 3px;
    }
    .side_line, .section_label, .vertical_align, .line, .border
    {
     height: 0;
    }
    .side_line
    {
     border-bottom: 1px solid #D0D0BF;
     bottom: 6px;
     left: 3px;
    }
    .section_hr
    {
     width: 319px;
    }
    .page, .section
    {
     padding-top: 8px;
    }
    .section
     {
     height: 49px;
    }
    .section_start
    {
     display: inline-block;
    }
    .section_start, .vertical_align
    {
     line-height: 22px;
    }
    .section, .section_start, .sup_endnote, .section_select
    {
     width: 219px;
    }
    .checkbox_one, .checkbox_two, .section_start
    {
     height: 19px;
    }
    .sup_endnote
    {
     color: #ACA899;
    }
    .new_page_select
    {
     border: 1px solid;
     bottom: 0;
     left: 11px;
    }
    .font_size, .page_set_form, .button_one
    {
     font: 11px arial;
    }
    .apply, .edge, .selectbox_two, .selectbox_one, .tab
    {
     display: inline-flex;
    }
    .new_page_select, .header_select, .footer_select, .align_selectbox, .apply_select
    {
     border: 1px solid #7F9DB9;
     overflow: hidden;
    }
    .new_page_select, .align_selectbox, .apply_select
    {
     background: url("image/arrow1.png") no-repeat right #ffffff;
    }
    .odd_even_checkbox, .first_page_checkbox
    {
     border: 1px solid #1C5180;
     background: #dcdcd7;
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dcdcd7), color-stop(20%,#dcdcd7), color-stop(54%,#f2f2f2), color-stop(100%,#f1f1ef));
     background: -webkit-linear-gradient(-45deg,  #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
     background: -moz-linear-gradient(-45deg,  #dcdcd7 0%, #dcdcd7 20%, #f2f2f2 54%, #f1f1ef 100%);
     background: linear-gradient(135deg,  #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
    }
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox , .type_checkbox:checked:after
    {
     height: 13px;
     width: 13px;
    }
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox, .font_size
    {
     -webkit-appearance: none;
    }
    .type_checkbox:checked:after
    {
     background: url(image/checked.png) no-repeat 0 2px;
     border: none;
     content: '';
     margin-bottom: 0;
    }
    .hidden_checkbox
    {
     border: 1px solid #ACA899;
    }
    .headers
    {
     color: #0046D5;
    }
    .hnf_hr
    {
     width: 255px;
    }
    .head_and_foot
    {
     height: 91px;
     width: 229px;
     padding-top: 6px;
    }
    .head_and_foot, .section
    {
     padding-left: 6px;
    }
    .cancel_button, .head_three, .help_img
    {
     margin-left: 2px;
    }
    .side_line, .float_right, .header_select, .footer_select, .page_select
    {
     float: right;
    }
    .blue_label, .page_set_form, .blue_label_two
    {
     line-height: 15px;
    }
    .blue_label.pr
    {
     line-height: 16px;
    }
    .blue_label, .blue_label_two
    {
     height: 12px;
    }
    .blue_label
    {
     width: 42px;
    }
    .blue_label_two
    {
     width: 103px;
     white-space: nowrap;
    }
    .prev_hr2.prev_hr, .one_label, .firstpage_label, .supress_label
    {
     bottom: 5px;
    }
    .checkbox_one, .checkbox_two
    {
     width: 210px;
    }
    .left_button, .edge_label, .heading, .help_img, .section_label
    {
     float: left;
    }
    .edge_label
    {
     height: 50px;
     width: 100px;
     line-height: 45px;
     padding: 0;
     margin-left: 3px;
    }
    .tab, .edge_right
    {
     line-height: 20px;
    }
    .edge_right
    {
     height: 55px;
     width: 130px;
    }
    .tab, .selectbox_one
    {
     padding-top: 2px;
    }
    .selectbox_one
    {
     width: 123px;
    }
    .header_label
    {
     width: 47px;
    }
    .head_three
    {
     width: 61%;
    }
    .selectbox_two, .app_label
    {
     width: 122px;
    }
    .footer_label
    {
     width: 46px;
    }
    .foot_select
    {
     width: 63%;
    }
    .header_select, .footer_select
    {
     height: 16px;
     width: 68px;
     background: url("image/drop.png") no-repeat right #ffffff;
     margin-right: 2px;
     padding-left: 1px;
    }
    .section_start
    {
     padding-left: 3px;
    }
    .height_value, .button_one
    {
     height: 22px;
    }
    .selectbox_two, .section_select, .apply
    {
     height: 23px;
    }
    .selectbox_two, .outline
    {
     padding-top: 1px;
    }
    .header_select, .align_selectbox
     {
     margin-left: 8px;
    }
    .footer_select
     {
     margin-left: 11px;
    }
    .new_page_select
    {
     margin-right: 13px;
    }
    .edge
    {
     height: 54px;
     width: 222px;
    }
    .page_hr
    {
     width: 330px;
    }
    .page
     {
     height: 65px;
     width: 297px;
     padding-left: 8px;
    }
    .page_contain
    {
     height: 25px;
     width: 217px;
    }
    .vertical_align
    {
     width: 206px;
    }
    .page_select
    {
     width: 126px;
    }
    .align_selectbox, .new_page_select, .apply_select
    {
     width: 119px;
    }
    .prev_hr
    {
     width: 316px;
    }
    .preview
    {
     height: 148px;
     padding-top: 4px;
    }
    .new_page_select, .img_previous
    {
     margin-left: 20px;
    }
    .img_previous
    {
     height: 113px;
     width: 91px;
     background: url("image/preview1.png") no-repeat;
     border-left: 24px solid transparent;
    }
    .default_button, .container, .tab_form_file
    {
     margin-left: 1px;
    }
    .default_button, .edge_label
    {
     letter-spacing: 0.3px;
    }
    .right_button, .left_button
    {
     height: 24px;
    }
    .left_button
    {
     width: 72px;
    }
    .buttons
    {
     height: 32px;
     width: 377px;
    }
    .selectbox_two, .heading, .tab
    {
     height: 20px;
    }
    .apply_select
    {
     margin-left: 9px;
    }
    .line_button
    {
     margin-left: 6px;
    }
    .line, .border, .line_button
    {
     width: 93px;
    }
    .line
    {
     width: 191px;
    }
    .border
    {
     width: 89px;
    }
    .select
    {
        width: 367px;
    }
    .apply
    {
     padding-top: 13px;
     width: 359px;
    }
    .app_label, .select, .line, .right_button
    {
     height: 30px;
    }
    .app_label, .heading
    {
     line-height: 24px;
    }
    .select
    {
     margin-right: 11px;
    }
    .section_label, .select, .line
    {
     width: 120px;
    }
    .line
    {
     margin-right: 3px;
    }
    .border
    {
     height: 120px;
    }
    .default_button, .ok_button, .cancel_button, .border_button
    {
     width: 74px;
    }
    .border_button
    {
     margin-left: 7px;
    }
    .line_button, .border_button, .ok_button, .cancel_button, .default_button
    {
     background: #ffffff;
     border: 1px solid #003C74;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
    }
    .right_button
    {
     width: 161px;
    }
    .ok_button
    {
     margin: 0 6px 0 3px;
     -webkit-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     -moz-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     outline: 1px dotted #000000;
     outline-offset: -4px;
     background-color: #FFFFFF;
    }
    .default_button, .cancel_button, .ok_button
    {
     margin-top: 10px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(26%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5));
     background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
     background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f3 26%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
     background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
    }
    .line_button, .border_button
    {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(15%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5));
     background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
     background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f3 15%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
     background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
    }
    ::-webkit-input-placeholder
     {
     color: #000000;
    }
    .new_page_select, .padding_left, .align_selectbox, .apply_select, .button_one
    {
     padding-left: 2px;
    }```
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div class="wrap">

     <div class="outline">
  <div class="out_heading">
   <div class="heading">
    <label>Page Setup</label>
   </div>
   <div class="right_img height_value float_right">
    <div class="help_img">
    </div>
    <div class="cross_img float_right">
    </div>
   </div>
  </div>
 </div>
 <form name="page_setup_form" id="page_setup_form" class="page_set_form">
  <div class="block_one div_block">
   <ul class="tab">
    <li class="tab_new" accesskey="c">Margins</li>
    <li class="tab_form_file" accesskey="b">
     <label class="form_file">Paper</label>
    </li>
    <li class="tab_layout div_block">Layout</li>
   </ul>
  </div>
  <div class="container">
   <div class="blue_label">
    <label class="headers">Section</label>
   </div>
   <div class="section_hr pos side_line">
   </div>
   <div class="section">
    <div class="section_start">
     <div class="section_label">
      <label for="hello">Section sta<u>r</u>t:</label>
     </div>
     <div class="section_select float_right">
      <select name="select_start" id="hello" class="new_page_select height_value font_size float_right" accesskey="r">
       <option value="1" selected="selected">New page</option>
      </select>
     </div>
    </div>
    <div class="sup_endnote">
     <input type="checkbox" name="hidden_checkbox" id="hidden_checkbox" class="hidden_checkbox type_checkbox" disabled="disabled"/>
     <label class="supress_label">Suppress endnotes</label>
    </div>
   </div>
   <div class="blue_label_two">
    <label class="headers">Headers and footers</label>
   </div>
   <div class="hnf_hr pos side_line">
   </div>
   <div class="head_and_foot">
    <div class="checkbox_one">
     <input type="checkbox" name="odd_even_checkbox" id="odd_even_checkbox" class="odd_even_checkbox type_checkbox" accesskey="o"/>
     <label class="one_label" for="odd_even_checkbox">Different <u>o</u>dd and even</label>
    </div>
    <div class="checkbox_two">
     <input type="checkbox" name="first_page_checkbox" id="first_page_checkbox" class="first_page_checkbox type_checkbox" accesskey="p"/>
     <label class="firstpage_label pos" for="first_page_checkbox">Different first <u>p</u>age</label>
    </div>
    <div class="edge">
     <div class="edge_label">
      <label>From edge:</label>
     </div>
     <div class="edge_right float_right">
      <div class="selectbox_one height_value float_right">
       <div class="header_label height_value">
        <label for="header_select"><u>H</u>eader:</label>
       </div>
       <div class="head_three height_value">
        <input type="number" name="header_select" id="header_select" class="header_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10" accesskey="h"/>
       </div>
      </div>
      <div class="selectbox_two height_value float_right">
       <div class="footer_label height_value">
        <label for="footer_select"><u>F</u>ooter:</label>
       </div>
       <div class="foot_select height_value">
        <input type="number" name="footer_select" id="footer_select" class="footer_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10"  accesskey="f"/>
       </div>
      </div>
     </div>
    </div>
   </div>
   <div class="blue_label">
    <label class="headers">Page</label>
   </div>
   <div class="page_hr pos side_line">
   </div>
   <div class="page">
    <div class="page_contain">
     <div class="vertical_align">
      <label for="align_selectbox"><u>V</u>ertical alignment:</label>
     </div>
     <div class="page_select height_value">
      <select name="align_selectbox" id="align_selectbox" class="align_selectbox height_value font_size" accesskey="v">
       <option value="1" selected="selected">Top</option>
      </select>
     </div>
    </div>
   </div>
   <div class="blue_label pr">
    <label class="headers">Preview</label>
   </div>
   <div class="prev_hr2 prev_hr pos side_line">
   </div>
   <div class="preview float_right">
    <div class="img_previous">
    </div>
    <div class="apply">
     <div class="app_label">
      <label for="apply_selectbox">Appl<u>y</u> to:</label>
     </div>
     <div class="select">
      <select name="apply_selectbox" id="apply_selectbox" class="apply_select height_value font_size" accesskey="y">
       <option value="1" selected="selected">This point forward</option>
      </select>
     </div>
     <div class="line">
      <button type="button" name="line_no_btn" id="line_no_btn" class="line_button button_one" accesskey="n">Line <u>N</u>umbers...</button>
     </div>
     <div class="border height_value">
      <button type="button" name="border_btn" id="border_btn" class="border_button button_one" accesskey="b"><u>B</u>orders...</button>
     </div>
    </div>
   </div>
  </div>
  <div class="buttons">
   <div class="left_button">
    <button type="button" name="default_button" id="default_button" class="default_button button_one" accesskey="d"><u>D</u>efault...</button>
   </div>
   <div class="right_button float_right">
    <input type="button" name="ok_button" id="ok_button" class="ok_button button_one" value="OK" autofocus="autofocus"/>
    <input type="button" name="cancel_button" id="cancel_button" class="cancel_button button_one float_right" value="Cancel"/>
   </div>
  </div>
      </form>
   </div></code>```

答:
Add this CSS rule
div.section_select width is set to 219 px covering the label text , so make its width auto

```<code>.section_select {
width:auto;
}
</code>```

Link for reference
hope this works..

Body:
I am tired of searching for the solution all day but can't find why my label is not working.
When I write only HTML then it works but as soon I applied CSS in it, it stopped working.
Talking about "Section Start" label it should be linked with "selectbox".Other labels work fine.
I want that when i click on "section start" label it should autofocus on selectbox(New Page).

    .wrap
    {
     width: 393px;
     height: 545px;
     border: 1px solid #0855DD;
     border-top: 1px solid #0734DA;
     border-color: #004DE3 #00138C #00138C #0855DD;
     -webkit-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     -moz-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
     margin: 20px;
    }
    .outline, .wrap
    {
     -webkit-border-radius: 8px 8px 0 0;
     -moz-border-radius: 8px 8px 0 0;
     border-radius: 8px 8px 0 0;
    }
    .outline
    {
     height: 26px;
     width: 391px;
     border-bottom: none;
     background: #3d95ff;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d95ff), color-stop(4%,#2b90ff), color-stop(8%,#0372ff), color-stop(12%,#0365f1), color-stop(16%,#005cec), color-stop(20%,#0058e6), color-stop(28%,#0054e3), color-stop(48%,#0055e5), color-stop(60%,#0058ee), color-stop(68%,#0160f5), color-stop(72%,#0060f9), color-stop(76%,#0164f9), color-stop(80%,#026afe), color-stop(88%,#036eff), color-stop(96%,#0368fa), color-stop(100%,#0060f9));
     background: -webkit-linear-gradient(top,  #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%);
     background: -moz-linear-gradient(top,  #3d95ff 0%, #2b90ff 4%, #0372ff 8%, #0365f1 12%, #005cec 16%, #0058e6 20%, #0054e3 28%, #0055e5 48%, #0058ee 60%, #0160f5 68%, #0060f9 72%, #0164f9 76%, #026afe 80%, #036eff 88%, #0368fa 96%, #0060f9 100%);
     background: linear-gradient(to bottom,  #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%);
    }
    .outline, .container, .page_set_form, .out_heading
    {
     margin: auto;
    }
    .out_heading
    {
     line-height: 27px;
     height: 14px;
     width: 385px;
     margin: 3px;
    }
    .container, .preview
    {
     width: 357px;
    }
    .container
     {
     height: 427px;
     padding: 9px;
     padding-left: 7px;
     margin-top: 1px;
     background-image: -webkit-gradient(
     linear,
     left top,
     left bottom,
     color-stop(0, #FCFCFE),
     color-stop(1, #F4F3EE),
     color-stop(1, #FBFBFD),
     color-stop(1, #FBFBFC),
     color-stop(1, #FBFAFB),
     color-stop(1, #FAFBFB),
     color-stop(1, #FAFAFA),
     color-stop(1, #F9FAF9),
     color-stop(1, #F9F8F9),
     color-stop(1, #F9F9F8),
     color-stop(1, #F8F8F7),
     color-stop(1, #F8F7F5),
     color-stop(1, #F7F6F4),
     color-stop(1, #F6F5F2),
     color-stop(1, #F5F5F1),
     color-stop(1, #F5F4EF),
     color-stop(1, #F5F3F0),
     color-stop(1, #F4F3EF)
     );
     background-image: -webkit-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
     background-image: -moz-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
     background-image: linear-gradient(to bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%);
    }
    .heading
    {
     width: 300px;
     color: #ffffff;
     font: 600 13px arial;
    }
    .right_img
    {
     margin-right: 0;
     width: 12%;
    }
    .help_img, .cross_img
    {
     width: 21px;
     -webkit-border-radius: 1px;
     -moz-border-radius: 1px;
     border-radius: 1px;
    }
    .help_img
    {
     background: url("image/help2.png") no-repeat;
    }
    .cross_img
    {
     background: url("image/cross2.png") no-repeat;
    }
    .page_set_form
    {
     height: 503px;
     width: 379px;
     padding: 6px 5px;
     background-color: #ECE9D8;
     border-top: 1px solid #3879D9;
    }
    .block_one
     {
     width: 196px;
     right: 37px;
     bottom: 10px;
     text-align: center;
    }
    .tab
    {
     width: 203px;
    }
    .tab_new, .tab_form_file, .tab_layout, .container
    {
     border: 1px solid #919B9C;
    }
    .tab_new, .tab_form_file, .tab_layout
    {
     -webkit-border-radius: 4px 4px 0 0;
     -moz-border-radius: 4px 4px 0 0;
     border-radius: 4px 4px 0 0;
    }
    .tab_new
    {
     width: 50px;
    }
    .tab_form_file
    {
     width: 51px;
    }
    .right_img, .help_img, .cross_img, .sup_endnote, .div_block
    {
     height: 21px;
    }
    .tab_new, .tab_form_file
    {
     height: 18px;
     background: #e3e9ec;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ec), color-stop(7%,#fdfdfc), color-stop(27%,#f6f6f4), color-stop(100%,#f0f0eb));
     background: -webkit-linear-gradient(top,  #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
     background: -moz-linear-gradient(top,  #e3e9ec 0%, #fdfdfc 7%, #f6f6f4 27%, #f0f0eb 100%);
     background: linear-gradient(to bottom,  #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
    }
    .tab_layout
    {
     width: 53px;
     padding-right: 3px;
     line-height: 23px;
     border-top: 1px solid #E68B2C;
     border-bottom-width: 0;
     -webkit-box-shadow: 0 2px 0 0 #FFC83C inset;
     -moz-box-shadow: 0 2px 0 0 #FFC83C inset;
     box-shadow: 0 2px 0 0 #FFC83C inset;
     border-left-width: 0;
     bottom: 2px;
     background-color: #FCFCFE;
    }
    .tab_new, .tab_form_file, .tab_layout, .section, .type_checkbox:checked:after
    {
     display: block;
    }
    .one_label, .supress_label, .pos, .new_page_select, .div_block
    {
     position: relative;
    }
    .one_label, .firstpage_label, .supress_label
    {
     right: 3px;
    }
    .side_line, .section_label, .vertical_align, .line, .border
    {
     height: 0;
    }
    .side_line
    {
     border-bottom: 1px solid #D0D0BF;
     bottom: 6px;
     left: 3px;
    }
    .section_hr
    {
     width: 319px;
    }
    .page, .section
    {
     padding-top: 8px;
    }
    .section
     {
     height: 49px;
    }
    .section_start
    {
     display: inline-block;
    }
    .section_start, .vertical_align
    {
     line-height: 22px;
    }
    .section, .section_start, .sup_endnote, .section_select
    {
     width: 219px;
    }
    .checkbox_one, .checkbox_two, .section_start
    {
     height: 19px;
    }
    .sup_endnote
    {
     color: #ACA899;
    }
    .new_page_select
    {
     border: 1px solid;
     bottom: 0;
     left: 11px;
    }
    .font_size, .page_set_form, .button_one
    {
     font: 11px arial;
    }
    .apply, .edge, .selectbox_two, .selectbox_one, .tab
    {
     display: inline-flex;
    }
    .new_page_select, .header_select, .footer_select, .align_selectbox, .apply_select
    {
     border: 1px solid #7F9DB9;
     overflow: hidden;
    }
    .new_page_select, .align_selectbox, .apply_select
    {
     background: url("image/arrow1.png") no-repeat right #ffffff;
    }
    .odd_even_checkbox, .first_page_checkbox
    {
     border: 1px solid #1C5180;
     background: #dcdcd7;
     background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dcdcd7), color-stop(20%,#dcdcd7), color-stop(54%,#f2f2f2), color-stop(100%,#f1f1ef));
     background: -webkit-linear-gradient(-45deg,  #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
     background: -moz-linear-gradient(-45deg,  #dcdcd7 0%, #dcdcd7 20%, #f2f2f2 54%, #f1f1ef 100%);
     background: linear-gradient(135deg,  #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
    }
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox , .type_checkbox:checked:after
    {
     height: 13px;
     width: 13px;
    }
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox, .font_size
    {
     -webkit-appearance: none;
    }
    .type_checkbox:checked:after
    {
     background: url(image/checked.png) no-repeat 0 2px;
     border: none;
     content: '';
     margin-bottom: 0;
    }
    .hidden_checkbox
    {
     border: 1px solid #ACA899;
    }
    .headers
    {
     color: #0046D5;
    }
    .hnf_hr
    {
     width: 255px;
    }
    .head_and_foot
    {
     height: 91px;
     width: 229px;
     padding-top: 6px;
    }
    .head_and_foot, .section
    {
     padding-left: 6px;
    }
    .cancel_button, .head_three, .help_img
    {
     margin-left: 2px;
    }
    .side_line, .float_right, .header_select, .footer_select, .page_select
    {
     float: right;
    }
    .blue_label, .page_set_form, .blue_label_two
    {
     line-height: 15px;
    }
    .blue_label.pr
    {
     line-height: 16px;
    }
    .blue_label, .blue_label_two
    {
     height: 12px;
    }
    .blue_label
    {
     width: 42px;
    }
    .blue_label_two
    {
     width: 103px;
     white-space: nowrap;
    }
    .prev_hr2.prev_hr, .one_label, .firstpage_label, .supress_label
    {
     bottom: 5px;
    }
    .checkbox_one, .checkbox_two
    {
     width: 210px;
    }
    .left_button, .edge_label, .heading, .help_img, .section_label
    {
     float: left;
    }
    .edge_label
    {
     height: 50px;
     width: 100px;
     line-height: 45px;
     padding: 0;
     margin-left: 3px;
    }
    .tab, .edge_right
    {
     line-height: 20px;
    }
    .edge_right
    {
     height: 55px;
     width: 130px;
    }
    .tab, .selectbox_one
    {
     padding-top: 2px;
    }
    .selectbox_one
    {
     width: 123px;
    }
    .header_label
    {
     width: 47px;
    }
    .head_three
    {
     width: 61%;
    }
    .selectbox_two, .app_label
    {
     width: 122px;
    }
    .footer_label
    {
     width: 46px;
    }
    .foot_select
    {
     width: 63%;
    }
    .header_select, .footer_select
    {
     height: 16px;
     width: 68px;
     background: url("image/drop.png") no-repeat right #ffffff;
     margin-right: 2px;
     padding-left: 1px;
    }
    .section_start
    {
     padding-left: 3px;
    }
    .height_value, .button_one
    {
     height: 22px;
    }
    .selectbox_two, .section_select, .apply
    {
     height: 23px;
    }
    .selectbox_two, .outline
    {
     padding-top: 1px;
    }
    .header_select, .align_selectbox
     {
     margin-left: 8px;
    }
    .footer_select
     {
     margin-left: 11px;
    }
    .new_page_select
    {
     margin-right: 13px;
    }
    .edge
    {
     height: 54px;
     width: 222px;
    }
    .page_hr
    {
     width: 330px;
    }
    .page
     {
     height: 65px;
     width: 297px;
     padding-left: 8px;
    }
    .page_contain
    {
     height: 25px;
     width: 217px;
    }
    .vertical_align
    {
     width: 206px;
    }
    .page_select
    {
     width: 126px;
    }
    .align_selectbox, .new_page_select, .apply_select
    {
     width: 119px;
    }
    .prev_hr
    {
     width: 316px;
    }
    .preview
    {
     height: 148px;
     padding-top: 4px;
    }
    .new_page_select, .img_previous
    {
     margin-left: 20px;
    }
    .img_previous
    {
     height: 113px;
     width: 91px;
     background: url("image/preview1.png") no-repeat;
     border-left: 24px solid transparent;
    }
    .default_button, .container, .tab_form_file
    {
     margin-left: 1px;
    }
    .default_button, .edge_label
    {
     letter-spacing: 0.3px;
    }
    .right_button, .left_button
    {
     height: 24px;
    }
    .left_button
    {
     width: 72px;
    }
    .buttons
    {
     height: 32px;
     width: 377px;
    }
    .selectbox_two, .heading, .tab
    {
     height: 20px;
    }
    .apply_select
    {
     margin-left: 9px;
    }
    .line_button
    {
     margin-left: 6px;
    }
    .line, .border, .line_button
    {
     width: 93px;
    }
    .line
    {
     width: 191px;
    }
    .border
    {
     width: 89px;
    }
    .select
    {
        width: 367px;
    }
    .apply
    {
     padding-top: 13px;
     width: 359px;
    }
    .app_label, .select, .line, .right_button
    {
     height: 30px;
    }
    .app_label, .heading
    {
     line-height: 24px;
    }
    .select
    {
     margin-right: 11px;
    }
    .section_label, .select, .line
    {
     width: 120px;
    }
    .line
    {
     margin-right: 3px;
    }
    .border
    {
     height: 120px;
    }
    .default_button, .ok_button, .cancel_button, .border_button
    {
     width: 74px;
    }
    .border_button
    {
     margin-left: 7px;
    }
    .line_button, .border_button, .ok_button, .cancel_button, .default_button
    {
     background: #ffffff;
     border: 1px solid #003C74;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
    }
    .right_button
    {
     width: 161px;
    }
    .ok_button
    {
     margin: 0 6px 0 3px;
     -webkit-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     -moz-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset;
     outline: 1px dotted #000000;
     outline-offset: -4px;
     background-color: #FFFFFF;
    }
    .default_button, .cancel_button, .ok_button
    {
     margin-top: 10px;
     -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
     border-radius: 2px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(26%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5));
     background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
     background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f3 26%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
     background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
    }
    .line_button, .border_button
    {
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(15%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5));
     background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
     background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f3 15%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
     background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
    }
    ::-webkit-input-placeholder
     {
     color: #000000;
    }
    .new_page_select, .padding_left, .align_selectbox, .apply_select, .button_one
    {
     padding-left: 2px;
    }

    Page Setup

 <form name="page_setup_form" id="page_setup_form" class="page_set_form">

Margins

     Paper

Layout

    Section

      Section start:

      <select name="select_start" id="hello" class="new_page_select height_value font_size float_right" accesskey="r">
       <option value="1" selected="selected">New page</option>
      </select>

     <input type="checkbox" name="hidden_checkbox" id="hidden_checkbox" class="hidden_checkbox type_checkbox" disabled="disabled"/>
     Suppress endnotes

    Headers and footers

     <input type="checkbox" name="odd_even_checkbox" id="odd_even_checkbox" class="odd_even_checkbox type_checkbox" accesskey="o"/>
     Different odd and even

     <input type="checkbox" name="first_page_checkbox" id="first_page_checkbox" class="first_page_checkbox type_checkbox" accesskey="p"/>
     Different first page

      From edge:

        Header:

        <input type="number" name="header_select" id="header_select" class="header_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10" accesskey="h"/>

        Footer:

        <input type="number" name="footer_select" id="footer_select" class="footer_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10"  accesskey="f"/>

    Page

      Vertical alignment:

      <select name="align_selectbox" id="align_selectbox" class="align_selectbox height_value font_size" accesskey="v">
       <option value="1" selected="selected">Top</option>
      </select>

    Preview

      Apply to:

      <select name="apply_selectbox" id="apply_selectbox" class="apply_select height_value font_size" accesskey="y">
       <option value="1" selected="selected">This point forward</option>
      </select>

      <button type="button" name="line_no_btn" id="line_no_btn" class="line_button button_one" accesskey="n">Line Numbers...</button>

      <button type="button" name="border_btn" id="border_btn" class="border_button button_one" accesskey="b">Borders...</button>

    <button type="button" name="default_button" id="default_button" class="default_button button_one" accesskey="d">Default...</button>

    <input type="button" name="ok_button" id="ok_button" class="ok_button button_one" value="OK" autofocus="autofocus"/>
    <input type="button" name="cancel_button" id="cancel_button" class="cancel_button button_one float_right" value="Cancel"/>

      </form>

Body:
Add this CSS rule
div.section_select width is set to 219 px covering the label text , so make its width auto

.section_select {
width:auto;
}

Link for reference
hope this works..


答:
Simply set userInteractionEnabled to false to your UITableViewCell.

```<code>func tableView(_ tableView: UITableView, cellForRowAtIndexPath indexPath: IndexPath) -> UITableViewCell {
  // do your stuffs
  cell.userInteractionEnabled = false
  return cell
}
</code>```

To disbale selection

```<code>tableView.allowSelection = false
</code>```

Title: Enable Tableview Scrolling but disable touches

Body:
Simply set userInteractionEnabled to false to your UITableViewCell.

func tableView(_ tableView: UITableView, cellForRowAtIndexPath indexPath: IndexPath) -> UITableViewCell {
  // do your stuffs
  cell.userInteractionEnabled = false
  return cell
}

To disbale selection

tableView.allowSelection = false


问:
Sticky Sidebar with JavaScript - Sticky only until specifed element
I want to create a sticky sidebar. But the sticky sidebar should only be stick until the ending of the sidebar has reached a specifed element.

Here is the webpage I want to get worked with the sidebar:
https://digital-hacks.de/vpn-verbindung-einrichten/

You can see the code in the head section or here.

```<code><script>
    var sidebar = $('#sidebar-content'),
        nav = $('.sidebar-content'),
        startPosition = sidebar .offset().top,
        stopPosition = $('#abspann').offset().top - nav.outerHeight();

    $(document).scroll(function () {
        //stick nav to top of page
        var y = $(this).scrollTop()

        if (y > startPosition) {
            nav.addClass('sticky');
            if (y > stopPosition) {
                nav.css('top', stopPosition - y);
            } else {
                nav.css('top', 0);
            }
        } else {
            nav.removeClass('sticky');
        }
    });
</script>
</code>```

I want that the sidebar gets attached to the screen if the user scrolls down and it should end if the ending of the sidebar has reached the element #abspann.

But I get a error in my code:
Uncaught TypeError: $ is not a function at (index):415

How can I get this working?

I found the sourcecode here.

Greetings

答: Cant add comment so posting as a answer. Try replacing $ with jQuery in your above code. Hopefully it will resolve the error.</p>

Body:
I want to create a sticky sidebar. But the sticky sidebar should only be stick until the ending of the sidebar has reached a specifed element.

Here is the webpage I want to get worked with the sidebar:
https://digital-hacks.de/vpn-verbindung-einrichten/

You can see the code in the head section or here.

I want that the sidebar gets attached to the screen if the user scrolls down and it should end if the ending of the sidebar has reached the element #abspann.

But I get a error in my code:
Uncaught TypeError: $ is not a function at (index):415

How can I get this working?

I found the sourcecode here.

Greetings


问:
Link two tables with Order: MySQL and PHP
I have this table called user_friends:

```<code>accid  |  user1  |  user2
1       mark_12     john_24
2       john_24     jim_01
3       mark_12     jim_01
4       nico_7      mark_12
</code>```

And this table called users_students:

```<code>studentuniqueid  |  firstname  |  lastname  |  age
mark_12           Mark Anthony   Sierra       20
john_24           Johhny         Powers       21
jim_01            James          Sanders      21
nico_7            Nicolai        Renade       19
janice_53         Janice         Allaine      24
peter_41          Peter          Allan        21
</code>```

Now, here's what I wanted to do:

1.Select all entry/data in the user_friends table that has mark_12 (Mark's ID). Mark's ID could either be on user1 or user2 right? So I can just use SELECT * FROM user_friends WHERE user1 = 'mark_12' OR user2 = 'mark_12' and echo its accid, it will then display:

1, 3, 4 since mark_12 appears on those entries on the table.

2.Now I want to select and link the user_friends and users_student so that I could alphabetically arrange Mark's friends based on the user_friends table ORDERING them based on the lastname on the users_student table. I know this is possible, I just don't know how to do it yet.

I tried:

```<code>$user_id = $_SESSION['id'];
$sql = "SELECT user_friends.accid,users_student.studentuniqueid FROM user_friends INNER JOIN IN (user_friends.user1,user_friends.user2)=users_student.studentuniqueid WHERE user1 = '$user_id' OR user2 = '$user_id' ORDER BY users_student.lastname ASC ";
</code>```

And also:

```<code>$sql = "SELECT user_friends.accid,users_student.studentuniqueid FROM user_friends INNER JOIN user_friends.user1,user_friends.user2=users_student.studentuniqueid WHERE user1 = '$user_id' OR user2 = '$user_id' ORDER BY users_student.lastname ASC ";
</code>```

But somehow didn't work.
I want to achieve something like:

```<code>Mark's Friends:

Johnny Powers
Nicolai Renade
James Sanders
</code>```

答:
I have solved it and made a demo for you in the SQLFiddle

```<code>SELECT users_students.FirstName, users_students.LastName FROM users_students
LEFT JOIN user_friends ON user_friends.user2 = users_students.studentuniqueid
WHERE (user_friends.user1 ="mark_12" OR user_friends.user2 ="mark_12" )
ORDER BY users_students.lastname ASC
</code>```

Now you can change your mark_12 by yourvariable

Body:
I have this table called user_friends:

accid  |  user1  |  user2
1       mark_12     john_24
2       john_24     jim_01
3       mark_12     jim_01
4       nico_7      mark_12

And this table called users_students:

studentuniqueid  |  firstname  |  lastname  |  age
mark_12           Mark Anthony   Sierra       20
john_24           Johhny         Powers       21
jim_01            James          Sanders      21
nico_7            Nicolai        Renade       19
janice_53         Janice         Allaine      24
peter_41          Peter          Allan        21

Now, here's what I wanted to do:

1.Select all entry/data in the user_friends table that has mark_12 (Mark's ID). Mark's ID could either be on user1 or user2 right? So I can just use SELECT * FROM user_friends WHERE user1 = 'mark_12' OR user2 = 'mark_12' and echo its accid, it will then display:

1, 3, 4 since mark_12 appears on those entries on the table.

2.Now I want to select and link the user_friends and users_student so that I could alphabetically arrange Mark's friends based on the user_friends table ORDERING them based on the lastname on the users_student table. I know this is possible, I just don't know how to do it yet.

I tried:

$user_id = $_SESSION['id'];
$sql = "SELECT user_friends.accid,users_student.studentuniqueid FROM user_friends INNER JOIN IN (user_friends.user1,user_friends.user2)=users_student.studentuniqueid WHERE user1 = '$user_id' OR user2 = '$user_id' ORDER BY users_student.lastname ASC ";

And also:

$sql = "SELECT user_friends.accid,users_student.studentuniqueid FROM user_friends INNER JOIN user_friends.user1,user_friends.user2=users_student.studentuniqueid WHERE user1 = '$user_id' OR user2 = '$user_id' ORDER BY users_student.lastname ASC ";

But somehow didn't work.
I want to achieve something like:

Mark's Friends:

Johnny Powers
Nicolai Renade
James Sanders

Body:
I have solved it and made a demo for you in the SQLFiddle

SELECT users_students.FirstName, users_students.LastName FROM users_students
LEFT JOIN user_friends ON user_friends.user2 = users_students.studentuniqueid
WHERE (user_friends.user1 ="mark_12" OR user_friends.user2 ="mark_12" )
ORDER BY users_students.lastname ASC

Now you can change your mark_12 by yourvariable


问:
Did you forget to register or load this tag in django
I tried to insert image of wine in wine_list .html and I get this error that

Invalid block tag on line 21: 'static'reviews\images\download(1).jpg'', expected 'empty' or 'endfor'. Did you forget to register or load this tag?

Here is the code for wine_list

```<code>{% extends 'base.html' %}

    {% block title %}
    <h2>Wine list</h2>
    {% endblock %}

    {% block content %}
    {% if wine_list %}
    {% load static %}

    <div>
        {% for wine in wine_list %}
        <div>
            <h4><a href="{% url 'reviews:wine_detail' wine.id %}">
            {{ wine.name }}
                   {
    <div class="w-col w-col-3 download">
              <a href="#"><img class="img-rounded"
                src="{% static'reviews\images\download(1).jpg'%}" alt="CEe"></a>
            </div>
        }
            </a></h4>
            <h5>{{ wine.review_set.count }} reviews</h5>
            <h5> average rating</h5>
        </div>
        {% endfor %}
    </div>
    {% else %}
        <p>No wines are available.</p>
    {% endif %}
    {% endblock %}
</code>```

here is also the  code for views.py

```<code>from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from .models import Review, Wine
from .forms import ReviewForm
import datetime

from django.contrib.auth.decorators import login_required

def review_list(request):
    latest_review_list = Review.objects.order_by('-pub_date')[:9]
    context = {'latest_review_list': latest_review_list}
    return render(request, 'reviews/review_list.html', context)

def review_detail(request, review_id):
    review = get_object_or_404(Review, pk=review_id)
    return render(request, 'reviews/review_detail.html', {'review': review})

def wine_list(request):
    wine_list = Wine.objects.order_by('-name')
    context = {'wine_list': wine_list}
    return render(request, 'reviews/wine_list.html', context)

def wine_detail(request, wine_id):
    wine = get_object_or_404(Wine, pk=wine_id)
    form = ReviewForm()
    return render(request, 'reviews/wine_detail.html', {'wine': wine, 'form': form})

@login_required
def add_review(request, wine_id):
    wine = get_object_or_404(Wine, pk=wine_id)
    form = ReviewForm(request.POST)
    if form.is_valid():
        rating = form.cleaned_data['rating']
        comment = form.cleaned_data['comment']
        user_name = request.user.username
        review = Review()
        review.wine = wine
        review.user_name = user_name
        review.rating = rating
        review.comment = comment
        review.pub_date = datetime.datetime.now()
        review.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponseRedirect(reverse('reviews:wine_detail', args=(wine.id,)))

    return render(request, 'reviews/wine_detail.html', {'wine': wine, 'form': form})

def user_review_list(request, username=None):
    if not username:
        username = request.user.username
    latest_review_list = Review.objects.filter(user_name=username).order_by('-pub_date')
    context = {'latest_review_list':latest_review_list, 'username':username}
    return render(request, 'reviews/user_review_list.html', context)

@login_required
def user_recommendation_list(request):
    # get this user reviews
    user_reviews = Review.objects.filter(user_name=request.user.username).prefetch_related('wine')
    # from the reviews, get a set of wine IDs
    user_reviews_wine_ids = set(map(lambda x: x.wine.id, user_reviews))
    # then get a wine list excluding the previous IDs
    wine_list = Wine.objects.exclude(id__in=user_reviews_wine_ids)

    return render(
        request,
        'reviews/user_recommendation_list.html',
        {'username': request.user.username,'wine_list': wine_list}
    )
</code>```

答:
You're missing a space on your static tag, should be

```<code>{% static 'reviews\images\download(1).jpg' %}
</code>```

Also, it's usually best to keep load tags at the top, right after extends.

If the image is not being loaded check if the image shows by going to the path directly in the browser, if it is not showing, perhaps the issue is in with the STATIC_URL and STATIC_ROOT settings.

Body:
I tried to insert image of wine in wine_list .html and I get this error that

Invalid block tag on line 21: 'static'reviews\images\download(1).jpg'', expected 'empty' or 'endfor'. Did you forget to register or load this tag?

Here is the code for wine_list

{% extends 'base.html' %}

    {% block title %}

Wine list

    {% endblock %}

    {% block content %}
    {% if wine_list %}
    {% load static %}

        {% for wine in wine_list %}

            {{ wine.name }}
                   {

        }

{{ wine.review_set.count }} reviews

 average rating

        {% endfor %}

    {% else %}

No wines are available.

    {% endif %}
    {% endblock %}

here is also the  code for views.py

from django.shortcuts import get_object_or_404, render
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from .models import Review, Wine
from .forms import ReviewForm
import datetime

from django.contrib.auth.decorators import login_required

def review_list(request):
    latest_review_list = Review.objects.order_by('-pub_date')[:9]
    context = {'latest_review_list': latest_review_list}
    return render(request, 'reviews/review_list.html', context)

def review_detail(request, review_id):
    review = get_object_or_404(Review, pk=review_id)
    return render(request, 'reviews/review_detail.html', {'review': review})

def wine_list(request):
    wine_list = Wine.objects.order_by('-name')
    context = {'wine_list': wine_list}
    return render(request, 'reviews/wine_list.html', context)

def wine_detail(request, wine_id):
    wine = get_object_or_404(Wine, pk=wine_id)
    form = ReviewForm()
    return render(request, 'reviews/wine_detail.html', {'wine': wine, 'form': form})

@login_required
def add_review(request, wine_id):
    wine = get_object_or_404(Wine, pk=wine_id)
    form = ReviewForm(request.POST)
    if form.is_valid():
        rating = form.cleaned_data['rating']
        comment = form.cleaned_data['comment']
        user_name = request.user.username
        review = Review()
        review.wine = wine
        review.user_name = user_name
        review.rating = rating
        review.comment = comment
        review.pub_date = datetime.datetime.now()
        review.save()
        # Always return an HttpResponseRedirect after successfully dealing
        # with POST data. This prevents data from being posted twice if a
        # user hits the Back button.
        return HttpResponseRedirect(reverse('reviews:wine_detail', args=(wine.id,)))

    return render(request, 'reviews/wine_detail.html', {'wine': wine, 'form': form})

def user_review_list(request, username=None):
    if not username:
        username = request.user.username
    latest_review_list = Review.objects.filter(user_name=username).order_by('-pub_date')
    context = {'latest_review_list':latest_review_list, 'username':username}
    return render(request, 'reviews/user_review_list.html', context)

@login_required
def user_recommendation_list(request):
    # get this user reviews
    user_reviews = Review.objects.filter(user_name=request.user.username).prefetch_related('wine')
    # from the reviews, get a set of wine IDs
    user_reviews_wine_ids = set(map(lambda x: x.wine.id, user_reviews))
    # then get a wine list excluding the previous IDs
    wine_list = Wine.objects.exclude(id__in=user_reviews_wine_ids)

    return render(
        request,
        'reviews/user_recommendation_list.html',
        {'username': request.user.username,'wine_list': wine_list}
    )

Body:
You're missing a space on your static tag, should be

{% static 'reviews\images\download(1).jpg' %}

Also, it's usually best to keep load tags at the top, right after extends.

If the image is not being loaded check if the image shows by going to the path directly in the browser, if it is not showing, perhaps the issue is in with the STATIC_URL and STATIC_ROOT settings.


问:
When does an Incomplete Type error occur in C++
Can anyone tell me when does a c++ compiler throw an "incomplete type error"?

Note: I have intentionally left this question a little open ended so that I can debug my code myself.

答:
This happens usually when the compiler has seen a forward declaration but no full definition of this type, while the type is being used somewhere. For example:

```<code>class A;

class B { A a; };
</code>```

The second line will cause a compiler error and, depending on the compiler, will report an incomplete type (other compilers give you a different error, but the meaning is the same).

When you however just use a pointer to such a forward declaration no complain will come up, since the size of a pointer to a class is always known. Like this:

```<code>class A;
class B {
   A *a;
   std::shared_ptr<A> aPtr;
};
</code>```

If you ask what could be wrong in a concrete application or library when this error comes up: that happens usually when a header is included which contains the forward declaration, but full definition hasn't been found yet. The solution is quite obvious: include also the header that gives you access to the full type. Sometimes you may also simply have no or the wrong namespace used for a type and need to correct that instead.

Body:
This happens usually when the compiler has seen a forward declaration but no full definition of this type, while the type is being used somewhere. For example:

class A;

class B { A a; };

The second line will cause a compiler error and, depending on the compiler, will report an incomplete type (other compilers give you a different error, but the meaning is the same).

When you however just use a pointer to such a forward declaration no complain will come up, since the size of a pointer to a class is always known. Like this:

class A;
class B {
   A *a;
   std::shared_ptr<A> aPtr;
};

If you ask what could be wrong in a concrete application or library when this error comes up: that happens usually when a header is included which contains the forward declaration, but full definition hasn't been found yet. The solution is quite obvious: include also the header that gives you access to the full type. Sometimes you may also simply have no or the wrong namespace used for a type and need to correct that instead.


问:
Adding images from assets folder in adapter
I'm trying to display images from assets folder. I have this error:

```<code>Bitmap bitmap = getBitmapFormatAssets(product.getProductId());
</code>```

try { Bitmap bitmap = getBitmap(product.getProductId()); imageView.setImageResource(bitmap);

答:
when you want to set a bitmap image to a image view don't use setImageResource(bitmap)

use setImageBitmap(bitmap) as below

setImageBitmap(bitmap) Sets a Bitmap as the content of this ImageView.
like this

```<code>imageView.setImageBitmap(bitmap)
</code>```

get your bitmap from assets using below code

```<code>private Bitmap getBitmapFromAsset(String strName)
{
    AssetManager assetManager = getAssets();
    InputStream istr = null;
    try {
        istr = assetManager.open(strName);
    } catch (IOException e) {
        e.printStackTrace();
    }
    Bitmap bitmap = BitmapFactory.decodeStream(istr);
    return bitmap;
}
</code>```

Body:
I'm trying to display images from assets folder. I have this error:

Bitmap bitmap = getBitmapFormatAssets(product.getProductId());

try { Bitmap bitmap = getBitmap(product.getProductId()); imageView.setImageResource(bitmap);

Body:
when you want to set a bitmap image to a image view don't use setImageResource(bitmap)

use setImageBitmap(bitmap) as below

setImageBitmap(bitmap) Sets a Bitmap as the content of this ImageView.
like this

imageView.setImageBitmap(bitmap)

get your bitmap from assets using below code

private Bitmap getBitmapFromAsset(String strName)
{
    AssetManager assetManager = getAssets();
    InputStream istr = null;
    try {
        istr = assetManager.open(strName);
    } catch (IOException e) {
        e.printStackTrace();
    }
    Bitmap bitmap = BitmapFactory.decodeStream(istr);
    return bitmap;
}


问:
Error C2280 while creating a std::thread without initialization in C++
I want to create a thread object in my class/struct but don't want to initialie immediately during declaration. Intead want to do it later. Hence, I did as in below code snippet, I'm getting this compilation error. How do I fix this ?

error C2280: 'std::thread::thread(const std::thread &)' : attempting
  to reference a deleted function

I observed the line causing this error is :

```<code>  std::thread t2;
</code>```

Does it mean that we can't just declare a std::thread without initializing ? This contradicts the answer in this thread Is it possible to define an std::thread and initialize it later?

```<code>struct Abc
{
    int a;
    std::thread t2;
    void mem1()
    {
        printf("mem1\n");
    }

    void mem2()
    {
        printf("mem2\n");
        std::thread t1(&Abc::mem1, Abc());
        t2.swap(t1);
        printf("after spawning t1\n");
        t2.join();
    }
};
</code>```

Error Details:

C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\include\xmemory0(611): error C2280: 'std::thread::thread(const std::thread &)' : attempting to reference a deleted function 1>

    C:\Program Files (x86)\Microsoft Visual Studio
    12.0\VC\include\thread(70) : see declaration of 'std::thread::thread' 1>          This diagnostic occurred in the compiler generated
    function 'Abc::Abc(const Abc &)

答:
The compiler error is telling you that you are trying to copy a struct Abc which has a member std::thread. This is not possible because std::thread cannot be copied.

If you would have posted the entire error message including the code that it first points to (i.e. the line of code actually invoking Abc's copy constructor), I could provide you with a more complete solution.

The old answer is kept below but I believe it is incorrect in defining the cause of your specific issue. The ramble about compiler-generated move constructors is still valid in its own right.

Your code is fine. The compiler is failing to compile the call to swap, which in the case of move-only types relies on the move constructor of the types involved. Your std::thread won't have it explicitly defined, so a conformant compiler will generate it in this case.

Visual Studio 2013 does not automatically generate move constructors. This seems like a bug they could have worked around (by explicitly defining it for their std::thread implementation, and probably every other std class (template)). Make sure you update your compiler to VS 2013.5 (update 5) and see if that helps.

If that does not work, get a newer version of Visual Studio. The problem of not generating move constructors is fixed in VS 2015. Also VS 2017 is out. The latter is a lot better and a lot stricter when it comes to standard c++, even though it still fails to compile lots of "basic" SFINAE.

Body:
I want to create a thread object in my class/struct but don't want to initialie immediately during declaration. Intead want to do it later. Hence, I did as in below code snippet, I'm getting this compilation error. How do I fix this ?

error C2280: 'std::thread::thread(const std::thread &)' : attempting
  to reference a deleted function

I observed the line causing this error is :

  std::thread t2;

Does it mean that we can't just declare a std::thread without initializing ? This contradicts the answer in this thread Is it possible to define an std::thread and initialize it later?

struct Abc
{
    int a;
    std::thread t2;
    void mem1()
    {
        printf("mem1\n");
    }

    void mem2()
    {
        printf("mem2\n");
        std::thread t1(&Abc::mem1, Abc());
        t2.swap(t1);
        printf("after spawning t1\n");
        t2.join();
    }
};

Error Details:

C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\include\xmemory0(611): error C2280: 'std::thread::thread(const std::thread &)' : attempting to reference a deleted function 1>

    C:\Program Files (x86)\Microsoft Visual Studio
    12.0\VC\include\thread(70) : see declaration of 'std::thread::thread' 1>          This diagnostic occurred in the compiler generated
    function 'Abc::Abc(const Abc &)


答:
following are used for getting the image from asset folder and set it to ImageView.

```<code>// load image
try {
    // get input stream
    InputStream ims = getAssets().open("avatar.jpg");
    // load image as Drawable
    Drawable d = Drawable.createFromStream(ims, null);
    // set image to ImageView
    mImage.setImageDrawable(d);
}
catch(IOException ex) {
    return;
}
</code>```

Title: Adding images from assets folder in adapter

Body:
following are used for getting the image from asset folder and set it to ImageView.

// load image
try {
    // get input stream
    InputStream ims = getAssets().open("avatar.jpg");
    // load image as Drawable
    Drawable d = Drawable.createFromStream(ims, null);
    // set image to ImageView
    mImage.setImageDrawable(d);
}
catch(IOException ex) {
    return;
}


问:
how to convert associative array in to one array
I am stuck on this i have multiple associative array and i want to convert in to one:-
Here is the array:-

```<code>Array
(
[0] => Array
    (
        [0] => Women
    )

[1] => Array
    (
        [0] => children
        [1] => smile
    )

[2] => Array
    (
        [0] => Abstract
    )

[3] => Array
    (
        [0] => Lion
        [1] => Cheetah
    )
)
</code>```

I want output something like this:-

```<code>Array
(

[0] => Women
[1] => children
[2] => smile
[3] => Abstract
[4] => Lion
[5] => Cheetah
)
</code>```

Here i have tried so far:-

```<code>$getKeywords =  DB::table('contributor_images')->select('keywords')->get();
$getKeywords = json_decode(json_encode($getKeywords),true);
    foreach($getKeywords as $keyword){
        $AllKeywords[] = $keyword['keywords'];
    }
    foreach ($AllKeywords as $key => $ExplodeKeywords) {
        $searchkeywords[] = explode(',',$ExplodeKeywords);
    }
    echo "```"; print_r($searchkeywords); die;
```

I am using laravel framework of php. THANKS IN ADVANCE :)

答:
Try this:

```<code>foreach ($old as $data) {
            foreach ($data as $value) {
                $new[] = $value;
            }
        }
        print_r($new);
    }
</code>```

In first foreach you are getting array inside array and in second foreach you will get the value. Insert these values in new array to get desired result. Use print_r to see the result

Body:
I am stuck on this i have multiple associative array and i want to convert in to one:-
Here is the array:-

Array
(
[0] => Array
    (
        [0] => Women
    )

[1] => Array
    (
        [0] => children
        [1] => smile
    )

[2] => Array
    (
        [0] => Abstract
    )

[3] => Array
    (
        [0] => Lion
        [1] => Cheetah
    )
)

I want output something like this:-

Array
(

[0] => Women
[1] => children
[2] => smile
[3] => Abstract
[4] => Lion
[5] => Cheetah
)

Here i have tried so far:-

$getKeywords =  DB::table('contributor_images')->select('keywords')->get();
$getKeywords = json_decode(json_encode($getKeywords),true);
    foreach($getKeywords as $keyword){
        $AllKeywords[] = $keyword['keywords'];
    }
    foreach ($AllKeywords as $key => $ExplodeKeywords) {
        $searchkeywords[] = explode(',',$ExplodeKeywords);
    }
    echo "
"; print_r($searchkeywords); die;

I am using laravel framework of php. THANKS IN ADVANCE :)

Body:
Try this:

foreach ($old as $data) {
            foreach ($data as $value) {
                $new[] = $value;
            }
        }
        print_r($new);
    }

In first foreach you are getting array inside array and in second foreach you will get the value. Insert these values in new array to get desired result. Use print_r to see the result


问:
how to set text, focus, error on editText in android with Kotlin
I searched heavily on internet about how can i use setFocusable(), setText(), setError() etc etc methods on editText(s) in android with Kotlin (I know the fact that we can use the above mentioned methods in java) but I was not able to find the exact solution that will work for me.

I am using
1.) Volley for http calls
2.) kotlin plugin for android studio with version = '1.1.3-2'
3.) anko library

Problems that i am facing when app is running :
  1.)The setError() method is not getting called.
  2.)i am not able to use setText() and setFocus() on editText.

please note that I need the solution(s) in Kotlin not Java.

Thanks in advance!

```<code>private fun askAppointment() {

    if (editTextPersonName?.text.isNullOrEmpty()) {
        editTextPersonName?.error ="Person Name cannot be empty."
        return
    } else if (editTextPersonMobile?.text.isNullOrEmpty()) {
        editTextPersonMobile?.error = "Person Mobile cannot be empty."
        return
    } else if (editTextPersonEmail?.text.isNullOrEmpty()) {
        editTextPersonEmail?.error = "Person Email cannot be empty."
        return
    } else if (editTextSubject?.text.isNullOrEmpty()) {
        editTextSubject?.error = "Subject cannot be empty."
        return
    } else if (editTextDescription?.text.isNullOrEmpty()) {
        editTextDescription?.error = "Description cannot be empty."
        return
    } else if (editTextAppointmentDate?.text.isNullOrEmpty()) {
        editTextAppointmentDate?.error = "Appointment Date cannot be empty."
        return
    } else if (editTextAppointmentTime?.text.isNullOrEmpty()) {
        editTextAppointmentTime?.error = "Appointment Time cannot be empty."
        return
    }
</code>```

答:
This is simple. Lets suppose etEmail is the EditText. You can set text like this

```<code>etEmail?.setText("some text")
</code>```

And for error you can use this

```<code>etEmail?.error = "This is error"
</code>```

And for set foucus you can try this one but i am not sure about it.

```<code>etEmail?.isFocusable = false
</code>```

I hope this will help you.

Check the working screenshot of above code.

use this logic in askAppointment()

```<code>private fun askAppointment() {

    if (editTextPersonName?.text.isNullOrEmpty()) {
        editTextPersonName?.error = "Person Name cannot be empty."
        return
    } else if (editTextPersonMobile?.text.isNullOrEmpty()) {
        editTextPersonMobile?.error = "Person Mobile cannot be empty."
        return
    } else if (editTextPersonEmail?.text.isNullOrEmpty()) {
        editTextPersonEmail?.error = "Person Email cannot be empty."
        return
    } else if (editTextSubject?.text.isNullOrEmpty()) {
        editTextSubject?.error = "Subject cannot be empty."
        return
    } else if (editTextDescription?.text.isNullOrEmpty()) {
        editTextDescription?.error = "Description cannot be empty."
        return
    } else if (editTextAppointmentDate?.text.isNullOrEmpty()) {
        editTextAppointmentDate?.error = "Appointment Date cannot be empty."
        return
    } else if (editTextAppointmentTime?.text.isNullOrEmpty()) {
        editTextAppointmentTime?.error = "Appointment Time cannot be empty."
        return
    } else {
        //creating volley string request
        val stringRequest = object : StringRequest(Request.Method.POST, URL,
                Response.Listener<String> { response ->
                    try {
                        val jsonObject = JSONObject(response)
                        val feedback = jsonObject.getString("response")
                        toast("$feedback")
                        //finish()       //finish Activity after sending request
                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                },
                object : Response.ErrorListener {
                    override fun onErrorResponse(volleyError: VolleyError) {
                        toast("error :(")
                    }
                }) {
            @Throws(AuthFailureError::class)
            override fun getParams(): Map<String, String> {
                val params = HashMap<String, String>()
                params.put("personName", editTextPersonName?.text.toString())
                params.put("personMobile", editTextPersonMobile?.text.toString())
                params.put("personEmail", editTextPersonEmail?.text.toString())
                params.put("subject", editTextSubject?.text.toString())
                params.put("description", editTextDescription?.text.toString())
                params.put("appointMentDate", editTextAppointmentDate?.text.toString())
                params.put("appointMentTime", editTextAppointmentTime?.text.toString())
                return params
            }
        }

        //adding request to queue
        AppController.instance?.addToRequestQueue(stringRequest)
    }
}
</code>```

Body:
I searched heavily on internet about how can i use setFocusable(), setText(), setError() etc etc methods on editText(s) in android with Kotlin (I know the fact that we can use the above mentioned methods in java) but I was not able to find the exact solution that will work for me.

I am using
1.) Volley for http calls
2.) kotlin plugin for android studio with version = '1.1.3-2'
3.) anko library

Problems that i am facing when app is running :
  1.)The setError() method is not getting called.
  2.)i am not able to use setText() and setFocus() on editText.

please note that I need the solution(s) in Kotlin not Java.

Thanks in advance!

private fun askAppointment() {

    if (editTextPersonName?.text.isNullOrEmpty()) {
        editTextPersonName?.error ="Person Name cannot be empty."
        return
    } else if (editTextPersonMobile?.text.isNullOrEmpty()) {
        editTextPersonMobile?.error = "Person Mobile cannot be empty."
        return
    } else if (editTextPersonEmail?.text.isNullOrEmpty()) {
        editTextPersonEmail?.error = "Person Email cannot be empty."
        return
    } else if (editTextSubject?.text.isNullOrEmpty()) {
        editTextSubject?.error = "Subject cannot be empty."
        return
    } else if (editTextDescription?.text.isNullOrEmpty()) {
        editTextDescription?.error = "Description cannot be empty."
        return
    } else if (editTextAppointmentDate?.text.isNullOrEmpty()) {
        editTextAppointmentDate?.error = "Appointment Date cannot be empty."
        return
    } else if (editTextAppointmentTime?.text.isNullOrEmpty()) {
        editTextAppointmentTime?.error = "Appointment Time cannot be empty."
        return
    }

Body:
This is simple. Lets suppose etEmail is the EditText. You can set text like this

etEmail?.setText("some text")

And for error you can use this

etEmail?.error = "This is error"

And for set foucus you can try this one but i am not sure about it.

etEmail?.isFocusable = false

I hope this will help you.

Check the working screenshot of above code.

use this logic in askAppointment()

private fun askAppointment() {

    if (editTextPersonName?.text.isNullOrEmpty()) {
        editTextPersonName?.error = "Person Name cannot be empty."
        return
    } else if (editTextPersonMobile?.text.isNullOrEmpty()) {
        editTextPersonMobile?.error = "Person Mobile cannot be empty."
        return
    } else if (editTextPersonEmail?.text.isNullOrEmpty()) {
        editTextPersonEmail?.error = "Person Email cannot be empty."
        return
    } else if (editTextSubject?.text.isNullOrEmpty()) {
        editTextSubject?.error = "Subject cannot be empty."
        return
    } else if (editTextDescription?.text.isNullOrEmpty()) {
        editTextDescription?.error = "Description cannot be empty."
        return
    } else if (editTextAppointmentDate?.text.isNullOrEmpty()) {
        editTextAppointmentDate?.error = "Appointment Date cannot be empty."
        return
    } else if (editTextAppointmentTime?.text.isNullOrEmpty()) {
        editTextAppointmentTime?.error = "Appointment Time cannot be empty."
        return
    } else {
        //creating volley string request
        val stringRequest = object : StringRequest(Request.Method.POST, URL,
                Response.Listener<String> { response ->
                    try {
                        val jsonObject = JSONObject(response)
                        val feedback = jsonObject.getString("response")
                        toast("$feedback")
                        //finish()       //finish Activity after sending request
                    } catch (e: JSONException) {
                        e.printStackTrace()
                    }
                },
                object : Response.ErrorListener {
                    override fun onErrorResponse(volleyError: VolleyError) {
                        toast("error :(")
                    }
                }) {
            @Throws(AuthFailureError::class)
            override fun getParams(): Map<String, String> {
                val params = HashMap<String, String>()
                params.put("personName", editTextPersonName?.text.toString())
                params.put("personMobile", editTextPersonMobile?.text.toString())
                params.put("personEmail", editTextPersonEmail?.text.toString())
                params.put("subject", editTextSubject?.text.toString())
                params.put("description", editTextDescription?.text.toString())
                params.put("appointMentDate", editTextAppointmentDate?.text.toString())
                params.put("appointMentTime", editTextAppointmentTime?.text.toString())
                return params
            }
        }

        //adding request to queue
        AppController.instance?.addToRequestQueue(stringRequest)
    }
}


问:
Your least favorite C++ Coding guideline
As a counterpart to C++ Coding Guideline 102, which of the 101 guidelines of Sutter & Alexandrescu do you violate or ignore most often, and why?</p>

答: I ignore most of them, because they can be summarized as: use C++ as if it were a high-level object-oriented language. But if you want a high-level object-oriented language, there are much better candidates (C#, Java, Lisp, Python etc). C++ is essentially the mother of all structured macro assemblers, and I use it as such, and only in jobs where that is what is required.</p>

OwnerDisplayName: andreas buykx

LastEditorDisplayName: luke


问:
how can I sum amounts in columns that change every month
I need to sum amounts in columns that change every month.

Example In April I need to add amount that come up in 2 months: Mar 17 and Apr 17, Next month in May 17 I need to add amounts that come up in Mar, April and May.

Every month there is another column that is added and amounts need to add to previous once.

2017-03

2017-04

2017-05

2017-06

-15, -7, -8, -9

What formula do I use to sum all these amounts every month

答:
Without further information with screenshot, I would suggest this:

If the all the data to be summed up is in column B, try

```<code>=SUM(B:B)
</code>```

Body:
Without further information with screenshot, I would suggest this:

If the all the data to be summed up is in column B, try

=SUM(B:B)