I need your help for an almost entirely css slider.
When I click for the first time on a radio button, no animation is done ... At the 2nd click it's ok. I dont know if is the javascript or css.
Can you help me with this bug?
https://jsfiddle.net/italya/prbtna3o/
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="TEST created with cssSlider, a free wizard program that helps you easily generate beautiful web slideshow" />
</head>
<body style="background-color:#d7d7d7; margin: auto; text-align: center;">
<!-- Start cssSlider.com -->
<!-- Generated by cssSlider.com 2.1 -->
<link rel="stylesheet" href="cssslider5_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider5_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider5_files/csss_engine1/ie.js"></script><![endif]-->
<script type="text/javascript" src="cssslider5_files/csss_engine1/gestures.js"></script> <div class='csslider1 autoplay '>
<input name="cs_anchor1" id='cs_slide1_0' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_1' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_2' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_slide1_3' type="radio" class='cs_anchor slide' >
<input name="cs_anchor1" id='cs_play1' type="radio" class='cs_anchor' checked>
<input name="cs_anchor1" id='cs_pause1_0' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_1' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_2' type="radio" class='cs_anchor pause'>
<input name="cs_anchor1" id='cs_pause1_3' type="radio" class='cs_anchor pause'>
<ul>
<li class="cs_skeleton"><img src="https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg" style="width: 100%;"></li>
<li class='num0 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE1' title='SLIDE1' /></li>
<li class='num1 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE2' title='SLIDE2' /></li>
<li class='num2 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE3' title='SLIDE3' /></li>
<li class='num3 img slide'> <img src='https://st.depositphotos.com/1987177/3470/v/950/depositphotos_34700099-stock-illustration-no-photo-available-or-missing.jpg' alt='SLIDE4' title='SLIDE4' /></li>
</ul><div class="cs_engine">slider by cssSlider.com v2.1</div>
<div class='cs_description'>
<label class='num0'><span class="cs_title"><span class="cs_wrapper">SLIDE1</span></span></label>
<label class='num1'><span class="cs_title"><span class="cs_wrapper">SLIDE2</span></span></label>
<label class='num2'><span class="cs_title"><span class="cs_wrapper">SLIDE3</span></span></label>
<label class='num3'><span class="cs_title"><span class="cs_wrapper">SLIDE4</span></span></label>
</div>
<div class='cs_bullets'>
<label class='num0' for='cs_slide1_0'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide1.jpg' alt='SLIDE1' title='SLIDE1' /></span></label>
<label class='num1' for='cs_slide1_1'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide2.jpg' alt='SLIDE2' title='SLIDE2' /></span></label>
<label class='num2' for='cs_slide1_2'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide3.jpg' alt='SLIDE3' title='SLIDE3' /></span></label>
<label class='num3' for='cs_slide1_3'> <span class='cs_point'></span>
<span class='cs_thumb'><img src='cssslider5_files/csss_tooltips1/slide4.jpg' alt='SLIDE4' title='SLIDE4' /></span></label>
</div>
</div>
<!-- End cssSlider.com -->
</body>
</html>
Thanks a lot
Related
I open my localhost app in
Chrome - working perfectly
Edge - working but some css not supported
Mozilla Firefox version 53.0.3 (32-bit) - White screen.
Now why it's become white screen on Mozilla? Any ideas? Here is my codes:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://localhost:2001/assets/material.indigo-pink.min.css">
<script src="http://localhost:2001/assets/material.min.js"></script>
<style>
.remove-padding{
padding:0px;
}
</style>
<title>Population</title>
</head>
<body>
<dialog class="mdl-dialog remove-padding">
<div class="mdl-card mdl-shadow--6dp">
<form method="post" action="http://localhost:2001/login/process">
<div class="mdl-card__title mdl-color--primary mdl-color-text--white">
<h2 class="mdl-card__title-text">Login</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="email" required id="email" name="email" value="" />
<label class="mdl-textfield__label" for="email">Email</label>
</div>
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" required id="userpass" name="password" />
<label class="mdl-textfield__label" for="userpass">Password</label>
</div>
</div>
<div class="mdl-card__actions mdl-card--border" style="text-align: right;">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
Sign In
</button>
</div>
</form>
</div>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialog.showModal();
</script>
</body>
</html>
Application uses Bootstrap to create logon form below. In mobile devices logon form is too small, centered in mobile screen, lot of white space.
It is difficult to enter user's name and password.
How can I fix this so that the login form looks native in mobile phones also ?
Or is there some template which can used to create usable logon form for any screen resolution ?
<!DOCTYPE html>
<html>
<head>
<link href="/admin/css/redmond/jquery-ui.css" rel="stylesheet" />
<link href="/admin/Content/font-awesome.min.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap.css" rel="stylesheet" />
<link href="/admin/Content/bootstrap-theme.css" rel="stylesheet" />
<title>
Login
</title>
<script src="/admin/Scripts/jquery-1.11.2.js"></script>
<script src="/admin/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/admin/Scripts/bootstrap.js"></script>
</head>
<body>
<div class='login-box container'>
<form action="/admin/Account/LogOn" method="post">
<fieldset>
<legend>Login</legend>
<div class="form-group">
<label for="user">User</label>
<input autofocus="1" class="form-control" id="user" maxlength="10" name="UserName" placeholder="User" required="True" style="width:auto" type="text" value="" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" name="Password" placeholder="Password" required="True" style="width:auto" type="password" />
</div>
<div class="checkbox">
<label>
<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
<input name="RememberMe" type="hidden" value="false" /> Remember me
</label>
</div>
</fieldset>
<input type="submit" value='Logon' class="btn btn-primary" />
</form>
</div>
<script type="text/javascript">
$(function() {
$("input:text:visible:first").focus();
});
</script>
</body>
</html>
HTML5, Bootstrap 3, jQuery, jQuery UI, ASP.NET MVC 4, and Razor are used.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
i have a problem with difference in render html between IE9 and Chrome.
I reviewed all urls of .js and .css and are fine. All files were downloaded from the official website.
This pic is from IE9
This pic is from Chrome
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="public/assets/ico/favicon.png" />
<title>SMG</title>
<!-- Bootstrap core CSS -->
<link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="public/assets/js/html5shiv.js"></script>
<script src="public/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">SMG</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
</div>
<div class="form-group">
<input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
<option data-hidden="true"></option>
<option value="DU">DNI</option>
<option value="LC">LC</option>
<option value="LE">LE</option>
<option value="PA">PA</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<br/>
<div class="alert alert-block alert-danger " style="display: none">
<button type="button" class="close" aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
</div> <!-- /container -->
<script src="public/js/jquery.js"></script>
<script src="public/dist/js/bootstrap.min.js"></script>
<script src="public/js/bootstrap-select.min.js"></script>
</body>
</html>
dont know why. Can anyone lend me a hand? Thank you!
I am writing a PhoneGap application and using Twitter's Bootstrap for responsive design.
The boxes that say campus/account/department are the select boxes. I think it's obvious the problem is how the select boxes are small, and unchangeable when I try things in css like:
select{ height: 30px; /** OR */ lineheight: 30px; }
Screenshot of what the issue is with my select boxes:
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css" href="css/template.css" />
<link rel="stylesheet" type="text/css" href="css/precode.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
<title>P-Card Mobile</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav pull-left">
<li id="titleLogo"><i id="back" class="icon-white icon-angle-left"></i><img src="img/lcbug.png"></img></li>
<li id="titleText"><h4>Blackbriar</h4></li>
</ul>
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropDown">Home <i class="icon-white icon-home"></i></li>
<li class="dropDown">Transactions <i class="icon-white icon-credit-card"></i></li>
<li class="dropDown">Settings <i class="icon-white icon-cog"></i></li>
<li class="dropDown"><a id="logoutBtn" href="index.html">Logout <i class="icon-white icon-off"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div id="templates">
<ul id="templateUl" class="nav nav-pills">
<li class="templi">
<a class="pill">
<text class="temp">Walmart</text>
</a>
</li>
</ul>
</div>
<div id="templateEdit" class="span9">
<form id="codingForm" method="post">
<input id="templateName" type="text" class="tallerInput" placeholder="Template Name" required>
<input id="descriptionField" type="text" class="tallerInput" placeholder="Description" required>
<select id="campusField" required>
<option value="">Campus</option>
</select>
<select id="accountField" required>
<option value="">Account</option>
</select>
<select id="departmentField" required>
<option>Deptartment</option>
</select>
<input id="programNameField" type="text" class="tallerInput" placeholder="Program Name">
<input id="projectIdField" type="text" class="tallerInput" placeholder="Project ID">
<input id="taskIdField" type="text" class="tallerInput" placeholder="Task ID">
<br>
<button id="saveBtn" class="btn btn-large btn-primary">Save</button>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/commonFunctions.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/precodeFunctions.js"></script>
<script type="text/javascript" src="js/precode.js"></script>
</body>
</html>
Update style as follows :
select.custom { min-height: 30px; /** OR */ line-height: 30px; }
change your select tags html as follows :
<select id="accountField" class="custom" required>
<option value="">Account</option>
</select>
I'm creating a form in bootstrap, but as the content expands beyond the screen, the screen doesnt show the scroll control, so i cant see or reach the extra content?!
I've tried setting overflow but it's as if there is no extra content?
To see a live demo: http://jsfiddle.net/8hYVq/
<html>
<head>
<title>Majstorce</title>
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript">
window.__admin_media_prefix__ = "/static/admin/";
</script>
<script type="text/javascript" src="/static/admin/js/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<h1>My test page...</h1>
<ul class="nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div class="container">
<h3>My form</h3>
<div class="row">
<div class="span8">
<form action="" method="POST">
<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='7ea0a3a7726d12e63e4fee21a7d53f21' /></div>
<p><label for="Title">Title:</label> <input id="title" type="text" name="title" maxlength="255" /></p>
<p><label for="Category">Category:</label> <select name="Category" id="Category">
<option value="" selected="selected">---------</option>
<option value="1">Cars</option>
<option value="2">Food</option>
</select></p>
<p><label for="Description">Description:</label> <input id="Description" type="text" name="Description" maxlength="255" /></p>
<p><label for="user">User:</label> <select name="user" id="user">
<option value="" selected="selected">---------</option>
<option value="1">CustomUser object</option>
</select></p>
<p><label for="id_grad">Location:</label> <select name="Location" id="Location">
<option value="" selected="selected">---------</option>
<option value="1">New York</option>
<option value="2">Washington</option>
</select></p>
<p><label for="From">From:</label> <input id="From" type="text" class="vDateField" name="From" size="10" /></p>
<p><label for="To">To:</label> <input id="To" type="text" class="vDateField" name="To" size="10" /></p>
<input type="submit" name="submit" value="Post"/>
</form>
</div>
<div class="span4">asd</div>
<div class="clear" style="clear:both"> </div>
</div>
</div>
</div>
</body>
</html>
As Pavlo Mykhalov hawk eye noticed, the container was part of the navbar class, and hence the error...
Thank you Pavlo!