We Keep Coding

Need to create a button for a link using jquery [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am having a link on the website which says "USE CURRENT LOCATION". I want to change that link to a shape of button.
ID of the button is btnGeolocation
You can have a look at that link in this page https://order.subway.com/Stores/Find.aspx?pid=1#pg1

Html for button
button
and css
.link{
text-decoration:none
font-family: "Lato", sans-serif;
font-size: 18px;
font-weight: normal;
}
.link:hover{
text-decoration:none;
padding: 10px 25px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border: none;
outline: none;
position: relative;
text-align: center;
text-decoration: none;
color: #fff; }
.link:hover {
box-shadow: 0 4px 0 0 #f9b980, 0 2px 0 0px #f9b980;
background-color: #fc983f; }
.visual-button:active {
top: 5px;
box-shadow: 0 0px 0 0px #f9b980, 0 0px 0px 0px #f9b980; }

add this to your stylesheet! it should work... edit the css to get the shape you want!
#divSearchLocation #btnGeolocation{
border: 1px solid #b5b5b5;
border-radius: 100px;
padding: 8px;
background: #e1e1e1;
box-shadow: inset 0px -18px 25px -18px black;}

No jquery required here. Use CSS border and background property, you will achieve the result.

You can use only CSS to do that,
Check out this link :
https://www.freshdesignweb.com/css3-buttons/
I hope this could help you

My href link buttons don't work online

I've just creted my first website in HTML5 and javascript and all the links work offline (double and triplechecked it), but when I uploaded it onto the host server, none of the links work. Could anyone give me any suggestions? Here's and example of my link buttons:
<div>
<center>
<button style="margin-top:10px;margin-bottom:10px;height:25px;width:100px;font-size:14px">Books</button>
</center>
</div>

You put an anchor tag inside a button. I assumed that you want to redirect the user if they click on the button. You can do something like this:
Example 1:
<button type="button">Click on me</button>
Example 2: (Recommended)
<button type="button" onclick="location.href='page.html'">Click on me</button>
I hope this will help you!

Or else you can also add anchor tag with css that makes it look like a button
Click on me
.btn:active {
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
.btn{
display: inline-block;
zoom: 1;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
JSFiddle

How to make to border-bottom line longer with CSS

I would like to extend the border-bottom line longer than ever as the image below:
If this is impossible and you have any suggestion to make a change into my code, that would be great.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td class="text_plant_address"> <span class="text_plant">Plant 1</span>
<br /> <span class="text_address">Street 2, Dong An Industrial Park</span>
</td>
</tr>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 10px;
width: auto;
border-collapse: collapse;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
table tr .text_plant_address {
background-color: #FFF;
width: 175px;
height: 175px;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 87.5px;
width: auto;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
}
table tr td .text_address {
font-size: 10px;
}
Here is my JSFIDDLE: http://jsfiddle.net/QTNr5/
2.Does anyone know the name of the font below?

Just add Padding
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding: 0 20px; /* or how longer you want */
}
Fiddle
For the font -
1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.
2) If its on some web page inspect it via firebug or any other code inspection tool.
3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.
4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.
I hope any of these will help you.

You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/
table tr td .text_plant {
}
table tr td .text_address {
font-size: 10px;
border-top: 1px solid #D0D0D0;
padding-top: 4px;
}
Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding:0 20px;
}

if you want your solution in any how..
then i will recommend this..
Use 3 before plant 1 and 3 after that..
like this
<td class="text_plant_address"> <span class="text_plant"> Plant 1 </span>
i know its not best answer but hope it will help and you can increase according to u

You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.
http://jsfiddle.net/mrNXW/
<td>
<div class="plant">Plant 1</div>
<div class="address">Street 2, Dong An Industrial Park</div>
</td>

The font you're looking for I believe is this:
http://www.dafont.com/ballpark-weiner.font

<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>
You can use pseudo element to draw the red part :
http://codepen.io/anon/pen/axvgl/
td {
text-align:center;
}
.text_plant {
font-size:2em;
border-bottom:solid white;
box-shadow:
0 1px 0 gray,
inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
content:'';
display:inline-block;
width:1.25em;
box-shadow:inherit;
border-bottom:solid red;
margin-bottom:-3px;/* size of border*/
vertical-align:bottom;
}
Or use gradient http://codepen.io/anon/pen/ftmDn/
td {
text-align:center;
}
.text_plant {
display:inline-block;
font-size:2em;
padding:0 1em;
box-shadow:
0 1px 0 gray;
background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
background-size:100% 3px, 100% 4px ;
}

Sure, try adding: padding: 10px 0 to the <span>.

Replacing a CSS class with Javascript?

Similar to a previous question but I gave up on that an decided to come back to it later, now things are different as I'm using jQuery. I'm having a dropzone on my site and for image files I would like there to be a border shadow, but for files I don't want one. Multiple files can be dropped and the previews display inline, so say if 2 images and one file were dropped, I would want the shadow on both the images, but not the file preview box. I made 2 CSS classes, identical except for the shadow:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
.dz-preview-noshadow {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
Simplest way to go seemed to be with jQuery and I was using it in the project anyway, so I made this (.dz preview is the default class):
mydropzone.on("addedfile", function(file) {
if (!file.type.match(/image.*/)) {
$('.dz-preview').addClass('dz-preview-noshadow').removeClass('dz-preview');
mydropzone.emit("thumbnail", file, "http://i.local.dev:5000/jLNutaV.png")
}
});
It works initially-but goes wrong. I drop 2 images and they get their shadowed border just fine, but when I drop a file, it loses its shadow, which is what I wanted - but so do the two images that were dropped before it. If I drop another image it will get its shadow again, but the previous elements don't change. I know I'm missing something really stupid here about the scope of how JS is affecting these classes, but is there a way to change the class for JUST that instance, without muddling up everything before it, or do I need to run more checks and manually add the class back on?

Can't post codes in comments, so I'll make it an answer.
Since .dz-preview and .dz-preview-noshadow shares a lot of same codes, you can have a class that just holds the shadow. For eg:
.dz-preview {
background: transparent;
position: relative;
display: inline-block;
margin: 40px;
vertical-align: top;
border: 1px solid transparent;
padding: 10px 13px 10px 10px;
}
.shadow {
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
}
So instead of adding and remove, you can just do a remove.

after you have clicked or hovered can you change state?

trying to make an input box do the following: normal sate the input box text is x, hover state the input text is y and was you leave the box its z and can stay z through all states again.
-update
have a search box which the background image and text are faded out, once you hover it is is vivid, once you focus it, it is vivid with a 2px border, but once you leave it i loose verything:( so need a trick to get it to stay vivid the background picture (of which there are x and y, one for each state) and the text but loose the 2px border
---UPDATE ---
/* Search box */
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -5px #f8f8f8;
width:240px;
margin-right:4px;
margin-left:11px;
color:#cccccc;
vertical-align: top;
padding: 4px 2px 4px 79px;
border-color: #4FA4F9;
}
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #f8f8f8;
color:#888888;
}
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -6px #ffffff;
width:239px;
color:#888888;
padding: 3px 2px 3px 78px;
}
.searchbox.blur {
background: url(../images/search-greyb.gif) no-repeat 6px -5px #ffffff;
width:239px;
color:#000000;
padding: 4px 2px 4px 79px;
}
#-moz-document url-prefix() {
.searchbox {
background: url(../images/search-grey.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:hover {
background: url(../images/search-greyb.gif) no-repeat 6px -4px #f8f8f8;
}
}
#-moz-document url-prefix() {
.searchbox:focus {
background: url(../images/search-greyb.gif) no-repeat 5px -5px #f8f8f8;
}
}
input::-moz-focus-inner /*Remove button padding in FF*/
{
border: 0;
padding: 0;
}
input, select, textarea {
margin: 1 0 0;
}
input, textarea, .date {
border: 1px solid #aaa;
border-radius: 3px;
color:#333;
}
input {
font-size: 13px;
padding: 0px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 4px 4px 4px 4px;
}
select:hover {border: 1px solid #4FA4F9;}
input:hover {border: 1px solid #4FA4F9;}
textarea:hover {border: 1px solid #4FA4F9;}
select:focus {padding: 0px;}
input:focus {padding: 0px;}
textarea:focus {padding: 3px 3px 3px 3px;
}
--- html ---
<input id="searchdomain" name='domain' type="text" style="font-size:15px;" class="searchbox"/>
---js----
/* Search Box Leave */
$(".searchbox").blur(function(){
$(this).addClass("blur");
});

You could do this using jQuery by setting a class.
$(".searchable").blur(function() {
$(this).addClass("blur");
});
Then in your css you can set the color like this
.searchable.blur
{
color:#000;
}
​
Here is a jsfiddle example -> http://jsfiddle.net/y46Wk/2/
Just bear in mind that the element won't show its hover color again unless you remove the class.

This isn't really an answer to your question.... but I have a feeling you're doing some validation on a form, so why not look at a jQuery validation plugin like this
http://docs.jquery.com/Plugins/Validation
Here is a list of other form related jQuery stuff
http://speckyboy.com/2010/06/22/50-jquery-plugins-for-form-functionality-validation-security-and-customisation/
If none of them help, perhaps you could tell us which one comes close to give us a bit of a clue as to what you want ;-)

Are you trying to do this: http://jsfiddle.net/akhurshid/y46Wk/4/

What you are describing (maintaining a state) is technically possible with just CSS.
Here is an article explaining the process.
In summary you use a transition state, triggered by focus, to keep styles applied to the element. I'm not advocating it as the best method, but it is really quite interesting to see what you can do with CSS3 properties.
More of a curiosity than a straight answer but hopefully its helpful to you / others who hit this question :)