Search the Community
Showing results for tags 'bootstrap'.
Found 11 results
-
The first thing you can learn HTML, whether you want to become a professional web developer or just want to learn more about how websites work. The basic language for developing web pages and web applications is HTML. A server sends an HTML file to your computer every time you visit a website, and your browser interprets and displays the information contained in the file. What is HTML? HTML stands for Hyper Text Markup Language, which for many beginners is a confusing concept. The best way to understand HTML is to explain the meanings of each word. Hyper Text is a type of text that contains hyperlinks to other texts. Hypertext is used every time you click on a highlighted or underlined link that takes you to another page. A “web” of pages begins to form as more and more pages use hypertext to connect to one another. This is where the name “World Wide Web” comes from. Markup refers to the special symbols or codes inserted into a document to tell the web browser how to display the document data. Markup code, for example, will tell the browser to show a phrase in bold or italic text, or which sections of the document are headings and which are paragraphs. Markup code is used for a variety of languages, including HTML. Language refers to the concept of a standardised code. When writing HTML, everybody must obey those guidelines, much as when speaking a normal language. This is so that the code can be understood and interpreted by all browsers. There are numerous programming languages, and you may be familiar with some of the more common ones, such as Java, Python, and Ruby. HTML Tags You might remember that the use of angle brackets was the most prominent feature of HTML code. The angle brackets (and the code they contain) are known as tags. Tags are used to separate HTML code from standard text. The browser will not show any text written inside the angle brackets. The text inside the angle brackets is generally used to inform the browser about how to display or convert standard text between the opening (also known as the start) and closing tags (also called the end tag). Tags are usually found in pairs, and the difference between an opening tag and a closing tag is that a closing tag’s first symbol inside the brackets is a slash “/” symbol. For example, a pair of h1 tags (used to define heading text), with some content in between. <h1>content.</h1> In this example, the <h1> is the opening tag and the </h1> is the closing tag. How To Use Tags Here’s an example of how tags can be used to transform text. If we add the sentence “Some text.” to our HTML file, it will simply display as regular text, as shown below: Some text. If we want the sentence to be bold, we can use the <b> opening tag before the text and the </b> closing tag after the text. The letter “b” stands for “bold” in the tag. If we add <b>Some text.</b> to our HTML file, it will look like this: Some text. We may use an <i> opening tag before the text and </i> closing tag after the text to make the sentence appear in italic text. The “i” stands for “italic,” as you might have guessed. If we add <i>Some text.</i> to our HTML file, it will look like this: Some text. We can add an <a href=“www.google.com”> opening tag before the text and a </a> closing tag after the text if we want the sentence to be shown as a hyperlink. Can you figure out what the letter “a” stands for? This one is a bit more difficult… it stands for “anchor.” If we add <a href=“www.google.com”>Some text.</a> to our HTML file, it will look like this: Some text. This hyperlink will take us to a different webpage if we click on it. You can possibly guess which page this text links to if you look at the code. These three examples in to a simple HTML document: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <b>Some text.</b> <i>Some text.</i> <a href=”www.google.com”>Some text.</a> </body> </html> If you save this file and open it in a browser, it should look like this: Some text. Some text. Some text. Two Important Rules For Using Tags There are two main rules you need to follow when using tags. You must always use angle brackets for tags. In other programming languages, square and round brackets are used for other purposes. The browser will not understand your HTML code if you use square or round brackets. Tags almost always come in pairs. This means that you must always close a tag after opening it, except a few special examples. If you forget to add a closing tag the element you’re attempting to transform will not show properly. In the worst-case scenario, forgetting to close a tag could result in your page crashing.
-
Disable Right Click on Specific Area of a Website
Nathan posted a topic in Javascript, jQuery & AJAX
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">×</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. -
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">×</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.
-
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>
-
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.
-
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.
-
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.
-
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?
-
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.
-
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/
-
