hover issue. alignment changed. it moved down - javascript

http://jsfiddle.net/mah2806/VcnLk/
what should i do to make the form from not affecting the word testing testing when i cover it. i want it to be like overlapping the word testing testing
MY HTML
<form>
<p id="login">
<span class="label">Login Here</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span> </span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span> </span>
<span class="form-elements">
<span class="submit-btn"><input type="submit" value="Submit" /></span>
</span>
</span>
</p>
</form>
<p>TESTING TESTING</p>


DEMO
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
z-index: 99;
position: absolute;
}
This will do the trick. Replace your #loginForm with the above code.
I have added
z-index: 99;
position: absolute;
To make it overlap the text

Related

How to position caret in bootstrap dropdown

I'm trying to position the caret to the right so it doesn't move when I select an option.
$('#dropdownMenu span').on('click', function() {
$('#dropdownMenuButton').html($(this).text());
});
#dropdownMenuButton {
border: solid 1px black;
background-color: white;
box-shadow: none;
width: 30vw;
text-align:left;
}
#dropdownMenu {
height: 50vh;
overflow: hidden;
overflow-y: auto;
transform: translate3d(0px, 38px, 0px)!important;
width: 30vw;
}
<!DOCTYPE html>
<html>
<head>
<title>bootstrap dropdown</title>
<link rel="stylesheet" href="https://www.sailwbob.com/bootstrap/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select boats
</button>
<div id='dropdownMenu' class="dropdown-menu" >
<span class='dropdown-item'>Avrora</span>
<span class='dropdown-item'>Irlbach</span>
<span class='dropdown-item'>Laura</span>
<span class='dropdown-item'>Lola </span>
<span class='dropdown-item'>Syrena</span>
<span class='dropdown-item'>Thea</span>
<span class='dropdown-item'>Anne</span>
<span class='dropdown-item'>Bebe</span>
<span class='dropdown-item'>Camilla</span>
<span class='dropdown-item'>Emma</span>
<span class='dropdown-item'>Katy</span>
<span class='dropdown-item'>Nelli</span>
<span class='dropdown-item'>Winter</span>
<span class='dropdown-item'>Aeolus</span>
<span class='dropdown-item'>Amorina</span>
<span class='dropdown-item'>Melina</span>
<span class='dropdown-item'>Nieva</span>
<span class='dropdown-item'>Nora</span>
<span class='dropdown-item'>Rush</span>
<span class='dropdown-item'>Alex</span>
<span class='dropdown-item'>Blue J</span>
<span class='dropdown-item'>Corker</span>
<span class='dropdown-item'>DaCapo</span>
<span class='dropdown-item'>Freedom</span>
<span class='dropdown-item'>Golden</span>
<span class='dropdown-item'>Montana</span>
<span class='dropdown-item'>Moonshadow</span>
<span class='dropdown-item'>Phoebe</span>
<span class='dropdown-item'>Ra</span>
<span class='dropdown-item'>Rigel</span>
<span class='dropdown-item'>Santuzza</span>
<span class='dropdown-item'>Sorccerer</span>
<span class='dropdown-item'>Stiletto</span>
<span class='dropdown-item'>Tony</span>
<span class='dropdown-item'>Wasabi</span>
</div>
</div>
<script src="https://www.sailwbob.com/bootstrap/jquery-3.3.1.slim.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>

you need to fix it on the right side with absolute position
#dropdownMenuButton {
border: solid 1px black;
background-color: white;
box-shadow: none;
width: 30vw;
text-align: left;
/* add relative position */
position: relative;
}
#dropdownMenuButton::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
/* add these code */
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}

adding the following:
.dropdown-toggle::after{
margin-top:1vw;
float:right;
}
$('#dropdownMenu span').on('click', function() {
$('#dropdownMenuButton').html($(this).text());
});
#dropdownMenuButton {
border: solid 1px black;
background-color: white;
box-shadow: none;
width: 30vw;
text-align:left;
}
#dropdownMenu {
height: 50vh;
overflow: hidden;
overflow-y: auto;
transform: translate3d(0px, 38px, 0px)!important;
width: 30vw;
}
.dropdown-toggle::after{
margin-top:1vw;
float:right;
}
<!DOCTYPE html>
<html>
<head>
<title>bootstrap dropdown</title>
<link rel="stylesheet" href="https://www.sailwbob.com/bootstrap/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select boats
</button>
<div id='dropdownMenu' class="dropdown-menu" >
<span class='dropdown-item'>Avrora</span>
<span class='dropdown-item'>Irlbach</span>
<span class='dropdown-item'>Laura</span>
<span class='dropdown-item'>Lola </span>
<span class='dropdown-item'>Syrena</span>
<span class='dropdown-item'>Thea</span>
<span class='dropdown-item'>Anne</span>
<span class='dropdown-item'>Bebe</span>
<span class='dropdown-item'>Camilla</span>
<span class='dropdown-item'>Emma</span>
<span class='dropdown-item'>Katy</span>
<span class='dropdown-item'>Nelli</span>
<span class='dropdown-item'>Winter</span>
<span class='dropdown-item'>Aeolus</span>
<span class='dropdown-item'>Amorina</span>
<span class='dropdown-item'>Melina</span>
<span class='dropdown-item'>Nieva</span>
<span class='dropdown-item'>Nora</span>
<span class='dropdown-item'>Rush</span>
<span class='dropdown-item'>Alex</span>
<span class='dropdown-item'>Blue J</span>
<span class='dropdown-item'>Corker</span>
<span class='dropdown-item'>DaCapo</span>
<span class='dropdown-item'>Freedom</span>
<span class='dropdown-item'>Golden</span>
<span class='dropdown-item'>Montana</span>
<span class='dropdown-item'>Moonshadow</span>
<span class='dropdown-item'>Phoebe</span>
<span class='dropdown-item'>Ra</span>
<span class='dropdown-item'>Rigel</span>
<span class='dropdown-item'>Santuzza</span>
<span class='dropdown-item'>Sorccerer</span>
<span class='dropdown-item'>Stiletto</span>
<span class='dropdown-item'>Tony</span>
<span class='dropdown-item'>Wasabi</span>
</div>
</div>
<script src="https://www.sailwbob.com/bootstrap/jquery-3.3.1.slim.min.js"></script>
<script src="https://www.sailwbob.com/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>

section is not responding to CSS

I've started coding this landing page and after I was done with the fullvp menu the section class="hero" is now not responding, when trying to edit it on chrome it actually worked. so, I went back to my source to see if there are any typos or missing symbols - didn't find none -_-, so... Need some help from the community, thank
P.S
It's probably something stupid I've done so my apologies =)
img { width: 100%; }
header {
background-color: #000;
padding: 1px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#logo {
border: 5px solid #fff;
display: inline-block;
color: #fff;
padding: 5px;
}
#menu-icon {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 5px;
width: 50px;
background: royalblue;
color: white;
transition: .3s ease;
display: inline-block;
}
#menu-icon:hover, #menu-icon:focus {
/*background: black;*/
transition: .5s ease;
width: 100%;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color:royalblue;
}
.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Loan Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrap">
<section class="header">
<header>
<h1 id="logo">SAVVY STUDENT</h1>
<div id="myNav" class="overlay">
<i class="fa fa-times" aria-hidden="true"></i>
<div class="overlay-content">
Home
About
Contact
</div>
</div>
<span id="menu-icon" style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</header>
</section>
<section class="hero">
<div class="hero-content">
<h2 id="hero-content-headline">GRADUATE FROM STUDENT LOANS</h2>
<p id="hero-content-content">STUDENT LOAN DEBT, RECORD BREAKING $1.5 TRILIAN. POST STUDENTS ARE TAKING ADVANTAGE OF DEBT RELIEFE. WE BELIVE THAT EVERYONE DESERVES A SECOND CHANGE. DON’T FALL BEGIND TAKE ADVANTAGE OF STUDENT LOAN FORGIVENESS. APPLY NOW AND FIND OUT HOW MUCH YOU CAN GET FORGIVEN</p>
</div>
<div class="form-wrap">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
</section>
<section class="why-program">
<div class="why-program-wrap">
<h1>Why Apply to Student Loan Forgiveness Program?</h1>
<ul>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Reduce payment</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Consolidate loans</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Increase credit Score</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Deal with one lender</li>
</ul>
</div>
</section>
<section class="features">
<div class="feature-apply feeature">
<span><i class="fa fa-pencil" aria-hidden="true"></i></span>
<h3>Apply today</h3>
<p>Fill out the form or give us a call.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
<h3>Approved</h3>
<p>Submit your request with 1 of our consultants and get approved in minutes.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<h3>Enroll</h3>
<p>To one of the programs and change your life today</p>
</div>
<div class="features-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeBx8UdVOCc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="reviews">
<h3>What Are Clients Say...</h3>
<div class="review">
<img src="" alt="Reviewer-name" class="reviewer-photo">
<h3 class="review-name">Bob Smith</h3>
<p class="review-content">Best Company Ever</p>
</div>
</section>
<section class="how-works">
<div class="how how-1">
<h3>one stop shop</h3>
<p>We do it all for you from preparing your documentation, talking to your lender, enrolling you to the program, you don’t need to lift a finger.</p>
</div>
<div class="line"></div>
<div class="how how-2">
<h3>You are safe</h3>
<p>We are a trusted company with your information encrypted to our system where only the Department of Education has access too.</p>
</div>
<div class="line"></div>
<div class="how how-3">
<h3>Approved in 1 call</h3>
<p>In just 1 phone call our team of experts will let you know if you get approved.</p>
</div>
</section>
<section class="why-us">
<h3>Why Us</h3>
<p>[company] main priority is to help post students get the financial aid they deserve. Company has been in business for years. Professionally providing great customer service with 1 point of contact and quick response. While keeping your personal information safe and secured. Our team of consultants and underwriters strive on providing on point information on enrolling you to the program that will best benefit you. We stick by you on the full length of your program, providing you with answers to all your questions and concerns.</p>
</section>
<div class="divider"><hr></div>
<section class="articles">
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
read more
</div>
</section>
<footer>
<section class="contact-us">
<div class="colm-1">
<h3>Contact Us</h3>
<ul>
<li>Office: (866) 210-1337</li>
<li>Address: 2351 W 3rd St<br>Los Angeles, CA</li>
<li>Email: info#fslforgive.com</li>
</ul>
</div>
<div class="colm-2">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
<div class="social">
<span><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
<span><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
</section>
</footer>
</div>
<script src="https://use.fontawesome.com/e4028997c7.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

#media screen is not closed properly
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}/**closing bracket is missing***/
.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
http://codepen.io/nagasai/pen/xORWmd

Get different hidden value containing same class via jquery

I have create different product via for loop so the input hidden field have same class but the value is different in it so what I want is to get the different value of the same class when I click on send enquiry button. You can understand after watching this jsfiddle link. Sorry for the English in advance.

Hidden input is sibling to the clicked element either you can get it using siblings() or next() ( next() can be use since it's a sibling which is immediately after the element )
var pro_nm = $(this).siblings('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).parent().find('.proname').val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>
or get the parent using parent() and find the element inside
var pro_nm = $(this).parent().find('.proname').val();
$('.send-enq a').click(function(s) {
var pro_nm = $(this).siblings('.proname').val();
// or
// var pro_nm = $(this).next().val();
alert(pro_nm);
});
.col-sm-4 {
width: 33.33333333%;
}
.single-product {
position: relative;
height: auto;
margin-bottom: 30px;
background-color: #f8f8f8;
border: 1px solid #dddddd;
border-radius: 3px;
overflow: hidden;
box-shadow: 0 2px #dddddd;
transition: 0.7s all ease;
}
.single-product figure {
position: relative;
margin: 0;
padding: 1px;
width: 100%;
height: 200px;
border-bottom: 1px solid #dddddd;
}
.single-product figure img {
width: 100%;
height: 100%;
}
.read-more {
position: absolute;
top: 50px;
}
.send-enq {
position: absolute;
top: 50px;
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146357434748906.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146357434748906.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="Wildcraft" class="proname">
</div>
</figcaption>
</figure>
<div class="col-xs-12 nopadding">
<span class="col-xs-8">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTM=" target="_blank" title="Wildcraft">Wildcraft</a>
</span>
<strong class="col-xs-4"><i class="fa fa-inr"></i> 150.00</strong>
</div>
</div>
<!-- end .single-product -->
</div>
<div class="col-sm-4 col-xs-6">
<div class="single-product">
<figure>
<img src="/prothumb/thumb_44924_146339128943993.jpg" class="file-preview-image" alt="" style="width:100%;height:100%;">
<input type="hidden" value="/prothumb/thumb_44924_146339128943993.jpg" id="proimg">
<figcaption>
<div class="read-more">
<a onclick="window.open(this.href,'_blank');return false;" href="/view/product/NTQ=" traget="_blank"><i class="fa fa-angle-right"></i> Read More</a>
</div>
<div class="send-enq">
<i class="fa fa-share" aria-hidden="true"></i> Send Enquiry
<input type="hidden" value="iPaky Premium TPU+PC Hybird Armo" class="proname">
</div>

Just try this:
Fiddle: http://jsfiddle.net/kjoLyf9d/
just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val(); // just replace $('.send-enq') with $(this) and replace find() with next() because it refer to anchortag
alert(pro_nm);
});

Since jQuery uses CSS selectors you could technically do something like
$('#proimg:nth-of-type(2)')
in order to select the second #proimg element, but having more than one element with the same id is just bad practice.
Other, better options is having them have the same class (for style purposes) and give each one of them a different id, you just have to write in something like "product1","product2"... with the loop you already have

Your jQuery code should be replaced with class selector.
$('.send-enq a').click(function(s){
var pro_nm = $(this).next('.proname').val();
console.log("test",pro_nm);
});

Twitter-Bootstrap drop down log in closes when text areas are clicked

Hi I'm designing a website with JQuery for the first time. I am using Twitter-Bootstrap for a dropdown login box and I can't get the JQuery script right to make the box stay open when you click on the text area. I've tried everything and I am familiar with java script. I placed the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"</script>
at the top of the header as well as before the closing body bracket, and the following in front of the closing body tag as well...
<script>$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
here is the HTML
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li id="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 15px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div></li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>
and the CSS
#top-bar {
width: 100%;
min-height: 35px;
max-height: 35px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#top-buttons{
line-height:10px !important;
}
#top-bar a {
color: #74777c;
}
#top-bar a:hover,
#top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#dashboard-top-bar {
width: 100%;
min-height: 45px;
font-size: 13px;
line-height: 35px;
background-color: #f1f3f6;
position: relative;
z-index: 1020;
}
#dashboard-top-bar a {
color: #74777c;
}
#dashboard-top-bar a:hover,
#dashboard-top-bar a:focus {
color: #f58220;
text-decoration: none;
}
#top-info,
#top-buttons {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#top-info,
#top-buttons li {
display: inline-block;
margin-left: 25px;
}
#top-buttons {
float: right;
}
#top-buttons .divider {
position: relative;
border-left: 1px solid #74777c;
width: 1px;
height: 22px;
overflow: hidden;
margin-bottom: -6px;
}

You don't need any jquery to do this. include bootstrap.js and bootstrap.css then
Try this code.
Ex:- JS FIDDLE
<div id="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="top-info">
<li>Phone: 703-518-4325</li>
<li>Email: info#urbanare.com</li>
</ul>
<ul class="nav pull-right" id="top-buttons">
<li class="dropdown">
<i class="fa fa-sign-in"></i>Log in<strong class="caret"></strong></a>
<ul id="login-dp" class="dropdown-menu">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
email: <input id="user_username" style="margin-bottom: 15px;" type="text" name="email" size="30" />
password: <input id="user_password" style="margin-bottom: 15px;" type="password" name="password" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</ul>
</li>
<li class="divider"></li>
<li><i class="fa fa-pencil-square-o"></i> Register</li>
</ul>
</div>
</div>
</div>
</div>

How to make a horizontal set of divs elastic

I have a set of 1-4 divs sitting vertically inside of a <section>. There are 4 buttons which decide how many divs will be invoked. I need the divs to expand to a proportional size, side by side, when they are instantiated. Here is some HTML and CSS code which relate to this.
First the HTML5 markup...
<section id="main">
<div id="resultContainer">
<section id="i0" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" ></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid" ></span>
<span class="other1" ></span>
<span class="other2" ></span>
</section>
<section id="i1" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"> </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind" ></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i2" class="wDay">
<h2>
<span class="day" ></span>
<span class="temp" </span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
<section id="i3" class="wDay">
<h2>
<span class="day"></span>
<span class="temp"></span>
</h2>
<img src="">
<span class="wDescript" style="color:#2050ff;word-break:break-all;"></span>
<span class="wind"></span><br/>
<span class="humid"></span>
<span class="other1"></span>
<span class="other2"></span>
</section>
</div>
</section>
And the CSS:
#main {
filter: none;
position: relative;
top: 20px;
height: 400px;
-webkit-background-color: rgba(72, 72, 72, 0.2);
background-color: rgba(72, 72, 72, 0.2);
/*background-color: #484848;*/
width: 460px;
margin: 0 auto;
-webkit-border-radius: 5px;
-webkit-border: 1px solid #a1a1a1;
border-radius: 5px;
border: 1px solid #a1a1a1;
}
TIA
Dennis

Since Legacy support was required and I had trouble even with the use of a table, I improvised a non-CSS only solution. Clicking on the buttons 1-4 gives me the divisor (nDays) and I used it to divide the width of the container, which gave me the correct width for each div which houses the forecast day div.
dayWidth = parseInt(420/nDays);
$('#i'+i).css('width',dayWidth);
$('#i'+i).css('display','inline-block');
Works great, without all the convolutions of trying to make CSS do it automatically.
And here is the result.

Edit: I missed the bit about legacy support being required, making this answer not quite appropriate.
CSS solution:
#resultContainer{
table-layout: fixed; /* Stops cell widths varying depending on content */
}
.wDay{
display:table-cell; /* Display as table cell. */
width: 1%; /* Needs some width to start with */
text-align: center; /* centres cell content and balances "table" margins */
}
There's no need to put a display: table; in the parent div but you could to make it clearer.
Need to check different browsers!

please try this one in css
.wDay{
float: left;
margin: 5px;
}

Categories