I am using bootsrap in my html .I want to change the background color of my div when screen resolution change from large to medium or small .I added class but it not reflect when i change my screen resolution .Here is my code
http://plnkr.co/edit/6sSYngN0hn2tZZ1wDEML?p=preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<style>
.col-lg-12{
height: 50px;
background: red !important;
}
.col-md-12{
height: 50px;
background: yellow !important;
}
.col-xs-12{
height: 50px;
background: black !important;
}
.col-sm-12{
height: 50px;
background: blue !important;
}
</style>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
it wasn't working because you defined your CSS properties without media-queries. as all the classes were added to a common DIV, the CSS property with highest specificity was getting applied.
Below is the solution to make it work.
#media (max-width: 767px) {
.col-xs-12 {
height: 50px;
background: black !important;
}
}
#media (min-width: 768px) {
.col-sm-12 {
height: 50px;
background: blue !important;
}
}
#media (min-width: 992px) {
.col-md-12 {
height: 50px;
background: yellow !important;
}
}
#media (min-width: 1200px) {
.col-lg-12 {
height: 50px;
background: red !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
hi
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Related
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
I'm trying to move background image on mousemove in Angular project.
It is not working, I'm thinking that the problem is loading:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
because I debugged manually in my code with: "console.log("message") and nothing happens, so the function is never called.
Some piece of code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
<div class="col-md-12" data-aos="fade-left" data-aos-duration="2600" data-aos-once="true">
<h1 class="title">Keeping track of your health, register as:</h1>
</div>
<div class="col-md-12" align="center" data-aos="fade-right" data-aos-duration="2600" data-aos-once="true" >
<a class="btn-link" href="/doctor-register"><button class="btn" type="button" type="submit" value="doctor">DOCTOR</button></a>
<a class="btn-link" href="/patient-register"> <button class="btn" type="button" type="submit" value="patient">PATIENT</button></a>
<a class="btn-link" href="/donor-register"><button class="btn" type="button" type="submit" value="donor">DONOR</button></a>
</div>
</div>
</div> <!-- /container -->
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
console.log("dsd");
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
</body>
</html>
CSS:
#bg {
height: 100vh;
background-image: url('../../../images/1.jpg'); /* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
Here is what I want
https://codepen.io/chrisboon27/pen/rEDIC
You should check background image path.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Loved+by+the+King" type="text/css"/>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' type='text/css'>
</head>
<body>
<div id="bg">
<div class="container1" >
<div class="row1">
</div>
</div> <!-- /container -->
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$("#bg").mousemove(function(e){
var moveX=(e.pageX*-1/15);
var moveY=(e.pageY*-1/15);
$("#bg").css('background-position', moveX + 'px ' + moveY + 'px')
});
</script>
<style>
#bg {
height: 100vh;
background-image: url('https://i.stack.imgur.com/rhStR.jpg');
/* Background Image Link */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.container1 {
display: table;
width: 100%;
height: 100%;
}
.row1{
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
</style>
I'm trying to add a sidebar navigation panel to my webpage. Doing it using js html and css.When i load the page for the first time it shows the sidebar even before clicking on the icon to open it. How can i prevent opening of the sidebar automatically when the page loads for the first time? thanks in advance!!! codes are as follows...
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</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">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu" id="logo2">
<div class="sidebar_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>
Just add the class opacity_one to your Logo div, and hide_menu to the sidebar div. Check the updated snippet below!
$(document).ready(function(){
$(".fa-times").click(function(){
$(".sidebar_menu").addClass("hide_menu");
$(".toggle_menu").addClass("opacity_one");
});
$(".toggle_menu").click(function(){
$(".sidebar_menu").removeClass("hide_menu");
$(".toggle_menu").removeClass("opacity_one");
});
});
/*side navigation bar*/
.toggle_menu{
cursor:pointer;
z-index: 1000000;
opacity: 0;
}
.sidebar_menu{
position: fixed;
width: 20em;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17,17,17,0.9);
opacity: 0.9;
transition: all 0.3s ease-in-out;
left:0px;
}
.fa-times{
right: 1em;
top : 1em;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: #8bea8b;
transition: all 0.3s ease-in-out;
}
.fa-times:hover{
opacity: 1;
}
.hide_menu{
margin-left: -20em;
}
.opacity_one{
opacity: 1;
transition: all 0.3s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<title>Forestpin</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">
<link rel="stylesheet" type="text/css" href="fullpage/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="fullpage/vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
<script type="text/javascript" src="fullpage/vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage/jquery.fullPage.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="sidemenu.js"></script>
</head>
<body>
<!--top navigation bar-->
<nav class="navbar navbar-default header navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logofpin.png" id="logofpin">
</a>
<img alt="Logo" src="images/logo2.png" class="navbar-brand toggle_menu opacity_one" id="logo2">
<div class="sidebar_menu hide_menu">
<i class="fa fa-times"></i>
</div>
</div>
</div>
</nav>
I've used a javaScript function to "build" a widget, call it on an HTML page and make it responsive using CSS.
Now, I've to use that same widget on an mvc.net application and i can't make it work like i want it. In the image shown bellow "aluger","venda", "compra" and "permuta" all show up in the same line, and I want them to show up on different lines. I've used display:block and nothing happend.
Those options are loaded automatic.
Can some one please help me?
CSS of DIV:
#div_maior {
display:block;
width: 100%;
height: 100%;
background-color: #ffffcc;
clear: both;
min-height: 50px;
max-height: 200px;
}
#div_global {
clear:left;
display:block;
float:left;
padding: .5%;
border-color: transparent;
height: 100%;
width: 30%;
// overflow: auto;
}
HTML OF THE WIDGET:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css"/>
</head>
<body id="body" onload="getFacetasAJAX()">
<label id="div_maior">
<label id="div_global" style="display: inline-block">
</label>
<label id="div_resultados" style="display: inline-block">
</label>
</label>
</body>
</html>
I want to change color of icon in header from some button click.
I was able to put some color on icon using below CSS: #myhead:after {
background-color: #ff4d4d;
}
But i am not able to change its color from some button click.
Sample Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
/* #id Products */
#myhead:after {
background-color: #ff4d4d;
}
</style>
<script>
function changecolor()
{
$('#myhead:after').css("background-color", "green");
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class=" ui-icon-circle ui-alt-icon ui-btn-icon-right " id="myhead">
<h3>Filter</h3>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
You can't manipulate css:after, because it's not technically part of the DOM and therefore is inaccessible by any JavaScript. So you need to create custom circle icon.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>
.change-color {
background-color: #ff4d4d;
border-radius: 50%;
width: 20px;
height: 20px;
float: right;
margin: -30px 10px 0px 0px;
}
</style>
<script>
function changecolor() {
$('#myhead').css('background-color', 'green');
}
</script>
<body>
<div data-role="page" id="mainpage">
<div data-role="header" class="">
<h3>Filter</h3>
<div class="change-color" id="myhead"></div>
</div>
<div role="main" class="ui-content">
Change Color
</div>
</div>
</body>
</html>
Change the CSS as below
#myhead h3 {
background-color: #ff4d4d;
}
And change the JS as below
$('#myhead h3').css('background-color', 'green');