I'm trying to use CSS sprites but the second element doesn't come out right. I don't understand what I'm doing wrong. I try to set the top property to -45 which should give me the yahoo graphics but it comes out blank. What is wrong?
Mockup
CSS
#googlelink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 0;
}
#yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 -45;
}
If I use the above code then the google link renders ok but the next doesn't where I try to offset to area that should be drawn.
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title></title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<link href="/static/css/common_in2.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
<script type="text/javascript"><!--
function cities(obj) {
if (obj.value == '3') {
//undisplay cities options municipality_control2
document.getElementById('municipality_control').style.display = 'none'
} else {
$('#cities').load('/cities?regionId=' + obj.value);
}
document.getElementById("citiess").className = "selectbox munics ";
}
$(function() {
$("#searchtext").focus();
});
//-->
</script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<section id="searchbox">
<form id="search_form" action="." method="post">
<table><tr><td>
LOG IN</td><td>
<input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}">
</td><td>
<input id="searchbutton" value="Login" class="button" type="submit"></td>
</tr>
<tr><td>
</td><td>YOUR E-MAIL</td><td> PASSWORD</td><td>
</tr>
<tr><td>
CREATE ACCOUNT
</td><td><input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text"
value="{{query}}">
</td><td>
<input id="searchbutton" value="Login" class="button" type="submit"></td>
</tr> <tr><td>
</td><td>YOUR E-MAIL</td><td>DESIRED PASSWORD</td><td>
</tr> <tr><td>
OR LOG IN WITH </td><td><img id="googlelink"> </td><td><img id="yahoolink"> facebook</td><td></td></tr>
</table>
</form>
</section>
</div>
</body>
</html>
Your CSS should be like this:
#yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) no-repeat 0 -45px;
}
Note: give a unit measure..in this case is (px) and set no-repeat.
You miss out giving units to the value, your code should look like following css rule
yahoolink {
width: 102px;
height: 44px;
background: url(/_/img/openidlogos.png) 0 -45px;
}
Your CSS code is working for google is because, when in general writing CSS rules if you are giving values in 0 you dont need to mention unit to those.
but if you are putting numbers rather than 0, then you must mention units to those.
Related
I am a new Django developer. I am trying to overwrite django password_reset_confirm.html page with the below HTML file(change_pwd.html).
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{% static "icon/tab_logo.png"%}">
<!-- Bootstrap -->
<link href="{% static "web/vendors/bootstrap/dist/css/bootstrap.min.css" %}" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="{% static "web/src/css/login.css" %}" rel="stylesheet">
<!-- jQuery -->
<script src="{% static "web/vendors/jquery/dist/jquery.min.js" %}"></script>
</head>
<body >
<div class="vertical-center">
<div class="container">
<div class="row">
<div class=" col-md-4 col-md-offset-4">
<div id="loginbox" >
<h1 class="text-center title">Change Password</h1>
</br></br>
<form id="passwordform" role="form" method="post" action=".">
{% csrf_token %}
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password1" placeholder="password" autocomplete="off">
</div>
<div style="margin-bottom: 25px" >
<input type="password" class="pwd" name="new_password2" placeholder="repeat password" autocomplete="off">
</div>
<div style="margin-top:10px" >
<!-- Button -->
<input id="btn-change-pwd" class="btn btn-primary btn_extend " type="submit" value="Submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have also overwritten the project's Urls.py as below:
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
When I reset password, the page is redirected to admin/templates/registration/password_reset_confirm.html page and then displays below message:
The password reset link was invalid, possibly because it has already been used. Please request a new password reset.
Based on admin/templates/registration/password_reset_confirm.html, this error happens whenever reset_password link is not valid. When I remove {'template_name' : 'change_pwd.html'} from the Url, it works. But I do not know how to fix this error in change_pwd.html.
Django user templates must be inside a registration folder.
Ex: templates/registration/change_pwd.html
Change
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'change_pwd.html'}, name='password_reset_confirm'),
to
path(r'^reset/(?P<uidb64>[0-9A-Za-z_\-]+)/(?P<token>[0-9A-Za-z]{1,13}-[0-9A-Za-z]{1,20})/$', password_reset_confirm, {'template_name' : 'registration/change_pwd.html'}, name='password_reset_confirm'),
I want a Calendar on a HTML Input Text.
I don't want HTML5 or other solutions.
I created a possible solution on this JSFiddle.
<head>
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js"></script>
</head>
<input type="text" name="date1" id="date1" alt="date" class="IP_calendar" title="d/m/Y">
But I'm looking for other alternatives with other styles.
Any suggestion?
Why not doing this (just checked it) :
$(document).ready(function() {
$("#start_datepicker").datepicker();
$("#end_datepicker").datepicker();
});
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
</head>
<body style="font-size:62.5%;">
<form action="sample.php" method="post">
Start Date: <input type="text" name="startdate" id="start_datepicker"/>
End Date: <input type="text" name="enddate" id="end_datepicker"/>
</form>
</body>
</html>
I am just a beginner.
Is there a code to use two different images as buttons to disable and enable . Most examples use two separate buttons but I need to use a single button with two images: one for off and the other one for on.
$(function() {
$("#Enable").click(function(){
$(".div1 *").prop('disabled',true);
});
$("#Disable").click(function(){
$(".div1 *").prop('disabled',false);
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="css/multitoggle.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div class="div1">
Name:<input type="text" id="fullname" value="name"/><br>
<br>
<input type="button" id="button1" value="Submit "/>
<div></div>
</div>
<input type="image" src="assets/trans_off.jpg" id="Enable" value="Enable"/>
<input type="image" src="assets/trans_on.jpg"id="Disable" value="Disable"/>
</body>
</html>
Use image sprite that contains two button images. Use background-position to set what part of image to show.
$(document).ready(function() {
var isDisabled = false;
$('.toggle').click(function() {
isDisabled = !isDisabled; // invert value
$('.div1 input').prop('disabled', isDisabled);
});
});
#button1 {
background: url('http://images.sixrevisions.com/2009/05/04-31_slick_clean_30.png') no-repeat -80px -14px;
width: 246px;
height: 48px;
border: none;
}
#button1:disabled {
background-position: -80px -63px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">
Name: <input type="text" id="fullname" value="name" /><br>
<br/>
<input type="button" id="button1"/>
<div></div>
</div>
<hr/>
<button class="toggle">Toggle inputs</button>
I'm making a webpage for logging in. I have a text element "OR LOG IN WITH" for different providers that I want to align up with the images (google...). I tried setting it vertical align top in CSS but that did not work. Can you help me?
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<table><tr><td>
LOG IN</td><td>
<input name="email" size="35" title="email" type="text"
></td><td> <input name="password" size="35" title="password" type="password"
>
</td><td>
<input value="Login" type="submit"></td>
</tr>
<tr><td>
</td><td><div class="logintext">YOUR E-MAIL</div></td><td><div class="logintext"> PASSWORD</div></td><td>
</tr></form >
<form autocomplete="off" id="create_user" action="/create/" method="post">
<tr><td>
CREATE ACCOUNT
</td><td> <input name="email" value="" size="35" title="email" type="text"
></td><td> <input name="password" value="" size="35" title="password" type="password"
>
</td><td>
<input value="Create Account" type="submit"></td>
</tr> <tr><td>
</td><td><div class="logintext"> YOUR E-MAIL</div></td><td><div class="logintext"> DESIRED PASSWORD</div></td><td>
</tr> <tr><td><div class="logintext2">
OR LOG IN WITH</div> </td><td><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></td><td><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"> </td><td></td></tr>
</table>
</form>
</div>
<div id="recover"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></div>
</div>
</body>
</html>
CSS is available here.
I added in CSS this:
.logintext2 {
position: relative;
top: -15px;
}
it should look like this now, except with actual images, lol.
EDIT
Also, I'm pretty sure that at the top of your CSS you have everything listed and then have this:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
if it is, you can just replace it with an asterisk (*). This just saves you approx. 490 characters, so it will load slightly faster.
First of all remove this class "logintext2" from div tag, And it to td class ="logintext2"
and replace this style
.logintext2 {
vertical-align: top;
}
Pardon my web skills but i have a very rudimentary problem.
I have this html form which should ideally call my /login url with post but for some reason it always sends a get request to that url and fails. I can't figure out how that is happening.
This is my html form
<!DOCTYPE html>
<html class="no-js">
<head>
<title>Login - MobileMedic</title>
<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="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,800italic,400,600,800" type="text/css">
<link rel="stylesheet" href="./css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="./css/jquery-ui-1.9.2.custom.min.css" type="text/css" />
<link rel="stylesheet" href="./css/App.css" type="text/css" />
<link rel="stylesheet" href="./css/Login.css" type="text/css" />
<link rel="stylesheet" href="./css/custom.css" type="text/css" />
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/alert.js"></script>
<script src="./js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/plugins/parsley/parsley.js"></script>
</head>
<body>
<div class="gifload"></div>
<div id="login-container">
<div id="logo">
<img src="./images/logos/logo-login.png" alt="Logo" />
</div>
<div id="login">
<h3>Welcome to Apprick Technologies.</h3>
<h5>Please sign in to get access.</h5>
<form method="post" action="/login" id="login-form" class="form parsley-form" data-validate="parsley">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" name= "Signin" value="Signin"/>
</div>
</form>
</div>
</div>
<!-- /#login-container -->
</body>
To make the question more clear i use express js with parse.com and here are the two routing defined
app.get('/login', function(req, res) {
res.send('get is called');
});
app.post('/login', function(req, res) {
res.send('post is called');
});
Now no matter what i provide in my form method i always get "get is called" in the browser on submitting the button.
I also tried to debug what is happening in by the developer console and this is what i get
I tried your code and it is working as a "POST" request. Try changing your request to "GET" and you can notice in the URL that it has something like this at the end "?Signin=Signin".
Include a "name" attribute to your input tags.
Sample:
<input type="email" name="email" class="form-control" id="email" placeholder="Email" required="required">
And you can see something like this upon submitting the form:
/login?email=testemail%40test.test&Signin=Signin