Position two divs in a jQuery UI tabs properly? - javascript

I am a noob CSS programmer and I need a little help. Here are two screenshots:
and
I need to position the tree and the TinyMCE editor which exist in divs properly in the tab area. AS you can see the bottom tab border is very high instead of below the tree and the editor.
Here is my HTML code:
#{
ViewBag.Title = "Demo";
}
<link href="../../Plugins/jqueryui/css/jquery-ui.css" rel="stylesheet"/>
<link href="../../Content/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/jstree/style.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/skin.min.css" rel="stylesheet" type="text/css" />
<link href="../../Plugins/tinymce/skins/lightgray/content.min.css" rel="stylesheet" type="text/css" />
<h2>Demo</h2>
<fieldset>
<legend>Select a language: </legend>
<label for="mk-MK">MK</label>
<input type="radio" name="langid" value="mk-MK" id="mk-MK" checked>
<label for="en-US">EN</label>
<input type="radio" name="langid" value="en-US" id="en-US">
<br/>
<br/>
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">First</a></li>
<li><a id="t2" href="#tabs-2">Second</a></li>
<li><a id="t3" href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
<br />
<input type="text" id="clFreqText"/>
<br />
<br />
<select name="clPeriodSelect" id="clPeriodSelect">
</select>
<br />
<br />
<select name="clYearSelect" id="clYearSelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
<div id="tabs-3">
</div>
</div>
<p>
<input type="button" value="Next" id="nextBtn" />
<input type="button" value="Previous" id="prevBtn" />
</p>
<p id="statusMsg"></p>
<p id="errorsMsg"></p>
</fieldset>
<script src="../../Plugins/jquery/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../Plugins/jqueryui/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../Plugins/jstree/jstree.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/tinymce.min.js" type="text/javascript"></script>
<script src="../../Plugins/tinymce/theme.min.js" type="text/javascript"></script>
<!-- other scripts -->
And style.css contains:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
border: 1px solid Grey;
padding: 10px 10px;
overflow: auto;
float: left;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
.editorBlock
{
overflow: auto;
float: right;
height: 350px;
width: 350px;
margin: 10px 30px 10px 10px;
}
Can somebody tell me why the jquery ui tabs are not of the proper size?
Note: I am coding with MVC 4/C# and Razor, so the file extension is "cshtml" fro my View
Here is what happens when I change the width to 50%, 50%.
The "Next" and "Previous" buttons should be below.

In tabs-2's css rules add the following rule:
overflow:auto
This will fix the height rendering issue due to the floated children divs.

Try a table with width:100% and the columns repsectively 40%,20%,40%.

i changed my html a bit:
<div id="tabs">
<ul>
<li><a id="t1" href="#tabs-1">Info</a></li>
<li><a id="t2" href="#tabs-2">Content</a></li>
<li><a id="t3" href="#tabs-3">Summary</a></li>
</ul>
<div id="tabs-1">
<select name="domainSelect" id="domainSelect">
</select>
<br />
<br />
<select name="surveySelect" id="surveySelect">
</select>
<br />
</div>
<div id="tabs-2">
<div class="treeBlock">
<div id="jstree_div"></div>
</div>
<div class="editorBlock">
<input type="text" value="" id="editorTitleTxt" disabled="disabled"/>
<div class="editor">
<textarea rows="10" cols="10" id="textEditor">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
</div>
<div id="tabs-3">
<textarea rows="10" cols="10" id="summaryText" disabled="disabled">Next, get a free TinyMCE Cloud API key!</textarea>
</div>
</div>
And my CSS:
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}
.treeBlock
{
overflow: auto;
height: 500px;
width: 38%;
float: left;
border: 1px solid Grey;
margin: 5px;
}
.editorBlock
{
overflow: auto;
height: 500px;
width: 60%;
margin: 5px;
}
#editorTitleTxt
{
width: 98%;
font-weight:bold;
}
It looks like this:

Related

I am unable to generate (or print) the data retrieved from the data base in PDF using JSPDF

i am new to Javascript and i am unable to print the data which is retrived from the database.
Here the concept is when i upload a file, i should get the data to be displayed in the browser and i want to print the retrieved data in PDF. i could able to retrieve that data when i am generating with .xlxs format but for PDF format i couldnt.
html,
body {
height: 100%;
width: 100%;
}
#mainWindow {
height: 100%;
width: 100%;
}
.width-100 {
width: 100% !important;
}
#map {
font-family: sans-serif;
height: calc(100% - 90px);
width: 100%;
border-top: 1px solid grey;
}
html,
body {
margin: 0;
padding: 0;
}
.disp-inline {
display: inline-block;
margin: 5px;
}
.dijitBorderContainer-child {
left: 0 !important;
}
.dojoxGrid {
width: 100% !important;
}
/* (A) FULL SCREEN WRAPPER */
#spinner {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
transition: opacity 0.2s;
}
/* (B) CENTER LOADING SPINNER */
#spinner img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%);
}
/* (C) SHOW & HIDE */
#spinner {
visibility: hidden;
opacity: 0;
}
#spinner.show {
visibility: visible;
opacity: 1;
}
.dojoxGridArrowButtonChar {
display: inline-block !important;
}
.dojoxGridColCaption {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>DATA VALIDATION</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.39/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://js.arcgis.com/3.39/"></script>
<!-- <script src="jspdf.debug.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body class="tundra">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:'false'">
<div class="width-100" id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"
style="height:58px;text-align:left;font-weight:bold;font-size:14px;color:#400D12; height: 95px;">
<div class="row" style="margin: 0;">
<div class="col-sm-1">
<img src="logo.png" style="width: 250px; margin: 4px;" />
</div>
<div class="col-sm-11" style="text-align: center;">
<h3>DMT DATA VALIDATION</h3>
</div>
</div>
</div>
<div class="width-100" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
<div id="spinner">
<img src="loader.gif" style="height: 50px;" />
</div>
<div data-dojo-type="dijit/layout/ContentPane" style="height: 80px;">
<div class="row" style="margin: 0; border-bottom: 1px solid grey;">
<div class="col-sm-5">
<div class="disp-inline">
<label style="display: inline-block;margin-left: 5px;" for="selectTemplate">Select
Template</label>
<select id="selectTemplate"
style="width: 325px; padding: 5px; margin: 5px; display: inline-block;">
<option value="AddressingData">Addressing Data</option>
<option value="HardLandscaping">Hard Landscaping</option>
<option value="IrrigationFacilities">Irrigation Facilities</option>
<option value="ParkingFacilities">Parking Facilities</option>
<option value="PedestrianAndCycling">Pedestrian And Cycling</option>
<option value="PublicTransportFacilities">Public Transport Facilities</option>
<option value="RoadAuxiliaryFeatures">Road Auxiliary Features</option>
<option value="RoadNavigation">Road Navigation</option>
<option value="RoadStructuresAndFurniture">Road Structures And Furniture</option>
<option value="SignsAndSignPoles">Signs And Sign Poles</option>
<option value="SoftLandscaping">Soft Landscaping</option>
<option value="StormwaterFacilities">Storm water Facilities</option>
<option value="StreetlightingFacilities">Street lighting Facilities</option>
<option value="StreetlightingPowerAndControlSystem">Street lighting Power And Control
System
</option>
<option value="TrafficControl">Traffic Control</option>
</select>
</div>
</div>
<div class="col-sm-5">
<div class="disp-inline" style="margin-top: 14px;">
<form encType="multipart/form-data" method="post" id="gdbzipUploadForm">
<div className="field">
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'>Upload GDB
</label>
<input style="display: inline-block;width: 325px;" type="file" name="file"
id="UploadzipFile" accept='.zip' />
</div>
</form>
<!-- <div>
<label style="display: inline-block;" className="file-upload" title="Upload ZIP"
for='UploadzipFile'> Html to PDF
</label>
<button onclick="javascript:createPdf()" id="cmd">Generate PDF</button>
</div> -->
</div>
</div>
<div class="col-sm-2">
<div style="display: inline-block; margin-top: 14px;">
<a style="cursor: pointer; display: none;" href="#" id="downloadreflink">
<i class="glyphicon glyphicon-download"></i>
Download Report
</a>
</div>
<div style="display: inline-block; margin-top: 14px;">
<a onclick="javascript:createPdf()" style="cursor: pointer; display: none;" href="#" id="generatePdf">
<i class="glyphicon glyphicon-download"></i>
Generate PDF Report
</a>
</div>
</div>
</div>
</div>
<div id="gridDiv" data-dojo-type="dijit/layout/ContentPane">
</div>
</div>
<div class="width-100" id="bottomdiv" data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'bottom'" style="height: 50px;">
<label id="errorlabel" style="display: none; color: red;"></label>
</div>
</div>
</body>
</html>

Centering File Input Bootstrap

Hey I am building a website using html, css, bootstrap, and javascript.
And for some reason my input won't completely center. I HAVE NO CLUE WHY!!! I think it might have to do with bootstrap.
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
margin:auto;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home</li>
<li role="presentation" class="active">Profile</li>
<li role="presentation">Hangawts <span class="badge">0</span></li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1><br>
<h3>Your Current Profile Picture:</h3><br><br>
<img src="http://placehold.it/350x150"><br><br><br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>
Setting the width of input[type="file"] element to 83.5px, left to calc() with parameter 50vw - 41.75px, ::-webkit-file-upload-button padding and margin to 0 returns expected results at chrome, chromium and firefox.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
font-family: futura;
}
#inp {
width: 83.5px;
position: relative;
padding: 0;
margin: 0;
left: calc(50vw - 41.75px);
}
::-webkit-file-upload-button {
padding: 0;
margin: 0;
display: block;
}
.jumbotron {
margin: auto;
text-align: center;
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation">Home
</li>
<li role="presentation" class="active">Profile
</li>
<li role="presentation">Hangawts <span class="badge">0</span>
</li>
</ul>
<div class="jumbotron">
<h1>Welcome To Your Profile!</h1>
<br>
<h3>Your Current Profile Picture:</h3>
<br>
<br>
<img src="http://placehold.it/350x150">
<br>
<br>
<br>
<input id="inp" type="file" accept="image/*">
</div>
</body>
</html>

What am i doing wrong in my toggle visibility

I made a html page using some simple bootstrap and have it linked to a database using some php. I want the page to be simple at the beginning, only 2 sections, and as you complete the inputs and press next, another section becomes visible. I tried doing this with a toggle visibility in javascript but for some reason it either doesn't switch between the display: none or block, doesn't take on the inputs or just simply does nothing.
Below is 2 sections, if anyone can explain why and how this does not work.
/*Contect style*/
input,
textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
/*sections*/
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
display: none;
}
.reservation-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
display: none;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: left;
background: #fff;
}
<?php $servername="localhost" ; $username="root" ; $password="" ; // Create connection $conn=n ew mysqli($servername, $username, $password); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $conn->select_db("airports"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="scrolling-nav.css" rel="stylesheet" type="text/css" />
<link href="contactStyle.css" rel="stylesheet" type="text/css" />
<script src="paymentFormJS.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<title>Licenta - Rezervare bilete de avion</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Home</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#reservation">Reservation</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>-->
<!-- Intro Section -->
<section id="intro" class="intro-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div style="height: 50px"></div>
<h1>Tells us what you want!</h1>
<div style="height: 100px;"></div>
<form role="form">
<div class="form-group col-xs-6">
<h3><label for="departure">Where will you be leaving from</label></h3>
<input class="form-control input-lg" id="departure" type="text" placeholder="Madrid, Spain" name="source">
</div>
<div class="form-group col-xs-6">
<h3><label for="arrival">Where you will arrive to</label></h3>
<input class="form-control input-lg" id="arrival" type="text" placeholder="Bucharest, Romania" name="destination">
</div>
<div class="form-group col-xs-4" style="margin-left: 33%; margin-top: 100px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="city_search" id="aboutBtn" onclick="toggle_visibility('about')">
<a class="page-scroll-about" href="#about" style="text-decoration: none; color: #ffffff;"> Find it </a>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container" style="">
<div class="row">
<div class="col-lg-12">
<h1>Pick a flight</h1>
<div style="height: 50px;"></div>
<form role="form">
<?php if(isset($_GET[ "city_search"])) { $src=$ _GET[ "source"]; $dest=$ _GET[ "destination"]; $query_txt="SELECT * FROM flights WHERE source_city LIKE '%{$src}%' AND destination_city LIKE '%{$dest}%'" ; if($qu=$ conn->query($query_txt)) { while($row = $qu->fetch_row()) { echo "
<div class=\ "form-group col-xs-12\" style=\ "border: 1px solid black; height: auto\">"; echo "
<div class=\ " col-lg-6\" style=\ "border-right: 1px solid black; height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[1]}</p>"; echo "</div>"; echo "
<div class=\ " col-lg-6\" style=\ " height: 100px; margin-top: 15px; font-family: arial; font-size: 32px;\">"; echo "
<p style=\ " margin-top: 25px;\">{$row[2]}</p>"; echo "</div>"; echo "
<button type=\ "submit\" class=\ "btn btn-primary btn-sm \" name=\ "flight_id\" value=\ "{$row[0]}\" id=\ "submitBtn{$row[0]}\" style=\ " margin-top: 15px; margin-bottom: 15px;\" onclick=\
"toggle_visibility('services')\"><a class=\ "page-scroll\" href=\ "#services\" style=\ "text-decoration: none; color: #ffffff;\">Pick a flight</a>
</button>"; echo "</div>"; } } } ?>
</form>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="services-section section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Tell us about you</h1>
<form class="form-horizontal col-lg-6" role="form" style="margin-left: 23%;">
<div class="form-group">
<label for="inputdefault">Name</label>
<input class="form-control" id="inputdefault" type="text" placeholder="John" style="text-align: center;" name="client_name">
</div>
<div class="form-group">
<label for="inputdefault">Surname</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Doe" style="text-align: center;" name="client_surname">
</div>
<div class="form-group">
<label for="inputdefault">ID</label>
<input class="form-control" id="inputdefault" type="text" placeholder="1770423112233" style="text-align: center;" name="client_id">
</div>
<div class="form-group">
<label for="inputdefault">Age</label>
<input class="form-control" id="inputdefault" type="text" placeholder="27" style="text-align: center;" name="client_age">
</div>
<div class="form-group">
<label for="inputdefault">Address</label>
<input class="form-control" id="inputdefault" type="text" placeholder="Bd. Unirii nr. 144" style="text-align: center;" name="client_address">
</div>
<div class="form-group col-xs-3" style="margin-left: 80%; margin-top: 15px;">
<button type="submit" class="btn btn-info btn-lg btn-block" name="client_flight_id" value="<?php
if(isset($_GET[" flight_id "]))
echo $_GET["flight_id "];
else
echo "nullb ";
?>" id="reservationBtn" onclick="toggle_visibility('reservation')">
<a class="page-scroll" href="#reservation" style="text-decoration: none; color: #ffffff;" onclick="toggle_visibility('reservation')"><span class="glyphicon glyphicon-search"></span> Neext </a>
</button>
<?php if(isset($_GET[ "client_flight_id"])) { $client_name=$ _GET[ "client_name"]; $client_surname=$ _GET[ "client_surname"]; $client_id=$ _GET[ "client_id"]; $client_age=$ _GET[ "client_age"]; $client_address=$ _GET[ "client_address"]; $client_flight_id=$
_GET[ "client_flight_id"]; $query_txt="INSERT INTO clients (name, surname, client_id, age, address, flight_id) VALUES (\" {$client_name}\ ",\"{$client_surname}\ ", {$client_id}, {$client_age}, \"{$client_address}\
", {$client_flight_id})"; $conn->query($query_txt); $client_db_id = $conn->insert_id; } ?>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Thanks in advance to anyone who answers.
Just tested your code and moving the script in the bottom of the page seemed to fix the problem. If you are using Google Chrome always check your console (Ctrl + Shift + i) when you are messing with Javascript.
And Javascript that makes DOM manipulation should be loaded at the end of the page after all elements are loaded or using load event must in order to execute the code after the elements are loaded.

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>

in jscrollpane, scrolling is not working

Objective:: want to make a registration pop page with vertical scroll bar by using jScrollPane.
Issue:: vertical scrollbar is not moving
HTML code::
<div id="register" class="wpml-content jspScrollable" >
<div class="jspContainer" style="width: 100%; height: 370px;">
<div class="jspPane">
<form action="register" method="post" id="form" class="group" name="loginform" >
<!-- code for registration-->
</form>
</div>
<div class="jspVerticalBar">
<div class="jspCap jspCapTop"></div>
<div class="jspTrack" style="height: 200px;">
<div class="jspDrag" style="height: 77px; top: 0px;">
<div class="jspDragTop"></div>
<div class="jspDragBottom"></div>
</div>
</div>
<div class="jspCap jspCapBottom"></div>
</div>
</div>
</div>
JS code::
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/plugins/jScrollPane-master/script/mwheelIntent.js"></script>
jQuery(document).ready(function(){
$('#register').jScrollPane();
});
CSS code::
.jspVerticalBar {
width: 8px;
background-color: #ededed;
}
.jspTrack {
width: 8px;
background-color: #ededed;
}
.jspDrag {
width: 8px;
background-color: #ccc;
}
I checked http://jscrollpane.kelvinluck.com/basic.html as I am new to jScrollPane but not getting where am I missing code.

Categories