Jump to content

Search the Community

Showing results for tags 'bootstrap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome
    • Announcements & News
    • New Arrivals
  • Web Development
    • Programming
    • Database Development
    • Server Administration
    • Hosting & Domains
    • Frameworks
  • Web Design
    • HTML & CSS
    • Graphics & Multimedia
  • Desktop Discussion
    • Linux Development
    • Windows Development
    • Mac/Apple Development
    • Hardware Discussion
  • Marketing & Business
    • Advertising, Marketing, Monetization & Social Media
    • Search Engine Optimization & Traffic Building
    • Buy, Sell or Trade
  • Prodjex Web Development Applications, Tools and Plugins
    • IP.Board Applications and Plugins
    • Web Tools
  • The Developer Dump
    • General Chat

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

Found 10 results

  1. This is a good example for a simple design of a Bootstrap contact form. Demo <form class="form-horizontal" role="form" method="post" action="index.php"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value=""> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value=""> </div> </div> <div class="form-group"> <label for="message" class="col-sm-2 control-label">Message</label> <div class="col-sm-10"> <textarea class="form-control" rows="4" name="message"></textarea> </div> </div> <div class="form-group"> <label for="human" class="col-sm-2 control-label">2 + 3 = ?</label> <div class="col-sm-10"> <input type="text" class="form-control" id="human" name="human" placeholder="Your Answer"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary"> </div> </div> <div class="form-group"> <div class="col-sm-10 col-sm-offset-2"> <! Will be used to display an alert to the user> </div> </div> </form>
  2. Last week we wrote a blog post on how to disable right click functionality on an entire website. Since then we've had a few requests on how you would apply this same method to a certain area, container or element on your website or webpage. The code is almost identical, you just have to modify the listener so that it only fires based on certain CSS selectors. Here's the entire page's code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal"> <meta name="author" content="Projex"> <title>Bootstrap and Javascript Right Click Disable Element Based Example | Prodjex Web Development and Consulting</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/pricing.css" rel="stylesheet"> <style> body{background-color: grey;} p{color: #fff;} </style> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow"> <h5 class="my-0 mr-md-auto font-weight-normal"><img src="https://www.prodjex.com/wp-content/uploads/2017/10/dsmall.png"/></h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="#">Features</a> <a class="p-2 text-dark" href="#">Enterprise</a> <a class="p-2 text-dark" href="#">Support</a> <a class="p-2 text-dark" href="#">Pricing</a> </nav> <a class="btn btn-outline-primary" href="#">Sign up</a> </div> <div id="disableRC" class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"> <div class="col-md-12"> <h1 class="display-4">Right click here...</h1> <p class="lead">Example of how to disable right click on specific sections of a website using Javascript and a Bootstrap Modal.</p> </div> </div> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Warning</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Don't do that! </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $('#disableRC').on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script> </body> </html> The code we've changed is within the JavaScript, instead of looking at the entire document, we're now only looking at firing the event if the right click happens within the "disableRC" element. <script> $('#disableRC').on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script> You can check out the demo here. View the Prodjex Web Development Blog post on How to Disable Right Click on Specific Area of a Website.
  3. This is an example of how to disable right clicking on a website using JavaScript and Bootstrap. You could leave Bootstrap off completely and use the basic alert functionality, but it's not as clean looking to the end user and limits some of the customization. The following is the JavaScript code used to listen and catch the right click action anywhere on your page. When a user right clicks it shows the Bootstrap Modal and stops the right click function from firing. <script> $(document).on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script> Below is the script inserted on an example page. You can view the demo of it in action here. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Example of how to disable right click on a website using Javascript and a Bootstrap Modal"> <meta name="author" content="Projex"> <title>Bootstrap and Javascript Right Click Disable Example | Prodjex Web Development and Consulting</title> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/signin.css" rel="stylesheet"> <style> body{background-color: grey;} p{color: #fff;} </style> </head> <body class="text-center"> <div class="container"> <div class="col-md-12"> <img src="https://forums.prodjex.com/uploads/monthly_2017_12/5a49485fa77dd_logobig.png.0c19c7fc9cc393df1ad69f5ec30877c1.png"><br><br> <p>Right click on this page...</p> </div> </div> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Warning</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Don't do that! </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script> $(document).on('contextmenu', function () { $('#exampleModal').modal('show'); return false; }); </script> </body> </html> Keep in mind just because you disable the right click functionality on your website doesn't mean your content is safe. There are many other methods someone with the right knowledge could use to download media assets or copy text from your website. If you don't want your assets copied or downloaded then don't put it on the internet to begin with. View the Prodjex Web Development Blog post on How to disable right click on a website using JavaScript and a Bootstrap Modal.
  4. Nathan

    Review Module

    I was looking for a review module either for Wordpress or standalone that would allow users to do the following. 1. User Registration 2. Leave reviews 3. Search reviews Pretty simple, but couldn't find anything out there that just did simply that. Working on a script for it now, will probably release once complete.
  5. My site: http://automatedshowings.com/dashboard/home.php As I shrink the window the nav bar converts to the mobile version. If I pull it up on my iPhone the page looks like the desktop version and the mobile nav is not there.
  6. I have a staic navigation bar. Right now "Home" is active. How can I adjust it so when I click "About" or "Team etc...then those nav options would become active? I know how to do it by checking the URL with PHP, but since these are not actual URL's but just jumping down to a div I'm not sure how to do it or best practice.
  7. I have nav links that when click jump you down the page to that section. It's choppy right now how can I make the transition a slide?
  8. I'm using the following bootstrap method for tabs. <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li> <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li> <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home">...</div> <div class="tab-pane" id="profile">...</div> <div class="tab-pane" id="messages">...</div> <div class="tab-pane" id="settings">...</div> </div> My question is how can I link to a tab so when you go to that link the page opens in that tab? http://domain.com/index.php#profile for example does not open into the profile tab.
  9. I'm having issues with my bootstrap datepicker on this page: http://automatedshowings.com/dashboard/schedule-showing-3.php?propertyid=10 The date box will not show the datepicker. I'm using this datepicker: http://eonasdan.github.io/bootstrap-datetimepicker/
×
×
  • Create New...