タグ付けされた質問 「jquery」

最後の数字を入力すると、最初の数字が内部に入りtext-box（消えます）、スペースが1つ追加されます。 外側をクリックした後、text-box最後の文字を入力するときに必要な見栄えが良くなります。 #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > コードスニペットを実行する結果を非表示スニペットを展開 この問題から抜け出すのを手伝ってください。ありがとう

14 javascript  jquery  html  css 

ユーザーから、jQueryベースのタブを使用しているときに、ブラウザーに戻ったときに前のタブではなく前のページにアクセスするのが面倒だという不満がたくさんあります。 。次の前/次のボタンを追加しましたが、十分ではありません。ユーザーがブラウザの戻る矢印をクリックしたときに前のページではなく前のタブに移動するようにボタンを再構成するにはどうすればよいですか。ここでテストできます。 $('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>'); $('.tablink-prev').click(function () { var index = $('.quicktabs-tabs li.active').index(); $('.quicktabs-tabs li').eq(index).removeClass('active'); if (index == 0) { index = 1; } $('.quicktabs-tabs li').eq(index - 1).addClass('active'); $('.quicktabs-tabs li').eq(index - 1).find('a').click(); return false; }); $('.tablink-next').click(function () { var length = $('.quicktabs-tabs').first().children().size();; var …

14 javascript  jquery 

私の要件は、JavaScriptを使用してAndroidデバイスでデバイスレベルの通知のオン/オフを検出する方法です（このプラグインがPWAアプリケーションをサポートしている場合にのみプラグインを使用できるプラグインは使用しないでください）。 通知がオフの場合と同様に、ポップアップをユーザーに表示する必要があるので、通知を受け取る通知機能を有効にしてください。 以下の回答は、探偵のブラウザレベルの通知専用です。どなたかご存知の方どうしたらいいか正確に答えてください。なぜなら、私はそこで止まりました。 ユーザーがここで画像を確認してください。ユーザーが一度無効にすると、通知を送信できません。

12 javascript  jquery  push-notification  progressive-web-apps  polymer-3.x 

カスタム選択モデルとカスタムチェックボックス選択プラグインを備えた滑らかなグリッドを実装しました。また、グループレベルのチェックボックスを追加して、トップレベルでの選択の切り替えを可能にしました。私の要件の1つは、折りたたまれたグループ化が親レベルのグループ化チェックボックスを介して引き続き選択可能であることです。 私の障害は、現在グループに表示されていない行を選択する方法を理解できないことです。滑らかなグリッドは視覚的に選択されたアイテムのセットを保持し、グリッドデータビューは選択されたアイテムの完全なセットを表示または非表示に維持します。しかし、折りたたまれた行のグループチェックボックスをクリックしたときにデータにパイプする方法がわかりません。 私はグリッドを次のように構成しています： let checkboxSelectionModel = new Slick.CheckboxSelectionModel(); this.grid.setSelectionModel(checkboxSelectionModel); this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider()); let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true); onSelectedRowIdsChanged.subscribe( function(e: any, args: any) { //business logic stuff } ); let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({ cssClass: "slick-cell-checkboxsel", onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged }); let columns = this.grid.getColumns(); columns.unshift(groupedCheckboxSelector.getColumnDefinition()); this.grid.setColumns(columns); this.grid.registerPlugin(groupedCheckboxSelector); ここに含まれるように、あまりにも長い間、カスタムプラグインにGIST あなたがラインを見れば、具体的57にslick.checkboxselectionmodel： $.each(dataItem.rows, function(index, groupRow) …

10 javascript  jquery  typescript  slickgrid 

eコマースストア： ホームページに表示されているアイテムがあり、各アイテムの下に[カートに追加]ボタンがあります。このボタンをクリックすると、アイテムがカートに追加されます。このボタンをもう一度クリックすると、カートに既に存在する商品の数量が1増えます。これはループだと思います。ここまでは順調ですね。 単一の製品ページに、「カートに追加」ボタンがあります。このボタンをクリックすると、アイテムがカートに追加されます。数量を変更するために使用できる数量入力テキストボックスもあります。これも結構です。 問題： ループ内でクリックされた[カートに追加]ボタン（現在はホ​​ームページですが、アーカイブページなどの他のページでも使用できます）とクリックされた[カートに追加]ボタンを区別する必要があります単一の製品ページ。この差別化に基づいて、ここに私がする必要があるものがあります： ループ内に表示される[カートに追加]ボタンがクリックされた場合は、を使用してカートに既に存在するこのアイテムの数量を 取得し、$cart_item_key1増やして、追加の処理を実行して詳細を保存するカスタム関数に送信します再びカートに入れます。 [単一の商品]ページに表示される[カートに追加]ボタンをクリックした場合は、を使用してカートに既に存在するこのアイテムの数量を 取得し、$cart_item_key3を掛けて、追加の処理を実行して保存するカスタム関数に送信します再度カートに入れる詳細。 上記のどちらの場合も、さまざまなロジックに基づいて数量が変更され、この数量をカスタム関数呼び出しに送信する必要があります。 私が試したもの： 私は次のコードを試しました： add_action('woocommerce_add_to_cart', 'custom_action_add_to_cart', 20, 6); function custom_action_add_to_cart($cart_item_key, $product_id, $quantity, $variation_id, $variation, $cart_item_data) { $cart = WC()->cart->get_cart(); $product = wc_get_product($product_id); // NEED TO RUN CUSTOM CODE HERE BASED ON THE CHECKS if (add to cart within loop is clicked) { …

10 javascript  php  jquery  wordpress  woocommerce 

react-pivottablejQueryデータテーブルビューでデータセット全体を表示する方法があるかどうか知りたいだけで実装しました つまり、以下のデータのすべてを表形式で表示したい列がいくつかあります。 [ 'SRN', 'MainSystemType', 'MagnetType', 'MagnetCoverType', 'MagnetRMMUType', 'MagnetHighOrderShimPowerSupply', 'GradientAmplifierType', 'GradientInterfaceType', 'GradientSwitchType', 'RFSystemB1FieldSystem', 'RFSystemFrontendInterface', 'CabinetsDasCabinet', 'ReconstructorAvailableMemory', 'ReconstructorNumberOfProcessors', 'AcquisitionSystemBulkBoardType', 'CabinetsCoolersCabinet', 'AcquisitionSystemType', 'PatientSupportPatientSupportType', 'PatientInterfaceMiscellaneousBoxType', 'PatientInterfacePPUType', 'PatientInterfaceType', 'PatientInterfaceAudioModule', 'PatientInterfaceAudioSwitchType', 'PatientSupportPowerSupplyUnit', 'RFAmpType', 'IOP_Firmware', 'RFP_Firmware' ], [ 108, 'WA15', 'WA_15T', 'Wide Aperture', 'MEU', 'NONE', '781', 'IGCIDNA', 'NONE', 'HIGH', 'TFINT', 'DACC', 65536, 1, 'NONE', 'LCC2B', 'DDAS', …

9 jquery  reactjs  database  datatable  pivot-table 

選択したdivを展開し、残りのスペース（幅が固定されている最初のものを除く）に合わせて均等にストレッチすることで他のdivを適切に動作させるスクリプトを（ここでユーザーの助けを借りて）コード化しました。 そして、これが私が達成したいことの写真です： そのために、フレックスとトランジションを使用します。 それはうまく機能しますが、jQueryスクリプトは「400％」のストレッチ値を指定します（これはテストに最適です）。 ここで、選択したdivを「400％」の固定値ではなく、コンテンツに正確に合わせて拡大/縮小したいと思います。 どうすればいいのかわかりません。 出来ますか ？ divを複製してコンテンツに適合させ、その値を取得し、この値を使用してトランジションを行おうとしましたが、これはパーセンテージでの初期幅ですが、ピクセルでのターゲット値であることを意味します。それはうまくいきません。 ピクセル値をパーセンテージに変換すると、何らかの理由で結果がコンテンツに正確に適合しません。 すべての場合において、これはとにかく私が欲しいものを達成するための少し複雑な方法のようです。 選択したdivのコンテンツに合わせるために移行できるflexプロパティはありませんか？ ここにコードがあります（より読みやすくするために編集/簡略化されています）： var expanded = ''; $(document).on("click", ".div:not(:first-child)", function(e) { var thisInd =$(this).index(); if(expanded != thisInd) { //fit clicked fluid div to its content and reset the other fluid divs $(this).css("width", "400%"); $('.div').not(':first').not(this).css("width", "100%"); expanded = thisInd; } else …

9 javascript  jquery  css  flexbox  css-transitions 

明確に定義されたAJAXフィルターが2つあります。1つは[もっと読み込む]ボタン用、もう1つはドロップダウンフィルターの選択用です。どちらもAJAXのフロントエンドでプロパティのリストを再読み込みし、一斉に連携します（たとえば、ドロップダウンで最小価格、最大価格、ベッド数を選択すると、リストが更新され、[もっと読み込む]ボタンが正常に機能します） 。 同じフィルタがURLパラメータでも機能します。たとえば、URLが次の場合は、 mydomain.com/?min_price=100000&max_price=5000000&beds=3&page=3 これらのパラメーターでフィルターします。3ページ分のプロパティも表示されます。これは、初期ロードを含め、うまく機能します。ただし、URLが直接読み込まれる場合は、ページネーションでは機能しません。上記のURLをブラウザーに直接入力してロードすると、最初の結果は正しいですが、[さらに読み込む]ボタンをクリックすると、page = 3がpage = 4に変わります（正しい）が、フィルターされていない完了したプロパティの2ページ目が追加されます、そしてそうし続けます-フィルタリングされたページネーションを続けるのではなく。 何が悪いのですか？ これが私のコードです（申し訳ありませんがたくさんあります！） JS： jQuery(function($){ // AJAX Stuff for filters + load more button /* * Load More */ $('#prop_loadmore').click(function(){ $.ajax({ url : prop_loadmore_params.ajaxurl, data : { 'action': 'loadmorebutton', 'query': prop_loadmore_params.posts, // loop parameters passed by wp_localize_script() 'page' : prop_loadmore_params.current_page, // Get …

9 php  jquery  ajax  wordpress 

私はAirpods Proページで Appleと同じ効果をアニメーション化したラッパーを作成しました。基本的にはビデオです。ビデオをスクロールすると、少しずつ再生されます。ビデオの位置は固定されているので、テキストはうまくスクロールします。ただし、テキストは、特定の分割のオフセット間（テキスト表示）にある場合にのみ表示されます。 その部分は正常に動作します。ここで、ユーザーがビデオの最後までスクロールしてアニメーションが終了したときに、video-effect-wrapperが固定位置から相対位置に移動するようにします。そのため、そのWebサイトは、通常、ビデオアニメーションの後にコンテンツをスクロールします。 JSFIDDLEコード+デモ これは私がすでに試したことの例です： //If video-animation ended: Make position of video-wrapper relative to continue scrolling if ($(window).scrollTop() >= $("#video-effect-wrapper").height()) { $(video).css("position", "relative"); $("#video-effect-wrapper .text").css("display", "none"); } この種の作品...しかし、スムーズ以外はすべてです。また、Webページを逆方向に逆スクロールできるようにする必要もあります。 この問題を修正しようとしたときに発生した問題： スクロール、および固定から相対への移行は、自然でスムーズな感じがする必要があります ラッパー自体は固定されておらず、.text要素が含まれています。ビデオは固定されているため、.text要素はビデオ要素を通過できます（エフェクトを作成します）。これらの.text要素は、解決策を見つけようとして問題を引き起こします

9 javascript  jquery  html  css 

マーカーに問題があります。プログレスバーの任意の場所をマークできるようにマーカーを伸縮可能にしたい 下のGIFに示すように 質問：プログレスバーの任意のポイントを選択し、マーカーをストレッチできるようにしたいのですが、マーカーを複数のポイントにすることができます。 以下のコードでそれを行う方法がわかりません： var player = videojs('demo'); player.markers({ markerStyle: { 'width':'9px', 'border-radius': '40%', 'background-color': 'orange' }, markerTip:{ display: true, text: function(marker) { return "I am a marker tip: "+ marker.text; } }, breakOverlay:{ display: true, displayTime: 4, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: …

9 javascript  jquery  html  video.js 

一番下に長方形のブロックが1つしかないタイムラインチャートの作成を検討しています。これはマスタースクラバーとして使用されます。 // current- http://jsfiddle.net/NYEaX/2427/ スクラブセクションの場所-ベースとなる長方形だけが必要です。現在のコードベースにどのような変更を加える必要がありますか だからもっとこう //私の最新-https://jsfiddle.net/2mvhjr7z/2/ $(document).ready(function() { var $this = $('.timelinechart'); var w = $this.data("width"); var h = $this.data("height"); //var data = $this.data("data"); var data = [ { "label": "person a", "icon": "4", "times": [ {"text": "Test 1", "starting_time": 1355752800000, "ending_time": 1355759900000}, {"text": "Test 2", "starting_time": 1355767900000, "ending_time": …

8 javascript  jquery  d3.js 

これは、Bismonプロジェクト（H2020ヨーロッパのプロジェクトが資金を提供するGPLv3 +ソフトウェア）、git commit内にあり0e9a8eccc2976fます。このドラフトレポートでは、ソフトウェアについて説明します。この質問は、より多くの背景と動機を与えます。これは、（手書きの）webroot / jscript / bismon-hwroot.jsファイルに関するもので、Bismon（libonionの上の特殊なWebサーバー）によってコードが生成されるHTMLページで使用されます。 たとえば、スパンのCSSクラスを追加しましたspan.bmcl_evalprompt（たとえば、ファイルfirst-theme.cssに） JavaScriptをコーディングして、同じスタイル（同じフォント、色など...）を持つキャンバスに（できればjqueryでjcanvasを使用して）テキスト部分を追加するにはどうすればよいspan.bmcl_evalpromptですか？DOMにそのようなスパン要素を作成する必要がありますか？それは単に可能ですか？ 私はLinux上の最近のFirefox（少なくとも68）のみに関心があります。jQueryは3.4です。私はJquery UI 1.12.1 も使用しています 私は私の心の中に持っていたアイデア1つの作成することでした<span class='bmcl_evalprompt'>遠くのブラウザビューポート（またはX11ウィンドウ）からの座標を持つ要素を、例えば時x= -10000とy= -10000 （ピクセル単位）、そしてその後、伝統を使用し、ドキュメントのDOMにその単一ひどく位置付け要素を追加フォントファミリー、フォントサイズ、要素サイズを取得するためのjqueryテクニック。しかし、もっと良い方法はありますか？またはそれを行ういくつかのjquery互換ライブラリ？

8 jquery  html  css  linux  html5-canvas 

ユーザーがアップロードした画像を受け付けて表示する機能を備えたララベルウェブアプリを開発しました。テスト中に問題が発生しました。携帯電話を使用してアップロードした写真が反時計回りに90度回転していたため、画像の介入を使用してその問題を解決しました。しかし、アップロードした画像のプレビューをJavaScriptを使用してユーザーに表示しているので、画像は90度回転しますが、画像を保存すると適切になります。私のJavaScriptコードは function imagePreview(input,elm) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(elm).css("background-image","url('"+e.target.result+"')"); } reader.readAsDataURL(input.files[0]); } } $("#settings_img").on("change",function(){ imagePreview(this,"#settings_img_elm"); }); 上記のコードを編集して、必要に応じて画像の向きを変更できるようにして、プレビュー画像の向きを適切に設定してください。

8 javascript  jquery  laravel  laravel-5  exif 

現在、トグルアニメーションを維持しながら、再生/一時停止アイコンをテキストに置き換える方法に苦労しています。 どのJSコードがアイコンをレンダリングしているかを正確に理解し、次にそれらを削除/非表示にして、テキストで置き換えることができるようにしています 私はまだJSの初心者レベルです。どんな助けでも大歓迎です var tl = new TimelineMax(), $videoContainer = $('.cb-video-container'), $video = $videoContainer.find('.video'), $playPauseClickArea = $videoContainer.find('.play-pause--click-area'), $playPauseContainer = $videoContainer.find('.play-pause--container'), $playIcon = $videoContainer.find('.play-icon'), $pauseIcon = $videoContainer.find('.pause-icon'), iconIsToggled = false, iconEase = Back.easeInOut.config(1.7), iconDuration = 0.3; setupVideo(); // functions function setupVideo() { TweenMax.set($pauseIcon, { autoAlpha: 0, scale: 0 }); TweenMax.set($playPauseClickArea, { …

8 javascript  jquery  css 

JavaScriptをSharePointに追加し、ライブラリからExcelドキュメントまたはその中のデータを取得する関数を記述しようとしています。その方法はすでにわかりましたが、問題のファイルが大きすぎて返せません。ajaxのサイズ制限を手動で設定することを検討しましたが、これを行う方法が見つからなかったため、プランBは各行にクエリを送信します $("#button").click(function() { readFileRow(libraryUrl, "FileName.xlsx", "Sheet1", 1, "E", []) .done(function(cells) { console.log(xmlToJson(cells.documentElement)); }); }); /** * Reads a file in SharePoint Library via ExcelRest and returns the document * * @params string libraryUrl * @params string fileName * @params string sheetName * @params int rowNum * @params string lastColumn * …

8 javascript  jquery  ajax