Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>
Related
> I have this yellow box (with class="yellow-box") , and a small blue
box (with class="box-1") inside it. I need 12 times the same div in
HTML with JavascriptDOM - without hardcoding in HTML by typing 12
times the same div.
HTML code
<html>
<head>
<title>Match the box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="boxGame.js"></script>
</head>
<body class="background-img">
<div class="yellow-box">
<div class="box-1"> </div>
</div>
</body>
</html>
.background-img {
background-image: url("fundal.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.yellow-box {
background-color: yellow;
width: 850px;
height: 600px;
margin: auto;
top: 30px;
position: relative;
}
.box-1 {
background-color: blue;
width: 160px;
height: 120px;
float: left;
position: relative;
margin: 25px;
}
Add this code to your javascript file, or inside your script tag:
let outerDiv = document.querySelector('.yellow-box');
for(let i = 0; i++; i<=12 ){
let boxDiv = document.createElement('div');
div.setAttribute('class', 'box-1');
outerDiv.appendChild(boxDiv);
}
I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/
I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>
You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#gallery
{
width: 960px;
margin: 0 auto;
}
.galleryitem
{
width: 300px;
height: 300px;
float: left;
font-family: Lucida Sans Unicode, Arial;
font-style: italic;
font-size: 13px;
border: 5px solid black;
margin: 3px;
}
.galleryitem img
{
width: 300px;
}
.galleryitem p
{
text-indent: 15px;
}
#galleryhoverp
{
margin-top: -55px;
background-color: black;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
height: 40px;
color: white;
padding-top: 10px;
}
#singleimagedisplay
{
width: 800px;
}
#singleimagedisplay img
{
width: 800px;
}
#singleimagedisplay a
{
float: right;
color: white;
}
</style>
</head>
<body>
<div id="gallery">
<div class="galleryitem">
<img src="computer1.png" alt="A beautiful Sunset over a field" /><p>
A beautiful Sunset over a field</p>
</div>
<div class="galleryitem">
<img src="computer2.png" alt="Some penguins on the beach" /><p>
Some penguins on the beach</p>
</div>
<div class="galleryitem">
<img src="computer3.png" alt="The sun trying to break through the clouds" /><p>
The sun trying to break through the clouds</p>
</div>
<div class="galleryitem">
<img src="computer.png" alt="Palm tress on a sunny day" /><p>
Palm tress on a sunny day</p>
</div>
<div class="galleryitem">
<img src="computer4.png" alt="The sun bursting through the tall grass" /><p>
The sun bursting through the tall grass</p>
</div>
</div>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('p').hide();
var galleryItems = $('.galleryitem');
galleryItems.css('height', '200px');
var images = $('.galleryitem').find('img');
galleryItems.hover(
function () {
$(this).children('p').show().attr('id', 'galleryhoverp');
},
function () {
$(this).children('p').hide().attr('id', '');
}
)
images.click(function () {
$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
})
</script>
Above code is from here: http://www.1stwebdesigner.com/tutorials/jquery-beginners-4/
Question:
For this line: $(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
1.I know the first $(this) means the img that clicked, but what does sencond $(this) mean?
2.when I clicked one img on the frontend, I can see see the img get enlarged, and it shows style="height: 533px; in firebug, but how come it is 533px? in css script, there is no such definition as height: 533px.
The second $(this) also means the same as the first one.
What is happening here is, you are getting the parent elemet of the clicked img then set the id to singleimagedisplay then set its height to the heigth of the img that was clicked(This gets the rendered hight of the image) then hides all the sibling elements of the images parent