This is really more of a CSS question than a jQuery question. I'm using the tablesorter jQuery plugin to sort tables dynamically.
Here's what it looks like currently:
Here's the CSS code that I'm using:
th.sortable{
font-weight: bold;
cursor:pointer;
background-repeat: no-repeat;
background-position: center right;
}
th.headerSortUp {
background-image: url("arrow-up.gif");
}
th.headerSortDown {
background-image: url("arrow-down.gif")
}
The problem that I have with the current implementation is that the arrow is way over on the right of the header. In the above example, the table is being sorted by level, but it almost looks like it could be by location.
Is there an easy way to move the arrow over to the left, so it's directly to the right of the end of the "level" label?
Place a span tag in your th and style it with:
th.headerSortUp span {
background: url("arrow-up.gif") right center no-repeat;
padding-right: 15px;
}
th.tablesorter-headerUnSorted {
background-image: url(/share/css/contextmenu/images/sort_both.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-header {
background-image: url(/share/css/contextmenu/images/sort_both.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-headerDesc {
background-image: url(/share/css/contextmenu/images/sort_desc.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-headerAsc {
background-image: url(/share/css/contextmenu/images/sort_asc.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
Try this:
th.headerSortUp span{
background: url("arrow-up.gif") right center no-repeat;
padding-right: 20px;
}
th.headerSortDown span{
background: url("arrow-up.gif") right center no-repeat;
padding-right: 20px;
}
And add span to your th
Edit: Changed div to span (see coments below)
In my case, this worked:
table.tablesorter th.tablesorter-headerSortUp {
background-image: url(../images/asc.gif);
}
table.tablesorter th.tablesorter-headerSortDown {
background-image: url(../images/desc.gif);
}
Style.css downloaded from web cantained only headerSOrtUp class, but this works only with tablesorted-headerSortUp class, so they must have changed it.
Hope it saves some time to someone.
If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:
<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />
I was just missing the "tablesorter" class added to table. I added it and it solved. May this help somebody :)
Related
I have looked at this so long that I'm confusing myself. I seem to be stuck and missing something. My code is basically supposed to have the default div background (gamebg), and when you click on one of the buttons, the background of the div they are in changes.
<style>
#gamebg {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg1 {
background-color: #00b5d3;
background-image: url('background_button_1.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
.gamebg2 {
background-color: #00b5d3;
background-image: url('background_button_2.png');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
max-width: 950px;
height: 800px;
box-sizing: border-box;
padding: 20px;
}
</style>
<div id="gamebg">
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
</div>
Any suggestions for me?
IDs have a higher specificity than classes. In your case, #gamebg is overriding .gamebg1
It's also best not to put too much code in in-line JavaScript. Considering creating a function. Inside the function, you will use the attribute function to add a class, and the removeAttribute function to remove the id.
Now in onclick, you just need to call the function with the class you want to add inside the paramater.
Here is a solution for you
JavaScript
function addNewClass(className) {
var background = document.getElementById('gamebg');
background.attribute('class', className);
background.removeAttribute('gamebg');
}
<img src="background_button_1.png" class="panel-button">
<img src="background_button_2.png" class="panel-button">
Here is more information on specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
This is due to something called "specificity". In CSS, id's are more "specific" than a class, which is why the id's background-color property will always override the class' background-property, meaning the background-color property won't actually change while the classes bound to the node with that id will.
A good video about specificity here:
https://www.youtube.com/watch?v=fy07HYm-geM
How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's
I think the header covers it all. Can a small let's say 40x40 part of the 1600x1200 background image of an HTML (javascript, jquery) page be used as another div. I mean I take a 40x40 part of the image and set it as a div with id "div1" and so on for another parts. The idea is, that the divs are set to the background image, so that if watched from a smaller screen with the "fit in" function there will be no misplacement. I hope you get the idea.
Best Regards.
jsFiddle
CSS
html {
background: url(http://placehold.it/350x150) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0px -30px;
width: 50px;
height: 30px;
}
Note
This uses the sprite technique and should work fine for this scenario.
References:
http://www.guistuff.com/css/css_imagetech1.html
Demo pulled from Reference
CSS
.icons {
display: block;
width: 40px;
height: 40px;
background-image: url(http://www.guistuff.com/css/images/sixicons.png);
background-repeat: no-repeat;
}
.icon_1 {
background-position: 0px 0px;
}
.icon_2 {
background-position: -40px 0px;
}
.icon_3 {
background-position: -80px 0px;
}
.icon_4 {
background-position: 0px -40px;
}
.icon_5 {
background-position: -40px -40px;
}
.icon_6 {
background-position: -80px -40px;
}
HTML
<span class="icons icon_1" style="float:left;"></span>
- Icon No.1<br/>
<span class="icons icon_2" style="float:left;"></span>
- Icon No.2<br/>
<span class="icons icon_3" style="float:left;"></span>
- Icon No.3<br/>
<span class="icons icon_4" style="float:left;"></span>
- Icon No.4<br/>
<span class="icons icon_5" style="float:left;"></span>
- Icon No.5<br/>
<span class="icons icon_6" style="float:left;"></span>
- Icon No.6<br/>
It sounds like you want to use an image as a CSS Image Sprite. You can set a background image on a DIV and then adjust the background-position as needed.
JSFiddle Example
.big-image {
background-image:url(http://img2.netcarshow.com/McLaren-F1_1993_1024x768_wallpaper_01.jpg);
background-repeat:no-repeat;
display:block;
}
.img-sec-1 {
background-position: -175px -268px;
height:40px !IMPORTANT;
width:40px !IMPORTANT;
}
.img-sec-2 {
background-position: -270px -290px;
height:50px !IMPORTANT;
width:50px !IMPORTANT;
}
I have 4 images of an arrow I would like to add to a CSS class (up, down, right, left).
I created a basic arrow css class:
.arrow {
background-repeat: no-repeat;
background-position: center;
}
and then created subclasses e.g:
.arrow .up {
background-image: url("../img/arrow-up.png");
}
arrow .down {
background-image: url("../img/arrow-down.png");
}
When I add both classes to a table cell (with jQuery) it doesn't show the image.
The thing is that if I combine them into 1 class, e.g.
.arrow-up {
background-image: url("../img/arrow-up.png");
background-repeat: no-repeat;
background-position: center;
}
and then add it to the table cell it works just fine.
How can I avoid repeating the "background-repeat" and "background-position" in every class?
The correct code will be:
.arrow {
background-repeat: no-repeat;
background-position: center;
}
.arrow.up {
background-image: url("../img/arrow-up.png");
}
.arrow.down {
background-image: url("../img/arrow-down.png");
}
<td class="arrow up">
Content
</td>
Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?
From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)
If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support
If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus
You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle