I have a background image as part of a body class in CSS:
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
Then later on I have a javascript function that will change the body class.
The reason I have the image in the background is that when the script activates, the background-color and the background-image will both change at exactly the same time and you can't select the image.
Is it possible that I could change the cursor type only while hovering over the background-image? I understand I can put
cursor: pointer;
in the body styles, but this makes the cursor appear over the entire page.
You can view the live page, currently, where the background changes when you click anywhere on the page.
Edit: I've got something that works for me now. I added a centered div with nothing in it:
div.clickme {
width:300px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -200px;
cursor: pointer;
}
This works for me because I can set my own arbitrary area, but if anybody has a better solution, let me know.
There's really no compelling reason to make the image a background image. You would be better served by putting the image in two wrappers (required to guarantee absolute centering vertically and horizontally regardless of viewport).
You could extend your array by populating it with objects, so that it can hold possible values for the image and the body style. This way, you can use the same method (cycle through the array) to pick out all of the changes you want, even if you wanted to add other changes later.
Also, while web browsers are rather lenient with standards, it really is trivial to conform to the simple HTML 5 requirements and still keep the functionality.
Lastly, I strongly encourage you to avoid what I call "hipster coding". While it's fun to name functions, variables, et al with obscure names to delight the few that check the source code, it makes for needlessly obtuse language and lower maintainability. In short, it's a bad practice, even if you are the only maintainer.
Observe a new version of your source based on these comments (with indentation cleanup) below.
<html>
<head>
<title>Something Amazing Will Happen</title>
<style type="text/css">
body.light {
background-color: white;
}
body.dark {
background-color: black;
}
div.outside-wrapper {
position: absolute;
top: 50%;
width: 100%;
height: 1px;
overflow: visible;
}
div.inside-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 381px;
height: 393px;
margin: -197px 0 0 -191px;
cursor: pointer;
}
</style>
<script type="text/javascript">
styleIndex = 0;
var states = [{style: "light", image: "soon1a.png"}, {style: "dark", image: "soon2a.png"}];
function nextStyle() {
if (++styleIndex >= states.length)
styleIndex = 0;
var state = states[styleIndex];
document.body.className = state.style;
document.getElementById("clickme").src = state.image;
}
var tap = true;
document.addEventListener('touchstart',function(e) {
tap = true;
});
document.addEventListener('click',function(e) {
nextStyle()
tap = false;
});
document.addEventListener('touchmove',function(e) {
tap = false;
});
document.addEventListener('touchend',function(e) {
if(tap)
nextStyle();
});
</script>
</head>
<body class="light">
<div class="outside-wrapper">
<div class="inside-wrapper">
<img src="soon1a.png" id="clickme">
</div>
</div>
</body>
</html>
<!-- Don't ask me what it is. -->
Try this
body.soon1 {
background-color: white;
background-image: url(soon1a.png);
background-position: center;
background-repeat: no-repeat;
}
body.soon1:active{
cursor: pointer;
}
What you can do is, put the cursor: pointer on body and change the cursor on the childs. Do somthing like this: http://jsfiddle.net/HSdH3/
html:
<body>
<div></div>
</body>
css:
body {
background: red;
width:100%;
height: 100%;
}
body:hover {
cursor: pointer;
}
div {
width: 300px;
height: 300px;
margin: 0 auto;
background: white;
}
div:hover {
cursor: auto;
}
Something like this should work:
<div id="myDiv" style="cursor: pointer">
Another option is to use jQuery, although it may be overkill for this. Regardless, here's what it would look like:
$(document).ready(function(){
$("#myDiv").hover(function() {
$(this).css('cursor', 'pointer');
});
});
Check it out here: http://jsfiddle.net/K5fex/
Related
I am helping to create a website, we are two people working on this project. The other person is responsible for the visual part (CSS, html and javascript), I'm responsible for the internal functioning of the website (php, javascript and database, ...).
I created a code for the site pop up error messages.
I used some css to create the pop up mensage and i't work when I use the internal style sheet.
The problem it's when I use external style sheet, the pop up effect it's not working.
I did some research and find that this could be caused by encoding the css.
So to solve this problem I'm doing this:
In my mystyle.css:
#charset "utf-8";
In my head.php:
<meta charset="utf-8">
But this did not solve my problem.
I did some more research and there is the possibility of being caused by fetching the external css in the wrong place.
I think it's not caused by this because the other person's css are working. I'm saving my css in the same folder as the other person is saving hers. I call the css files the same as the other person.
My head.php:
<link rel="stylesheet" href="<?php echo $base_url;?>/css/bootstrap.css">
<link rel="stylesheet" href="<?php echo $base_url;?>/css/mystyle.css">
What could be causing this, or am I doing something wrong?
My full code for external style sheet.
mystyle.css:
#charset "utf-8";
.modal-error-box {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding: 200px 0px 100px 0px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* The Close Button */
.close{
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-error-box-header{
margin: auto;
width: 35%;
height: 5%;
border: 3px solid black;
background-color: Red;
color: Black;
}
.modal-error-box-body
{
margin: auto;
width: 35%;
height: 20%;
border: 3px solid black;
text-align: center;
background-color: white;
color: Black;
overflow: scroll;
}
html:
<div id="erro-gravar-operacoes" class = "modal-error-box">
<div id ="error-gravar-header1" class = "modal-error-box-header">
Mensagem de ERRO:
<span id="close-erro1" class="close">×</span>
</div>
<div id = "erro-gravar-body1" class="modal-error-box-body">
</div>
</div>
javascript:
function validatesubmitform(id_var)
{
//validate form.
if(validate == false){
var div_error = document.createElement("p");
div_error.setAttribute('id', "id_element_erro" );
if(text_erro!="")
{
var element_erro = document.createElement("p");
element_erro.setAttribute('id', "id_element_erro1" );
var texto_erro = document.createTextNode(text_erro);
element_erro.appendChild(texto_erro);
div_error.appendChild(element_erro);
}
if(text_erro1!="")
{
var element_erro1 = document.createElement("p");
element_erro1.setAttribute('id', "id_element_erro2" );
var texto_erro1 = document.createTextNode(text_erro1);
element_erro1.appendChild(texto_erro1);
div_error.appendChild(element_erro1);
}
var div_display = document.getElementById("erro-altera-body2");
div_display.appendChild(div_error);
document.getElementById("erro-altera-operacoes").style.display='block';
}
return validate;
}
Help with this problem is really necessary, and greatly appreciated.
Thanks in advance for future contributions to solving this problem.
One way to do this is by giving yourself write permission in the css folder
Ubuntu: sudo chown -R username /.../.../.../.../css
If everything seems to be fine and some files don't load, check the file permissions.
trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!
HTML
<div class ="spiral">
<img src="spiral.svg">
</div>
CSS
img {
max-width: ???;
max-height: ???;
}
.spiral:hover {
background:url('color.jpg') center;
z-index: some positive number higher than my orig background image?
}
body {
background:url('orig.jpeg') center;
z-index: -60;
}
You may try something like this.
.twitter{
display:block;
border:1px solid red;
width: 30px;
height:30px;
background-image:url(http://i.imgur.com/qM7IYaM.png?1);
background-position:-32px 31px;
transition:0.1s;
}
.twitter:hover{
background-position:-32px 63px;
}
<div href="https://twitter.com/georgevere12" class="twitter">
</div>
looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450
On a number input it has a spinner which has several css properties but I can't seem to find a way to change the size of the spinner itself. I am talking about <input type='number'>. I tried finding something that would change the size but I haven't been able to find anything. The other issue I guess is that every browser on possibly every OS is going to have a potentially different implementation of the spinner itself. When I say spinner I am talking about the highlighted part of this image.
I cannot use the JQuery UI spinner because the large app I am developing uses JQuery UI 1.8 which did not include the spinner. Upgrading causes issues.
Not ideal, but try playing around with the CSS transform property:
For example,
input[type=number]
{
transform: scale(2);
}
This increases the size of the entire input, but maybe this (in conjunction with setting font-size, line-height, height, width) can produce a desired effect.
This CSS seems to work in Chrome by replacing the spinners with a static image (of a spinner) and then control the size and position of the image within the element and making it invisible by default until the user hovers over it:
* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #0F0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
width: 3em;
border-left: 1px solid #0f0;
opacity: 0; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
box-shadow: 0 0 2px #0CF;
opacity: .7;
}
Plain ole HTML...
No library or images required.
HTML
<!-- Score Control Container -->
<div class = "Score-Control">
<div class = "Score-Value-Container">
<div id="RoundScore" class="Score-Value">
10
</div>
</div>
<div class = "Score-UpDown">
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="IncrementScore();">
▲
</div>
</div>
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="DecrementScore();">
▼
</div>
</div>
</div>
</div>
CSS
.Score-Control {
width: 200px;
}
.Score-Value-Container{
position:relative;
display: table;
overflow: hidden;
height:80px;
background-color:#aaa;
width:66%;
float:left;
font-size: 44px;
vertical-align: middle;
text-align: center;
}
.Score-Value {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.Score-UpDown{
position:relative;
height:80px;
background-color: burlywood;
width:34%;
float:right;
}
.Score-Button-Container {
display: table;
height: 50%;
width: 100%;
overflow: hidden;
background-color:green;
}
.Score-Button {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 27px;
}
JavaScript
function IncrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore < 10) {
RoundScore++
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
function DecrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore > 1) {
RoundScore--
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
Code in JSFiddle
You could make an input field with two buttons for up and down and style them then the way you like.
<input type="text" name="something">
<span class="goUp"></span>
<span class="goDown"></span>
js:
var inputField = $('input[name="something"]');
$('.goUp').click(function() {
inputField.val(inputField.val() + 1);
});
$('.goDown').click(function() {
inputField.val(inputField.val() - 1);
});
you then should also check, that the input has only numbers inside, so that your +/- 1 really works.
The “size of the spinner” is a vague concept, but the <input type=number> element seems to obey at least width, height, and font property settings. Example:
<input type=number value=42 min=0 max=99
style="font: 24pt Courier; width: 3ch; height: 3em">
Whether such settings are useful and whether they should work is a different issue. It can be argued that the implementation of such elements is expected to be a browser-dependent nice, useable widget suitable for the browsing conditions, rather than something that authors should mess around with. But in practice, the widget is largely affected by CSS settings, and this might be a good thing in practice, e.g. because the input box tends to be too wide by default. (We could expect browsers to set it according to min and max values, but this just doesn’t happen at present.) The risk is that by setting the width, you might conflict with the implementation. The code above expects the up and down arrows to take a width of one character at most, but this guess might some day be wrong.
Don't be intimidated by the length of this post! (I've just copied the code from jsfiddle)
I'm trying to fix "pins" on an image ("map") that fits all screen-sizes without becoming distorted (i.e. max-height and max-width are 100%) and I've managed to get the pins somewhat fixed. However, although the following code(in the jsfiddle) looks like it works for some sizes, the pins slowly move away from their place as the dimensions of the window change. Have a look: (if you don't see the change in the fiddle itself, you can try copying and pasting the code onto a text-editor and then opening it on a browser. Resize the browser to a long-narrow-strip or a wide-narrow-strip and you'll see what I mean):
http://jsfiddle.net/bKbWf/
Thanks to anyone who can help solve this.
The code (same as the stuff on the above jsfiddle) is posted below:
(HTML):
<div class="mapNpins"> <!--map and pins begin here-->
<div class="map-container"><img class ="map" src="http://www.placekitten.com/1024/635"/>
<ul class = "ulist">
<li class="pin1"><img src="http://www.placekitten.com/20/20"></li>
<li class="pin2"><img src="http://www.placekitten.com/20/20"></li>
</ul>
</div> <!-- map and pins end here -->
</div>
(CSS):
.mapNpins { /*can be used to manipulate/position the entire mapNpins block*/
display: block;
border: 2px solid red;}
.map-container {
position: relative; /*this is so that later each list-element
(i.e. pin) can be positioned with respect to the map-picture
(i.e. the pins will be able to move/resize with the map)*/
text-align: center; /*centers map horizontally*/}
.map{
padding-left: 0.7%; /*misc. image correction*/
max-width: 100%; /* map image resizes with screen*/
max-height: 100%;/* map image resizes with screen*/}
.ulist {
list-style: none; /*to remove the bullets*/}
.ulist li a {
display: block;
position: absolute; /*allows each list-element to be controlled
individually, but all with respect to .map-container (which
is the first parent that has pos-relative)*/}
/*positioning the pins*/
.map-container .ulist .pin1 a {
text-align: center;
border: 2px solid orange; /*border color only for recognition*/
left: 25%; top:37%;}
.map-container .ulist .pin2 a {
border: 2px solid blue; /*border color only for recognition*/
left: 35%; top:47%;}
You could try a jquery for loop:
$(window).load(function(){
$(window).resize(function(){
for(i = 1; i <= 2000; i++) {
if($(window).width() === i) {
// set the css due to the ratio
$('.pin1').css('margin-left', ($('.pin1').css('margin-left') + i));
}
}
});
});
I want that when I hover an element(a box made with css), the background color of the body changes from one color to another, for example white to red. The problem is that this should be done using css only and no javascript. And if javascript has to be neccesarily be used, then the color should change back to the previous one on mouse out.
---------------EDIT---------------
Actually I was trying this:
body{backgroung: #000;}
#div{some properties}
body #div:hover{background: #fff;}
Pure CSS experiment:
http://jsfiddle.net/Tymek/yrKRX/
HTML
<div id="trigger"></div>
<div id="bg"></div>
CSS
body {
height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100%;
height: 100%;
z-index: 1;
background: #EEE;
}
#trigger {
position: absolute;
width: 200px;
height: 136px;
top: 50%;
left: 50%;
margin: -68px 0 0 -100px;
background: #333;
z-index: 2;
}
/* KEY */
#trigger:hover ~ #bg {
background: #EE0;
}
Please use like this
<html>
<body>
<style type="text/css">
.top{
background:red;
}
.top2{
background:white;
}
</style>
<div class="top" onmouseover="this.className='top2'"
onmouseout="this.className='top'">Here</div>
</body>
</html>
Use the :hover selector.
It seems pretty straight forward unless you are doing something very different.
Check following example for reference:
.classname {
background-color:white;
}
.classname:hover {
background-color:red;
}
Working fiddle
You have many typo's in your code such as mispelling background as backgroung and treating div as an ID (#div).
CSS (with explanation to typos)
body{background: #000;} /*backgroung (mis-spelled)*/
div{width:100px; /*#div (treated as ID)*/
height:100px;
border:1px solid black;}
To hover over a parent tag you must compulsorily use javascript or jQuery. you may be getting doubt that why there is no css property to select the parent tag, if so, then you can go through this interesting link . To avoid parent selector concept in most of cases we can evade using positioning in CSS (check Tymek's solution).
jQuery
$(document).ready(function(){
$("div").hover(function(){
$(this).parent(this).css('background-color','red');
});
$("div").mouseleave(function(){
$(this).parent(this).css('background-color','white');
});
});
Assuming you are new to jQuery, give a link in head tag of HTML, something like below to make the above function work.
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Check this Working fiddle