text below image bootstrape - javascript

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>

Related

Scroll to the top of section (.js)

how can i writing in java script, that when i click on just Read less button jump to the first element, i solved that with this code >> toggle_switch[0].scrollIntoView(false)
it jumps up to where the button in read less position is, but i wanna set the position totally top of button where the first element (div) is
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

solution without any library or framework:
button.addEventListener("click", function () {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
});
you can calculate the exact position of the div you want to scroll-to
const bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
an than use the variable "offset" in the scroll() function.
top: offset
Edit:
javascript:
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
});
just add this class to your element, wich you want to be seen/not seen
.element-to-show {
display: none;
flex-direction: column;
}
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
also add the class ".target-container" to the div to wich you want to scroll to.
and remove the styling in the HTML file. styling in html has the highest priority so it overwrites the external styles.
const btn = document.querySelector(".btn");
const elementToShow = document.querySelector(".element-to-show");
btn.addEventListener("click", function () {
if (btn.textContent === "Read More") {
btn.textContent = "Read Less";
elementToShow.style.display="flex";
}
else if (btn.textContent === "Read Less") {
btn.textContent = "Read More";
elementToShow.style.display="none";
const bodyRect = document.body.getBoundingClientRect(),
elemRect = document.querySelector(".target-container").getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
window.scroll({
top: offset,
left: 0,
behavior: 'smooth'
});
}
})
.element-to-show {
display: none;
flex-direction: column;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container target-container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row element-to-show" id="collapse" >
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

Text beside image

I have different images with different widths but the same height, i want to display them inline with text next to each images, i did that but in the responsive screen it doesn't look nice, how can i fix that? and if there is another way to write this code other than mine please help, here is my code:
.img{
min-width: 30%;
float: left;
}
.text{
font-size: 20px;
width: 70%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row text-center">
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/350x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/250x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<div class="img">
<img src="http://placehold.it/300x150" />
</div>
<div class="text">
<p>Test</p>
</div>
</div>
</div>

It would be better to use figure and figcaption.
Your question is not very precise, but this works well for me:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row text-center">
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/250x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-3 col-lg-offset-1 col-xs-4">
<figure>
<img src="http://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
</div>

Use below code snippet. It looks good in responsive screen as well.
Use Css:
div{overflow:hidden}
<div class="row text-center">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/350x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/250x150">
<figcaption>Text</figcaption>
</figure>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<figure>
<img src="https://placehold.it/300x150">
<figcaption>Text</figcaption>
</figure>
</div>
</div>

HTML page Distorted on same browsers

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>

Show information from Firebase at the specific position

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!

Bootstrap Grid not working in IE8

I am currently designing a site that works fine on Chrome, FF, & IE 9,10 but when I view the site in IE8 thru browserstack it renders terribly.
Code of the section:
<div id="retail_locate" class="container">
<div class="row">
<div id="retail_btn" class="col-md-4 text-center hidden-sm hidden-xs">
<button type="button" class="btn btn-default"><span class="btn-text">Find A Local Retailer</span><span class="icon-map-marker"></span></button>
</div>
<div class="col-lg-8 text-center">
<div class="row">
<br>
<div class="col-md-4 col-sm-4 col-xs-6 ">
<img class="img-responsive shadow" src="images/retailers/retail1.jpg">
</div>
<div class="col-md-4 col-sm-4 col-xs-6">
<img class="img-responsive shadow" src="images/retailers/retail2.jpg">
</div>
<div class="col-md-4 col-sm-4 hidden-xs">
<img class="img-responsive shadow" src="images/retailers/retail3.jpg">
</div>
</div>
<br />
<div class="row hidden-sm hidden-xs">
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail4.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail5.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive shadow" src="images/retailers/retail6.jpg">
</div>
</div>
<br />
</div>
</div>
</div><!-- .container -->
I'm using Bootstrap 3. I think whats screwing this up is the col-lg,md etc. The grid is not in effect.
Images:
http://i.imgur.com/qF4ebPJ.png
http://i.imgur.com/BzLZBG6.png
Any help would be amazing. This is my first post on Stack and I've searched everywhere for fixes. I included html5shim and respond.js in my header.
 <!--[if lt IE 9]>
<script src="js/html5shiv/dist/html5shiv.js"></script>
<script src="js/dest/respond.min.js"></script>
<![endif]-->
I changed the doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and even added the meta tags
<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE8 does not reconginse media queries and this is probably why nothing is working. The code I have used in the past and works fabulous is this:
https://code.google.com/p/css3-mediaqueries-js/

Check the non-js solution:
https://github.com/dizzyn/bootstrap-grid-desktop-first
It's a Grid Css Patch

Categories