Develop Reference

How to change the body background with a button?

For an assignment at school I need to make the background of my body change into the background of whatever button (div) I click on.
I don't get what I'm doing wrong here. Don't I have to use querySelector() and then add .style.backgroundImage to make it change?
function btnClick() {
var bgImg = document.querySelector('body').style.backgroundImage = "url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg)";
// was url(../img/img1.png)
}
.Btn {
border-radius: 100%;
background-color: #CCC;
width: 128px;
height: 128px;
border: 2px solid white;
box-shadow: 1px 1px 10px black;
}
.Btn:hover {
cursor: pointer;
}
#Btn1 {
background-image: url(https://www.planwallpaper.com/static/cache/86/dd/86ddabfea12cf403e6a7e5850f272cc9.jpg);
background-size: cover;
background-repeat: none;
}
<div class="Btn" onclick="btnClick ()" id="Btn1"></div>

Adding a class to a psuedo :before element

I am trying to add an image within my :before element with an change function. What I am doing is wrapping a label around the #signupCheck to work as a checkbox input. I added a console.log statement to my change event and it isn't running, so I am unsure of what I am doing wrong.
Does anyone see anything that could be causing this to not work?
$('#proposal-check-wrap').on('change', function() {
$('#signupCheck:before').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck:before.active {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">

Two things:
You are incorrectly binding the event handler to the label #proposal-check-wrap instead of the checkbox #proposal-check.
Pseudo-elements cannot have attributes.
The originating element can have a class, so attach the class to that element instead, and style its pseudo-element based on the class. In other words, instead of #signupCheck:before.active, apply the rule to #signupCheck.active:before:
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
console.log("change worked");
});
#proposal-check {
display: none;
}
#signupCheck:before {
width: 40px;
height: 40px;
border: 1px solid #858585;
background: #333333;
content: '';
float: left;
display: block;
margin: 0 10px 0 2.4%;
}
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}
#signupCheck {
color: #858585;
font-size: 1.3rem;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="proposal-check" id="proposal-check-wrap">
<p id="signupCheck">Sign me up</p>
</label>
<input type="checkbox" id="proposal-check">
Your two :before rules have unequal dimensions by the way. Just a note in case this is a mistake.

A couple of things.
Your change listener needs to be on the input itself.
You can't manipulate a psuedo element like that. Instead you should add the class to the element (no psuedo mentioned in it) and style it accordingly.
JS fiddle
JS
$('#proposal-check').on('change', function() {
$('#signupCheck').addClass('active');
});
CSS
#signupCheck.active:before {
background-image: url("https://lh3.ggpht.com/OHBD2vcwNk80-q1P84NDmYjnwNmD8R-FjJagxvfcZhGHeRx6dNFX12afBL4e88nCra0=w300");
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center;
height: 30px;
width: 30px;
}

How to keep <a href> element with a class tied to javascript from acting as a block element

I'm trying to format an inline navigation, but the last link which has a class tied to a piece of javascript seems to be causing the entire link to become a block element rather than putting it inline with the rest of the links in the navigation.
I tried removing the class, changing the class to something else (not tied to any script) and it puts the link back in line, which is what leads me to believe it has something to do with the javascript it's tied to. I've also tried calling a.show in css to display it inline and inline-block to no avail. I feel like I'm missing a well know rule of thumb.
The <a href="#" class="show"> is on Line 20 and the <script> tag is on Line 25 of the HTML
CSS
#nameTag {
max-width: 800px;
min-width: 320px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop{
width: 100%;
height: auto;
display:block;
color: #fff;
font-size:30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom{
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link, a:visited{
color:#fff;
}
#container{
padding:20px
}
.miniNav{
text-align:center;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
.miniNav a:link,a:visited{
color:#0033AA;
text-decoration:none;
}
.miniNav a:hover,a:active{
color:#000;
}
HTML
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</div>
</div>
<div id="container">
<div class="miniNav">
Change Font​
|
Download Graphic CV​
|
Download Typed CV
|
<a class="show" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
<script>
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow");
});
</script>
</div>

UPDATE2
In order to prevent the jerking behavior when clicking the .hide and .show links, simply add event.preventDefault() to your jQuery function.
<script>
$("#container").hide();
$(".show, .hide").click(function(event) { // Pass the event object here
event.preventDefault(); // Then use the preventDefault() property
$("#container").slideToggle("slow");
});
</script>
UPDATE
I misunderstood what the question was, I believe that you wanted the toggle image inline with the other anchors. That would be more trouble than what it's worth. .show is in another div and nested. So just add an identical img inside .miniNav and make sure the other image disappears. Also, I used a background-image for the one inside .miniNav because it's easier to handle as a link. It's better if you look at the jQuery than for me to explain it. I also changed the "Close CV" link's class to .hide so it doesn't share styles and then added .hide to the jQuery in order to keep functionality.
The last link "Close CV" is ok as long as your #nameTag is # 550px wide, else the link will naturally wrap to the next line if less than 550px. If you make .miniNav and the anchors behave like table components, there will be no wrapping to the next line. Add display:table-row to .miniNav and display:table-cell to each anchor.
Changed padding so that links conform when #nameTag is compact. Removed | and added border-right: 1px solid blue;. To center the links, margin: 0 auto; display: table; was added to #container.
You could use percentages or ems instead of px for margins and padding so that your text will stay on one line consistently. That takes some experimenting so I'll leave you that to decide.
BTW, when designating selectors in CSS, if you have multiple selectors that apply to a ruleset, you need to be specific on each one.
Example
.miniNav a:hover,
a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over / Any anchor that is active is black.
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over or is active.
Changes
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
...
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
SNIPPET
$("#container").hide();
$(".show, .hide").click(function() {
$('.show').toggle();
$("#container").slideToggle("slow");
});
#nameTag {
max-width: 800px;
min-width: 550px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop {
width: 100%;
height: auto;
display: block;
color: #fff;
font-size: 30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom {
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link,
a:visited {
color: #fff;
}
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0px auto 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
a.img {
background: url(http://placehold.it/80x50/eea/e00?text=First=slide+image)no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<a href="#">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</a>
</div>
</div>
<div id="container">
<div class="miniNav">
<a href="#" class='img'>First slide image</a>
Change Font​
Download Graphic CV​
Download Typed CV
<a class="hide" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
</div>

It appears jQuery's slideToggle() function defaults to display:block, so you can use a callback to set it to display: inline-block manually, as explained in this answer from user black.
Your code would then be:
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow", function() {
if ($("#container").is(':visible'))
$("#container").css('display','inline-block');
});
});
You'll also need to style your container as display: inline-block, unless I'm misunderstanding your question.

How to apply :hover on :after to certain div in CSS

Made an in-depth search and learnt on how to create some stylish custom created textboxes to achieve a better graphic look. I have two issues to complete this mesh-up of textboxes so that they serve a total functioning of a common textbox.
I'm unable to execute the :focus on the parent div container, although the code is perfectly fine in CSS because when going by Inspect Element (Chrome), Force Element to> :focus it does what I want but in the real-time it never does nevertheless clicking on its children or itself.
I want to add the :hover effect on the child div container (the left black coloured div) in which it'll expand the :after transition for a certain amount of pixels (assuming +20px/+30px).
The desired and the final result should look like in the picture below:
#submitForm {
border:2px grey inset;
border-radius:10px;
display:table;
margin: 10px auto 0;
height: 500px;
position:relative;
width: 800px;
}
#submitForm #btnSend {
bottom:20px;
display:block;
height: 50px;
position:absolute;
right: 20px;
width:100px;
}
#submitForm .highlights {
border-bottom:5px solid #2E8DEF;
border-radius:15px;
float:left;
height: 45px;
margin-top: 40px;
margin-left:40px;
width: 520px;
}
#submitForm .highlights:focus {
border-bottom:none;
outline: 0;
-webkit-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
-moz-box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
box-shadow: 0px 0px 6px 2px rgba(105, 185, 250, 0.8);
}
#submitForm .tags, #submitForm .textarea {
float:left;
font-size: 25px;
font-family: calibri;
font-style: italic;
height: 40px;
position:absolute;
text-align: center;
}
#submitForm .tags {
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
background: #333333;
color: #2E8DEF;
height:40px;
padding-top:5px;
text-align: center;
width: 120px;
z-index:3;
}
#submitForm .tags:after {
background: #333333;
content:" ";
display: block;
left: 90px;
height: 100%;
position:absolute;
top: 0;
width: 30%;
z-index:-1;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
}
#submitForm .tags:after:hover {
/* Code for expanding the skewed .tags:after */
}
#submitForm .textarea {
background-color:#F0F0F0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: 120px;
overflow: hidden;
padding-top: 5px;
width: 400px;
appearance: field;
-moz-appearance: field;
-webkit-appearance: field;
}
#submitForm .textarea:focus {
outline:0;
}
<forms id='submitForm'>
<div id='formName' class='highlights'>
<div class='tags'>Name</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formSurname' class='highlights'>
<div class='tags'>Surname</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formAddress'class='highlights'>
<div class='tags'>Address</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formCity' class='highlights'>
<div class='tags'>City</div>
<div class='textarea' contenteditable></div>
</div>
<div id='formPhone' class='highlights'>
<div class='tags'>Phone</div>
<div class='textarea' contenteditable></div>
</div>
<button id="btnSend" type="button" onclick='submitListOfProducts()'>Submit</button>
</forms>
And, the link to JS fiddle:
http://jsfiddle.net/xa3nwhj4/1/

Vishal provided the reason for the hover effect not working - this is my addition to it:
- focus only fires on the textarea, but you want to change the style of the parent div
so lets change the css entry for #submitForm .highlights:focus to #submitForm .focusedhighlights
and then let jquery do the magic:
$(".textarea").focus(function(){ //event handler, to fire when a textarea gets focused
$(this).parent().toggleClass("focusedhighlights") //toggle class on parent element for highlight effect
});
$(".textarea").focusout(function(){ //event handler to fire, when textarea gets unfocused
$(this).parent().toggleClass("focusedhighlights") // toggle class to remove highlight effect
});
see working fiddle here: http://jsfiddle.net/vo59rgnd/2/

The :focus is not working because you are adding focus to .highlights which is a <div> and not input element.
And to expand the onhover. The CSS should be like this
#submitForm .tags:hover {
text-shadow: #2E8DEF 0px 0px 5px;
width:160px;
}
#submitForm .tags:hover:after {
left:130px;
}
See the demo here : http://jsfiddle.net/Lrdmuzu6/

Appending content in a <div> with limited sizes

In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}

It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.