Below is my html where i have dropdowns and textboxes along with this in my webpage.The issue is when tabbing from one control to another control all the controls are getting tabbed and highlighted expect the below one.
<div class="cls" id="Col" onclick="Toggle(this);">Highlight me in border</div>
<input type="button" value="Add1" id="btnAdd1" onclick="Add1();" style="width: 120px;" class="newAddNew Tab" />
<input type="button" value="Add2" id="btnAdd2" onclick="Add2();" style="width: 120px;" class="newAddNew Tab" />
css
.Tab:focus{
outline: none;
box-shadow: 0px 0px 5px 2px #61C5FA !important;
}
Related
I have a button that when clicked pops up a jquery-ui datepicker. This works perfectly, is positioned correctly, and all that fun stuff. The calendar is not used for anything specific - it is just there for reference when people need to look at a calendar. The problem is, I want to put the glyphicon-calendar on the button to the left of the word "Calendar" (with one or two spaces between), and I want the style of the button to match the button next to it (css id="headerbutton"). Whenever I do anything through the css or html to implement this, my button just disappears! Any help would be much appreciated.
$("#hiddenField").datepicker({
showOn: "button",
buttonText: "Calendar"
});
#headerbutton {
padding: 5px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
#headerbutton:hover {
background: #586672;
}
#hiddenField {
display: none;
}
<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>
<!-- Buttons to Right in Lower Bar -->
<div class="col-md-4 col-sm-4 col-xs-5" style="text-align: right; margin-top: 20px;">
<button type="button" id="headerbutton">
Assigned Tasks
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>
I spent most of the day getting this button to do what I wanted, and finally found it, between two different posts.
Adding Icons was covered here:
Referencing a Bootstrap icon within jQuery datepicker buttonImage attribute?
Adding CSS successfully to the button came from here:
class for jquery ui datepicker button
And it not only works, it all lines up and looks right! Love this community, but there is SO MUCH here!
$( "#hiddenField" ).datepicker({
showOn: "button",
buttonText: '<i class="glyphicon glyphicon-calendar"></i> Calendar'
});
#headerbutton {
padding: 5px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
#headerbutton:hover {
background: #586672;
}
#hiddenField {
display: none;
}
.ui-datepicker-trigger{
padding: 5px 14px;
color: #ffffff;
background: #2f4050;
border-radius: 5px;
}
.ui-datepicker-trigger:hover{
background: #586672;
}
<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>
<!-- Buttons to Right in Lower Bar -->
<div class="col-md-4 col-sm-4 col-xs-5" style="text-align: right; margin-top: 20px;">
<button type="button" id="headerbutton">
Assigned Tasks
</button>
<!-- Calendar Button - DO NOT MESS WITH THIS -->
<input type="input" id="hiddenField" class="datepicker" />
</div>
I'm new to HTML and I'm trying to replicate Google's home page for practice purpose.
My code is like this:
<div align="right" style="border: 1px solid">
Gmail Images Sign in
</div>
<!-- Google Text -->
<div align="center" style="font-size: 500%; border: 1px solid">
<font color="#4885ed">G</font>
<font color="#db3236">o</font>
<font color="#f4c20d">o</font>
<font color="#4885ed">g</font>
<font color="#3cba54">l</font>
<font color="#db3236">e</font>
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="Text" size="50" />
</div>
<div align="center" style="font-size: 500%; border: 1px solid">
<input type="button" value="Search" size="100" /> <input type="button" value="I'm feeling lucky" size="100" />
</div>
And I'm getting following output:
Output Screenshot
I'm not getting why there is space above my TextBox and above the Buttons.
How do I remove these spaces?
Any help would be appreciated.
Regards,
Parikshit
You've set font-size: 500% so the line height (of the line in the inputs sit on the baseline of) is very tall.
Don't do that.
To avoid coming into any problems with basic css styling when getting to use to browser display try using this every time you use css:
CSS:
*{
padding:0px;
margin:0px;
border:solid black 0px;
color:#5f5;
text-decoration:none;
box-sizing:border-box;
overflow-x:hidden;
}
It is a good way as this helps gain more control of how you want your page to look the only downfall is that using this means you may have to set the attributes from here again into the other css styles as this effects everything.
It may seem like too much but can help in the long run.
My website has borders on many objects using border= activeborder 1px solid and it was working fine till last week on all the browsers. Now it has stopped working just on Chrome (Works on all other browsers). I haven't changed anything in the style sheet and have checked many times but it still does not work for some reason. Here's a sample of the code. If I change activeborder to gray 1px solid it works. Why so ? some kind of google update ?
<html>
<head></head>
<body>
<form id="form1">
<div>
<table style="width: 90px; margin-top: 27px;" cellspacing="0" cellpadding="0">
<tr>
<td style="height: 30px;">
Latest News
</td>
</tr>
<tr>
<td style="border: activeborder 1px solid; padding: 10px" align="left">
<a style="color: #666666;" href="" target="_blank">one</a>
<br />
<a style="color: #666666;" href="" target="_blank">two</a>
<br />
<a style="color: #666666;" href="" target="_blank">three</a>
<br />
<a style="color: #666666;" href="" target="_blank">four</a>
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
activeborder is not a standard css colour name. Using a standard name e.g. gray, or #666 or rgb(50,50,50) should work.
They were included as CSS2 system colours, but are now deprecated (an apparently now don't work). My testing shows that:
background-color: ActiveBorder;
... does work in IE11 and FireFox26 but not in Chrome32. Try seeing if it works in Quirks mode.
Find and Replace is your friend if you want to use css3 standard colors ;)
And ... ahem ... you should be defining your css in a stylesheet, not inline rough idea:
table.grid {width: 90px; margin-top: 27px;}
.grid td {border: 1px solid #999; padding: 5px 10px; text-align: left;}
.grid a {color: #666}
but I'm sure you knew that and were only doing inline for the example ;)
I have a tab pane that is basically a line of 6 images, all floated. They are all red and the bottom border is set to 4px white by default. When a tab is selected, the 4px border turns red. Unfortunately in firefox though, there is a space between the content and the border. Right now it's a button with an image inside of it. The 1px margin between the buttons is intentional and working as expected.
The margin/padding/image-border/etc are all zero, according to the development pane, but there is still a 1px white line between the content and border ?????
You can view the webpage here:
www.bookyoursite.com/more/1
The following is the buttons with their images within:
<div id="buttonContainer">
<button id="button1" class="buttons" onclick="hideAllBut('tab',1)"><img src="/images/buttons/sites.png" /></button>
<button id="button2" class="buttons" onclick="hideAllBut('tab',2)"><img src="/images/buttons/rates.png" /></button>
<button id="button3" class="buttons" onclick="hideAllBut('tab',3)"><img src="/images/buttons/recreation.png" /></button>
<button id="button4" class="buttons" onclick="hideAllBut('tab',4)"><img src="/images/buttons/facilities.png" /></button>
<button id="button5" class="buttons" onclick="hideAllBut('tab',5)"><img src="/images/buttons/ratings.png" /></button>
<button id="button6" class="buttons" onclick="hideAllBut('tab',6)"><img src="/images/buttons/nearby.png" /></button>
</div>
CSS assosiated with the above:
#buttonContainer {
font-size:0;
text-align:center;
border-image-width:0;
}
.buttons{
font-size:inherit;
position:relative;
padding:0;
border:none;
background-color:transparent;
width:90px;
margin-right:1px;
border-bottom:4px solid white;
border-image-width:inherit;
}
.buttons img {
padding:0;
border-image-width:inherit;
}
For completeness I'll include the onclick code ... but this is probably not useful:
function hideAllBut(name,n){ //hides all other items with name, and then displays the selected tab's pane
for (i = 1;i <= 1000; i ++){
p = document.getElementById(name + i);
if (p == null)break;
p.style.display="none";
document.getElementById("button" + i).style.borderBottom="4px solid white"
}
document.getElementById(name + n).style.display="block";
document.getElementById("button" + n).style.borderBottom="4px solid red"
}
In Chrome and IE, the tabs render as desired
Try setting the images to display: block
So, I've gone ahead and added a tooltip on a small lead generation form I've been working on. Everything is going well; however, it seems the positioning on one element is not functioning properly, in Mozilla Firefox. When testing in Chrome, Internet Explorer, and Safari everything goes fine. In Firefox, the tooltip is not placed just above the image that calls it, but rather off to the right and up.
Here is what it should look like:
http://img84.imageshack.us/img84/3930/correctx.jpg
Here is what is shouldn't look like:
http://img198.imageshack.us/img198/5223/incorrectw.jpg
Below is the related code, HTML:
<div id="contact_container">
<h1><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons" src="images/information_icon.png"></a>How can we contact you?</h1>
<input id="phone_number" name="phone_number" type="text" />
<input id="alternate_phone_number" name="alternate_phone_number" type="text" />
<input id="email_address" name="email_address" type="text" />
<div class="vertical_filler_small"></div>
<h2 id="contact_time_subtitle"><a data-tooltip="Click to hide/display the content below." href="#"><img class="information_icons_small" src="images/information_icon_small.png"></a>When should we call?</h2>
<fieldset id="contact_time">
<div class="contact_time_containers" id="contact_time_morning"><input id="contact_time_radio_morning" name="contact_time" type="radio" value="morning" /><span class="contact_time_options">Morning</span></div>
<div class="contact_time_containers" id="contact_time_afternoon"><input checked="checked" id="contact_time_radio_afternoon" name="contact_time" type="radio" value="afternoon" /><span class="contact_time_options">Afternoon</span></div>
<div class="contact_time_containers" id="contact_time_evening"><input id="contact_time_radio_evening" name="contact_time" type="radio" value="evening" /><span class="contact_time_options">Evening</span>
</fieldset>
</div>
And the CSS:
body{background:#0d2635 url('../images/background.jpg') no-repeat center top;font-family:Arial,Helvetica,sans-serif;margin:0;text-align:center;}
h1{color:#fff;cursor:pointer;font-size:18px;font-weight:bold;margin:0;}
h2{color:#ff0;cursor:pointer;font-size:14px;font-weight:bold;margin:0;text-indent:3px;}
input[type="text"]{-khtml-border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;background-image:url('../images/background_text_inputs.jpg');border-color:#195d82 #11415c #6198b7 #1e74a6;border-radius:8px;border-width:1px;color:#aaa;float:left;font-size:12px;font-weight:bold;height:25px;line-height:100%;margin-top:8px;outline:none;padding:0;text-indent:5px;}
input[type="text"]:focus{color:#fff;border:1px solid #ff0;}
input[type="radio"]{cursor:pointer;}
img{border:none;}
img.information_icons{left:-2px;position:relative;top:4px;}
img.information_icons_small{left:-2px;position:relative;top:3px;}
div#contact_container{float:left;width:300px;}
input#phone_number{float:left;margin-right:10px;width:140px;}
input#alternate_phone_number{float:left;width:140px;}
input#email_address{float:left;margin-right:10px;width:280px;}
div.vertical_filler_small{float:left;height:10px;width:300px;}
fieldset#contact_time{border:none;display:block;float:left;}
div.contact_time_containers{cursor:pointer;float:left;margin-right:5px;}
span.contact_time_options{color:#ccc;font-size:14px;font-weight:bold;margin:0;}
a[data-tooltip]:link,a[data-tooltip]:visited{position:relative;text-decoration:none;}
a[data-tooltip]:before{content:"";visibility:hidden;}
a[data-tooltip]:after{-moz-border-radius:10px;-moz-box-shadow:0 8px 6px -6px black;-webkit-border-radius:10px;-webkit-box-shadow:0 8px 6px -6px black;background-color:#294466;border:1px solid #0f2e4d;border-radius:10px;box-shadow:0 8px 6px -6px black;color:#ff0;content:attr(data-tooltip);left:-16px;font-size:12px;padding:5px 15px;position:absolute;top:-20px;visibility:hidden;white-space:nowrap;}
a[data-tooltip]:hover:before,a[data-tooltip]:hover:after{-moz-transition:visibility 0s linear .1s;visibility:visible;}
Try Something Like This in CSS:
#contact_container { Position:relative; }
a[data-tooltip] { Position:absolute; top:0px; /* Set Top Position According to your style*/ Left:0px; /* Set LeftPosition According to your style*/ }
Hope it work for you...