I just started doing some jquery and php and I followed the tutorial from Udemy on how to build some php web site. Now I want to animate the li elements so that their border-radius changes on mouseenter().
Here is my code:
$(document).ready(function() {
$('.list_el').mouseenter(function() {
$(this).animate(borderRadius(300), 200);
});
function borderRadius(radius) {
return {
borderTopLeftRadius: radius,
borderTopRightRadius: radius,
borderBottomLeftRadius: radius,
borderBottomRightRadius: radius,
};
}
});
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
But when I enter the mouse on any of the li element (menu,contact..) it doesn't animate, I mean when I press F12 and target the li it shows me that the border-radius is changing but on the website it doesn't curve the border. So what am I doing wrong?
Just in case :
The animation works, it just has no visual effect: your a elements contains all the style, you'll see some change if you animate the a's border-radius or if you put overflow: hidden for list_el
$('.list_el').mouseenter(function() {
$(this).find("a").animate(borderRadius(300), 200);
});
this will work for instance
http://codepen.io/anon/pen/PGPrgY
You should use mouse enter and leave event together
$('.list_el').on("mouseenter", function() {
$(this).find("a").animate(borderRadius(300), 200);
}).on("mouseleave", function() {
$(this).find("a").animate(borderRadius(0), 200);
});
On any modern browser, you can also achieve this transition with simply:
.list_el:hover a {
border-radius: 300px;
transition: 0.2s;
}
That animates the border-radius of the contained a element over a period of 200ms when the .list_el containing the a is hovered.
Note that this assumes you were planning to add a mouseleave handler that undoes the border-radius. It doesn't apply if you were planning to leave the updated radius in place when the mouse leaves the element.
Example using 1s rather than 0.2s so it's more obvious:
#nav {
margin: -27px 0 0;
margin-top: 50px;
}
#nav ul {
display: inline-block;
text-align: left;
list-style: none;
}
#nav ul li {
display: inline-block;
width: 90px;
height: 44px;
margin: 0 10px;
text-align: center;
}
#nav ul li a {
display: block;
padding: 10px 15px;
color: white;
border: solid 2px white;
background: #353535;
outline: solid 2px #353535;
text-decoration: none;
}
#nav ul li a:hover {
background: #8ca757;
outline: solid 2px #8ca757;
}
.list_el:hover a {
border-radius: 300px;
transition: 1s;
}
<div id="nav">
<ul id="my_navbar">
<li class="list_el">Home
</li>
<li class="list_el">Team
</li>
<li class="list_el">Menu
</li>
<li class="list_el">Contact
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
if you visit here , on top right, we can see र - INR.
once we hover on that it will display options in normal color . that's fine.
if you take mouse away and again hover for some times, if you keep repeating this for sometimes,
than it will display options in light color :
phtml
<div class="form-language">
<ul id="select-language" title="<?php echo $this->__('Currency') ?>" class="dropDownMenu">
<li><?php echo $selCurrency ?>
<ul>
<?php echo $lis ?>
</ul>
</li>
</ul>
</div>
<?php endif; ?>
js
jQuery(document).ready(function () {
jQuery('#select-language li').hover(function() {
jQuery(this).children('ul').stop(true, false, true).fadeToggle(300);
});
});
css
.menuBackground {
background: brown;
text-align: center;
}
.dropDownMenu a {
color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.dropDownMenu li {
position: relative;
width: 120px;
text-align:left;
}
.dropDownMenu a {
padding: 10px 20px;
display: block;
text-decoration: none;
}
.dropDownMenu a:first-child {
color: #000;
font-weight:bold;
}
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
margin-left: 0;
}
.dropDownMenu ul {
box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
text-align: left;
display: none;
background: #FFFFFF;
position: absolute;
top: 100%;
left: 0;
width: 120px;
z-index: 999999;
}
.dropDownMenu li a:hover {
background: #ff7704; /*Your color*/
color: #000; /*Your color*/
}
See whats happening is when you hover mouse on it, your function runs and who are using fadeToggle(300) which slows down the function. So this bug will not come if you hover and stay the mouse on the element and then gently remove it after a while.
But you should not bound use to do so, hence you should try using this
jQuery(document).ready(function () {
jQuery('#select-language li').hover(function() {
jQuery(this).children('ul').fadeIn();
}, function(){
jQuery(this).children('ul').fadeOut();
});
});
I think you have to change this line in this way:
jQuery(this).children('ul').stop(true, true).fadeToggle(300);
I would like to have my hovering/sticky navigation bar appear when a reader/web visitor has scrolled passed the blog header, instead of the navigation bar appearing at all times, as it currently does. I'm not entirely sure how to achieve this affect as I have done research on this but to no avail, but I am certain it is completely doable. I have seen this effect on two blogs, one of which is hosted on Blogger, the URL of these sites are as follows : http://www.theweekendattic.com/ and http://mediamarmalade.com/. The URL to my own blog is as follows : http://www.blankesque.com
The CSS and HTML coding for the hovering navigation bar currently on my site is detailed below :
#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position: fixed;
background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
}
#wctopdropnav{
float: left;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
padding: 10px 6.5px 6.5px 6.5px;
background:#f5f5f5;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#494949;
float: left;
display:block;
text-transform: uppercase;
font-size: 10.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li:first-child a {
font-weight: bold!important;
margin-left: 20px;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color: #a6a6a6;
font-weight: normal;
padding: 5px;
background: #f5f5f5;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10.5px;
background:#f5f5f5;
color: #494949;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #a6a6a6;
background: #f5f5f5;
filter: #f5f5f5;
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#socialmediabuttons {
display: block;
float: right;
position: relative;
margin: 0.9% -1% 0 0;
}
#socialmediabuttons a {
padding: 0 0 0 18px;
}
#socialmediabuttons a:hover {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/search/label/Advice'>Advice</a></li>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
<div id='socialmediabuttons'>
<a href='https://www.pinterest.com/blankesque' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='20px'/>
</a>
<a href='https://www.twitter.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='20px'/></a>
<a href='http://www.bloglovin.com/blogs/blankesque-14431777' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='20px'/></a>
<a href='https://instagram.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='20px'/></a>
</div>
</div></div>
You can use jQuery fadein/fadeout in scroll event:
$(document).ready(function(){
$(".navbar").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
I have a website that has a dropdown menu and an input box. For user comfort, I am thinking it would be nice to have it so that when the user clicks on an option in the dropdown menu, the mouse cursor is immediately focused inside the input box so that they can begin typing right away, rather than having to click into it every time.
How can this be achieved?
Here is my Jsfiddle: http://jsfiddle.net/mlynn/jyrbepyz/3/
Thank you.
HTML
<section id="heady">
<div style="text-align: left;padding:25px 70px;display:inline-block;float:left;"><b>Site</b></p></div>
<div style="text-align: right;padding:25px 70px;display:inline-block;float:right;">
Home |
Generic |
Elements |
Sign Up
</div>
</section>
<section id="wrapper">
<br><br>
<img src="images/blacksquare.png" width="525" height="197"></img>
<br><br><br>
<div>
<div style="vertical-align:top;display:inline-block;float:left;">
<ul class="navbar cf">
<!-- <li>item 2</li> -->
<li style="width:200px;">
#
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</li>
</ul>
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" id="todo" placeholder="Enter a To-do and hit enter">
</form>
<br>
<!-- <ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul> -->
</div>
<div class="container lister" style="display:inline-block;float:left;vertical-align:top;padding:0px 0px 0px 10px;">
<ul class="active">
<li>Work X</li>
<li>Sleep X</li>
<li>Repeat X</li>
</ul>
</div>
</div>
<div class="Category1">
<!--list items that user assigned "1" from dropdown menu would be placed in this div-->
</div>
<div class="Category2">
</div>
<div class="Category3">
</div>
<div class="Category4">
</div>
<div class="Category5">
</div>
<div class="Category6">
</div>
<div class="Category7">
</div>
</section>
<section id="feety">
I believe I exist
</section>
CSS
/*adder*/
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
* {
padding:0;
margin:0;
}
html {
background:teal;
}
body {
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #D9D9D9;
text-decoration: none;
}
a:active, a:hover {
text-decoration: underline;
}
#heady {
text-align: center;
width:100%;
height:75px;
background-color:#222; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
#wrapper {
text-align: center;
width:1000px;
height:1000px;
margin-left:auto;
margin-right:auto;
background-color:teal; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
position:relative;
}
#feety {
text-align: center;
width:100%;
height:100px;
background-color:darkslateblue; /*Back Colors*/
font-family: Tahoma;
font-size: 16px;
color:white;
position:relative;
}
.Category1 {
background:blue;
}
.Category2 {
background:green;
}
.Category3 {
background:yellow;
}
.Category4 {
background:orange;
}
.Category5 {
background:purple;
}
.Category6 {
background:gold;
}
.Category7 {
background:maroon;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
background:white;
border-style:solid;
border-color:gray;
border-width:1px;
width: 200px;
border-radius: 4px;
}
.ActiveListItem:after {
content: "\25BC\00a0\00a0"; /*carat and spaces*/
float:right;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
ul.navbar li a.ActiveListItem {
background:white !important;
color:black;
border-style:solid;
border-color:white;
border-radius:4px;
padding:3px 5px !important;
font-weight:normal !important;
margin-left:14px;/* got the activeitem centered with the list text this way*/
margin-right:0px;
}
ul.navbar li {
position: relative;
}
ul.navbar li a {
display: block;
color: white;
padding:10px 5px;
text-decoration:none;
transition: all .2s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
background:#a6d0e1; /*Leaving for now, but keep in mind things bold slowly when you change this to gradient*/
color: #333;
font-weight:900;
}
ul.navbar li ul {
margin-top: 1px;
position: absolute;
background: #222;
font-size: 14px;
min-width: 200px;
display: none;
z-index: 99;
box-shadow: inset 0 2px 3px rgba(0,0,0,.6),
0 5px 10px rgba(0,0,0,.6);
}
ol, ul { list-style: outside none none; }
.hidden { display: none; }
/*Lister*/
.container {
width: 60%;
margin: 0px auto;
}
form { }
input,
ul {
background: #eee;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
font-family:"Tahoma";
}
input {
padding: 10px 10px 10px 20px;
border: 1px solid #ccc;
}
.lister ul {
list-style: square inside;
padding: 10px;
}
.active { border: 1px solid #ccc; }
.inactive { display: none; }
.lister li {
padding: 10px;
font-weight: 600;
color: #34495e;
}
.lister li:nth-child(odd) {
background: #dadfe1;
border-radius: 5px;
}
.lister li > a {
float: right;
text-decoration: none;
color: #22313f;
font-weight: bold;
transition: all .2s ease-in-out;
}
.lister li > a:hover {
font-size: 110%;
color: #c0392b;
}
.lister li:before {
content: "#"; /*carat and spaces*/
float:left;
font-weight:900;
padding: 0px 0px;
font-size:100%;
line-height:20px; /*keeps carat in center of text*/
}
JS
// sub menus identification
$(function() {
$('.navbar ul li a').click(function(){
$('.navbar > li:first-child > a').text($(this).text());
$('.navbar > li > ul').addClass('hidden');
$('.navbar li ul').slideToggle(100);
});
$('.navbar > li').mouseenter(function(){
$(this).find('ul').removeClass('hidden');
});
$('.ActiveListItem').click(function(){
$('.navbar li ul').slideToggle(300);
});
});
//newList
$(document).ready(function() {
var ul = $('.lister ul'),
input = $('input');
input.focus();
$('form').submit(function () {
if (input.val() !== '') {
var inputVal = input.val(),
activeNumber = $('.ActiveListItem').text();
if (activeNumber == "1") {
/*I guess the fantasy code goes here...?*/
}
ul.append('<li>' + activeNumber + ' ' +inputVal + 'X</li>');
if (ul.hasClass('inactive')) {
ul.removeClass('inactive')
.addClass('active');
}
};
input.val('');
return false;
});
ul.on('click', 'a', function (e) {
e.preventDefault();
$(this).parent().remove();
if (ul.children().length == 0) {
ul.removeClass('active')
.addClass('inactive');
input.focus();
}
});
});
You're using var ul = $('.lister ul')
Go take a look where is your .lister and the child ul in your HTML
I mean you probably want to target the needed DROPDOWN UL anchors
using the right selector:
$(".navbar.cf li ul li").on("click", "a", function(e){
e.preventDefault();
input.focus();
});
http://jsfiddle.net/jyrbepyz/5/
this is my html page :
<link href="http://fonts.googleapis.com/css family=Source+Sans+Pro:700|Dosis:400,600" rel="stylesheet" type="text/css"/>
<link href="styles/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" href="../gdigit_icon.png"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type='text/javascript' src='scripts/respond.min.js'></script>
<script src="scripts/steps.js"></script>
</head>
<body id="dienstenpage" onload="design()">
<div id="wrapper" >
<div id="topnav" >
<ul>
<li>WELKOM</li>
<li>DIENSTEN</li>
<li><a href="contact.html" title=" contacteren >CONTACT</a></li>
<li><a href="referenties.html" title="Algemene voorwaarden >REFERENTIES</a></li>
</ul>
</div>
<!-- "content" -->
<div id="content" >
<h2>webdesign stappenplan</h2>
<ul id = "issues">
<li>
<h1>Plan</h1>
<p>tekst</p>
<p>tekst</p>
<p> </p>
<a class="next" href="#">next</a>
</li>
<li>
<h1>Design</h1>
<p>tekst</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Build</h1>
<p>tekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Refine</h1>
<p>Atekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Launch</h1>
<p>Wtekst</p><p> </p>
<a class="previous" href="#">prev</a>
</li>
</ul>
and this is my external js. file
function design() {
var theImage = $('#issues li');
var theWidth = theImage.width();
var theHeight = theImage.height();
var count = $('#issues').children().length;
//wrap into mother div
$('#issues').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: 'relative',
overflow: 'hidden' ,
});
//get total of image sizes and set as width for ul
var totalWidth = count * theWidth;
$('#issues').width(totalWidth);
$('#issues li').width(theWidth);
$('#issues li').on("swipeleft",function(){
var ind = $(this).index() ; if (ind +1 < count ) {
$(this).parent('ul').animate({marginLeft: (-(ind + 1 ) * theWidth)}, 500);}
});
$('#issues li').on("swiperight",function(){
var ind = $(this).index() ; if (ind > 0 ) {
$(this).parent('ul').animate({marginLeft: (-(ind -1) * theWidth)}, 500);}
});
$('#issues li a').click(function() {
var ind = $(this).closest('li').index() ;
if($(this).is(".next")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind + 1) * theWidth)}, 1000);
}
else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind - 1) * theWidth)}, 1000) ;
}
else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({marginLeft: (0) }, 1000)
}
});
}
what is happening :the slider works fine , but when i want a link of the top navigation, it puts the asked page under the slider in stead of opening it normal. each page of alink i choose from the top navigation goes under the slider ....
when i putted the javascript inside the html , everything worked fine .
and this is my css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------- */
/* Global */
/* -------------------------------- */
body {
background-color: #eeeeee;
background-position: center center;
background-attachment:fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Dosis , serif;
}
#dienstenpage { background-image:url('../images/comp03.png'); }
#indexpage { background-image:url('../images/comp05.png'); }
#dienstenpage { background-image:url('../images/comp03.png'); }
#contactpage { background-image:url('../images/comp02.png'); }
#referentiepage { background-image:url('../images/comp01.png'); }
/* --------------------------- */
/* containers */
/* --------------------------- */
/*wrapper */
/*--------*/
#wrapper { width: 96%; max-width:920px; margin : auto ;padding:2%; height:100%; }
/*topnav*/
/*------*/
#topnav { font-size :18px; min-height:10%;}
#topnav ul { width: 100% ; float : left ; padding: 10px 0px; }
#topnav ul li { display:inline-block;}
#topnav ul li a { float: left; padding: 10px 40px; text-decoration:none;letter-spacing: 1px;}
#topnav a:link { color:#FFFFFF;}
#topnav a:visited { color:#FFFFFF;}
#topnav a:hover { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:active { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
.currentLink { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
/*gdigit*/
/*-------*/
#gdigit { float:left; width :100% ; text-align: left;color: #ffffff; }
#gdigit h4 { font-size: 100px ; padding : 0px 40px; }
.style1 { color: #C5AA6A;}
.style2 { color: #85D1DD; font-size: 70px;}
.style3 { color: #000000;}
.style4 { font-family:'Source Sans Pro';text-shadow: 1px 1px 0px rgba(71, 112, 119, 0.5);}
.style5 { font-family:'Source Sans Pro';}
/*content*/
/*-------*/
#content { float:left; width :100% ; padding : 10px 0px ;margin-top:0px; color: #ffffff; height: 60vh; }
#content h1 { font-size: 30px ; color: #ffffff; padding-top :30px ; padding-bottom :30px ;text-align: left; }
#content h2 { font-size: 22px ; color: #ffffff; padding :20px 40px 10px 40px; text-align: left;text-transform:uppercase; letter-spacing:2px; }
#content h3 { font-size: 16px ; color: #ffffff; padding-top :20px ; padding-bottom :20px ;text-align: left; }
#content h4 { font-size: 100px ; font-weight:bold; text-align: center; }
#content p { font-size: 22px; color: #ffffff;line-height:170%;text-align:justify;padding :0px 40px 0px 40px;}
#container01 { float:right; width :70% ;text-align:center ;margin-top: 100px; }
#container01 p { font-size: 22px; color: #ffffff;line-height:170%;padding :0px 40px 0px 40px;text-align: center ;}
.tekstkolommen { overflow: hidden; padding:0px ; width:100%; }
.kolomlinks { float:left; width:35%; }
.kolomrechts { float:right; width:63%; }
.kolomlinks div, .kolomrechts div { margin:0px; padding:8px 0px 0px 40px; font-size:18px; }
.coli { font-size: 22px; color:#FFFFFF;text-align : left;line-height:210%;padding-left:40px;}
.staplink { color:#FFFFFF; background: rgba(204, 204, 204,0.4);text-transform:uppercase;text-decoration:none;letter-spacing:3px;}
a:link { color:#FFFFFF}
a:visited { color:#FFFFFF}
a:hover { color:#FFFFFF}
a:active { color:#FFFFFF}
a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#content ul li { font-size: 20px;line-height:170%; }
#content ul { padding-top:10px;}
#issues { }
#issues li {list-style: none; float: left; position:relative; color: #FFFFFF; }
#issues li a {text-indent:-9999px; }
#issues li a.next { position:absolute; right:0px; top :100px; width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 25px solid #85D1DD; }
#issues li a.previous { position:absolute; left: 0px; top :100px;
height: 0;
border-top: 40px solid transparent;
border-right: 25px solid #85D1DD;
border-bottom: 40px solid transparent; }
#issues li a.startover{position:absolute; right:20px; top :0px;}
#issues li h1 { color: #FFFFFF; font-size: 22px;margin-left: 40px;margin-right: 40px;color: #ffffff; text-transform:uppercase; }
#issues li p { font-size: 20px; font-weight: normal;color: #ffffff; line-height:170%; text-align:justify; }
/*forms */
/*------*/
form { color:#FFFFFF;width:100%; }
submit,input,textarea{background: rgba(204, 204, 204,0.6);color :#FFFFFF; padding: 3px;width:70%; border:1px solid #FFFFFF;font-size:20px;font-family:Dosis,serif; }
.style6 { margin-top: 30px; margin-left:25%; width:72%; }
#contact-form ol { list-style-type:none;}
#contact-form ol li { font-size:20px;}
#contact-form p { float:left; font-size:20px; width: 100%;}
#contact-form label { float:left; width:25%;}
#contact-form li { margin-top:5px; }
#fout
/*footer*/
/*------*/
#footer {clear:both;width:100% ; color : #FFFFFF; font-size:11px; }
#footer h4 {font-size: 100px ; font-weight:bold; text-align: left; }
/* Media Queries */
#media screen and (min-width: 481px) and (max-width: 800px)
{
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
.kolomlinks { width:42%; }
.kolomrechts { width:58%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style6 { margin-top: 20px; margin-left:0; width:50%; }
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}
#media screen and (max-width: 480px)
{
#dienstenpage { background-image:url(../images/compmob3.png); }
#indexpage { background-image:url(../images/compmob5.png); }
#dienstenpage { background-image:url(../images/compmob3.png); }
#contactpage { background-image:url(../images/compmob2.png); }
#referentiepage { background-image:url(../images/compmob1.png); }
#topnav { padding-top: 5px;padding-bottom : 0px;}
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
#content { margin-top:10px;padding-top : 0;margin-bottom :30px;}
#content p { font-size: 18px; color: #ffffff;line-height:110%;text-align:justify;}
#container01 { float:left; width :100% ;text-align: center ;margin-top: 0px;}
#container01 p { font-size: 18px; color: #ffffff;line-height:100%;text-align: justify ;padding-bottom:10px;}
#content h4 { font-size: 70px ; font-weight:bold; text-align: center; }
.style2 { color: #85D1DD; font-size: 45px;}
.style3 { color: #000000;}
.style4 { background: rgba(204, 204, 204,0.2); }
.style6 { margin-top: 10px; margin-left:0; width:100%; }
.kolomlinks { float:left; width:100%; }
.kolomrechts { float:left; width:100%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style5 { margin-top: 10px; width:100%; margin-left:0;background: rgba(204, 204, 204,0.3);}
#footer { clear:both; width:100% ; color: #FFFFFF; position : relative; min-height : 150px; }
#footer h4 { font-size: 50px ; font-weight:bold; text-align: center;height :60px;}
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}
when you add bootstrap with jQuery Mobile it will create some conflict, It may disturb your css or some jquery event, so you are recommended to use just custom feature when you use jQuery Mobile in your template,
http://jquerymobile.com/download-builder/
you can create your custom jQuery mobile file, and check only those feature you want in your mobile.
Many Thanks