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>
Related
Need help creating a full page gallery. I tried various options. I'm trying to create full page gallery that lets the user scroll vertically though 1 image at a time.
Here's my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm stuck on the javascript/jquery solution to detect if the user has scrolled. I want to change images if the user scrolls up 10 pixels or down 10 pixels.
Here's an example of what I'm trying achieve:
http://themes.themegoods.com/photome/demo/gallery-archive/gallery-archive-fullscreen/
It would be better to use js libs like "fullPage.js, smart scroll, pagePiling.js" those help you to make a perfect page or gallery scroll like what you wanted to achieve, for more information follows below links:
https://alvarotrigo.com/fullPage/
http://blog.danyll.com/smartscroll-jquery-scrolljacking-plugin/
https://alvarotrigo.com/pagePiling/
On click background is changed to image or color. To do it, for start I made two classes for body:
body.bg-color {
background-color:red;
}
body.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Then using .addClass and .removeClass I change backgrounds. Thing is that this method fades, in addition to background, also content. What should be done to fade in/out only background?
$(document).ready(function(){
$('body').addClass('bg-color');
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('body').removeClass('bg-color').fadeOut();
$('body').addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('body').removeClass('bg-img').fadeOut();
$('body').addClass('bg-color').fadeIn();
});
});
Instead of applying this all to the body tag, use an fixed positioned <div> with height and width of 100%, and give that the background color so you can just fade out that element instead of the entire .
Also, you can just toggle one class instead of adding and removing two classes at once.
Eg.
#bg{
position: fixed;
height: 100%;
width: 100%;
z-index: 1;
background: red;
}
#bg.bg-img {
background: url(../images/bg.jpg) no-repeat center 0 fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Just put the following right after the opening body tag:
<div id="bg"></div>
Here is your updated JS:
$(document).ready(function(){
$('.element,#content1,#content2').hide();
$("#link1").click(function(){
$('#wrapper').hide();
$('#bg').fadeOut().addClass('bg-img').fadeIn();
});
$("#link2").click(function(){
$('#wrapper').show();
$('#bg').fadeOut().removeClass('bg-img').fadeIn();
});
});
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 wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?
Style:
.box-style_img2 {
background-image: url(img.png);
background-size: auto;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
}
Thanks in advance.
P.S. Just beginning to learn Javascript.
It is always better to do things in CSS if you can avoid Javascript
Try using :hover property of css. For animation use transition property
<div class="box-style_img2">
</div>
.box-style_img2 {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #00a0b0;
transition: all 1s ease;
}
.box-style_img2:hover {
background-size: auto;
height: 100px;
width: 100px;
background-repeat: repeat;
background-attachment: scroll;
background-color: #000000;
transition: all 1s ease;
}
Also you can check this fiddle
function on_mouseover(){
document.body.className += "your-class-to be applied";//for body
or
document.getElementById("div-id").className ="your-class-to be applied"
}
function on_mouseout(){
document.body.className += "your-initial-css-class";//for body
or
document.getElementById("div-id").className ="your-initial-css-class";
}
Your HTML:
<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div>
Or you can use addEventListener if you dont want to write javascript inline
document.getElementById('your-id').addEventListener("mouseover",on_mouseover);
document.getElementById('your-id').addEventListener("mouseout",on_mouseout);
Note:This task can also be done using plain css also.
.your-class{
//properties to be applied on mouseout
}
.your-class:hover{
//properties to be applied on mouseover
}
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 :)