Twitter Bootstrap: How do I align section in navbar to right? - javascript

Here is the plunker - http://plunker.co/edit/YplsPFRiYo4jjbi7HcYV?p=preview
Required?
- The User Settings dropdown should be on the extreme right side
- The User setting should look like another section like other Link, and not as button
How do I do that?
Thank you
UPDATE
I worked for a while and was able to get it displayed on right side, but nothing happens on click
http://plunker.co/edit/YplsPFRiYo4jjbi7HcYV?p=preview

You need to include JQuery in your index.html file, JQuery is a dependency of the bootstrap.js
http://plunker.co/edit/dePLLK?p=preview
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>

Related

Could not open the confirmation box using javascript and Bootstrap

I am facing some issues. I am trying to open the confirmation box using javascript click event but getting the following error.
Uncaught TypeError: this.getUID is not a function
at Confirmation.init (VM8904 bootstrap-confirmation.js:151)
at new Confirmation (VM8904 bootstrap-confirmation.js:16)
at HTMLSpanElement.<anonymous> (VM8904 bootstrap-confirmation.js:427)
at Function.each (VM8902 jquery.js:2)
at m.fn.init.each (VM8902 jquery.js:2)
at m.fn.init.$.fn.confirmation (VM8904 bootstrap-confirmation.js:419)
at getConirmation (VM8906:19)
at HTMLDivElement.onclick (VM8987:14)
I am explaining my code below.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div onclick="getConirmation();">
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="top"></span></p>
</div>
<script>
function getConirmation() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
}
</script>
</body>
</html>
Here I need when user will click on that icon the confirmation box will open on the top of that icon. Here is my plunkr code. Please help me to resolve this issue.
It seems you are using bootstrap version 3.0 + and bootstrap-confirmation doesn't support 3.0 version. So you can either downgrade your bootstrap version or use another library from here.
Bug description here.
Reading I've been testing your Plunker code, and the main problem is with the jQuery and Bootstrap versions you're using. According to boostraps-confirmation documentation, you need...
jQuery >= 1.9
Bootstrap Popover >= 3.2 (included in bootstrap.js)
I've changed to this...
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
... and works without problems.
On the other hand, to use this plugin you don't need to create the onClick event in the element where you want to apply it. Just execute the plugin to apply it to all elements that have data-toggle='confirmation'.
Putting all together...
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-confirmation.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope" data-toggle="confirmation" data-placement="bottom"></span></p>
</div>
<script>
$(document).ready(function() {
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
});
});
</script>
</body>
</html>
NOTE: I leave the CDN just to show the versions I've used. Of course, you can download the libraries to your project if you prefer it.

Bootstrap JS Modal and Menu Toggle Dispute

TL;DR Changing the order (or removing) the Bootstrap JS affects which module works properly.
I have been looking high and low for an answer to this specific question, but nothing has quite remedied the situation..here goes.
On my page, I have the 'hamburger' dropdown menu on the left-hand side and a sign up button (to call a modal) on the right hand side using Bootstrap. Here's the JS order I call at the bottom of my footer.php:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
By changing the order of the JS, I can get one of the two modules working. Lemme explain:
Situation #1 (using the order above): I click the mobile 'hamburger' menu and the menudrops down BUT when clicked again, it refuses to go back up (you can see it move slightly but it still stays down). I read that this is a multiple jQuery/js issue. So I went ahead and checked my header and footer.php and no other bootstrap javascripts were being called. HOWEVER, when I delete the bootstrap.min.jsthe menu toggle works like a charm. Note: The modal popup works perfectly as well.
Situation #2: By moving the bootstrap.min.jsto the top of the scripts, the menu works as expected, BUT now the signup button, when clicked, will display the modal briefly and then disappear. These issues can be resolved by removing the bootstrap.min.js again....
So my question is, is the bootstrap.js being called by any one of these other scripts? B/c the problem ceases to exist once that file is removed!
Thanks everyone for you help.
Try switching the order of your last two script files to this. Seems like bootstrap is overriding your custom script file because it is declared below it. once your remove bootstrap it seems to work like a charm
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
Secondly, you are using bootstrap-css for their classes but you are using main.js for toggling menu.
so both of the script are colliding with each other
either you should change your class that you're calling in main.js or you should use bootstrap.js entirely
like in bootstrap it calls the button with class="navbar-toggle" to toggle the menu
if you are using somethig like $(".navbar-toggle") in your main.js then they would interfere with each other.
For you modal problem: Since it is working for short time, it may be the case tha the modal-toggle is being called by two scripts simultaneously.
Find the modal portion in bootstrap.js and comment it out.
I have got the same issue when all my menu changed colour when I started using a new jquery / bootstrap modal. To sort this issue I have change the order and put all together at menu.php page.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap Menu Stuff-->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Bootstrap Modal Stuff-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>

Meteor: Dynamic page not transitioning properly

Okay, this is a really weird one. Unfortunately, I can't show a whole lot of code because I really have no idea where the problem is originating -- However, I can describe the problem. That said, if there' s some code you think is relevant, please ask and I'll post it! So, here goes:
I have an HTML template (found here) that I'm chopping up into Blaze templates for integration into a real estate site that I'm working on using Meteor. The template includes all these external CSS and JavaScript files that I've included by simply leaving the templates as-is and putting all the assets required by the template into /public folder of the Meteor project. The files are loaded via regular <script> and <link> elements embedded in the <head> and near the bottom of the main layout.
Here is what my <head> looks like:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Real Places</title>
<link rel="icon" href="images/cropped-ms-icon-310x310-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-ms-icon-310x310-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="images/cropped-ms-icon-310x310-180x180.png">
<!-- Google font-->
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700,600,500' rel='stylesheet' type='text/css'>
<!-- Include the flexslider stylesheet -->
<link href="js/flexslider/flexslider.css" rel="stylesheet">
<!-- Include the lightslider stylesheet -->
<link href="js/lightslider/css/lightslider.min.css" rel="stylesheet">
<!-- Include the owl-carousel stylesheet -->
<link href="js/owl.carousel/owl.carousel.css" rel="stylesheet">
<!-- Include the swipebox stylesheet -->
<link href="js/swipebox/css/swipebox.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="js/select2/select2.css" rel="stylesheet">
<!-- Include the font-awesome stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="css/animate.css" rel="stylesheet">
<link href="js/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Default Theme stylesheet -->
<link rel="stylesheet" href="css/theme.css"/>
</head>
Here is what my main layout looks like:
<template name="app_home"> <!-- note this is distinct from site_home, which is a different template -->
<body class="inspiry-slider-two">
{{> page_loader}}
{{> mobile_header}}
{{> site_header}}
{{> Template.dynamic template=main}}
{{> site_footer}}
{{> login_modal}}
{{> real_places_includes}}
</body>
</template>
All of the scripts that the template depends on are inserted via the real_places_includes template call. Here is what this template looks like:
<template name="real_places_includes">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/flexslider/jquery.flexslider-min.js"></script>
<script src="js/lightslider/js/lightslider.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="js/owl.carousel/owl.carousel.min.js"></script>
<script src="js/swipebox/js/jquery.swipebox.min.js"></script>
<script src="js/jquery.hoverIntent.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/transition.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/modal.js"></script>
<script src="js/meanmenu/jquery.meanmenu.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/custom.js"></script>
<!-- .modal -->
<script>
...
// This is a bunch of modal code specific to the template
...
</script>
</template>
This works great when the page first loads, but when I route away from the main page and back, it appears as if assets aren't loading properly when I come back. Here is some relevant routing code:
FlowRouter.route('/', {
name: 'Site.home',
action() {
BlazeLayout.render('app_home', { main: 'site_home' });
}
});
FlowRouter.notFound = {
action() {
BlazeLayout.render('app_home', { main: 'site_not_found' });
}
};
Right now almost all the links in the template don't work since I haven't swapped them out for 'live' {{pathFor 'route'}} calls. So, if I say, click on one of those links, I get the 404 page, as I should. It appears to load just fine. On the 404 page, I added a {{pathFor 'Site.home'}} to navigate the user back to the main page. However, when you click it, all the page elements on the home page (the ones that previously loaded fine!) that depend on JavaScript don't seem to format correctly. I checked the Chrome debugger to find this out. However, all of the assets are still loaded properly according to Chrome's Resource inspector!
Here is what the page looks like initially and after routing back home:
Before routing
After routing
As you can see, the select boxes haven't been rendered properly, the slider at the top of the page below the nav bar also isn't rendering and displays an animated loading graphic... basically anything that depends on JavaScript is kaput.
Here are a couple of screenshots of my debugger highlighting the problem:
Before routing
After routing
This is what that same 'Location' select looks like before and after using my route.
So, for whatever reason, when I hit some route, the code that the route depends on doesn't seem to execute as it should in order to format the page as it was originally HOWEVER if the route is hit when the site first loads, it executes fine... I feel like I need to be firing some global event or something like that manually, but I don't really know what... Or maybe something else entirely. I have tried firing 'load' and 'ready' events manually on the Template.site_home.onRendered callback, but that hasn't worked.
Does anyone have any idea how I can fix this and make the page transition properly?

Buttons on bootstrap timepicker is not showing

I'm using a time picker but I can't get to make the buttons show. Here's how the timepicker looks.
Here's how I render it.
<input type="text" class="form-control timepicker appt_time" style="width:200px;">
<script>
$('.timepicker').timepicker();
</script>
Here's how I set them in my header
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-datepicker.css">
<link rel="stylesheet" media="screen" type="text/css" href="/content/css/bootstrap-timepicker.css">
<script type="text/javascript" src="/content/script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap.min.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="/content/script/bootstrap-timepicker.js"></script>
I got the css files and the js files for the timepicker
Here.
Any ideas what's causing this? Thanks!
You have got css and js files but you've missed to capture the glyphicons.
The glyphicons are responsible for showing the buttons on the timepicker.
If you can inspect your developer tools on your buttons you can see that the images seems to be missing.
Here is what i've found on the site that you have picked timepicker
Include the glyphicons png file on your site to get the images work perfect.
Hope this helps
Try script as...
<script type="text/javascript">
$("input[id$='timepicker']").timepicker({
minuteStep: 5,
showInputs: false,
disableFocus: true
});
</script>
Give an id , say id="timpick" and in call as $('#timpick').timepicker(options);

Adding bootstrap in HTML

I'm going to use bootstrap to build up my front end. Also I'm using JSP and JSTL
What I've read in some articles over the internet is the proper approach of adding an external javascript file should be written before the body closing tag for more optimization of the page. Now I'm trying to apply this with the bootstrap, what i did is put the css of the bootstrap to an external html file:
import_header.html:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="bootstrap-css/bootstrap-responsive.min.css">
which I imported to the head of the html like this:
<jsp:include page="import_header.html" flush="true" />
Now I want to do the same thing with the js file of the of the bootstrap and the jQuery lib but I don't know what is the proper way of doing this.
that's the recommended way, how to place them:
e.g. footer.html
<!-- Placed at the end of the document so the pages load faster -->
<script src="jquery/jquery-2.0.3.min.js"></script>
<script src="bootstrap/bootstrap-2.3.1.min.js"></script>
<script src="myOwn.js"></script>
</body>
</html>

Categories