We Keep Coding

Add CSS in a function

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

Issues using custom cursor with draggable element

Ok, so I have a draggable element that is contained by it's parent. I'm trying to add a custom cursor while dragging, including when the cursor moves off of the draggable element itself. And then when dragging stops, on mouseup, the cursor should return to default.
<div id="container">
<div class="draggable"></div>
</div>
$(document).ready(function() {
$(window).on("mouseup", function() {
$("*").removeClass("customcursor");
})
$(".draggable").on("mousedown", function() {
$("*").addClass("customcursor");
})
$(".draggable").draggable({
containment: "parent",
});
});
html {
background: lightblue;
}
body {
background-color: teal;
}
#container {
height: 400px;
width: 400px;
background-color: black;
}
.draggable {
height: 200px;
width: 200px;
background-color: red;
}
.customcursor {
cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default;
}
Here is a working fiddle.
However, this is giving me two issues.
First issue: While dragging, when the cursor moves onto the body element, the custom cursor is no longer in effect. However, when the cursor moves onto the html element, the custom cursor does work. Admittedly, this can be solved by adding a wrapper element, so the cursor is never on the body, but I'm still perplexed about why this is happening.
Second issue: After dragging for the first time, the cursor gets stuck with the custom cursor, even though the .customcursor class has been removed. This second issue can be solved if I add .customcursor class on the start and stop events of the draggable rather than on mousedown and mouseup, but I wanted the custom cursor on mousedown even if the draggable isn't moved.
If anyone has some insight into why these issues are occurring or good ways to fix them, I'd really appreciate the help.

Add !important to the the cursor change:
.customcursor {
cursor: url(http://media.fluke.com/images/8-icon-30x30.gif), default !important;
}
The body was being overrode by a direct element style:
element.style {
cursor: auto;
}
Also, for some reason, the cursor is being left behind as a direct style even after the class is removed. Remove it with JavaScript or jQuery:
$(window).on("mouseup", function() {
$("*").removeClass("customcursor");
//document.body.style.cursor = "";
$("body").css("cursor", "")
console.log("mouseup");
})
Fiddle: https://jsfiddle.net/ntyuuqq2/

Onmouseover/out deactivate and reactivate in jQuery

I have a search function that does 3 things:
1) first, when a user hover over the icon, it should change the icon, and the color of border around it as well:
HTML:
<div class="searchbox">
<img id="search" src="Icons/magnifier2.png"
onmouseover="this.src='Icons/magnifier.png'"
onmouseout="this.src='Icons/magnifier2.png'"/>
</div>
CSS:
.searchbox #search {
display: inline;
border: 2px solid #c8c8c8;
position: relative;
height: 20px;
width: 20px;
float: right;
padding: 4px;
border-radius: 5px;
transition: all 500ms;
}
.searchbox #search:hover {
display: inline;
border: 2px solid #808080;
position: relative;
float: right;
padding: 4px;
border-radius: 5px;
transition: all 500ms;
}
So far so good. In this bit, im unsure why the image isnt applied any transition at all when hovered... Is there a way in which you can change color on a single .png icon, instead of juggling between two .pngs?
2) The user is supposed to click on this icon, whereafter it expands with a new icon and a changed border width (padding-left: 130px;). Here goes the following jQuery code:
$(function () {
var search = $("#search");
search.click(function () {
search.attr("src", "Icons/magnifier.png").css({
"border": "2px",
"border-style": "solid",
"border-color": "#808080",
"padding-left": "130px",
"transition": "all 500ms" });
});
});
3) When the user clicks on the HTML body, the border should slide back to normal position and apply the original CSS:
$('html').click(function (e) {
if (e.target.id != 'search') {
$("#search").attr("src", "Icons/magnifier2.png");
$("#search").removeAttr('style');;
}
});
My issue is, the HTML onmouseover/out shown in the top of my post, is still active when the function is fired upon clicking the icon.(if i place my mouse inside and outside the expanded border, it still changes the icon.)
My idea of an easy fix:
It would be a lot easier if the :hover parameter in the CSS could change both the color of the .png and the border, however i've been searching alot for this specific solution, and it doesnt seem to be available!
The second solution would be to add some kind of code in the jQuery, search.click(function() that deactivates the onmouseover/out and reactivates it in the 2'nd .click(function().
I hope im clear enough with my question.
How do i overcome this onmouseover/out issue?
I've added a jsfiddle just for you to see my example:
https://jsfiddle.net/bfytnbs3/

It would be a lot easier if the :hover parameter in the CSS could
change both the color of the .png and the border, however i've been
searching alot for this specific solution, and it doesnt seem to be
available!
You can accomplish that using a CSS sprite. More reading is here: http://www.w3schools.com/css/css_image_sprites.asp
Basically, you'd have one magnifier.png image that would have both states for the icon. Then you'd use some CSS to switch between them.
.searchbox {
background: url('magnifier.png') 0px 0px;
}
.searchbox:hover {
background: url('magnifier.png') 0px -25px;
}
In this example, you'd have a sprite image that was 25px by 50px, with each state of the image being 25px by 25px.
Hope that helps!
Edit to add: Here is a JS Fiddle Example so you can see how it works:
https://jsfiddle.net/s51zjre4/1/

Change div color on mouse over

I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​

you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
​
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});​
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}

jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});

Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.

Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/

Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​
</script>
</body>
Hope this helps.

Strange behavior in IE when combining click handler with CSS sibling selector

I am trying to design a menu that is triggered by clicking a button. When the user clicks the button, a click handler runs which adds a class to the button, and a CSS rule using an sibling selector makes the menu visible. It works fine in all the browsers I tested except IE 7 and 8.
In IE 7 and 8, I am experiencing these problems:
Clicking the button toggles the class but the menu doesn't appear or disappear until I move the mouse around a little bit.
The menu doesn't work at all unless I have a CSS :hover declaration for children of the menu. It doesn't matter what I put in the declaration, or if I put anything at all, but the menu does not show up without it.
Can anyone tell me why this is happening and what I can do about it? I was thinking of adding a separate class to the menu but I am wondering if there is a simpler fix or workaround. Here is my code:
<!DOCTYPE html>
<html><head>
<title>IE selector test</title>
<style type="text/css">
button {
border: outset 1px #eeeeee;
}
button.active {
border-style: inset;
}
.menu {
display: none;
border: solid 1px #888888;
}
button.active ~ .menu {
display: block;
}
.menu > :hover {
/* For some reason, the menu doesn't work at all without this declaration */
}
</style>
</head>
<body>
<button type="button" id="menuButton">Menu</button>
<div class="menu">
<div>option</div>
</div>
<script>
document.getElementById("menuButton").onclick = function() {
if (this.className) {
this.className = "";
} else {
this.className = "active";
}
};
</script>
</body>
</html>
You can also test it at http://jsfiddle.net/QKqpn/.

You can work around it by forcing page redraw:
document.body.className = document.body.className;
See http://jsfiddle.net/uGW4M/
BTW, in your case you can use + (one immediate sibling) combinator instead of more common ~ (all subsequent siblings):
button.active + .menu {/* ... */}