Div Background Change OnClick - javascript

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

Related

vue dom get inner value without id

I have a dom item like blow:
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"><!----><div><div><!----><div class="half-mask__bdYCX"></div><!----></div></div><!----><!----></div><!----><div><div class=""><div><!----></div><!----></div></div></div></div>
The item have nested child, and I need to get the background-image in the inner child's style string.
background-image: url:(htttpxxxxx)
Can I just for loop key values to get background-image directly?
You can achieve this by accessing the style attribute based on the class name and then access the required style property along with the value from it.
Live Demo :
const el = document.getElementsByClassName('img-container')[0]
const styles = el.getAttribute("style").split(';');
for(var i=0;i<styles.length;i++) {
eachStyle = styles[i].split(':');
if (eachStyle[0].trim() === 'background-image') {
console.log(styles[i].trim())
}
}
<div data-realindex="0" class="img-item-wrapper"><div class="img-item" style="margin-bottom:8px;display:;" data-a-b8815d2c=""><div aria-label="图片.图集.共undefined张" class="img-wrapper__4hevL img-container img-wrapper-radius-tl__FrE43" style="height: 0px; padding-bottom: 100%; border-radius: 9px 9px 0px 0px; background-repeat: no-repeat; background-image: url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667"); background-size: cover; background-position: center center;"></div></div></div>

Onmouseover function() goes to element's background-image:url() when mouse is over the <div>'s blank area without background-image?

I have two problems with this Javascript code. (credit to redditor u/Symboltic for suggesting to me the javascript code here. I appreciate his recommendation, just want to make it more applicable and versatile for more coding situations)
1st problem:
While the following javascript code does function, to go over to a background-image: url() via mouseover, unfortunately, mouseover on that 's background-color, or blank area in general, also goes over to the background-image:url().
For tags, how do I enable mouseover function(), which goes to the background-image:url(), when mouse is only on the background-image for the element?
2nd problem:
mouseover on the tag somehow does not go over to the background-images:url(), when I mouseover on the background-images in tag. Only rarely does this happen, if at all.
I'd like for this mouseover to be able to go to the background-images link in the body tag when the mouseover is on any of the the background-image: url()'s. (Regardless of how many background-image: url()'s that I might put in in the future.
Thanks for all your helpful answers.
Javascript code
document.addEventListener('mouseover', ({ target }) => {
const { backgroundImage } = getComputedStyle(target);
if (!backgroundImage.startsWith('url(')) return
let extractedUrl = backgroundImage
.slice(4, -1)
.replace(/^["']|["']$/g, '');
location.assign(extractedUrl);
});
HTML code:
<style>
#n{
background-position: 40% 45%;
}
.rap{
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra{
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os{
height: 5000px;
width: 9000px;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg"),
url("https://i.ibb.co/1KL4Kdj/op.png");
width: 2820px, 1920px;
height: 2050px, 1080px;
background-position-y: 35%, 4%;
background-position-x: 0%, -3500%;
background-repeat: no-repeat;
background-color: azure;
}
</style>
</head>
<body>
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg"
style="float:left; position: absolute; left:7800px; top:60px;">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423"
style="float:left">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg"
style="float:left; position: absolute; left:5000px; top:7000px;">>
<p><div class="rap"></div></p>
<div class="os"></div>
<div class="ra"></div>
</body>

Styling images of different sizes to a fixed size grid

I'm using bootstrap inside of React to display a grid of images in fixed size boxes. The images are all of different sizes and I don't want to distort them. The behavior I'm looking for is an image displayed in the center of a fixed size box, say 325X250 with a white(or any color) background. I'm really not a CSS person, thus the question.
This is my React code.
return (
<div className="row">
<div className="image-viewer">
{this.state.overlay}
<ul className="list-inline">
{this.state.images.map(function (image) {
return (<li key={image.src}><a href="#" onClick={this.handleClick} data-id={image.mediaId}><div className="img-container "><img
src={image.src}
className="img-responsive"
alt={image.mediaId}/></div></a></li>);
}, this)}
</ul>
</div>
</div>
);
This is the styling I've done till now,
.image-container{
width: 250px;
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.image-container img{
height: auto;
width: 100%;
}
This clearly doesn't work. I've looked into this link,
How can I make all images of different height and width the same via CSS?
But couldn't get any solution to work to my requirement.
Any help appreciated.
As an alternative to the <img> tag, you could use any block level element and CSS background properties:
background-image: url(http://domain.top/path/to/img.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
The property background-size and the value contain will render a background image to stretch to it's containing element's edges as far as it can without distortion and will maintain original aspect ratio.
SNIPPET
.img {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
outline: 1px dashed red;
width: 325px;
height: 250px;
margin: 10px auto;
}
#bbc {
background-image: url(http://i.imgur.com/4TLlrL3.png);
}
#lena {
background-image: url(http://i.imgur.com/o1RbMvI.png);
}
#normal {
background-image: url(http://i.imgur.com/43uy0hP.png);
}
<div id='bbc' class='img'></div>
<figure id='lena' class='img'></figure>
<section id='normal' class='img'></section>
Try adding 100% to both of them:
.image-container img{
height: 100%;
width: 100%;
}
Adding 100% to both of them will have it go full width of parent element

JavaScript on MouseOver change BODY style. Reverse on MouseOut

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
}

jquery tablesorter CSS arrow icons

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 :)

Categories