the problem of user-select with page scroll in IOS

2018-11-08 06:24 SummerXia imported from Stackoverflow

when I longpress in the page,there will be a text copy frame in the page, but when I scroll the page, the frame always in place and don't move or disappear,just occured in IOS, andriod is well.please help me to fix it.thank you.

See also questions close to this topic

WHY ? jquery filter not work without this keyword?

I want to add jquery filter on two search boxes but it does not work properly with this code

    $(document).ready(function(){
  $("#myInput2").on("keyup", function() {
    var value1 = $(this).val().toLowerCase();
    var value2 = $("#myInput").val().toLowerCase();
    var vv = $("#myInput");

    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value1) > -1 && $(vv).text().toLowerCase().indexOf(value2) > -1)
    });
  });
});

Passing HTML input array to Python and back

I am trying to pass HTML input (which are two list of hostnames and ports) to python and after processing it in python, I want to print it into another HTML page. Here are my HTML and Python code

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script src="script/script.js"></script>
        <title>Vodafone Comms Checker</title>
    </head>
<body>
    Number of Hosts/Ports:<br><input type="text" id="Number"><br/><br/>

    <a href="#" id="filldetails" onclick="addFields()">Enter Comms Details</a>
    <div id="container"/>
    <div id ="Results"></div>
</body>
</html>

next the above code calls javascript functions for further processing as below:

    function addFields(){
            // Number of inputs to create
            var number = document.getElementById("Number").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=1;i<=number;i++){
                container.appendChild(document.createTextNode("Host: " + (i)));
                var host = document.createElement("input");
                host.type = "text";
                host.id = "Host " + i;
                container.appendChild(host);
                container.appendChild(document.createTextNode("Port: " + (i)));
                var port = document.createElement("input");
                port.type = "text";
                port.id = "Port " + i;
                container.appendChild(port);

                // Append a line break 
                container.appendChild(document.createElement("br"));
                container.appendChild(document.createElement("br"));        
}
    var button = document.createElement("input");
    button.setAttribute("type", "button");
    button.setAttribute('value', 'Check');
    button.setAttribute('onclick', 'checkVal()');
    container.appendChild(button);
    return true;
}
function checkVal() {
// Number of inputs to create
            var number = document.getElementById("Number").value;
            var myHost = []
            var myPort = []
    for (var i = 1; i <= number; i++) {
        var myHost.push(document.getElementById("Host " +i).value);
        var myPort.push(document.getElementById("Port " +i).value);

    //this should pass the values of myHost & myPort to Python script           

    $.ajax({
              type: "POST",
              contentType: "application/json;charset=utf-8",
              url: "",
              traditional: "true",
              data: JSON.stringify({myHost}, {myPort}),
              dataType: "json"
              });
        }
        return true
    }

Then I am trying to pass all the values from above code to my Python script myFirst.py as below:

from flask import Flask, render_template, request

app = Flask(__name__)


@app.route('/')
def Results():

    return render_template('Results.html')


@app.route('/passFails', methods=['POST'])
def passFails():

        number = request.form['Number']
        print("you entered: ", number)

        host = request.get_json()
        for val in host:
            print("This values in Host are: " &val)
        return render_template('passFails.html', Host=host)


if __name__=='__main__':
    app.run(debug=True)

and finally the above code should be passed to my last HTML page to be printed:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>In the Host text box, you entered: {{Host}}</h1>

<h1>In the Port text box, you entered: {{Port}}</h1>

</body>
</html>

How can you align the left and right Y-axes of vertically stacked HighCharts charts?

I have a set of HighCharts line charts that are in containers that all have the same width. These containers are stacked one on top of the other in a column. All the charts are against the same x-axis domain by design. However, because the orders of magnitude of the y-axis data in each of these charts differs, the amount of space used to the left of the primary and right of the secondary y-axes is coming out variable. The result is that the x-axis of each chart in the column is variably squished and the data points for the same x-value don't align visually. Here's an example, note that the bottom-most chart is not aligned to the two above it:

Is there a way to calculate or otherwise set up a situation using the HighCharts API where I can coerce all the charts to take up the same width between the primary and secondary y-axes across all three charts?
Why vue CSS priority rules don't work right?
Why css priority doesn't work right:
```
...
<body>
<div class="class1">
  <div attribute class="class2"></div>
</div>
</body>
...

div[attribute] {
  color: red;
}

.class1 .class2 {
  color: blue;
}
```
div with class2 will have color: red, but in priority rules color must be blue. This is vue feature?

Why v-if is not showing the heading when boolean value changes?

I am very new to vue js. I am just learning to use it from laracasts. What I want to do is communicate between root class and subclass. Here, user will put a coupon code and when he changes focus it will show a text.

My html code is like this

<body>
    <div id="root">
        <coupon @applied="couponApplied">
        <h1 v-if="isCouponApplied">You have applied the coupon.</h1>
    </div>

    <script src="https://unpkg.com/vue@2.5.21/dist/vue.js"></script>
    <script src="main.js"></script> 
</body>

My main.js is like this,

Vue.component('coupon', {
    template: '<input @blur="applied">',
    methods: {
        applied()
        {
            this.$emit('applied');  
        }
    }
});

new Vue({
    el: '#root',
    data: {
        isCouponApplied:false,
    },
    methods:{
        couponApplied()
        {
            this.isCouponApplied = true;
        }
    }
});

I am checking using vue devtools extension in chrome. There is no error. The blur event is triggered. isCouponApplied also changes to true. But the h1 is not showing. Can anyone show me where I made the mistake?

Ho to define vue-router components inside a html?

I'm using django + vue.js + vue-router.js to make my project. I'm trying to use vue-router in a single html page. I searched for a while, all examples are use .vue components, or define the component templates in js part simpely, just like this:

<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
]

...
</script>

What I want is define the template outside the js part something like this:

<body>
    <template id="Foo">
        <div>
            this is Foo
        </div>
    </template>
    <template id="Bar">
        <div>
            this is Bar
        </div>
    </template>

    <script>
        const Foo = { template: '#Foo' }
        const Bar = { template: '#Bar' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

I tried this, but not work. So how to define vue-router components inside a html? I'm new with vue..

Android Studio Webview - cant key in id and password

Firstly, i want to apologise for being a noob in Android.

I have created a webview app that points to a htpps webpage.

webpage consists of a captcha, an id and password.

However, when i run the app, i cant key in the id and the password.i keep typing on the android keyboard, but nothing comes out.

There was no issues encountered when it was tested using AVD. No errors during compile was encountered.

However i am able to perform the captcha without any issues.

I tried changing the url to point to other websites, and there is no issues when i type into the input box.

Kindly help

url in question is "https://portal-latis.veoliawatertechnologies.com"

component above of my webview doesnt appear in react-native

I want render text and webview, but when i go to the navigation for the first time, the component above of the webview not rendered.. If i go to other page and back again to the page that have webview, the component above my webview rendered... what's wrong eith that

<ScrollView style={{flex: 1}}>
        {
          event.group &&
            <Image style={styles.image_thumb}
              source={{uri: event.group.key_photo.highres_link || 'https://www.unesale.com/ProductImages/Large/notfound.png'}}
            />
        }
        {
          event.name
          && 
            <Text style={{flex: 1}}>{event.name}</Text>
        }
        <Text style={{flex: 1}}>Detail</Text>
        {
          (event.description && event.group && event.name)
            ?  
              <MyWebView
                source={{html: event.description}}
                automaticallyAdjustContentInsets={false}
              />
            : 
              event.visibility !== 'public'
              ?
                <Text>Detail only visible to members</Text>
              :
                <Text>No description  yet</Text>
        }
</ScrollView>

this is the result when it load first time enter image description here

and when i got to other page and back again it's rendered enter image description here

Download .pdf or .ppt by WebView in Swift

I'm using the "webview" component to access the website. In an undetermined part of site, we have .pdf and .ppt format files. Can I download these files when the user clicks on them? Today, the application only opens .pdf and .ppt, but I would like to download it.

My code is in pt_BR.

class PortalAcademicoViewController: UIViewController {


    @IBOutlet weak var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        carregaSite()

    }


    func carregaSite(){
        /*
        let url = URL(string: "")
        var urlRequest = URLRequest(url: url!)
        urlRequest.cachePolicy = .returnCacheDataElseLoad
        webView.loadRequest(urlRequest) */


        //carregar o arquivo html
        let htmlFile = Bundle.main.path(forResource: "portalacademico", ofType: "html")
        let html = try? String(contentsOfFile: htmlFile!, encoding: String.Encoding.utf8)
        HTTPCookieStorage.shared.cookieAcceptPolicy = .always
        self.webView.frame = self.view.bounds
        webView.loadHTMLString(html!, baseURL: Bundle.main.resourceURL)

        //voltar e avançar entres as paginas do webview
        let swipeLeftRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe(recognizer:)))
        let swipeRightRecognizer = UISwipeGestureRecognizer(target: self, action: #selector(handleSwipe(recognizer:)))

        swipeLeftRecognizer.direction = .left
        swipeRightRecognizer.direction = .right

        webView.addGestureRecognizer(swipeLeftRecognizer)
        webView.addGestureRecognizer(swipeRightRecognizer)
        //fim

    }



    //trabalhando com avançar e voltar webview
    @objc private func handleSwipe(recognizer: UISwipeGestureRecognizer) {
        if (recognizer.direction == .left) {
            if webView.canGoForward {
                webView.goForward()
            }
        }

        if (recognizer.direction == .right) {
            if webView.canGoBack {
                webView.goBack()
            }
        }
    }
    //FIM

}

Related questions

the problem of user-select with page scroll in IOS

See also questions close to this topic