Hi I am facing a problem that: MY HTML,js,Bootstrap based View of my web project shows perfectly/fine on my Google Chrome browser i have not hard coded any screen size. But when I open this same project on other machines Google Chrome browser the UI/View is totally distorted and also my jS/jQuery functions stop functioning . How can I control this behavior.
I have my code below, my I guess it is more browser compatibility than code issue. Please advise.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Wallboard A</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>6232</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>456</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>1553</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>45</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>478</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>4566</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>1388</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>3874</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>0</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>00:45:55</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>50%</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">79.0%</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>136</span>
<em>ASA (Sec)</em>
<span>32</span>
<em>Max Time In Queue</em>
<span>00:00:00</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Related
I started doing website now and I've known the bootstrap a little while ago. I'm here because I have a problem with navbar link's.
On the homepage the links work perfectly but on the following pages does not work. the same menu.
If anyone can help, I really appreciate it.
<!DOCTYPE html> <!--Index-->
<html lang="pt">
<head>
<title>Urbisouto - A tua imobiliaria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,900|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo m-0 p-0">logo</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Imoveis</li>
<li>Agentes</li>
<li>Sobre nós</li>
<!-- <li>News</li> -->
<li>Contactos</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3"><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-block-wrap">
<div class="owl-carousel with-dots">
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_1.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p> <a href="#properties-section" class="btn btn-primary px-5 py-3" class="smoothscroll arrow-down" class="nav-link" >go</a></p>
</div>
</div>
</div>
</div>
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_2.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p>go</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="properties-section">
<div class="container">
<div class="row large-gutters">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-5 ">
<div class="ftco-media-1">
<div class="ftco-media-1-inner">
<img src="images/vieira/homepage.jpg" alt="#" class="img-fluid">
<div class="ftco-media-details">
<h3>Vieira do Minho</h3>
<p>Braga</p>
<strong>€1.150.000,00</strong>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<h2 class="footer-heading mb-4">Sobre nós</h2>
<p>Fundada em 1998, a Urbisouto caracteriza-se por ser uma agência imobiliária, com uma grande experiência no mercado, empenhada em satisfazer a necessidade de quem nos procura.
Fazemos pesquisas de mercado para garantir o melhor preço.</p>
</div>
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Quick Links</h2>
<ul class="list-unstyled">
<li>Sobre nós</li>
<li>Serviços</li>
<li>Testemunhos de clientes</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="mb-4">
<h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
<form action="#" method="post" class="footer-subscribe">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
</div>
</div>
</form>
</div> -->
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Segue-nos</h2>
</span>
<!-- <span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<span class="icon-instagram"></span> -->
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p class="copyright"><small>© <script>document.write(new Date().getFullYear());</script> Urbisouto - Empreendimentos Copyrigth. Design by Albino Teixeira</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<span class="icon-angle-double-up"></span>
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I remember than on desktop it works well, just in mobile dont work on second page
I'm trying to create a panel inside a col-sm-6 column.
is there a way to get the panel heading and panel content not going out of the 1st column ?
here is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
.col-sm-6
<div class="container">
<h3>Panel Heading</h3>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading
</div>
<div class="panel-body">Panel Content
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
</div>
</div>
</body>
</html>
I've tried to add this CSS but its not working
.container{
position: absolute;
}
plnkr link
Use this code for the body:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">
.col-sm-6
<div class="row">
<h3>Panel Heading</h3>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading
</div>
<div class="panel-body">Panel Content
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
</div>
</div>
screenshot
i try to fix it but still like this please help me to fix it
i'm try change gid but still get the problem
please give me any idea about this
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</body>
</html>
you need to use display:flex;flex-wrap:wrap on row so all the columns have equal height, regardless if they have a headline or not
see snippet below or jsFiddle
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap:wrap;
}
.col-sm-4 {
width:33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container text-center">
<div class="row">
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
<p style="background-color:#fff;">Example headline.</p>
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
<div class="col-sm-4 col-lg-3 col-md-4">
<img class="img-responsive top" src="https://s-media-cache-ak0.pinimg.com/736x/06/cb/33/06cb338efcf3ac37a90caad05fd356a2.jpg">
</div>
</div>
</div>
I am facing a problem that: I have some JQuery code in my HTML View that works fine on my Google Chrome Browser but on another machine(server) Google Chrome the same code if Published on iiS, jQuery stops working.
jS is enabled in Browser but why is this jQuery code not being picked ? Please advise.
Error in SOURCE HTML while ALL JS/jQuery files arre added in path:
#{
ViewBag.Title = "Show";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#*<meta http-equiv="Refresh" content="5">*#
<title>Wallboard B</title>
<link type="text/css" rel="stylesheet" href="~/cssNew/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="~/cssNew/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<span id="View1">
<section class="gage-wrap">
<div class="container-fluid stretch">
<div class="row no-gutter">
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Avg Handle Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Handle Time (Sec)</h1>
<canvas id="avg_handle_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_handle_value">#ViewBag.averageHandleTime</span> <!---Print Speed -->
</div>
<!----- Avg Handle Meter End ------>
<!----- Avg Speed Meter ------>
<div class="col-lg-12 gage">
<h1>Avg Speed of Answer (Sec)</h1>
<canvas id="avg_speed_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="avg_speed_value">#ViewBag.averageSpeedOfAnswer</span> <!---Print Speed -->
</div>
<!----- Avg Speed Meter End ------>
</div>
</div><!--/col-md-3-->
<div class="col-lg-6">
<div class="row no-gutter">
<!----- Service Level Meter ------>
<div class="col-lg-12 gage">
<h1>Service Level %</h1>
<canvas id="service_level_meter" width="580" height="333">
Canvas not available.
</canvas>
<span id="service_level_value">#ViewBag.serviceLevel</span><!---Print Speed -->
</div>
<!----- Service Level Meter End ------>
<div class="col-lg-12 gage time">
<h1>Longest Call in Queue</h1>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div>
</div><!--/col-md-6-->
<div class="col-lg-3">
<div class="row no-gutter">
<!----- Total Calls Meter ------>
<div class="col-lg-12 gage">
<h1>Total Calls in Queue</h1>
<canvas id="total_calls_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="total_calls_value">#ViewBag.callsInQueue</span><!---Print Speed -->
</div>
<!----- Total Calls Meter End ------>
<!----- Abandoned Rate Meter ------>
<div class="col-lg-12 gage">
<h1>Abandoned Rate %</h1>
<canvas id="abandoned_rate_meter" width="285" height="170">
Canvas not available.
</canvas>
<span id="abandoned_rate_value">#ViewBag.abandRate</span><!---Print Speed -->
</div>
<!----- Abandoned Rate Meter End ------>
</div>
</div><!--/col-md-3-->
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/gage-wrap--><!--/gage-wrap-->
<footer style="margin-top:8%">
<p>Powered by Expertflow BI Services</p>
</footer>
#*<script type="text/javascript" src=""></script>*#
</span>
<span id="View2">
<div id="div2">
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>High ARPU - H+HVC</h1>
</div>
</div>
</div>
</header>
<section class="the-table">
<div class="container-fluid">
<div class="row no-gutter row-eq-height">
<div class="col-md-2 col-sm-6">
<em><span>Logged In Agents</span></em>
<span><span>#ViewBag.loggedInAgents</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>On Calls</span></em>
<span><span>#ViewBag.onCalls</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Ready</span></em>
<span><span>#ViewBag.agentsInReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Not Ready</span></em>
<span><span>#ViewBag.agentsInNotReadyState</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Agents In Wrapup</span></em>
<span><span>#ViewBag.agentsInWrapup</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Reserved Agents</span></em>
<span><span>#ViewBag.reservedAgents</span></span>
</div>
</div><!--/row-->
<div class="row no-gutter">
<div class="col-md-2 col-sm-6">
<em><span>Calls Offered</span></em>
<span><span>#ViewBag.callsOffered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Answered</span></em>
<span><span>#ViewBag.callsAnswered</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls Abandoned</span></em>
<span><span>#ViewBag.callsAbandoned</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Calls In Queue</span></em>
<span><span>#ViewBag.callsInQueue</span></span>
</div>
<div class="col-md-2 col-sm-6">
<em><span>Longest Talk Duration</span></em>
<span><span>#ViewBag.longestTalkDuration</span></span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-2 col-sm-6">
<em><span>Abandoned %</span></em>
<span><span>#ViewBag.AbandRate</span></span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<section class="the-table wide">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-md-12">
<em class="large">Service Level %</em>
<span class="large">#ViewBag.serviceLevel</span>
<div class="clearfix visible-xs"></div>
<em>AHT (Sec)</em>
<span>#ViewBag.averageHandleTime</span>
<em>ASA (Sec)</em>
<span>#ViewBag.averageSpeedOfAnswer</span>
<em>Max Time In Queue</em>
<span>#ViewBag.longestCallInQueue</span>
</div>
</div><!--/row-->
</div><!--/container-fluid-->
</section><!--/the-table-->
<footer>
<p>Powered by Expertflow BI Services</p>
</footer>
</div>
</span>
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script>
<script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script>
<script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script>
<script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script>
<script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script>
<script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script>
<script type="text/javascript" src="~/js/bootstrap.min.js"></script>
<script type="text/javascript" src="~/js/jquery-latest.min"></script>
<script src="~/js/jquery.min.js"></script>
<script src="~/js/jquery-1.6.2.min.js"></script>
<script src="~/js/jquery-ui-1.8.16.custom.min"></script>
<script>
$(document).ready(function () {
function ToggleFunction() {
$('#View2').hide();
alert("HELLO from VIEW1")
myVar = setTimeout(SecondView, 11000);
}
function SecondView() {
$('#View1').hide();
alert("HELLO from VIEW2")
$('#View2').show();
}
});
</script
Your jquery.min.js put it above all your other js files. Jquery library has to load before the rest of the jquery plugins
<script type="text/javascript" src="~/js/jquery-latest.min"></script> <script src="~/js/jquery.min.js"></script> <script src="~/js/jquery-1.6.2.min.js"></script> <script src="~/js/jquery-ui-1.8.16.custom.min"></script>
Now load the the other js
<script type="text/javascript" src="~/jsNew/bootstrap.min.js"></script> <script type="text/javascript" src="~/jsNew/service-level-meter.js"> </script> <script type="text/javascript" src="~/jsNew/avg-handle-meter.js"></script> <script type="text/javascript" src="~/jsNew/total-calls-meter.js"></script> <script type="text/javascript" src="~/jsNew/avg-speed-meter.js"></script> <script type="text/javascript" src="~/jsNew/abandoned-rate-meter.js"></script> <script type="text/javascript" src="~/js/bootstrap.min.js"></script>
I made a sample html page with bootstrap column. In column it's necessary to insert a text (from Firebase) at the specific position.
For example: I want to insert "test" at the column 3.
For that, I create the Firebase with the "currentMessage" field and "location" field.
Until now, I use javascript for save and show information from Firebase. Also, I used in my code AngularJS to show 2 messages (just to learn...).
Here is my index.html code:
<!DOCTYPE html>
<html ng-app="root">
<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>Bootstrap Grid</title>
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<!--FOR ANGULAR JS-->
<script src="root.js"></script>
<script src="services.js"></script>
</head>
<!--END ANGULARJS -->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid">
<div class="header">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" > <div ng-controller="Ctrl1"><center>{{message}}</center></div> </div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 blue9" > <div ng-controller="Ctrl2"><center>{{message}}</center></div></div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div ng-app="root">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" ><div ng-controller="Ctrlocation">{{message}}</div></div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="top-content">
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-9 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue" >.col-md-6</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 red" >.col-md-3 </div>
</div>
</div>
</div>
<div class="bottom-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 red12" >
<div id="lblCurrentMessage" class="text-center"></div>
</div></div>
</div>
<br><br>
<div class="form-group">
<input type="text" id="txtNewMessage" cass="form-control">
<button id="btnUpdateMessage" class="btn btn-primary">Add Text</button>
<br><br>
<input type="text" id="txtNewMessage2" cass="form-control">
<button id="btnUpdateLocation" class="btn btn-primary">Add Location</button>
</div>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script>
var lblCurrentMessage = document.getElementById('lblCurrentMessage'),
txtNewMessage = document.getElementById('txtNewMessage'),
txtNewMessage2 = document.getElementById('txtNewMessage2'),
btnUpdateMessage = document.getElementById('btnUpdateMessage');
btnUpdateLocation = document.getElementById('btnUpdateLocation');
rootRef = new Firebase('https://web-quickstart-8326d.firebaseio.com/'),
currentMessageRef = rootRef.child('currentMessage');
locationRef = rootRef.child('location')
btnUpdateMessage.addEventListener('click', function(){
currentMessageRef.set(txtNewMessage.value);
txtNewMessage.value='';
});
btnUpdateLocation.addEventListener('click', function(){
locationRef.set(txtNewMessage2.value);
txtNewMessage2.value='';
});
currentMessageRef.on('value', function(snapshot){
txtNewMessage.value='';
});
currentMessageRef.on('value',function(snapshot){
lblCurrentMessage.innerText = snapshot.val();
});
</script>
<!--AngularJS scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script src="root.js"></script>
<script src="services.js"></script>
<!--END ANGULARJS -->
</body>
</html>
And here is my root files from angular:
var root = angular.module('root', []);
root.controller('Ctrl1', function ($scope)
{
$scope.message = "Eu sunt coloana 3";
});
root.controller('Ctrl2', function ($scope)
{
$scope.message = "Eu sunt coloana9";
});
I need idea/help how can implement this feature. (to insert text, at the specific position in my website).
I think it's necessary to use AngularJS for that, but i'm novice and i don't have idea how can make that.
I tried to make a controller, look like that:
root.controller('Ctrlocation', function($scope){
if($scope.location=txtNewMessage2.value){
$scope.message = txtNewMessage.value='';
}
});
But, didn't work and I don't know exactly where it's necessary to insert ng-controller in my index.
Thank you for help!