I have created a HTML table with a fixed header and scrollable body. I want to style the scrollbar to look like the attached image.table design
Using webkit, I have changed to colour of the scrollbar but i don't know how add the circle.
::-webkit-scrollbar {
width: 15px;
background-color: #00467f; }
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
background-color: #00bce4;
outline: 1px solid slategrey;
z-index: 10; }
Can this be achieved using only HTML, CSS and Pure Javascript?
With a width: 30px; and height: 30px;, border-radius: 30px; gives you a circle, maybe that helps in getting creative.
I am using the below css for my menu items. I need to highlight the active page in the menu bar. Can anyone correct the css. Or can I achieve using javascript or some type script?
#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #menu ul {
height: 1%;
}
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
This can't be done only via css you need to use some jQuery or PHP to add an active class to the current page link and then style it via css
Check these
Stackoveflow question with same problem
Solution from css tricks
Why all the tricky JavaScript or jQuery? This can be done so easily with some simple CSS and HTML.
Create a CSS class for the active page, for example:
.active{
background-color:white;
color:red;
}
Then on each of your pages, add the class .active in your navbar to whichever menu item is the current page, for example:
** On the Update page:**
<div id="menu">
<ul>
<li><span>Home</span></li>
<li><span>Save</span></li>
<li><span>User</span></li>
</ul>
</div>
So on each page whichever <li> in your navbar is the current page just simply add class="active" as shown above.
Two basic things must happen:
Function to be triggered.
Then the function must somehow affect the styling.
There are probably many ways to do this. But what's the best way? Let's look at some various options
Function to be triggered
onclick manually embedded into each of the menu elements
Dynamically inject onclick event into each menu item when the document loads
Event listener for a certain type of element
Event listener for a class
Multiple event listeners for a specific id for each menu item
In any case, you either need an onclick event, or an event listener. The onclick is more direct.
<a onclick="myFunction()">Home</a>
This way, you look at the HTML, and you immediately know that an onclick event is tied to it. Whether the trigger for the function is embedded in the HTML element, or and event listener in a <script> tag, either way, there must be a way to identify the element in order to change the style. So, the element needs an id.
<a id="menuHome" onclick="myFunction()">Home</a>
Even if you use the this key word, you still need an id. this.id
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
alert("This is what was passed in: " + argInput);
};
</script>
If you use the this keyword alone, in the tag, it returns nothing.
<a id="myId" onclick="runIt(this)">Home</a>
The above line of code won't give you anything for a reference to what element was clicked.
So, again, even if the this keyword is used, there needs to be a way to identify what element was clicked.
Change the Styling
To change the style of a menu item, this code can be used:
<body>
<a id="myId" onclick="runIt(this.id)">Home</a>
</body>
<script type="text/javascript">
function runIt(argInput) {
//alert("This is what was passed in: " + argInput);
var whatMenuItem = argInput;
var objectElement = document.getElementById(whatMenuItem);
objectElement.style.color = "green";
};
</script>
The above code changes the color of the menu item to green.
Or maybe you want to dynamically inject onclick events into every menu item when the document loads. This jsFiddle shows how to do that.
jsFiddle Inject onclick events into menu anchor tags
In the jsFiddle example, not only an id is used, but also a class. Why? In order to loop through every <a> tag in the menu, that information needs to somehow be retrieved. It is retrieved by:
document.getElementsByClassName("className")
Now you have yet one more thing added to your HTML.
<div id="menu">
<ul>
<li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a></li>
<li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a></li>
<li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a></li>
</ul>
</div>
This jsFiddle shows changing the menu style with an event listener:
jsFiddle Event Listener - Change Style
Determining what menu element was clicked and changing the style of that menu element is only part of what is needed. There needs to be a way to put the menu item back to its original style if the user navigates to another menu.
This jsFiddle shows a complete working example of highlighting the current menu item, recording which menu item is current, setting the old menu item back to it's default, and checking if the user clicked the active menu item twice.
jsFiddle Highlight Active Menu Item on Menu Bar
So I'm pretty new to CSS. I know there is some inheritance, but besides font, I'm not always sure where it applies. So what I'm trying to do, is modify the twitter bootstrap modal class. There is a backbone view that is being shown currently with these classes:
modal hide fade
What I want to do is extend the width and height of the modal view but keep all of the other modal CSS properties in tact. Is there a way to do this? In my own local.less file for my project, I first tried doing what I googled which was How can I change the default width of a Twitter Bootstrap modal box?
But my view wasn't modal anymore. It wasn't centered and didn't have a darkened backdrop. So I then thought I could just copy the .modal class from twitter bootstrap into my local.less file, and then change the width/height. So I tried that with this:
.modal-width-half (#modalWidth: 50%) {
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: #modalWidth;
margin: -250px 0 0 -#modalWidth / 2;
background-color: white;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
And again, the style isn't modal. Is there something I'm missing or doing incorrectly? Thanks.
I just did this and can share the line you're missing.
In my commit to change the width of the modal I had to change the width property and also the margin-left property. By changing both of these you will keep the form centered.
.modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
of course this will apply to all modals on your site, if you want to apply it to just one modal then you can customise the class name e.g.
.my-modal {
width: #modalWidth;
margin-left: -#modalWidth / 2;
}
You can then refer to this in your html like:
<div class="modal fade open my-modal">...</div>
Just make sure the definition for .my-modal comes after .modal in your less/css file or the definition will be overridden by the bootstrap style.
Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away.
The images are not links and I have basically covered every option in CSS to eliminate the problem but have had no success:
body img{
padding: 0;
border: none;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
}
Hopefully someone has encountered this before or has some information to help?
try adding an attribute to your html img tag like border="0"
I have a div that can be revealed from several buttons on the screen. I'd like it so the div always appears 15px from the top of the screen, even if the window is scrolled to the bottom. But, i dont want it to be fixed. (meaning you should be able to scroll away from it.
#tip {
background: #fff;
width: 300px;
z-index: 100;
display: none;
position: absolute;
top: 15px;
right: -330px;
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
What Javascript solution do I need here?
Without jQuery, the best I could suggest is this:
document.getElementById('tip').style.top = document.scrollTop + 15;
You can try with http://code.google.com/p/jquery-scroll-follow/ - the element will be attached to viewport and will follow it as you scroll http://kitchen.net-perspective.com/sf-example-1.html