Add CSS in a function - javascript

I got my function to display my site to full screen :
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
}
}
that I associate with a button image and it worked !
But when I move my cursor over it, the cursor remains in "default" version so I would like it to become "pointer" to give the effect of a button : "cursor: pointer;" and I don't manage to enter my css in the function to make it work.

If you can add class to your button button then just add the CSS below to get pointer when you hover over a button.
.button:hover{
cursor:pointer;
}

So basically what you can do is
button{
cursor:pointer;
}
<button>Hello there</button>
You can also add a class to your button
.btn{
cursor:pointer;
}
<button class="btn">Hello there</button>

You can do it with pure css
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
cursor: pointer;
}
<div id="fullscreen"></div>
or with pure Javascript
document.getElementById("fullscreen").style.cursor = "pointer";
#fullscreen {
width: 100px;
height: 100px;
background-color: black;
}
<div id="fullscreen"></div>

I'll be the first to admit that my CSS is not amazing by any means but if you were to add a class to the actual button itself in the HTML portion of your page and add the property cursor: pointer to that class' attributes, I believe that should do the trick? I would have rather left this as a comment instead of an answer but I'm not reputable enough for a comment yet haha

Related

Is there a way to make SVG className backward compatible?

Many old libraries rely on className to identify their context.
So a click handler can look like this:
function click(event)
{
if (event.target.className.indexOf('something')!= -1){
// Do something
}
}
But this will fail if the target element is an svg element.
The reason is that svg className is an object of type SVGAnimatedString
Is there any temporary workaround to avoid issues with old code?
Change the handler is not an option as it is unclear how many libraries have this code and changing library code could be impossible.
Changing the SVG to some other element is not an option as the SVG is a part of a 3rd party control.
Update:
"Is there any temporary workaround to avoid issues with old code?"
Seems unclear based on the comments. My goal is to see if there is any polyfill or any other technique that I can use to temporarily make SVG elements have their className as string until 3rd party libraries catch up. Then I will update the 3rd party libraries and revert this code.
As of now - simply overwriting the className doesn't seem to be possible as it only seems to have getter and no setter for SVG elements.
function oldModuleHandler(e) {
if (e.className.indexOf("initial") > -1 || e.className.indexOf("fixed") > -1) {
alert('Behaves as expected.');
}
}
function theFix(e) {
e.className = "fixed";
}
<html>
<head>
</head>
<body>
<div style="border:2px solid silver;">
<h2>Demo:</h2>
Click on the left square, it is a div and it will have it's color changed to green because .className.indexOf will go through just fine. Same does not apply for SVG.<br/> <br/><br/>
<div onclick="theFix(this); oldModuleHandler(this)" class="initial">
</div>
<svg class="initial" onclick="theFix(this); oldModuleHandler(this)"></svg>
<div style="clear:both;"></div>
</div>
<style>
.fixed {
background: green !important;
width: 80px;
height: 80px;
float: left;
}
.initial {
background: transparent;
border: 1px solid black;
width: 80px;
height: 80px;
float: left;
}
</style>
</body>
</html>
Update 2
I added a small code to demonstrate the issue. If you click on the left square (it is a div) - it will work just fine. If you click on the right square - the SVG - it will not work because .className.indexOf() will throw an error.
You might use getAttribute and setAttribute OR 'classList methods :
function oldModuleHandler(e) {
var c = e.getAttribute('class');
if (~c.indexOf("initial") || ~c.indexOf("fixed")) {
alert('Behaves as expected.');
}
}
function theFix(e) {
e.className = "fixed";
e.setAttribute('class', 'fixed')
// OR
e.classList.add('fixed')
}
.fixed {
background: green !important;
width: 80px;
height: 80px;
float: left;
}
.initial {
background: transparent;
border: 1px solid black;
width: 80px;
height: 80px;
float: left;
}
<div style="border:2px solid silver;">
<h2>Demo:</h2>
Click on the left square, it is a div and it will have it's color changed to green because .className.indexOf will go through just fine. Same does not apply for SVG.<br/> <br/><br/>
<div onclick="theFix(this); oldModuleHandler(this)" class="initial">
</div>
<svg class="initial" onclick="theFix(this); oldModuleHandler(this)"></svg>
<div style="clear:both;"></div>
</div>
And/Or look at Proxy API.

I change background color of button with jquery click function

I change background color of a button using the jQuery click function, but I want to do this without jQuery. How can I use it only with CSS? Here are my codes and jsfiddle demo below.
.colorButton{
background: blue;
color: white;
cursor: pointer;
}
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
<script>
$(document).ready(function () {
$('.colorButton').click(function (){
$(this).css("background","yellow");
});
});
</script>
http://jsfiddle.net/myyhs84b/
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background:yellow;
}
<button class="colorButton">Click me</button>
[EDIT] okay, now pure CSS
You can do this with CSS:
.colorButton:active,
.colorButton:focus{
background:yellow;
}
But on outside click it remain the same. Because you have to add a new class or have to implement the existing code that apply the inline style to your DOM element.
The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
CSS
.colorButton{
background:blue;
color:white;
cursor:pointer;
}
.colorButton:focus{
background: yellow;
}
HTML
<div class="buttons">
<button class="colorButton">Click me</button>
</div>
Fiddle here
FYI
focus
Using checkbox/radio CSS hack, this could be a solution: {please don't, handling click should be done in javascript anyway}
HTML:
<div class="buttons">
<input id="rd_btn" type="radio" />
<button class="colorButton">
<label for="rd_btn">Click me</label>
</button>
</div>
CSS:
.colorButton {
background:blue;
color:white;
cursor:pointer;
}
.colorButton {
padding: 0;
}
.colorButton label {
display: block;
padding: 2px;
}
#rd_btn {
display: none;
}
#rd_btn:checked + button {
background: yellow;
}
-jsFiddle-
Since there is no click event in HTML and CSS, you can use functionality of pseudo class :checked to change something.
Just style the label as some button, than bind some click functionality in jquery.
Take a look at this exaples:
http://www.paulund.co.uk/create-flat-checkboxes
Or :active pseudo class. Example here:
http://www.paulund.co.uk/create-a-css-3d-push-button
I don't think you can do this only with CSS as there isn't anything like a "clicked" property.
Maybe :active or :hover will fit your needs.
.colorButton1:active
{
background: green;
}
.colorButton2:hover
{
background: blue;
}
http://jsfiddle.net/qbjsnp42/
The closest thing you could do is using :active or :focus but the first will only should work while you are pressing the button while the second will only work unless you don't press anywhere else
what you can do is defining a class in your CSS and then via JS add the class on click

Css hover text information

I need some help!
I'm doing website, and i'm having a problem with a thing. I have a <h1> and a image next to it, that image is a question mark. And i want that when i mouse hover that question mark it appears the div that i made with the information... i saw lots of topics answered in that forum but none of them is working, pls help me!
<html>
<body>
<h1>branch<img id="help" src="Questionmark.png"></img></h1>
<div id="information">Branch is...</div>
<script>
var e = document.getElementById('help');
e.onmouseover = function() {
document.getElementById('information').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('information').style.display = 'none';
}
</script>
</body>
</html>
Pls tell me what to do, maybe there is a easy way... i tried css but also didn't work...
I suggest to go with css.
If you are doing layout, use CSS, if you are setting the look and feel
use CSS, if your doing animation use CSS3
If you attach event handlers or reacting to user input use JavaScript.
Note that people use JavaScript instead of CSS for browser support.
There are other solutions like emulating CSS features using
javascript.
source
css
#information{
display:none;
}
h1:hover + #information{
display:block;
}
fiddle
If you want simple tooltip kind of thing, then you can use this code
<h1>
branch<img id="help" src="Questionmark.png"></img>
<div id="information">Branch is...</div>
</h1>
h1{
position: relative;
}
h1 img{
cursor: pointer;
}
#information{
display: none;
position: absolute;
left: 50px;
width: 100px;
height: 50px;
font-size: 14px;
background: red;
}
h1 img:hover + #information{
display: block;
}
Check this link http://jsfiddle.net/amoljawale/G83WB/2/

How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?

I am looking for a way to have a div appear after the user clicks a hyperlink, and then have that same div disappear when the user clicks it again. Currently, the user is only able to have the div appear when the hyperlink is pressed, but when you click the hyperlink again, the div remains in it's "display: block;" state. Here is what I mean:
HTML
<a onclick="showDiv()" id="ShowAboutButton">What's This?</a>
<div id="About">
</div>
CSS
#ShowAboutButton {
text-align: center;
margin-top: 40px;
background-color: white;
border: none;
cursor: pointer;
font-family: "Lato Light";
font-size: 22px;
}
#About {
width: 900px;
height: 600px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: gray;
display: none;
transition: height 2s;
}
Javascript
function showDiv() {
document.getElementById('About').style.display = "block";
}
If it is at all possible, can someone please show me how to give the user the ability to click the hyperlink and have the div slide in with a transition effect, and then when the hyperlink is clicked again have it slide back out with a transition effect? Any help would be much appreciated! Thank you in advance!
You can do this very easily with jquery slideToggle:
$("#ShowAboutButton").click(function(){
$("#About").slideToggle();
});
JSFIDDLE
$('#ShowAboutButton').click(function() {
$('#About').toggle();
});
Vanilla JavaScript :
var about = document.getElementById('About');
about.style.display='none';
document.getElementById('ShowAboutButton').addEventListener('click', function() {
//Toggling
if(about.style.display != 'block') {
return about.style.display='block';
}
about.style.display = 'none';
});
OOPS. Missed top of your code.
<a onclick="showDiv(document.getElementById('About'))" id="ShowAboutButton">What's This?
<div id="About">
</div>
function showDiv(obj) {
if(obj.style.display == "block"){
obj.style.display='none'
}
else(obj.style.display == "none"){
obj.style.display='block'
}
}

What is the Javascript for changing the css on an element?

I have a JSFiddle example I can't get working:
http://jsfiddle.net/bjacobs/KDVvN/28/
I want the element to have an open hand when moused over (which works) and a closed hand when the mouse is clicked on it (which I can't get to work).
I know I am doing something wrong in the javascript. Can anyone help?
Javascript:
$(function () {
$(".dragbox h2").on("mousedown", function (evt) {
$(this).addClass('grabbing');
}).on("mouseup", function (evt) {
$(this).removeClass('grabbing');
});
});
CSS:
.dragbox {
margin:0px 2px 2px;
background:#fff;
position:relative;
}
.dragbox h2 {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
.dragbox h2.grabbing {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
It might not work with text elements. Try button (but obviously you have to start dragging to make it work):
You can do this with just html/css
DEMO HERE: http://jsfiddle.net/KDVvN/37/
HTML
<button>Test Grab!</button>
CSS
button {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button:active {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
Or JS
DEMO HERE: (http://jsfiddle.net/KDVvN/36/)
HTML
<button>Test Grab!</button>
CSS
button {
font-size:15px;
cursor: grab;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
button.grabbing {
cursor: grabbing;
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
JS
$("button").on("mousedown", function (evt) {
$(this).addClass('grabbing');
}).on("mouseup", function (evt) {
$(this).removeClass('grabbing');
});
Read this article:http://www.sitepoint.com/css3-cursor-styles/
Maybe you missed some "," at '.column .dragbox h2.grabbing'
Only webkit browsers will support grabbing hand. But when i tried to use this in a similar way, i noticed that i cant make a closed hand cursor while grabbing, because the browser overrides it.
The problem is not with your JavaScript.
If I copy your code exactly and create my own test page, it works.
The style "grabbing" is added and removed from my <h2> element.
I can see the style being added and removed in FireBug.
The problem is, the cursor does not change.
This makes me think one of two things is true:
your css is not correct
these cursor styles cannot be applied to an <h2> element (or they cannot be applied when the mouse is over text)
Try opening up a debugger and you'll probably see the same thing.
My guess is that certain cursors only work in certain places on certain browsers...
Maybe you'll find something in one of these articles that explains what you're seeing:
Changing cursor style in Chrome fails when user is hovering over a link
http://www.quirksmode.org/css/cursor.html
http://code.google.com/p/chromium/issues/detail?id=26723

Categories