I am trying to implement bootstrap tokenfield with typeahead using JSON.
<input type="text" class="span" id="typeahead" data-provide="typeahead">
I have these two functions which work very well in isolation, but when I try to combine them it does not work.
Typeahead:
$("#typeahead").typeahead({
source: function(typeahead,query){
$.ajax({
url: 'getgoups.php',
type:'POST',
data:'query'+query,
dataType:'JSON',
async:false,
success:function(data){
typeahead.process(data);
}
});
}
})
TokenField
I get stuck when I have to combine the two.
$("#typeahead").tokenfield({
typeahead:[ source: ]
});
I finally got it, after all those times of trying:
<!DOCTYPE>
<html lang="en">
<head>
<title>Andani Masikhwa</title>
<link href="bootstrap-tokenfield.css" type="text/css" rel="stylesheet">
<!--<link href="tokenfield-typeahead.css" type="text/css" rel="stylesheet">-->
</head>
<style>
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
outline: none;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0097cf;
}
</style>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-tokenfield.js" charset="UTF-8"></script>
<script src="http://cdn.jsdelivr.net/typeahead.js/0.9.3/typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('#search').tokenfield({
typeahead:{
name : 'sear',
remote: {
url : 'connection.php?query=%QUERY'
},
success:function(data){
process(data);
}
}
});
});
</script>
<body>
<input type="text" class="form-control" id="search" value="andani" />
</body>
</html>
Related
I want to change the colour of my toggle background as soon as checked. Unfortunately the attempt I tried does not work. I do not want to change the indicator colour! I am aware of the fact, that as soon as I exclude <input.. from the div, it works. But if I do so the animation doesn´t work any longer. Which would require a huge amount of work in my actually project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
Not the best answer tho, but this is best I can do without JS, just play round and improve CSS here and there, it will be fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-background {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
background-color: red;
transition: 0.4s;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #95f700,
8px 4px 12px 0px darkred;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
.toggle-state:checked ~ .toggle-background {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="toggle-background">
</div>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
You can use some JS code for listening the checked event of the checkbox,
create two different style class if checked or unchecked
like bellow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script
src="https://kit.fontawesome.com/39094309d6.js"
crossorigin="anonymous"
></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}
.green {
background-color: greenyellow;
}
.black {
background-color: black;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked > .indicator {
background-color: greenyellow;
}
</style>
<body>
<label>
<div class="toggle">
<input id="mycheckbox" class="toggle-state" type="checkbox" />
<div id="indicateit" class="indicator"></div>
</div>
</label>
<script type="text/javascript">
var cb = document.getElementById("mycheckbox");
cb.addEventListener("change", function (e) {
console.log("Changed ");
if (this.checked) {
document.getElementById("indicateit").classList.remove("black");
document.getElementById("indicateit").classList.add("green");
} else {
document.getElementById("indicateit").classList.remove("green");
document.getElementById("indicateit").classList.add("black");
}
});
</script>
</body>
</html>
Could this work for you? I haven't tried it on multiple buttons...
Basically, just added an onchange event to your input. It calls a function that gets the input's parent, gets --onColor and --offColor variables from the CSS (.toggle class) and sets the background.
Note: If you decide to use this, you'll probably want to modify the CSS a bit to make the shadows look better and maybe add a transition to the color change.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Toggle color</title>
<!-- d3.js framework -->
<script src="https://d3js.org/d3.v6.js"></script>
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
</head>
<style>
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
cursor: pointer;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
--onColor:green;
--offColor:red;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-state:checked + .toggle {
background-color: greenyellow;
}
</style>
<script>
function changeToggleBg(el) {
const toggle = el.parentElement;
let onColor = getComputedStyle(toggle).getPropertyValue('--onColor');
let offColor = getComputedStyle(toggle).getPropertyValue('--offColor');
toggle.style.backgroundColor = (toggle.style.backgroundColor == offColor.replace(' ','')) ? onColor : offColor;
}
</script>
<body>
<label>
<div class="toggle">
<input class="toggle-state" type="checkbox" onchange="changeToggleBg(this)" checked/>
<div class="indicator"></div>
</div>
</label>
</body>
</html>
I would like to reproduce the following item in HTML/CSS:
The icon is actually from font awesome.
Here is what I achieved so far:
https://jsfiddle.net/0Lewug6p/1/
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Raleway&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<div class="search__filters__option">
<div class="filter__icon"><i class="fas fa-dog"></i></div>
Animaux autorisés
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
.search__filters__option {
display: flex;
justify-content: flex-start;
align-items: center;
padding-right: 15px;
border-bottom: 2px solid #f2f2f2;
border-top: 2px solid #f2f2f2;
border-right: 2px solid #f2f2f2;
text-align: center;
border-radius: 20px;
font-weight: bold;
margin-right: 10px;
}
.search__filters__option:hover {
background-color: #deebff;
color: #0065fc;
cursor: pointer;
}
.filter__icon {
margin-right: 10px;
height: 35px;
width: 35px;
border-radius: 50%;
color: #0065fc;
background-color: #deebff;
display: flex;
justify-content: center;
align-items: center;
}
I have two issues concerning my code:
1- It doesn't perfectly match what's in the image, (For example, the colored circle doesn't have the right size).
2- I don't know if my code is clean, as I'm still pretty new to CSS and wanna learn best practices.
Thanks in advance for your help and explanations!
Your code looks good. Instead of your border definitions, you can use box-shadow:inset like this:
.search__filters__option {
box-sizing: border-box;
-webkit-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
-moz-box-shadow: inset 0px 0px 0px 2px #f2f2f2;
box-shadow: inset 0px 0px 0px 2px #f2f2f2;
}
Also described placing-border-inside-of-div-and-not-on-its-edge.
Demo: https://jsfiddle.net/pr6htj01/
For more opacity, use the rgb notation for the color which supports an opacity value as last parameter and/or a darker color:
-webkit-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
-moz-box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
box-shadow: inset 0px 0px 0px 2px rgba(128, 128, 128, 0.2);
Demo: https://jsfiddle.net/z7b6ey19/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
check code
I have share one picture of my website login page below and I want zoom text animation on hover for "Sign In" button which is ...
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
check Image:
From what you described, I believe this is what you want. I've added font-weight:bold; and font-size: 1.4em; to the .inputbtn input:hover{} CSS instruction.
This might not be the exact amount text zooming that you wanted but you can easily configure it as you wish.
Run and test:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image:linear-gradient(to right, rgba(19,20,25,0.8), rgba(19,20,25,0.8)), url('../images/barbell-on-the-floor-1552252.jpg');
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
.form{
position: relative;
width: 350px;
padding: 40px 60px;
background-color: #131419;
border-radius: 20px;
text-align: center;
box-shadow: -3px -3px 20px rgba(33, 150, 243,0.5),
10px 10px 10px rgba(33, 150, 243, 0.05);
}
.form h2{
color: #c7c7c7;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 4px;
}
.form .input{
text-align: left;
margin-top: 40px;
}
.form .input .inputbox{
margin-bottom: 20px;
}
.form .input .inputbox label{
display: block;
color: #868686;
margin-bottom: 5px;
font-size: 18px;
margin-left: 10px;
}
.form .input .inputbox input{
width: 100%;
height: 50px;
background-color: #131419;
border: none;
outline: none;
border-radius: 40px;
color: #fff;
padding: 5px 15px;
font-size: 18px;
color: #03a9f4;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input[type="submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: inset -2px -2px 6px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.form .input .inputbox input::placeholder{
color: #555;
font-size: 18px;
}
.create{
color:grey;
margin-top: 30px;
font-weight: lighter;
}
.create a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.forget{
color:grey;
margin-top: 15px;
font-weight: lighter;
}
.forget a{
text-decoration: none;
color: #03a9f4;
font-size: 80%;
}
.inputbtn{
display: flex;
justify-content: center;
align-items: center;
}
.inputbtn input{
color: #2196f3;
background-color: transparent;
width: 100%;
height: 50px;
border-radius: 40px;
border-color: #2196f3;
overflow: hidden;
outline: none;
}
.inputbtn input:hover{
color:#255784;
background: #2196f3;
box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
text-transform: scale(0.20);
font-weight:bold;
font-size: 1.4em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="This website is for workout lovers and Here you can get knowledge about workout and nutrition">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="./images/dumbbell-pixel-variant (1).png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,400;1,100&display=swap" rel="stylesheet">
<title>Workout</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<div class="input">
<div class="inputbox">
<label>Username</label>
<input type="text" placeholder="example#gmail.com">
</div>
<div class="inputbox">
<label>Password</label>
<input type="text" placeholder="••••••••">
</div>
<div class="inputbtn" id="submit">
<input class="submit" type="submit" value="Sign In">
</div>
</div>
<div class="create">
<p>or Create Account Click Here</p>
</div>
<div class="forget">
<p>Forget Password ? Click Here</p>
</div>
</div>
</body>
</html>
You could try something along the lines of ':placeholder:hover' in order to target the selector which lets you hover over the element and will affect the text within the placeholder. After that you could try to put the 'transition' property within the curly braces - {} - and set the 'font-size' property for the text size you desire. On theory it should adjust the font size to the value you've set whenever you hover your cursor over the placeholder.
I am trying to get a box shadow on an element wrapped around an input when an input is in focus. but can't get it to work. I have probably structured the code wrong. Snippet bellow
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
#k:focus #divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
</div>
Thank you all for all the suggestions. really appreciate it!!!
Although you are not using jQuery, but if you would like to use jQuery it may be helpful...
$(document).ready(function() {
$('#k').focus(function(event) {
$('#divAdministrators').addClass('focused')
});
$('#k').blur(function(event) {
$('#divAdministrators').removeClass('focused')
});
});
.cam-peoplepicker-userlookup { margin-right: 55em; height: 7em; min-width: 50%; overflow: hidden; border: 1px solid #99b0c1; padding: 2px 5px 2px 5px; background-color: white; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.focused { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I think it may not be possible until you are not using js.
You would have to re-structure your HTML to achieve this without Javascript.
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
.form-group {
position: relative;
}
#k {
position: absolute;
top: .5em;
left: .5em;
}
#divAdministrators {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#k:focus~#divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<textarea id="k"></textarea>
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I am trying to make a simple splash page for an event, but each time I try to load the page on a mobile device it would take forever to load, then it would freeze.
At fist I thought it could be due to the background picture being extremely large. (memory wise) So I re saved the pic at a lower quality.
That cut down the load time a lot, but the mobile sites still freeze up.
I have a custom font, (Could that be the problem?)
Here is my HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>The Apocalypse Is HERE!</title>
<!-- Custom CSS for the 'Full' Template -->
<link href="css/newStyle.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
$(function() {
var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com'], object, embed"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
});</script>
</head>
<body>
<div id="mainWrapper">
<div id="topWrapper">
<div id="zombieWrap"><center>The Zombie Apocalypse Is Here!</center>
</div>
<center>
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/tb0Op6cpY2s" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<center>
<div id="bottomWrapper">
<div class="leftWrapper">Click Here For Tickets</div>
<div class = "rightWrapper">Click Here For the Richmond Underground Home Page</div>
</div>
</center>
</div>
</div>
</body>
Here is the CSS
/* GLOBAL STYLES
-------------------------------------------------- */
#font-face
{
font-family: 'zombieF';
src: url('zombieFont.ttf');
}
/*------------------------------------------------------------------------------------------NON MOBILE=================*/
body{
background-color:black;
background: url(wall.jpg);
background-size:50%,50%;
background-repeat: repeat;
}
#mainWrapper{
margin-top:2.5em;
margin-left: 10%;
margin-right: 10%;
}
#topWrapper{
width:100%;
}
#videoWrapper{
margin-top:1em;
}
#zombieWrap{
font-family: zombieF;
font-size: 50px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
#video{
max-width: 400px;
-webkit-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
-moz-box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
box-shadow: 0px 0px 24px 0px rgba(50, 50, 50, 0.63);
font-family: zombieF;
font-size: 25px;
color:red;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
.leftWrapper{
width:50%;
float:left;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
a:visited {
/* Applies to all visited links */
text-decoration: none;
color: white;
}
.leftWrapper:hover { -moz-box-shadow: 0 0 10px #white; -webkit-box-shadow: 0 0 10px #ccc; box-shadow: 0 0 10px #ccc; }
.rightWrapper{
width:50%;
float:right;
font-family: zombieF;
font-size: 50px;
color: white;
text-shadow: 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000,
-1px 1px 0 #000000, 3px 3px 5px #111;
-webkit-text-stroke: 1px black;
}
a:link {
/* Applies to all unvisited links */
text-decoration: none;
color:white;
}
#media only screen and (max-width: 500px){
.rightWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
padding-top:15px;
}
.leftWrapper{
width:100%;
font-family: zombieF;
font-size: 25px;
color: white;
}
#zombieWrap{
border-top:5px;
font-family: zombieF;
font-size: 30px;
color:red;
}
#mainWrapper{
height:100%;
margin-left: 10%;
margin-right: 10%;
}
#containingBlock {
width:50%;
}
video { width: 50% !important; height: auto !important; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
Maybe I am missing something. Anyone Have any suggestions?