I have been trying to build a search engine using HTML and CSS and JS, but IE11 just doesn't seem to like text boxes. The dropdown items overlap the text field and is never displayed properly (Screenshot attached).Works fine in google Chrome and Edge. But NEVER works in IE11. That said, java script renders super slow too
Any help would be Highly appreciated.
CODEPENLINK
Image 1 - Internet Explorer
Image 2 - Google Chrome
var testVals = ["What are your primary job responsibilitiasasasasases?",
"What experience did you have to get your job?",
"How long have you worked here?",
"What is your own background and experience?",
"What is a typical work day like?",
"How long is your work day?",
"How much variety is there in your work?",
];
$(document).ready(function () {
elementList = document.getElementById("testListDummy");
//Search Box Function
$(".search-text").on("input", function () {
if ($('.search-text').val() == '') {
$('.search-text').removeAttr('style');
elementList.innerHTML = " ";
} else {
$(".search-text").css({"width": "350px", "padding": "0 6px"});
var a="";
a = $(".search-text").val().toUpperCase();
a.replace(/[_\s]/gi, "").toUpperCase();
console.log(a);
var entry = document.createElement('li');
var arrayVal = ""
elementList.innerHTML = " ";
for(i=0;i<=testVals.length;i++){
arrayVal = testVals[i].toUpperCase();
if(arrayVal.includes(a)){
console.log(testVals[i])
$('#testListDummy').append('<li>'+testVals[i]+'</li>');
console.log(document.getElementById('testListDummy'));
}
}
}
});
});
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.5s;
line-height: 40px;
width: 0px;
height: 50px;
}
.search-box > ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box > ul li {
left: -10px;
margin: 0 0 10px 0;
width: 90%;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box > ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box > ul li:hover {
font-weight: bold;
}
<!-- Search Box -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
</head>
<body>
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy">
</ul>
</div>
</div>
</body>
There're two issues in your code. First, includes is not defined in IE. You need to add polyfill to make it supported in IE 11. Second, you need to give a width value to .search-box to make it have a correct width in IE when animation. You could add these two lines in your script:
if ($('.search-text').val() == '') {
...
$('.search-box').removeAttr('style');
...
} else {
...
$(".search-box").css({ "width": "410px" });
...
}
The code sample is like below:
//polyfill for includes
if (!String.prototype.includes) {
String.prototype.includes = function(search, start) {
'use strict';
if (search instanceof RegExp) {
throw TypeError('first argument must not be a RegExp');
}
if (start === undefined) {
start = 0;
}
return this.indexOf(search, start) !== -1;
};
}
var testVals = ["What are your primary job responsibilitiasasasasases?",
"What experience did you have to get your job?",
"How long have you worked here?",
"What is your own background and experience?",
"What is a typical work day like?",
"How long is your work day?",
"How much variety is there in your work?",
];
$(document).ready(function() {
elementList = document.getElementById("testListDummy");
//Search Box Function
$(".search-text").on("input", function() {
if ($('.search-text').val() == '') {
$('.search-text').removeAttr('style');
$('.search-box').removeAttr('style');
elementList.innerHTML = " ";
} else {
$(".search-text").css({
"width": "350px",
"padding": "0 6px"
});
$(".search-box").css({
"width": "410px"
});
var a = "";
a = $(".search-text").val().toUpperCase();
a.replace(/[_\s]/gi, "").toUpperCase();
console.log(a);
var entry = document.createElement('li');
var arrayVal = ""
elementList.innerHTML = " ";
for (i = 0; i <= testVals.length; i++) {
arrayVal = testVals[i].toUpperCase();
if (arrayVal.includes(a)) {
console.log(testVals[i])
$('#testListDummy').append('<li>' + testVals[i] + '</li>');
console.log(document.getElementById('testListDummy'));
}
}
}
});
});
.search-box {
position: absolute;
top: 260px;
left: 46%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 60px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover>.search-text {
width: 350px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.search-text {
font-family: VFRegular;
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.5s;
line-height: 40px;
width: 0px;
height: 50px;
}
.search-box>ul {
left: -100px;
background-color: #2f3640;
color: white;
border-radius: 10px;
list-style-type: none;
font-size: 15px;
}
.search-box>ul li {
left: -10px;
margin: 0 0 10px 0;
width: 90%;
border-bottom: 1px solid white;
z-index: 1;
}
.search-box>ul li:last-child {
margin: 0 0 10px 0;
border-bottom: 1px solid transparent;
}
.search-box>ul li:hover {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/css/mdb.min.css" rel="stylesheet">
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.10.1/js/mdb.min.js"></script>
<div class="entire-searchbox">
<div class="search-box">
<input class="search-text" type="text" placeholder="Type to search">
<a class="search-btn" href="#">
<i class="fas fa-search"></i>
</a>
<ul id="testListDummy"></ul>
</div>
</div>
Related
I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header.
But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.
I´m using Google Chrome btw.
I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").
Thanks!
window.addEventListener("scroll", scrollHeader() );
function scrollHeader() {
var mainHeader = document.getElementByID("mainHeader");
if (window.pageYOffset > 0) {
mainHeader.classList.add("is-scrolling");
} else {
mainHeader.classList.remove("is-scrolling");
}
};
#mainHeader {
background-color: white;
position: fixed;
width: 100%;
height: 80px;
z-index: 3;
transition: background 0.4s;
}
#mainHeader.is-scrolling {
background: #333;
}
#mainHeader.is-scrolling a {
color: #eee;
font-size: 13px;
}
#mainHeader.is-scrolling .header-logo img {
width: 60px;
height: 40px;
border-radius: 5px;
}
.page-logo-nav {
margin: 15px 115px 15px 115px;
}
.header-logo img {
float: left;
width: 70px;
height: 50px;
transition: height 0.4s;
}
.header-nav {
float: right;
height: 50px;
display: flex;
align-items: center;
}
.header-nav li {
display: inline;
}
.header-nav .list-1:after {
content: "★";
}
.header-nav a {
color: black;
padding: 20px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
transition: font-size 0.4s;
}
.header-nav a:hover {
color: #6ebbd3;
border-top: 1px solid #266a7e;
border-bottom: 1px solid #266a7e;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&ver=4.0.31" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="JS/main.js"></script>
</head>
<body>
<header id="mainHeader">
<div class="page-logo-nav">
<div class="header-logo">
<a href="index.html">
<img src="img/logo.jpg">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li class="list-1">SOBRE</li>
<li class="list-2">CONTACTOS</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}
I have this photo gallery of 4 images, i have 2 JS variable which are "Field" ( the current number of the image) and "Total" ( the total number of the images )
The problem is that "total" is showing 8 images, which in reality is 4.
Can anyone expain why is the variable double counting ?
There is my code:
/*Counting the number of images*/
$(document).ready(function(){
// counting the number of classes named .item
var total = $(".item").length;
document.getElementById("total").innerHTML = total;
});
var value = 0;
var total = $(".item").length;
/*Add function*/
function add() {
value++;
document.getElementById("field").innerHTML = value;
cdn();
}
/*minus function*/
function minus() {
value--;
document.getElementById("field").innerHTML = value;
cdn();
}
/*condition to start over from 0*/
function cdn(){
if(value>total){
value = 1;
document.getElementById("field").innerHTML = value;
}
if(value<1){
value = total ;
document.getElementById("field").innerHTML = value;
}
}
/*Owl caroussel JS*/
var owl = $('.owl-carousel');
owl.owlCarousel({
nav: false,
margin: 20,
center: true,
items:2,
loop:true,
dots: false,
startPosition: 'URLHash',
URLhashListener:true,
responsive:{
600:{
items:2
}
}
});
// trigger go to next item on your own next navigation button:
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// trigger go to the previous item:
$('.customPrevBtn').click(function() {
owl.trigger('prev.owl.carousel', [300]);
})
.item {
width: 700px;
height: 500px;
/* background-color: orange;*/
padding: 10px 40px 10px 10px;
}
.item img{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 900px;
margin-right: auto;
margin-left: auto;
background-color: black;
padding-bottom: 20px;
}
#place{
width: 100%;
height: 700px;
background-color: black;
position: relative;
}
.photo_place {
width: 550px;
padding-top: 50px;
margin-right: auto;
margin-left: auto;
}
.photo_place p {
font-size: 50px;
color: white;
}
#place_list {
padding-top: 30px;
margin-right: auto;
margin-left: auto;
width: 983px;
}
#place_list ul li {
display: inline-block;
color: white;
font-size: 15px;
margin-right: 11px;
}
.li_active{
color: #a98623 !important;
text-decoration: none;
}
#place_list ul li a {
text-decoration: none;
color: white;
}
.owl-nav button{
display: block;
}
.owl-nav button:focus {
outline:0;
}
.owl-nav {
color: white;
font-size: 25px;
}
.owl-nav {
color: white;
font-size: 30px;
}
.owl-nav .owl-next span{
margin-left: 30px;
}
.owl-nav .owl-prev span{
margin-right: 30px;
}
#nav {
width: 206px;
height: 27px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
}
#nav a {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
float: left;
}
#field{
float:left;
color: white;
position: absolute;
font-size: 25px;
top: 108%;
left: 45%;
}
#total{
float: left;
margin-left: 20px;
position: absolute;
color: white;
font-size: 25px;
top: 110%;
left: 45%;
}
#total:before{
content :' \002F ';
}
#nav a:hover {
text-decoration: none;
}
#nav .customPrevBtn{
margin-right: 30px;
float:left;
}
#nav .customNextBtn{
margin-left: 30px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--OWL CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<div id="container">
<div id="place">
<div class="photo_place">
<p>Galerie Photo & Vidéo</p>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
</div>
<div class="item">
<img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
</div>
<div class="item">
<img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
</div>
<div class="item">
<img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
</div>
</div>
<div id="nav">
<a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>
<span id="field">1</span>
<span id="total"></span>
<a class="customNextBtn" href="javascript:add();"> ⟶ </a>
</div>
<!--OWL JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
Thanks everyone.
I was looking you code and what works for me was counting the childs outs of the $(document).ready. Check this out.
// counting the number of classes named .item
var total = $(".item").length;
document.getElementById("total").innerHTML = total;
var value = 0;
var total = $(".item").length;
/*Add function*/
function add() {
value++;
document.getElementById("field").innerHTML = value;
cdn();
}
/*minus function*/
function minus() {
value--;
document.getElementById("field").innerHTML = value;
cdn();
}
/*condition to start over from 0*/
function cdn(){
if(value>total){
value = 1;
document.getElementById("field").innerHTML = value;
}
if(value<1){
value = total ;
document.getElementById("field").innerHTML = value;
}
}
/*Owl caroussel JS*/
var owl = $('.owl-carousel');
owl.owlCarousel({
nav: false,
margin: 20,
center: true,
items:2,
loop:true,
dots: false,
startPosition: 'URLHash',
URLhashListener:true,
responsive:{
600:{
items:2
}
}
});
// trigger go to next item on your own next navigation button:
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// trigger go to the previous item:
$('.customPrevBtn').click(function() {
owl.trigger('prev.owl.carousel', [300]);
})
.item {
width: 700px;
height: 500px;
/* background-color: orange;*/
padding: 10px 40px 10px 10px;
}
.item img{
width: 100%;
height: 100%;
}
#container{
width: 100%;
height: 900px;
margin-right: auto;
margin-left: auto;
background-color: black;
padding-bottom: 20px;
}
#place{
width: 100%;
height: 700px;
background-color: black;
position: relative;
}
.photo_place {
width: 550px;
padding-top: 50px;
margin-right: auto;
margin-left: auto;
}
.photo_place p {
font-size: 50px;
color: white;
}
#place_list {
padding-top: 30px;
margin-right: auto;
margin-left: auto;
width: 983px;
}
#place_list ul li {
display: inline-block;
color: white;
font-size: 15px;
margin-right: 11px;
}
.li_active{
color: #a98623 !important;
text-decoration: none;
}
#place_list ul li a {
text-decoration: none;
color: white;
}
.owl-nav button{
display: block;
}
.owl-nav button:focus {
outline:0;
}
.owl-nav {
color: white;
font-size: 25px;
}
.owl-nav {
color: white;
font-size: 30px;
}
.owl-nav .owl-next span{
margin-left: 30px;
}
.owl-nav .owl-prev span{
margin-right: 30px;
}
#nav {
width: 206px;
height: 27px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
}
#nav a {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
float: left;
}
#field{
float:left;
color: white;
position: absolute;
font-size: 25px;
top: 108%;
left: 45%;
}
#total{
float: left;
margin-left: 20px;
position: absolute;
color: white;
font-size: 25px;
top: 110%;
left: 45%;
}
#total:before{
content :' \002F ';
}
#nav a:hover {
text-decoration: none;
}
#nav .customPrevBtn{
margin-right: 30px;
float:left;
}
#nav .customNextBtn{
margin-left: 30px;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<!--BS CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--BS JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!--OWL CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
</head>
<body>
<div id="container">
<div id="place">
<div class="photo_place">
<p>Galerie Photo & Vidéo</p>
</div>
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
</div>
<div class="item">
<img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
</div>
<div class="item">
<img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
</div>
<div class="item">
<img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
</div>
</div>
<div id="nav">
<a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>
<span id="field">1</span>
<span id="total"></span>
<a class="customNextBtn" href="javascript:add();"> ⟶ </a>
</div>
<!--OWL JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.
While this is true to half of the page, my input button using the class form-control it just won't work, and I can't figure it out the reason why, as anybody else is having this problem.
Here's a snippet with my issue:
var searcher = document.getElementById('buscador');
searcher.addEventListener("click", function()
{
var master = searcher.parentNode;
searcher.removeChild(searcher.childNodes[0]);
searcher.style.animationName = "expandismo";
searcher.style.animationDuration = "1s";
setTimeout(function(){
master.removeChild(searcher);
var barraSearch = document.createElement('input');
barraSearch.setAttribute('type', 'text');
barraSearch.setAttribute('id', 'barraSearch');
barraSearch.setAttribute('class', 'form-control');
barraSearch.setAttribute('placeholder', 'Buscar...');
var spanCheto = document.createElement('span');
var botonCheto = document.createElement('button');
var secondSpan = document.createElement('span');
spanCheto.setAttribute('class', 'input-group-btn');
botonCheto.setAttribute('class', 'btn btn-default');
secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
secondSpan.setAttribute('aria-hidden', 'true');
botonCheto.appendChild(secondSpan);
spanCheto.appendChild(botonCheto);
master.appendChild(barraSearch);
barraSearch.focus();
}, 1000);
}, false);
.container-fluid
{
text-align: center;
}
#toplane
{
color: white;
background-image: url(citybackground.jpg);
background-size: 100% 100%;
min-height: 400px;
}
#botlane
{
}
#headone
{
margin-top: 130px;
color: black;
text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
font-family: "Times New Roman", Times, monospace;
font-size: 60px;
}
#buscador
{
color: #595959;
width: 40px;
height: 40px;
border-radius: 18px;
background-color: lightgrey;
cursor: text;
}
#buscador:hover
{
background-color: lightgrey;
opacity: 1;
}
#buscador:active
{
background-color: white;
}
.input-group
{
width: 100%;
text-align: center;
}
.form-control
{
width: 70%;
border-radius: 18px;
background-color: lightgrey;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
.form-control:focus
{
box-shadow: 0px 0px 5px #66d9ff;
box-shadow: 0px 0px 10px #66d9ff;
box-shadow: 0px 0px 8px #66d9ff;
box-shadow: 0px 0px 12px #66d9ff;
}
#keyframes expandismo
{
from{width: 40px}
to{width: 70%}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Price Surfer FAQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<!-- 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>
<link rel="stylesheet" type="text/css" href="wean1.css">
</head>
<body>
<div class="container-fluid" id="toplane">
<h1 id="headone">PRICE SURFER FAQ</h1>
<div class="input-group">
<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
</div>
</div>
<div class="container-fluid" id="botlane">
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>
.container-fluid .input-group .form-control{
/* yous css*/
}
This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control
.input-group .form-control{
}
Use this website to calculate which selector is stronger .
Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point
You should add !important with the property that is not being picked.
Like:
.form-control
{
width: 70%!important;
border-radius: 18px!important;
background-color: lightgrey!important;
height: 40px;
padding-left: 10px;
font-size: 20px;
color: black;
}
I am trying to build an app that takes up all of the view port.
However, window.innerHeight is incorrect, which is affecting my styling; my body tag's height is equal to the window.innerheight, but the document scrolls (see screen shot below of the body's inspection).
window.innerHeight
1198
window.outerHeight
893
Obviously, these measurements are wrong, because window.innerHeight should always be less than window.outerHeight.
I am using Chrome, and I took the measurements using inspect element in another window.
For additional information, I have provided my code below.
html doc
<!doctype html>
<html lang="en" ng-app="my-app">
<head>
<meta charset="utf-8">
<title>my-app</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body id="app_body">
<div id="fb-root"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/auth.js"></script>
<div id="menu">
<ul style="list-style-type: none;">
<li id="nav_close_menu_icon"><img src="./img/menu_icon.png" onclick="hideMenu()"/></li>
</ul>
<div class="clear"></div>
<ul id = "menu_options">
<li id="logout_option" onclick="toggleFbAuthorizationStatus(); hideMenu();"><img id="logout_icon" src="./img/logout_icon.png"/>Logout</li>
</ul>
</div>
<ul class="nav">
<li><img id="nav_icon" src="./img/icon.png"/></li>
<li id="nav_open_menu_icon"><img src="./img/menu_icon.png" onclick="showMenu()"/></li>
<li id="nav_create_message_icon"><img onclick="goTo('create_message')" src="./img/create_hangout_icon.png"/></li>
</ul>
<div id="template_container" style="height: 100%" ui-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="js/dynamic-ui.js"></script>
<script src="js/ui.js"></script>
<script src="js/bootstrap.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular-ui-router.js"/>
<script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
<script src="https://cdn.goinstant.net/integrations/goangular/latest/goangular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
style sheet
html, body {
margin: 0;
height: 100%;
}
#app_body {
background-color: #178DBA;
background-image: url('/2048.jpg');
}
.nav {
display: block;
background-color: #363636;
list-style-type: none;
height: 6%;
/*border-bottom: 0.1em solid #CCCCCC;*/
margin-bottom: 0em;
padding: 0 0 0em;
box-shadow: 0px 3px 5px #191919;
}
.clear {
clear: both;
}
.center_horizontal {
margin-right: auto;
margin-left: auto;
}
#menu {
position: absolute;
right: 0px;
z-index: 10;
height: 100%;
background-color: #272727;
display: none;
box-shadow: -1px 0px 5px #191919;
}
#menu_options {
background-color: #272727;
list-style-type: none;
color: #FFFFFF;
-webkit-user-select: none;
font-weight: 200;
}
#menu_options li {
height: 56px;
}
#logout_icon {
width: 50px;
height: 50px;
margin-right: 5px;
vertical-align: middle;
}
#logout_option {
display: none;
}
.nav > li {
display: inline;
}
#nav_icon {
margin-left: 2%
}
#nav_open_menu_icon {
float: right;
margin-right: 3%;
}
#nav_close_menu_icon {
float: right;
}
#nav_create_message_icon img {
display: none;
margin-right: 5%;
float: right;
}
You may use this function to get the viewport size. Tested on IE4+, Firefox, Chrome, Safari, Opera.
var get_viewport_size = function(){
if(typeof(window.innerWidth) == 'number'){
my_width = window.innerWidth;
my_height = window.innerHeight;
}else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)){
my_width = document.documentElement.clientWidth;
my_height = document.documentElement.clientHeight;
}else if(document.body && (document.body.clientWidth || document.body.clientHeight)){
my_width = document.body.clientWidth;
my_height = document.body.clientHeight;
}
return {width: my_width, height: my_height};
};