Is it possible to change background image of page by click on button using only CSS? I have 6 buttons, and I want to change background image of whole page to be changed on button click.
Is it possible with only css? If yes, then how?
This is perfectly easily possible using only CSS and HTML.
http://codepen.io/anon/pen/KpmPYO
input[name="bg-change-control"] {
display: none;
}
body {
margin: 0;
}
#page {
background: url(http://lorempixel.com/1000/700) no-repeat 0 0;
background-size: cover;
height: 100vh;
}
label {
-moz-appearance: button;
-webkit-appearance: button;
}
#cb1:checked ~ #page{
background-image: url(http://lorempixel.com/800/600);
}
#cb2:checked ~ #page{
background-image: url(http://lorempixel.com/640/480);
}
#cb3:checked ~ #page{
background-image: url(http://lorempixel.com/1024/768);
}
<input type="radio" name="bg-change-control" id="cb1" />
<input type="radio" name="bg-change-control" id="cb2" />
<input type="radio" name="bg-change-control" id="cb3" />
<div id="page">
<label for="cb1">BG 1</label>
<label for="cb2">BG 2</label>
<label for="cb3">BG 3</label>
</div>
This is possible with pure CSS and HTML. No need to use Javascript and Jquery.
Try this
HTML:
<input type="button" value="Click" class="click">
<div class="background1"></div>
CSS:
.background1 {
background: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg") no-repeat; width:500px; height:500px
}
.click:focus ~ .background1 {
background: url("http://i.dailymail.co.uk/i/pix/2015/01/06/2473100D00000578-2898639-Photographer_Andrey_Gudkov_snapped_the_images_on_the_plains_of_t-a-20_1420546215677.jpg") no-repeat; width:500px; height:500px
}
Hope it will fullfil your requirement.
That would be nice, but no.
You don't need that hard a function, though. Simply attach the background change with the rest of the functionality of the button. I recommend in this case that you just add the background image as css inline with your js, because 6 classes of images can go wrong easy.
Related
I want to use a Submit Button Image instead of the standard Button. I searched on Google and SO and got a few different ways.
Which is the right way of using an Image as a Submit Button ?
Also i would want to add three states for the button - normal, hover, onclick
What i tried
HTML
<input type="submit" value="Subscribe">
CSS
input[type=submit] {
background:url(../images/btn-subscribe.gif) none;
text-indent:-9999px;
width:109px;
height:41px;
}
What shows up
What it should Display
Edited:
I think you are trying to do as done in this DEMO
There are three states of a button: normal, hover and active
You need to use CSS Image Sprites for the button states.
See The Mystery of CSS Sprites
/*CSS*/
.imgClass {
background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;
width: 186px;
height: 53px;
border: 0px;
background-color: none;
cursor: pointer;
outline: 0;
}
.imgClass:hover{
background-position: 0px -52px;
}
.imgClass:active{
background-position: 0px -104px;
}
<!-- HTML -->
<input type="submit" value="" class="imgClass" />
<input type="image" src="path to image" name="submit" />
UPDATE:
For button states, you can use type="submit" and then add a class to it
<input type="submit" name="submit" class="states" />
Then in css, use background images for:
.states{
background-image:url(path to url);
height:...;
width:...;
}
.states:hover{
background-position:...;
}
.states:active{
background-position:...;
}
<INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="30" WIDTH="173" BORDER="0" ALT="Submit Form">
Where the standard submit button has TYPE="submit", we now have TYPE="image". The image type is by default a form submitting button. More simple
It's very important for accessibility reasons that you always specify value of the submit even if you are hiding this text, or if you use <input type="image" .../> to always specify alt="" attribute for this input field.
Blind people don't know what button will do if it doesn't contain meaningful alt="" or value="".
You have to remove the borders and add a background image on the input.
.imgClass {
background-image: url(path to image) no-repeat;
width: 186px;
height: 53px;
border: none;
}
It should be good now, normally.
I need help on my php program.
I have 2 forms inside my testing.php
Main form named "mainform"
the other Form is with checkbox named "modalForm"
My program works like this. If you click the disabled textbox, a modal will pop-up containing the form with checkbox. If only 1 of the checkbox were check I'm gonna display the textlabel of it on my disabled textbox otherwise if more than 2 were check I will display the value "Multiple" on the disabled textbox.
In short I will display only the textlabel on UI while its value will be inserted/updated into the system database.
I tried lots of condition and still i dont get it. anyone help me please.
Here is my look a like code
testing.php
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<a href="#modal"> <!-- when the input textbox was clicked, modal will pop up -->
<input disabled type="text" name="test" placeholder="test" value="">
</a>
</form>
<form method="post" name="modalForm" id="modalForm" action="testing.php">
<div class="modalwrapper" id="modal"> <!-- modal -->
<div class="modalcontainer">
<div class="modalcol1">
<label>Test 1</label>
<input type="checkbox" name="test_modal[]" value="mark">
<div class="clear"></div>
<label>Test 2</label>
<input type="checkbox" name="test_modal[]" value="joe">
<div class="clear"></div>
<label>Test 3</label>
<input type="checkbox" name="test_modal[]" value="kevin">
<div class="clear"></div>
<label>Test 4</label>
<input type="checkbox" name="test_modal[]" value="michael">
<div class="clear"></div>
<label>Test 5</label>
<input type="checkbox" name="test_modal[]" value="jordan">
<div class="clear"></div>
<div class="savebutton">
<input class="btn1" type="submit" value="Submit"/>
</div>
</div>
</div>
<div class="overlay"></div>
</div>
</form>
styles.css
/* modal layout */
.modalwrapper {
top: 0;
left: 0;
opacity: 0;
position: absolute;
visibility: hidden;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
opacity: 1;
visibility: visible
}
.overlay {
background-color: #000;
background: rgba(0,0,0,.8);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.modalcontainer {
display: table;
background-color: #777;
position: relative;
z-index: 100;
color: #fff;
padding: 5px;
}
.modalcol1 { display: table-cell; }
.clear { clear: both; }
.modalwrapper input[type=checkbox] {
float: right;
margin-right: 20px;
}
.savebutton input[type=submit] {
float: right;
background-color: maroon;
color: #fff;
border: none;
padding: 5px 10px;
margin-top: 5px;
margin-right: 20px;
}
/* modal layout ends here */
Hope you guys can help me. I wanna know how can I pass the value of the checkboxes on my mainform . Thank you so much in advance.
I tried that code,set id="submit" at the submit button of the modal form and id="test_modal[]" at checkboxes,I used some functions of jquery I set at header the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function(e) {
// var checked = [];
i=0;
temp=""
$("input[name='test_modal[]']:checked").each(function ()
{ temp=$(this).val();
i++;
// checked.push($(this).val());
});
if (i==1)
$("#test").val(temp);
else if (i>1)
$("#test").val('multiple');
$("#modal").fadeOut();
// alert($("#do").val())
e.preventDefault();
});
});</script>
Here is the sample for couple of cases that you may find usefull for your problem.
PHP variable to Javascript variable:
<?php $myvar=10; ?>
<script type="text/javascript">
jsvar = <?php echo $myvar; ?>;
document.write(jsvar); // Test to see if its prints 10:
</script>
Form variable to Javascript variable:
<form name="myform4"> <input type="hidden" name="formvar" value="100"> </form>
<script type="text/javascript">
jsvar = document.myform4.formvar.value;
document.write(jsvar) // test
</script>
PHP variable to Form variable:
<form name="myform4">
<input type="hidden" name="formvar" value="<?php $phpvar=10; echo $phpvar; ?>"> // PHP code inside HTML!!
</form>
Javascript variable to Form variable:
<form name="myform3">
<!-- It needn't be a "hidden" type, but anything from radio buttons to check boxes -->
<input type="hidden" name="formvar" value="">
</form>
<script type="text/javascript">
jsvar=10;
document.myform3.formvar.value = jsvar;
</script>
JavaScript:
You can solve this problem just with JS. To do so, you have to replace you action-Attribute in the form-Tag to action="#". To read more about the hashtag there, look up this link.
After that, you have to call a JS-Function when the Form gets submitted. YOu can do this with adding onSubmit="countCheckboxes()" to the <form>-Attribute. This means, that if the form gets submitted, this JS-Function gets executed. Now, you just have to create a new JS-Function called countCheckboxes(). There, you can count the selected checkboxes with this line:
alert(document.querySelectorAll('input[type="checkbox"]:checked').length);
Check now, if there is just one selected checkbox or more and set the value of the <input>.
Tip:
Get the value of the only checked checkbox, you have to restructure your HTML like this:
<label>
Step 1
<input type="checkbox" ... />
</label>
<label>
Step 2
...
And then get the (first and only) text in the label with the checked box like this:
document.querySelectorAll('input[type="checkbox"]:checked')[0].parentElement.textContent
jQuery:
To open and close your modal you should use JS. I recommend you to use the jQuery library (Check out this article to learn how to use jQuery in your JS). With that, you can simply open and close the modal with .fadeIn() and .fadeOut().
In fact, here we have another problem: Normally in jQuery, you can check if something got clicked with this code:
$("#idOfYouElement").click(function() {
// this code gets executed if the element got clicked
});
But in your case, the input is disabled and doesn't fire a clickevent and this results that the .click()-Function also doesn't get executed. To fix this, we place a <div> over the input, which is transparent so the users don't see it. Then we add the .click()-Function to this div and not the input. This would look like this:
HTML:
<form method="post" name="mainform" action="">
<label>TestLabel</label>
<input type="text" id="inpCheckboxes" name="test" placeholder="test" value="" disabled >
</form>
JavaScript:
$("#inpCheckboxes").click(function(){
$("#idOfYourModal").fadeIn();
});
After this, we have to close the modal after the submit-button got clicked. There are multiple solutions for that, for me, this one using .submit() is the cleanest:
$("#idOfYourForm").submit(function() {
$("#idOfyourModal").fadeOut(); // Since your Modal is also your Form, you could also use here $(this).fadeOut();
});
You also want to count all your checked checkboxes. You can combine this with your function above, since you want to count the checkboxes when the user hits 'submit'. The jQuery-way to count theboxes would be:
var l = $("input[type='checkbox']:checked").length;
With this value, you can now use a if else to set the value of your <input>-Field (remember to remove now the disabled-Attribute from it).
I'm working on a newsfeed and I have a while loop for every posts with the styles, but then I created an
<input type="submit" name="deletePost" value="Delete" class="delete_post" />
and with the styling it isn't working... well the styling works but the :hover isn't working. Nor the :active and others. Very strange.
CSS
.image_post .user_avatar {
width:32px;
height:32px;
overflow:hidden;
border-radius:50%;
}
.image_post .user_avatar img {
width:32px;
min-height:32px;
}
.image_post .user_name {
margin-top:7px;
color:#fc0096;
margin-left:-5px;
}
.image_post .timeago {
color:#999;
font-size:10px;
position:absolute;
top:10px;
right:10px;
}
.image_post img {
width:100%;
border:1px solid #ccc;
}
.image_description {
width:100%;
padding-bottom:8px;
background:white;
text-align:left;
color:#000;
margin-top:-10px;
}
.image_post input[type="submit"] {
border:0;
position:absolute;
top:30px;
right:10px;
background:black;
padding:0;
margin:6px 0 0 0;
color:#fff;
font-size:9px;
text-decoration:underline;
z-index:999;
}
.image_post input[type="submit"]:hover {
cursor:pointer !important;
}
HTML INSIDE PHP WHILE LOOP
<div class="image_post">
<input type="submit" name="deletePost" value="Delete" class="delete_post" />
<div class="user_avatar">
<img src="avatars/'.$pica['username'].'.jpeg" />
</div>
<div class="user_name">'.$pica['username'].'</div>
<br>
<br>
<br>
<br>
<div class="timeago">'.$diff.'</div>
<div class="image_description">'.$pica['description'].'</div>
<img src="upload/'.$pica['name'].'" />
<div class="clear"></div>
</div>
I really don't understand why the :hover isn't working. It does take the styles from the normal one, but then the :hover, :active etc isn't working. I'm struggling with this and it's really weird, because I do html/css for 2 years, every day. I tried a lot of possible solutions, but sadly... they failed. Even in pencode / jsfiddle it failed with the cursor:pointer ;/
Even tho it's weird... try using the class like .delete_post:hover on your CSS instead of input[type="submit"]:hover.
I think that should work fine. If not, try placing and ID for it and try with the ID like .image_post #delete_post:hover.
Since it's super weird because it should work fine... maybe you can try jQuery and do something like this:
$(document).ready(function(){
$(".delete_post").hover(function(){
$(this).attr("style","cursor:pointer;");
$(this).removeAttr("style");
});
});
But again... I don't see why :hover is not working for you.
So i want to change css class in HTML with checkbox. I know how boolean works, but how can i change text. For example, if checkbox is checked i want to inject "pull-right" class, and if it's not, then "pull-left" is defaulf.
I tried few things, but it wont work. Anyone knows how to create this?
You can try doing it like this:
Sample HTML:
<div id="container" class="pull-left">Some Content </div>
<input type="checkbox" id="mybox"/>
Sample Javascript
$("#mybox").on("change", function(){
$('#container').toggleClass("pull-left").toggleClass("pull-right");
})
Working sample on jsfiddle
I don't see any jquery tag to your question. so let me give you pure javascript solution:
fiddle: http://jsfiddle.net/Nz8Tq/
html:
<input type="checkbox" name="change" id="change"/>change class
<div class="pull-left" id="container"></div>
javascript:
document.getElementById("change").onchange = function(){
if(this.checked){
document.getElementById("container").setAttribute("class","pull-right");
} else {
document.getElementById("container").setAttribute("class","pull-left");
}
}
CSS only Demo
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input <input> elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
Browser Support
Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ Any 9+ 9+ any any
source
CSS
input[type=checkbox] ~ div { /* I used general sibling selector u can use other css selectors according to ur requirement like adjacent sibling, child selector etc */
color: #ccc;
font-style: italic;
float: left
}
input[type=checkbox]:checked ~ div {
color: #f00;
font-style: normal;
float: right
}
input[type=checkbox] {
position: fixed;
}
HTML
<input type="checkbox" id="chkbx" name="chkbx">
<br>
<div for="chkbx">The power of css</div>
You can do it easily by doing this:
Jquery
$(function(){
$("input[name=toggle-checkbox]").on("change", function(){
$(".test").toggleClass("pull-left").toggleClass("pull-right");
});
});
Then in your html add this:
<input name="toggle-checkbox" type="checkbox" />
<div class="test pull-left"></div>
And a bit of css to see the effect:
.test{
display:block;
width:100px;
height:100px;
}
.pull-left{
background-color:red;
}
.pull-right{
background-color:yellow;
}
I hope this helps!!! :)
I'm using a jQuery plugin called jQtransform (http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) which skins HTML form elements like the input box and submit buttons. All is well until I need to use an image as the submit button. I tried the following CSS code but the original button still appears, and not the image.
CSS:
/* this is the submit button */
#search {
width: 32px;
height: 32px;
padding: 0px;
margin: 0px;
border: 0px;
background: transparent url(../images/template/icons/search.png) no-repeat center top;
overflow: hidden;
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
HTML:
<input type="submit" name="search" value="Search" id="search" />
** HTML code looks like it has been processed by the jQuery plugin when viewed in Chrome's 'Inspect Element' feature. The above is the original HTML code as seen when you select 'View Page Source' in Chrome.
What should I do to replace the submit button with my own image? I'm not too good with jQuery...
UPDATE
GREAT! All the answers are working. I must have been thinking too much :)
This should work
<form>
<input type="image" src="[some image]" onsubmit="submitForm();" id="search">
</form>
How about using good old HTML <input type="image" ... />?
<img type="image" src="img src..." id="search" />