Jump to content

Search the Community

Showing results for tags 'bootstrap 4'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 5 results

  1. Wondering if there is a way to add a background image or texture to the NavBar with bootstrap? Something to make it pop more than just adding a color. Couldn’t find anything on this and most likely didn’t coin the search terms right but any suggestions are appreciated.
  2. Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? All the details concerning my question are in the source code for display when the HTML is displayed. Any help appreciated. Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3> <br> "Other button disabled" scenario works fine. <br> First, hover over buttons. Look at tooltips while hovering. <br> Then, click button A to disable button B. Works fine: <br> - Button B is disabled, and no tooltip. <br> - Tooltip still works correctly on button A. <br> <br> <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'> Button A </button> <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A"> Button B </button> <br> <br> <hr> <br> "Same button disabled" scenario fails. <br> First, hover over Button C. Look at the tooltip. <br> Then, click button C to disable button C. Messes up: <br> - Button C is disabled, so that part is OK. <br> - But Button C tooltip persists, looks terrible. <br> <br> <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'> Button C </button> <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'> Button D </button> <br> <br> <hr> <br> So if a button is disabled while the cursor is hovering over it, the tooltip persists. <strong> Could you please explain how to make tooltip go away when Button C is disabled? </strong> I would prefer if tooltip went away when Button C disabled, since that is default behavior of bootstrap disabled buttons. And disabled button may later get enabled again, so I do not want to delete title attribute. Basically I want bootstrap to behave the same way as when Button B is disabled. I have looked around and cannot find how to fix this problem, and have tried various things, with no success. There are real instances where a button carries out an action, and then the button needs to be disabled, so I appreciate the help. Thanks </div> <script> $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); function change_button (button_id, bool_val) { var button_obj = document.getElementById (button_id); button_obj.disabled = bool_val; } </script> </body> </html>
  3. I can enable all bootstrap 4 tooltips with: $('[data-toggle="tooltip"]').tooltip(); I can add trigger option as follows: $('[data-toggle="tooltip"]').tooltip({trigger:'hover'}); How do I use several options? I want to enable all tooltips with both trigger:'hover' and html:true options. I tried some things, but it did not work. I know I could insert data-html=true into the HTML code, but it seems better to enable all the tooltips in one place. Thank you
  4. Hi, Does anyone know how to pre-select a bootstrap 4 custom radio button. I have tried adding 'checked' and 'active' to the class but this does not seem to work. many thanks nick
  5. hey w3s... so i have this code: <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="font-weight-bold text-center">WORK</h2> <div class="border"></div> <br /> </div> </div> </div> <div class="container main_wrapper"> <section> <div class="container"> <div class="row" id="work-grid"> <?php $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC"; $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink)); if( mysqli_num_rows($result_1) > 0 ) { while( $row_1 = mysqli_fetch_array($result_1) ) { $video_id = $row_1['video_id']; $video_title = $row_1['video_title']; $video_link = $row_1['video_link']; $video_director = $row_1['video_director']; $video_text = $row_1['video_text']; ?> <div class="col-sm-4 col-xs-12 work_panels"> <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>"> <div class="panel-thumbnail"> <a href="#" title="Video" class="thumb"> <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo"> </a> </div> <div class="panel-body"> <p class="work-name"><?php echo $video_director; ?></p> <p class="work-video-text"><?php echo $video_text; ?></p> </div> </div> </div> <?php } } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked echo 'Ingen videoer at vise i nu.'; } ?> </div> </div> </section> <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title customModal_2">Video Title 1</h3> <button class="close" type="button" data-dismiss="modal">×</button> </div> <div class="modal-body"></div> <div class="modal-footer"> <h4 class="customModal_3">Video Title 2</h4> <p class="customModal_4"> Video in here. </p> <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>--> </div> </div> </div> </div><!-- //.modal-Youtube_1 --> </div> <script> $('[class^=Panel_ModalVideoID-]').click(function(event) { event.preventDefault(); // Step 1 - The Variables //----------------------------------------------- var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?) var modal = $('.customModal_1'); var modalTitle = $('.customModal_2'); var videoTitle = $('.customModal_3'); var videoEmbed = $('.customModal_4'); var modal_body = $('.modal-body'); var INSERTDATA_modalTitle; $('a.thumb').click(function() { INSERTDATA_modalTitle = $(this).Attr( 'title' ); }); //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working? // Step 2 - Clear different areas //----------------------------------------------- modal_body.empty(); // empty area // Step 3 - insert data into different areas //----------------------------------------------- $(modalTitle).html(INSERTDATA_modalTitle); // Step 4 - show the modal //----------------------------------------------- $(".customModal_1").modal({ show: true; }); }); </script> Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal: Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc. All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php. Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/ Hoping you guys can help me out a bit. If more information is needed, please ask. Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here. Maybe it is the way i am using my JS/jQuery code. Thanks a lot. And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic. Hope you can help. Thanks!
×
×
  • Create New...