The webpage: http://www.honlapkell.hu/room/fooldal/
The problem: the problem I want to solve is: when I clicked all of the 7 menu pictures upstairs, I would like to change the background elements' class, because in the CSS the new class's property redefines the color of the class elements (from grayscale to normal)
The html:
<div style="position:relative;">
<div class="aszoba" style="background-size: contain; position: relative; background-image: url(http://www.honlapkell.hu/room/wp-content/uploads/2015/01/hatterr.jpg); box-shadow: 0px 40px 40px #323131;"><img src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/3d-view-blue-minimalistic-wall-szines1.png" alt="3d-view-blue-minimalistic-wall-szines" width="1920" height="1197" class="alignnone butorok size-full wp-image-377" />
<div class="element" style="position: absolute; top: 41%; left: 75.5%;">
<div class="title" style="margin-bottom:14px; width:240px;">The Room in the Media</div>
<img class="nagyul teve" onclick="className='leesikk';i=i+1;" style="height:125px; margin-left:40px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tev.png" alt="tev" class="alignnone size-full wp-image-65" />
</div>
<div class="element" style="position: absolute; top: 41%;">
<div class="title" style="width:150px; margin-bottom:-0px;">Guestbook</div>
<img class="nagyul" onclick="className='leesikk'" style="width:80px; margin-left: 32px; height: 65px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/visitor.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 21%;">
<div class="title" style="width:100px; margin-left:10px;">Contact</div>
<img onclick="className='leesikk'" class="nagyul" style="height:70px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/redphone.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 1%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">Gallery</div>
<img class="nagyul" onclick="className='leesikk'" style="height:110px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/tumblr_lv3yt6QIMz1ql6a52o1_1280.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 61%;">
<div class="title" style="width:75px; margin-left:30px; margin-bottom:10px;">FAQ</div>
<img class="nagyul" onclick="className='leesikk'" style="height:78px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/faq.png" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 81%;">
<div class="title" style="width:75px; margin-left:10px; margin-bottom:10px;">Booking</div>
<img class="nagyul" onclick="className='leesikk'" style="height:130px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/calendar2.jpg" alt="pen" class="alignnone size-full wp-image-76" />
</div>
<div class="element" style="position: absolute; top: 101%;">
<div class="title" style="width:170px; margin-left:45px; margin-bottom:20px;">Our Rooms</div>
<img class="ajto" onclick="className='leesikk'" style="width:203px;" src="http://www.honlapkell.hu/room/wp-content/uploads/2015/01/Door-Skin-HD-8008-.jpg" alt="pen" class="alignnone size-full wp-image-76" /></div>
</div>
the javascript:
<script>
function myfunction()
{
var x = element.onclick(); var y=0;
if (x&&element.className==='leesikk') {y=y+1};
console.log(x);
if (y===7) {aszoba.className=leesikk}
}
</script>
Have a look at the following article. Particularly, the "removeClass" and "addClass" jQuery functions.
jQuery - Get and Set CSS Classes
Why not use something like this to change the class of the elements on click.
$('.element-you-click-here').on('click', function(){
$('#change-this').removeClass('current');
$(this).addClass('this-is-class-to-add');
});
JSfiddle
Note: This is jQuery and you will need the jQuery library for this.
Related
I have a block where the main picture changes when clicked
$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
$('.main-image > img').attr('src', $(this).children('img').attr('src'));
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
.custom-carousel {
text-align: center;
}
.main-image > img {
width:50px;
}
.img-to-select > .img-to-select__item > img {
heigh:30px;
width: 30px;
}
.img-to-select {
overflow: hidden;
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item {
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item.selected {
border: 2px solid red;
}
<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now everything works so when you click on img-to-select it becomes main-image. But can it be done a little differently?
Let's say there are two fields main_image and preview_image, they will be exactly the same, the only size is different
Suppose we have one main-test.jpg picture, it is in the main-image class, and exactly the same picture, only with a smaller size preview-test.jpg in class img-to-select
And there are several such pictures
main-test-1.jpg and preview-test-1.jpg
main-test-2.jpg and preview-test-2.jpg
main-test-3.jpg and preview-test-3.jpg
main-test-4.jpg and preview-test-4.jpg
The code will now look like this
<div class="main-image">
<img src="main-test-1.jpg" alt="" data-title="image-a">
//The rest of the pictures are there but will be hidden until we select the desired one
<img src="main-test-2.jpg" alt="" data-title="image-a">
<img src="main-test-3.jpg" alt="" data-title="image-a">
<img src="main-test-4.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="preview-test-1.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-2.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-3.jpg" alt="" data-title="image-a">
</div>
<div class="img-to-select__item">
<img src="preview-test-4.jpg" alt="" data-title="image-a">
</div>
And now when we click on preview-test-1.jpg we display main-test-1.jpg, when we click on preview-test-2.jpg we display main-test-2.jpg and so on
Can this be done?
Similar to how you're handling the data-title, you can add another data attribute to the img tag that defines its "main" image, while the src remains the "preview" image.
<img src="https://www.previewimage.com/" data-main-src="https://placekitten.com/201/301">
Then in JS, instead of pulling the src of the img, read the data-main-src value and set that as the main src:
$('.main-image > img').attr('src', $(this).children('img').data('main-src'));
$('.img-to-select__item').click(function () {
$('.img-to-select__item').removeClass('selected');
$(this).addClass('selected');
$('.main-image > img').attr('src', $(this).children('img').data('main-src'));
$('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});
// trigger this on page load so the "main" image is displayed instead of the preview.
$('.img-to-select__item.selected').click();
.custom-carousel {
text-align: center;
}
.main-image > img {
width:50px;
}
.img-to-select > .img-to-select__item > img {
heigh:30px;
width: 30px;
}
.img-to-select {
overflow: hidden;
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item {
display: flex;
justify-content:space-around;
}
.img-to-select > .img-to-select__item.selected {
border: 2px solid red;
}
<div class="custom-carousel-section">
<div class="custom-container">
<div class="custom-carousel">
<div class="custom-carousel__title">
<span>Title
</span>
</div>
<div class="main-image">
<img src="" alt="" data-title="">
</div>
<div class="img-to-select">
<div class="img-to-select__item selected">
<img src="https://i.picsum.photos/id/939/200/300.jpg?hmac=cj4OIUh8I6eW-hwT25m1_dCA6ZsAmSYixKCgsbZZmXk" alt="" data-title="image-a" data-main-src="https://placekitten.com/200/300">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/309/200/300.jpg?hmac=gmsts4-400Ihde9dfkfZtd2pQnbZorV4nBKlLOhbuMs" alt="" data-title="image-b" data-main-src="https://placekitten.com/201/301">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/220/200/300.jpg?hmac=XQWeukbBSi6WSlgZllfOJjG8AQQXS9dYI8IqvKpE1ss" alt="" data-title="image-c" data-main-src="https://placekitten.com/202/302">
</div>
<div class="img-to-select__item">
<img src="https://i.picsum.photos/id/494/200/300.jpg?hmac=YdLwRbrTAzFXaAJcsj854mgNuS5jqYM8bcjCzSrSDRM" alt="" data-title="image-d" data-main-src="https://placekitten.com/203/303">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
I have an image in my div.Image is nothing looking like box.Now i want to insert bar chart(highchart library dynamic content) over the image.I mean inside that box image.How to do that?
What i have tried
<div class="" style="position:relative">
<div style="position:absolute; top:0; left:0">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
</div>
here card1.png is box image.There are three cards,i need to insert 3 charts inside the 3 boxes individually.
Code you sent is really ugly and isn't using CSS the right way.
You want to separate CSS in another file and include it to your html with LINK tag. You want to use cascading style sheets, so you don't have to repeat same code so many times.
But if you want to stick to this type of code you can do it this way:
<div class="" style="position:relative; width: 400px; height: 750px;">
<div style="position:absolute; top:0; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:0; left:0; z-index: 2;">
Your first chart goes here
</div>
<div style="position:absolute; top:250px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:250px; left:0; z-index: 2;">
Your second chart goes here
</div>
<div style="position:absolute; top:500px; left:0; z-index: 1;">
<img class="" src="img/card1.png" alt="" style="width:400px;" />
</div>
<div style="position:absolute; top:500px; left:0; z-index: 2;">
Your third chart goes here
</div>
</div>
Do something like this:
<div style="background-image: url(); background-size: ; background-repeat: no-repeat;">
<p>whatever you want to put inside</p>
</div>
I suggest making the div have a class and doing all the css code in a .css document
Complete noob and working on a project for school. I have a div with a nested div with 2 images. My main goal is when the image is hovered over, the other image changes its opacity and shows. However, I am told that divs cannot scale with the window size. Anyway, I can change my code or add something to make this happen? I added a segment of the CSS code and halfways through is the index.html code.
.container-inner {
position: relative;
}
.ball-container {
position: absolute;
left: 65%;
bottom: 18%;
}
.ball-container .label {
position: absolute;
transform: translate(-20%, -75%) scale(.7);
opacity: 0;
transition-property: all;
transition-duration: .3s;
transition-timing-function: ease-in-out;
}
.ball-container .ball-img {
position: absolute;
transform: scale(.8);
}
.ball-container:hover .label {
opacity: 1;
}
<div id="top-container" class="top-container">
<img class="bkg-img" src="images/top_container/sceneBkg.png" alt="Landscape">
<img id="large-cloud1" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="large-cloud2" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="large-cloud3" class="large-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="small-cloud1" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img id="small-cloud2" class="small-cloud" src="images/top_container/cloud1.png" alt="cloud">
<img class="southpaw-body-img" src="images/top_container/southpaw_body.png" alt="head">
<img class="southpaw-head-img" src="images/top_container/southpaw_head.png" alt="body">
<img class="doghouse-label" src="images/top_container/doghouse_label.png" alt="doghouse label">
<img class="doghouse-img" src="images/top_container/doghouse.png" alt="doghouse">
<div class="book-container">
<div class="container-inner">
<img class="label" src="images/top_container/book_label.png" alt="book label">
<img class="book-img" src="images/top_container/bookStack.png" alt="book stack">
</div>
</div>
<div class="banner-container">
<div class="container-inner">
<img class="label" src="images/top_container/banner_label.png" alt="banner label">
<img class="banner-img" src="images/top_container/banner.png" alt="banner">
</div>
</div>
<div class="ball-container">
<div class="container-inner">
<img class="label" src="images/top_container/ball_label.png" alt="ball label">
<img class="ball-img" src="images/top_container/ball.png" alt="ball">
</div>
</div>
<div class="weight-container">
<div class="container-inner">
<img class="label" src="images/top_container/weight_label.png" alt="weight label">
<img class="weight-img" src="images/top_container/weight.png" alt="weight">
</div>
</div>
<img class="logo-img" src="images/top_container/logo.png" alt="body">
</div>
I want do to something like background-size: cover but I don't care about the centering of the image, I just want it to fit the whole container.
I decided to do that by centering the image in a container and checking if the image has margin. If the image has margin-right then it needs width:100% and height:auto otherwise height:100% and width:auto;
It all worked fine until I tested it under Firefox. The problem is $(this).css("margin-top") returns a number in all browsers except Firefox. Firefox returns "auto". I tried replacing margin-top with .offset.top but that returns the offset of the element regarding the whole page, not it's closest relative parent.
Here is my code:
$("aside .img-container").each(function() {
if ($(this).find("img").offset().top >= 0) {
// if image has margin-top make it height 100%
$(this).addClass("full_height");
} else {
$(this).removeClass("full_height");
}
if ($(this).find("img").offset().left > 0) {
$(this).removeClass("full_height");
}
})
aside .img-container {
position: relative;
width: 25%;
height: 0;
padding-bottom: 25%;
display: inline-block;
float: left;
}
aside .img-container img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
margin: auto;
}
aside .full_height img {
width: auto !important;
height: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
<div class="img-container">
<img src="http://placehold.it/50x50" alt="" title="">
</div>
</aside>
My question is: Is there a function similar to .offset().top that returns the actual length between the image and the container because there are quite a lot of pictures and if I have to calculate it manually I am afraid it'll become too laggy.
I am open to other suggestions too.
Edit: Added the html.
Is there a function similar to .offset().top that returns the actual length between the image and the container
.offset gets coordinates in respect to the whole document; .position however gets you the position in relation to the element’s “offset parent”.
The offset parent is the first ancestor element that itself is positioned in some way (so has a CSS position value different from the default static.) Since your img-container elements are relatively positioned, they constitute the offset parent for your images inside them.
I have a div of fixed length. there is anorher div of variable length. I want to scroll the internal div. but it is not working.
<div style="width:200px">
<div style=" overflow-x:scroll">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
</div>
</div>
JS Fiddle
Here's an example, you need fixed width and height http://jsfiddle.net/57wdH/487/
<div style="width: 200px; overflow-x: auto; ">
<div style="height: 70px; width: 500px">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
<img src="https://www.google.com.pk/images/srpr/logo11w.png" />
</div>
</div>
Style
img{
max-width:100px;
}
Can you try this: Demo : http://jsfiddle.net/epinapala/57wdH/23/
<div style="width: 150px;overflow-x:auto; ">
<div style="height: 100px; width: 500px">
You can make changes to the height to make it proportionate with the outer div though!
This works for me...
<div style="width:200px; height:100px; overflow: scroll; overflow-x: hidden;">
<div style="">
...