Posts

Showing posts with the label jquery-ui

Use both Vue.js and jQuery autocomplete

Use both Vue.js and jQuery autocomplete I want to use both Vue.js and jQuery to make an autocomplete field displayed dynamically. new Vue({ el: "#el", data: { toggle: false } }); var tags = [ "ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion", "Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python", "Ruby","Scala","Scheme" ]; $("#autocompleteSearch").autocomplete({ source: tags }); https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js https://code.jquery.com/ui/1.12.1/jquery-ui.js https://unpkg.com/vue Toggle As you can see, it cannot work because of the v-if on the input. If I remove the v-if it works, but it is not displayed dynamically. How should I ...

jquery re-sizable moves other elements inside scroll-able div

jquery re-sizable moves other elements inside scroll-able div I know a similar question has been asked, But hear me out, I have an additional specification that's stumping me: So as the title mentions it, I have a div that you can scroll in: <td> div1 div2 </div> </td> And here is the CSS for the "forCanvas" and "dropZone" and "Type1" classes: CSS .forCanvas { height: 600px; width: 500px; overflow: hidden; overflow-y: scroll; overflow-x: scroll; } .dropZone { width: 620px; height: 877px; padding: 0; /*float: left;*/ margin: 0; background: #fff; } .Type1 { width: 200px; height: 25px; background: grey; box-sizing: content-box; position:relative; } .Type1 h3 { text-align: center; margin: 0; font-size: 15px; color: red; background: grey; border: none; position:absolute; } The remaining classes are from jquery-ui and i ddnt do them: jquery-ui .ui-widget-content { border: 1px solid #dddddd; ...