I can't understand why this tutorial example does not work for me:
I have external js libraries:
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"
"http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"
And this code on load document:
<script type="text/javascript">
$(document).ready(function () {
$('input.typeahead').typeahead({
name: 'cars',
local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
});
});
</script>
I have css:
<style type="text/css">
.bs-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}
.typeahead, .tt-query, .tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 24px;
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}
.typeahead {
background-color: #FFFFFF;
}
.typeahead:focus {
border: 2px solid #0097CF;
}
.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
color: #999999;
}
.tt-dropdown-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}
.tt-suggestion {
font-size: 24px;
line-height: 24px;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
background-color: #0097CF;
color: #FFFFFF;
}
.tt-suggestion p {
margin: 0;
}
</style>
And html code:
<body>
<div class="bs-example">
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
</div>
</body>
Can anyone help me ?
Related
I just completed mimicking app creation just like I did in online lessons. I figure, I'd take a little step further by making my app look nicer.
I am trying to change my "home" link text to an image.
Surely, I have done that in HTML before but not in Rails. I am a bit confused because of "link_to" method. How do I do it, giving my current set-up?
application.html.erb
<header>
<div class="header-logo">
<%= link_to("Home", "/") %>
</div>
...
where routes.rb are
get "/" => "home#top"
home.scss
* {
box-sizing: border-box;
}
html {
font: 100%/1.5 'Avenir Next', 'Hiragino Sans', sans-serif;
line-height: 1.7;
letter-spacing: 1px;
}
ul, li {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #2d3133;
font-size: 14px;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
input {
background-color: transparent;
outline-width: 0;
}
form input[type="submit"] {
border: none;
cursor: pointer;
}
/* Common Layout ================================ */
body {
color: #2d3133;
background-color: white;
margin: 0;
min-height: 1vh;
background-image: url("/top.jpg");
}
.main {
position: absolute;
top: 64px;
width: 100%;
height: auto;
min-height: 100%;
background-color: #f5f8fa;
}
.container {
max-width: 600px;
margin: 60px auto;
padding-left: 15px;
padding-right: 15px;
clear: both;
}
/* Header ================================ */
header {
height: 64px;
position: absolute;
z-index: 1;
width: 100%;
}
.header-logo {
float: left;
padding-left: 20px;
color: black;
font-size: 22px;
line-height: 64px;
}
.header-logo a{
color: black;
font-size: 22px;
}
.header-menus {
float: right;
padding-right: 20px;
}
.header-menus li {
float: left;
line-height: 64px;
font-size: 13px;
color: black;
padding-left: 15px;
}
.header-menus a {
float: left;
font-size: 13px;
color: black;
padding-right: 15px;
}
.header-menus .fa {
padding-right: 5px;
}
.header-menus input[type="submit"] {
padding: 0 20px;
float: left;
line-height: 64px;
color: black;
margin: 0;
font-size: 13px;
}
/* Top ================================ */
.top-main {
padding: 200px 0 100px;
text-align: center;
position: absolute;
top: 0;
width: 100%;
height: auto;
min-height: 100%;
color: black;
background-color: white;
background-repeat: no-repeat;
background-position: center 50%;
background-size: cover;
background-image: url("/top.jpg");
}
.top-message {
position: relative;
}
.top-main h2 {
font-size: 70px;
font-weight: 500;
line-height: 1.3;
-webkit-font-smoothing: antialiased;
margin-bottom: 20px;
}
.top-main p {
font-size: 24px;
}
/* About ================================ */
.about-main {
padding: 180px 8% 0;
color: black;
}
.about-main h2 {
font-size: 64px;
font-weight: 500;
line-height: 1.4;
}
.about-main p {
font-weight: 200;
font-size: 20px;
}
.about-img {
width: 25%;
}
/* Form ================================ */
.form {
max-width: 600px;
margin: 0 auto;
background-color: black;
box-shadow: 0 2px 6px #c1ced7;
}
.form-heading {
font-weight: 300;
margin: 60px 0 20px;
font-size: 48px;
color: #bcc8d4;
}
.form-body {
padding: 30px;
}
.form-error {
color: #ff4d75;
}
.form input {
width: 100%;
border: 1px solid #ffffff;
padding: 10px;
color: #57575f;
font-size: 16px;
letter-spacing: 2px;
border-radius: 2px;
}
.form textarea {
width: 100%;
min-height: 110px;
font-size: 16px;
letter-spacing: 2px;
}
.form input[type="submit"] {
background-color: #ffffff;
color: black;
cursor: pointer;
font-weight: 300;
width: 120px;
border-radius: 2px;
margin-top: 8px;
margin-bottom: 0;
float: right;
}
.form-body:after {
content: '';
display: table;
clear: both;
}
/* Flash ================================ */
.flash {
padding: 10px 0;
color: black;
background: rgb(251, 170, 88);
text-align: center;
position: absolute;
top: 64px;
z-index: 10;
width: 100%;
border-radius: 0 0 2px 2px;
font-size: 14px;
}
Thank you for your time :)
You can try it <%= link_to image_tag('image_here'), '/' %>
I think this is what you want
<%= link_to "#{image_tag("name-of-img-here.png")}".html_safe, root_path %>
Make sure you image is in the app/assets/images/ folder for this to link correctly.
You will also likely need to add a class and then style it the image for it to look good.
I have a button being used to show a dropdown div. The button padding and text can be clicked on to show the dropdown div. The very small Material "font-icon" CANNOT be clicked to show the dropdown div. How can I ensure that you can click anywhere within the button (including directly on the Material icon) in order to show the dropdown div.
Here is a link to show you what I've done.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
body {
margin: 0;
color: #333;
overflow-x: hidden;
padding-top: 80px;
}
:root{
var-MainColor: #4C00F9;
--main-color: #4C00F9;
}
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -64px;
}
#navWrapper {
padding: 0px;
border-bottom: 1px solid #eee;
font-size: 13px;
font-family: Sans-Serif;
width: 100%;
background-color: #fff;
z-index: 1000;
height: 64px;
}
#navLeft {
float: left;
}
#navRight {
float: right;
}
/* Dropdown Button */
.dropbtn {
background-color: transparent;
color: var(--main-color);
padding: 24px;
font-size: 13px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: var(--main-color);
color: #fff;
outline: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
margin-left: 10px;
margin-right: 2%;
margin-top: -8px;
border-radius: 2px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-color);
padding: 24px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #fdfdfd;}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
.material-icons.md-01 { font-size: 13px; vertical-align: middle; margin-top: -3px;}
.material-icons.md-02 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: red;}
.material-icons.md-03 { font-size: 24px; vertical-align: middle; margin-top: -5px; color: #40FA35;}
.material-icons.md-04 { font-size: 21px; vertical-align: middle; margin-top: -1px;}
.material-icons.md-05 { font-size: 16px; vertical-align: middle; margin-top: -1px;margin-right: 15px;}
#main {
margin-top: 50px;
position: absolute;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 50px 0px;
}
#sectionInnerText {
max-width: 700px;
padding: 0px 100px;
}
#sectionInnerImage {
max-width: 1000px;
padding: 0px 100px;
}
#sectionInnerImage-rowWrapper {
padding: 0px 100px;
}
#sectionInnerImage-3row {
width: 31%;
max-width: 400px;
display: inline-block;
margin-right: 1vw;
}
#sectionInnerImage-2row {
width: 48%;
max-width: 1000px;
display: inline-block;
margin-right: 1vw;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
font-weight: 700;
font-family: Sans-Serif;
}
h2 {
font-size: 22px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 15px;
}
h3 {
font-size: 13px;
font-family: Sans-Serif;
font-weight: normal;
margin-bottom: 30px;
}
h4 {
font-size: 17px;
font-family: Sans-Serif;
font-weight: 700;
margin-top: 5px;
margin-bottom: 0;
display: inline-block;
}
p {
font-size: 19px;
line-height: 180%;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-weight: normal;
margin: 15px 0;
}
a.one {
display: block;
color: #fff;
background-color: var(--main-color);
padding: 16px;
text-decoration: none;
text-align: center;
border-radius: 3px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
max-width: 350px;
}
a.one:hover {
background: #4C03F1;
}
a.one:active {
background-color: var(--main-color);
}
#media only screen and (min-width: 1080px) {
section {
min-height: 30vh;
}
}
#media only screen and (max-width: 1080px) {
html, body {
margin: 0;
color: #333;
overflow-x: hidden;
}
section {
width: 100%;
border-bottom: 1px solid #eee;
padding: 0px;
}
#sectionInnerText {
padding: 2vh 5vw;
}
#sectionInnerImage {
padding: 0 5vw;
}
#sectionInnerImage-rowWrapper {
padding: 0 5vw;
}
#sectionInnerImage-3row {
width: 100%;
max-width: 1000px;
}
#sectionInnerImage-2row {
width: 100%;
max-width: 1000px;
}
p {
font-size: 21px;
}
ul li {
font-size: 21px;
}
a.one, a.two, a.three, a.four {
display: block;
margin-bottom: 25px;
max-width: 100%;
max-width: 450px;
}
.dropdown-content {
width: 100vw;
margin: 0;
margin-top: -6px;
background-color: #fff;
min-width: 260px;
border: 0px solid #eee;
border-top: 1px solid #eee;
border-bottom: 0;
z-index: 1;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}
.dropdown-content a{
border-bottom: 1px solid #f4f4f4;
}
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="nav-down">
<div id="navWrapper">
<div id="navLeft">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu <i class="material-icons md-01">keyboard_arrow_down</i></button>
<div id="myDropdown" class="dropdown-content">
<i class="material-icons md-05">home</i> Home & Projects List
<i class="material-icons md-05">dashboard</i> Project 01
<i class="material-icons md-05">dashboard</i> Project 02
<i class="material-icons md-05">dashboard</i> Project 03
<i class="material-icons md-05">account_circle</i> Info & Contact
<i class="material-icons md-05">picture_as_pdf</i> View & Download Resume
</div>
</div>
</div>
</div>
</header>
I applied foundation.css to make my site responsive. But after that tool tips, light box is not working. Fonts are getting larger. Where should I correct in my custom.css or foundation.css
Tool tip not working in this site
html {
height: 100%;
margin-bottom: 1px;
}
body {
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}
body,
td.sohotext,
td.text,
p,
span {
font-family: sans-serif, Helvetica, Verdana, Arial;
font-size: 13px;
color: #525252;
line-height: 140%;
}
/* Fixes and hacks */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}
* html input.quick_signup {
background-attachment: fixed;
}
/*END - Fixes and Hacks */
/* Navigation */
#mainnav a:link, #mainnav a:visited {
color: #FFF;
text-decoration: none;
display: block;
padding-right: 13px;
float: left;
padding-top: 5px;
padding-left: 13px;
padding-bottom: 5px;
background-image: url(images/menu_div.jpg);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-position: right top;
}
#mainnav a:hover {
color: #36CC2F;
background-image: url(images/nav_active.jpg);
background-repeat: repeat-x;
background-position: right top;
padding:4px 12px 4px;
}
.hmains {
font-size: 100%;
}
#megamenu {
list-style-type:none;
width:100%;
margin: 3px auto 04px auto;
height:40px;
padding:2px 0px 3px 0px;
}
table.vmenu_subs {
margin-bottom: 30px;
margin-top: 15px;
}
/*#leftav a:link, #leftnav a:visited, */
a.vmenu_sub_off:link,
a.vmenu_sub_off:visited,
a.vmenu_sub_on:link,
a.vmenu_sub_on:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 95%;
font-weight: bold;
color: #000;
background-image: url(images/sideNav_bullet.gif);
background-repeat: no-repeat;
background-position: left center;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #acacac;
text-decoration: none;
padding-left: 24px;
display: block;
width: 150px;
}
/*#leftav a:hover,*/
a.vmenu_sub_off:hover,
a.vmenu_sub_on:hover
a.vmenu_sub_off:active,
a.vmenu_sub_on:active {
color: #666;
}
a:link, a:visited {
color: #00CC00;
text-decoration: none;
}
a:hover {
color: #009900;
margin-top:0px;
margin-bottom:0px;
}
#feat a:link, #feat a:visited {
color: #fdb417;
text-decoration: none;
}
#feat a:hover {
color: #fed27e;
}
/*END - Navigation */
#headwrapper {
background-image: url(images/top_bg.png);
background-repeat: 50% no-repeat;
margin: 0px;
padding: 0px;
height: 109px;
position: relative;
}
#featwrapper {
background-color: #1e8019;
height: 124px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #185d14;
overflow: hidden;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #2b9d22;
}
#feat {
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-image: url(images/feat_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 124px;
color: #FFFFFF;
}
#navwrapper {
background-color: #1e8019;
height: 32px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2b9d22;
border-bottom-color: #185d14;
}
#nav {
background-image: url(images/nav_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 32px;
max-width:880px;
margin-right: auto;
margin-left: auto;
color: #FFFFFF;
}
#contentwrapper {
background-color: #ededf1;
margin: 0px;
padding: 0px;
}
#maincontent {
background-image: url(images/content_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
max-width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #ededf1;
}
#mainnav {
width: 72%;
float: left;
padding-left: 5px;
}
#signup {
width: 25%;
padding-left: 5px;
float: left;
height: 20px;
padding-top: 2px;
font-size: 85%;
color: #cccccc;
text-align: center;
}
#subnav {
margin: 0px;
float: left;
min-width:155px;
width: 25%;
padding-top: 15px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#belowmenu {
display: block;
float: left;
width: 210px;
padding-top: 15px;
padding-left: 5px;
}
div.sidebox {
display: block;
float: left;
width: 210px;
}
#content {
margin: 0px;
width: 70%;
float: left;
padding-top: 12px;
padding-right: 7px;
padding-bottom: 12px;
padding-left: 7px;
overflow: visible;
}
#date {
font-size: 90%;
text-align: right;
color: #858585;
}
#featleft {
float: left;
width: 25%;
padding-left: 5px;
padding-top: 5px;
}
#featright {
float: left;
width: 72%;
padding-left: 10px;
padding-top: 5px;
}
#footer {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
font-size: 85%;
padding-bottom: 10px;
color: #939393;
}
#head {
height: 109px;
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
#logo_box {
height: 109px;
float: left;
width: 28%;
}
#tagline {
float: left;
width: 70%;
color: #999999;
text-align: right;
padding-top: 22px;
}
#logo {
position: absolute;
top: 3px;
}
#trimbar {
background-color: #000000;
margin: 0;
padding: 0;
height: 7px;
width: 100%;
border-top: 1px solid #999999;
border-bottom: 1px solid #333333;
}
div.newsbox {
line-height: 115%;
}
/*hiding from IE mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* end hiding from IE mac */
#footerwrapper {
width: 100%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #959595;
background-color: #CCCCCC;
}
/* Integrated Styles */
.portfolio {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EFEFEF;
width: 100%;
overflow: auto;
}
span.alert,
span.profile,
span.download,
span.search {
display: block;
float: left;
margin: 10px;
padding: 10px 10px 10px 45px;
}
span.alert {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_alert.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.profile {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_profile.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.download {
width: 100%;
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_download.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.search {
color: #333333;
background-color: #dddddd;
border-bottom: 4px solid #b6b6b6;
border-top: 4px solid #b6b6b6;
background-image: url(images/span_search.jpg);
background-repeat: no-repeat;
background-position: 7px 12px;
}
span.product {
color: #333333;
background-color: #fff;
border: 1px solid #b6b6b6;
margin: 10px;
padding: 10px;
font-size: 10px;
line-height: 145%;
display: block;
}
blockquote {
border-top: 4px solid #D3D3D3;
border-bottom: 4px solid #D3D3D3;
margin: 10px;
padding: 10px 10px 5px 45px;
background-color: #f5f5f5;
background-image: url(images/quote1.png);
background-repeat: no-repeat;
background-position: 5px 5px;
}
blockquote p {
padding-right: 35px;
background-image: url(images/quote2.png);
background-repeat: no-repeat;
background-position: 100% 100%;
}
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li {
background-image: url("images/li_bullet.gif");
background-position: 0px 4px;
background-repeat: no-repeat;
overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/
padding-left: 14px;
margin-left: 0px 4px;
font-size: 12px;
}
ul, li {list-style-type:none !important;}
}
h4 {
font-size: 115%;
color: #333;
margin-bottom: 5px;
margin-top: 0px;
padding: 0px;
}
#feat h4 {
color: #fdb417;
}
h4 {
font-size: 120%;
color: #0066FF
}
h3 {
font-size: 150%;
color: #1E7D19;
}
h2 {
font-size: 180%;
color: #196115;
}
input.login_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/login_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.pass_box {
border: 0;
height: 25px;
width: 122px;
padding-left: 30px;
padding-top: 4px;
background-image: url(images/password_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
}
input.quick_signup {
border: 0;
height: 19px;
width: 168px;
padding-left: 32px;
padding-top: 3px;
margin-top: 4px;
background-image: url(images/quick_signup_bg.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color: #ededed;
}
div#answer0,
div#answer1,
div#answer2,
div#answer3,
div#answer4,
div#answer5,
div#answer6,
div#answer7,
div#answer8,
div#answer9,
div#answer10
{
padding-left: 28px;
padding-bottom: 10px;
background-image: url(images/answer.gif);
background-repeat: no-repeat;
background-position: 2px 0;
}
table#Search_Form,
table#Search_Form2 {
}
table#Detail_Results2,
table#Initial_Results {
margin-top: 15px;
}
.MegaMenu {
display:table;
margin: 0 auto !important;
height:29px;
background-color:transparent;
}
#mainnav table, #mainnav table tr th, #mainnav table tr td, #Container td {
padding: 0px!important;
background:inherit!important;
}
#Container,.MegaMenuTable, .MegaMenuTable tr {
background:inherit!important;
}
table {
border-width:0px;
background:inherit;
}
table tr th, table tr td {
padding:inherit;
}
table tr.even, table tr.alt, table tr:nth-of-type(2n) {
background:inherit;
}
.sohotext p {
min-width:120px;
}
#tagline {
bottom: 0;
padding-top: 0px;
position: absolute;
right: 0;
width:62%;
}
#tagline img {
margin: 0px 0px -12px;
height: auto!important;
max-width: 100%;
width: auto!important;
max-height: 68px;
min-height:45px;
}
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#title#</title>
<link rel="stylesheet" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/css/foundation.css" />
<link rel="stylesheet" type="text/css" href="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreen/custom.css" />
<link rel="stylesheet" type="text/css" href="tooltip/themes/2/tooltip.css" />
<link rel="stylesheet" type="text/css" href="lightbox/css/lightbox.css" />
<link rel="stylesheet" type="text/css" href="jsimgslider/themes/8/js-image-slider.css" />
<link rel="stylesheet" type="text/css" href="mactabs/mctabs.css" />
<script type="text/javascript" src="http://www.egtours.com/tooltip/themes/2/tooltip.js"></script>
<script type="text/javascript"src="http://www.egtours.com/sohoadmin/plugins/MegaMenuBuilder/javascripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/mcVideoPlugin.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<script type="text/javascript" src="http://www.egtours.com/jsimgslider/themes/8/js-image-slider.js"></script>
<script src="http://www.egtours.com/float-panel.js"></script>
<script type="text/javascript" src="http://www.egtours.com/mactabs/javascript-tabs.js"></script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://www.egtours.com/motionpack.js"></script>
<script src="sohoadmin/program/modules/site_templates/pages/PHASE2-Dinkin_Flicka-Evergreencss/js/vendor/modernizr.js"></script>
</head>
<body>
<body onload="slidedown('featwrapper');">
<div id="headwrapper">
<div id="head" class="clearfix">
<div id="logo_box"><img id="logo" border="0" alt="Home" width="322" height="118" src="images/_userimg-logo.png" /></div>
<div id="tagline"><img border="0" alt="Home" width="468" height="60" src="images/_userimg-ad_banner.png" /></div></div></div>
<div id="trimbar"></div>
<div id="featwrapper" style="display: none; height: 124px; overflow: hidden">
<div id="feat" class="clearfix">
<div id="featleft">#NEWSBOX#</div>
<div id="featright">#PROMOTXT1#</div></div></div>
<div id="navwrapper">
<div id="nav" class="clearfix">
<div id="signup"><img style="border: 0pt" border="0" alt="Toggle the banner up or down" width="110" height="27" src="images/hide-show.png" /></div>
<div id="mainnav">#MEGAMENU#</div></div></div>
<div id="contentwrapper">
<div id="maincontent" class="clearfix">
<div id="subnav">#VSUBS#
<div id="belowmenu">#POWERPLUG4#</div></div>
<div id="content">
<div id="date">#AUTODATESTAMP#</div>#CONTENT#</div></div>
<div id="footerwrapper">#COPYRIGHT#<div id="footer">
<table id="table1" border="0" cellspacing="1" width="100%">
<tbody>
<tr>
<td colspan="7" align="left">
<p align="center"><a title="" href="../../../../../../../Our_Policies.php">Our Policies</a>| Privacy Statement</p></td></tr>
<td width="60"><img border="0" alt="coat of arm" width="66" height="56" src="../../../../../../../images/logos/coatofarm.png" /></td>
<td width="152"><img border="0" alt="natta logo" width="53" height="56" src="../../../../../../../images/logos/nattalogo.png" /></td>
<td width="55"><img border="0" alt="uftaa logo" width="80" height="56" src="../../../../../../../images/logos/uftaa.png" /></td>
<td width="71"><img title="" alt="skull logo" width="75" height="36" src="../../../../../../../images/paybyskull.png" /><br />
</td>
<td width="71">
<p><img title="" alt="paypal logo" width="57" height="57" src="../../../../../../../images/paypalv.png" /></p></td>
<td width="26">
<p><img title="" alt="vitof logo" width="97" height="73" src="../../../../../../../images/vitof_logo.png" /></p></td>
<td width="90"><img border="0" alt="SSL" width="90" height="50" src="http://www.egtours.com/images/rapidssl_ssl_certificate.gif" /></td></tbody></table></div></div>
<script type="text/javascript" src="http://www.egtours.com/lightbox/js/lightbox.js"></script>
<div id="backtop">▲</div>
#jquery#
<script>
/* Remove the slogan div cleanly if it's not in use */
$(function () {
if($(".slogan").html().length === 0) {
$(".slogan").remove();
}
/* Expand the content area out if the sidebar isn't in use */
if (!$("#box-one").text().trim().length){
$(".middle").addClass("large-12").removeClass("large-8");
$(".box").remove();
}
});
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Your path's to foundation.tooltip.js and to foundation1.css are incorrect and they are not loading, therefore no tooltips. If you want your own custom.css file to override any of foundation's css, it needs to load after foundation1.css.
I have a number input box which is running on iOS. I am using jquery and kendo mobile for this as well as HTML5.
The number input on the Icenium simulator has the up and down arrows but the IPad doesnt. I need a way for these to show up on the IPad. I have looked around but need a straight answer.
Is it possible to have these arrows for a number input on the IPad (eg. quantity)?
If not, is there any way I can implement something similar maybe using kendo mobile, HTML or CSS? Any suggestions would be much appreciated.
This is what i need
<input type="number" value="numberText"/>
<style>
input[type=number]
{
padding:10px;
}
</style>
Thank you
try:
<!DOCTYPE html>
<html lang="en">
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
<style>
.number-wrapper {
margin: 10px 5px;
position: relative;
}
.number {
font-size: 30px;
color: #eee;
display: inline-block;
*display: inline;
*zoom: 1;
background: #000;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 0 12px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #555;
-moz-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.2);
-moz-text-shadow: 0 3px 3px #000000;
-webkit-text-shadow: 0 3px 3px #000000;
text-shadow: 0 3px 3px #000000;
}
.inc {
position: absolute;
display: block;
top: -35px;
left: 0;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
padding-top: 6px;
}
.dec {
position: absolute;
display: block;
bottom: -18px;
left: 0;
padding-top: 14px;
font-weight: bold;
font-size: 18px;
color: #777;
width: 100%;
height: 90%;
text-align: center;
}
.line {
position: absolute;
width: 100%;
height: 1px;
top: 52%;
left: 0;
background: #000;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
</style>
<body>
<div id="SETtime">
<span class="number-wrapper"><div class="line"></div><span class="inc">+</span><span id="mx" class="number m">00</span><span class="dec">-</span></span>
</div>
</body>
<script>
function twodigits(num) {
return ('0' + num).slice(-2);
}
$('.inc').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value++;
target.text(twodigits(value));
});
$('.dec').click(function() {
var target = $(this).siblings('.number').first();
var value = parseInt(target.text());
value--;
target.text(twodigits(value));
});
</script>
</html>
Happy days!
Trying to follow this tutorial in this book, but the images supplied are not being shown on the page my /views/layouts/ads.html.erb looks like this
<!doctype HTML>
<html>
<head>
<title>Ads: <%= controller.action_name %></title>
<%= stylesheet_link_tag 'default.css' %>
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<h1>MeBay</h1>
<ul id="nav">
<li>All Ads</li>
</ul>
</div>
</div>
<div id="content">
<%= yield %>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer"></div>
</body>
</html>
CSS in /app/assets/stylesheets looks like this
html, body { height: 100%; }
body { background-color: #e6dacf; background-image: url('/images/bg.png'); background-position: top center; background-repeat: repeat-y; font-family: "Trebuchet MS", Arial, san-serif; font-size: 14px; margin: 0; padding: 0; text-align: center; }
a { color: #000; }
a:hover { background: #000; color: #e6dacf; }
div#wrapper { min-height: 100%; }
* html div#wrapper { height: 100%; }
div#header { background: url('/images/bgHeader.png'); height: 100px; padding: 8px 0 0 0; }
div#header div { margin: 0 auto; position: relative; width: 800px; }
div#header h1 { left: 0; margin: 0; position: absolute; }
div#header h1 { background: url('/images/logo.png') no-repeat; display: block; height: 0; margin: 0 auto; padding: 92px 0 0 0; overflow: hidden; width: 319px; }
ul#nav { float: right; list-style: none; margin: 0; padding: 69px 0 0 0; }
ul#nav li { background: #e6dacf; border: solid #000; border-width: 2px 2px 0 2px; float: left; margin: 0 0 0 2px; }
ul#nav a { display: block; padding: 3px 6px 0 6px; text-decoration: none; }
ul#nav a:hover { display: block; padding: 3px 6px 7px 6px; }
ul#nav a.current { padding-bottom: 8px; }
ul#nav a.current:hover { background: #e6dacf; color: #000; cursor: default; }
div#content{ margin: 0 auto; padding: 20px 0; text-align: left; width: 720px; height: 300px}
div#content img { border: 10px solid #000; float: right; margin: 18px 0 0 20px; }
div#content h2 { border: solid #999; border-width: 0 0 5px 0; font-size: 28px; margin: 0; padding: 0 0 10px 0; }
div#content p { margin: 0; padding: 4px 6px 10px 0; }
div#clearfooter { height: 110px; }
div#footer { background: url('/images/bgFooter.png'); height: 110px; margin: -110px auto 0 auto; }
and I placed the supplied images in /app/assets/images
This is how it should look, and also what it looks like for me
http://imgur.com/a/VEryr
You should debug these kinds of problems with either
Chrome Developer Tools
Firebug for Firefox
Both provide excellent support for resolving js / css related issues.
In your particular case, you need to check the Network or Net tabs in the tools to see how the CSS gets loaded. Most likely you'll see an error in loading the stylesheet.
The tool will show you the CSS path its trying to access and you can debug it from there...