Ok, I am using JavaScript to control an image swap so that when someone clicks on the image, it changes to a "lit" version of the image. The code to do this within the link tag is onclick="changeto('wdl')" and I added onmouseover="changeto('wdl')" to the link so when you hover over it, it lights up as well.
Now, where the problem comes in, naturally, is when I added onmouseout="changeto('wdd')" which is the unlit version of the image. What happens here of course is when I hover over it, it lights up, when I move the cursor away it changes to the non lit version. But when you click on it it changes the image to the lit version as it should, but because of the onmouseout command, it changes to the unlit version.
What I want is to be able to hover on the image and have it light up. If you click it and move the mouse away it stays lit, but if you don't click it and move the mouse away it stays on the "off" image.
Any help appreciated, I am stumped here. I was going to try to use some sort of if (!this) type of thing, but I honestly just don't know.
I see two solutions:
1. Declare separate CSS class for onclick event that is defined below wdd (or uses !important.
2. Use a flag variable which is set to true in onclick and then tested in onmouseout:
onclick="changeto('wdl');flag=true;"
onmouseout="if (!flag) changeto('wdd')"
Here is a simple example with CSS and Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<style>
#whl {
background: #e0e0ff;
line-height: 150px;
text-align: center;
width: 150px;
}
#wdl {
background: #e0ffe0;
line-height: 150px;
text-align: center;
width: 150px;
}
#whl:hover {
background: #ffcccc;
}
#wdl:hover {
background: #ffcccc;
}
#whl.selected {
background: #ffcccc;
}
#wdl.selected {
background: #ffcccc;
}
</style>
<script>
function doClick(el) {
document.getElementById("whl").className = document.getElementById("whl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
document.getElementById("wdl").className = document.getElementById("wdl").className.replace( /(?:^|\s)selected(?!\S)/ , '' );
el.className += "selected";
}
</script>
</head>
<body>
<div id="whl" onclick="doClick(this);">WHL</div>
<div id="wdl" onclick="doClick(this);">WDL</div>
</body>
</html>
It works with colours and in your case you will have to replace colours with background images (in the CSS).
You should use a combination of CSS and javascript. Look up css hover to achieve the mouseover function and do the click part from js
CSS Hover on w3schools http://www.w3schools.com/cssref/sel_hover.asp
Related
I would like to make an HTML element fullscreen (a div), and have the pointer remain hidden.
This would seem straightforward (set cursor:none on the div when it becomes fullscreen), but it is not working correctly across browsers.
The snippet below works fine for Firefox, but in chrome 56/ Mac OSX, the mouse pointer reappears after some time (usually within 1-60 seconds).
Is there a reliable cross-browser way to hide the mouse pointer while fullscreen?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fullscreen mouse pointer</title>
<style>
.is-fullscreen {
cursor: none;
width: 100%;
height: 100%;;
background-color: white;
}
</style>
</head>
<body>
<div id="gofull">
FULLSCREEN AREA
</div>
<button onclick="makeFS()">Make fullscreen</button>
<script>
// Button to make a div fullscreen and add relevant style in that case
function makeFS() {
// Get FS element, add class, and go fullscreen
var el = document.getElementById("gofull");
el.classList.add('is-fullscreen');
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
console.log('Your browser does not appear to support fullscreen rendering.');
}
}
</script>
</body>
</html>
Other notes
I have tried setting cursor:none on a different element than what gets made fullscreen (such as a child div), but this also did not help.
The pointer lock API seems like it would be massive overkill, and we'd rather not have to request an additional user permission for what seems like it should be simple to do in HTML/CSS.
Browser bug references
Only relevant browser bugs seemed video-related. This happens without video- just a static unchanging div.
Chrome fullscreen API bugs
Chrome browser fullscreen bugs
Compared FF 51 and Chrome 56 on Mac OS X.
1) The cursor can be any image you want it to be, using the declaration:
cursor: url([URI]), auto;
2) In base-64 encoding, a transparent single-pixel gif has the following Data URI:
data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
Putting these two together, we can turn the cursor into a transparent single-pixel gif when it hovers over any given element:
Working Example:
div {
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
cursor: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7), auto;
}
<div></div>
I know it probably doesn't get any simpler than this but hey I am a novice. I just want to use the bgtoggle class as a simple change of state button that changes the background color of metro class. I know I am using the wrong approach because what I am trying is not working. Any help is very appreciated! Thanks in advance.
HTML:
<div class="bgtoggle">
</div>
CSS:
.bgtoggle{
position: absolute;
width: 56px;
height: 43px;
right:65px;
top:170px;
color:#fff;
font-size: 3em;
cursor:pointer;
z-index:9999;
background-image: url("../images/mthc/bgtoggle.png");
background-size: 100%;
}
.bgtoggle:hover{
background-image: url("../images/mthc/bgtoggle2.png");
}
And I have this attempt at jQuery which of course is not doing as intended:
$('.bgtoggle').toggle(function () {
$(".metro").css('background', '#000');
}, function () {
$(".metro")css('background', '#fff'));
}
I have created a button, based on your CSS (except the background image which I do not have) and made it change the body's background color instead, so as to provide you with a very visual effect. I know you can take this and apply it whichever way you like. One thing to note, I am using the latest jQuery version here, which means that instead of $ you need to use jQuery, that can be changed back if you wish to use an earlier version.
jsFiddle_1
HTML
<div class="bgtoggle"></div>
jQuery
jQuery(document).ready(function(){
jQuery(".bgtoggle").click(function () {
jQuery("body").toggleClass("bgcolor--yellow");
});
});
CSS
body {
/* set the background to whatever you like, I made it white in color */
background-color: white;
}
.bgcolor--yellow {
background-color: yellow;
}
I noted that you had a few syntax errors on your end to begin with (normal if you are a beginner no big deal). Such as not checking for the document (the webpage) to be ready. I also considered that if you want a button, you will want an on click event to represent a button functionality.
If you really wanted to achieve this via hover, then use mouseover/mouseout instead:
jsFiddle_2
jQuery(document).ready(function(){
jQuery(".bgtoggle").mouseover(function () {
jQuery("body").css("background-color", "yellow");
});
jQuery(".bgtoggle").mouseout(function () {
jQuery("body").css("background-color", "white");
});
});
I think you are asking about How to make a toggle button using jQuery and It perform action whenever toggle event takes place, take a look at the code below.
<html>
<head>
<title>Toggle Button using Jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body style="font-family:arial,sans-serif;font-weight:bold;font-size:.9em;">
<center>
<div class="metro" style="width:100;height:100;background-color: rgb(255, 255, 255);">To change Me</div>
<div class="bgtoggle" style="width:100;height:100;cursor:pointer;">Click Here</div>
<script>
$('.bgtoggle').click(function() {
if ($('.metro').css('background-color')=="rgb(255, 255, 255)"){
$('.metro').css('background-color', '#000');
} else if ($('.metro').css('background-color')=="rgb(0, 0, 0)"){
$('.metro').css('background-color', 'rgb(255, 255, 255)');
}
});
</script>
</center>
</body>
</html>
Best of luck for your project!
I'm trying to rotate a icon when i click on a link next to the icon.
The idea is when I click on the link, the icon rotate and the content slide down. I have manage to make the content slide down but I can't get the icon to rotate in the same script.
This is the script:
<script>
$(function(){
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
});
});
This is de html:
<div class="change_delivery_address"><h6>Choose another delivery address<img src="images/layout- img/menu-icons/arrow_carrot-right.png"></h6>
</div>
The CSS:
.change_delivery_address h6{
cursor: pointer;
color: #3274f4;
margin-top: 20px;
padding-top: 5px;
padding-left: 20px;
}
.change_delivery_address h6:active{
background: none;
}
.spm {
display: none;
}
Hope you someone can help me out with this thanks.
It looks as though your problem is that you haven't included any rotation in your click function.
include JQueryRotate, a small library that allows rotation, by adding
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js">
and then your script should look like this. Because I'm assuming that you want it to rotate and then rotate back, I'm adding a boolean to check which way it's rotated and act accordingly because there's no rotateToggle:
var rotated = false;
$(".change_delivery_address").click(function(){
$(".spm").slideToggle();
if(rotated) {
rotateAngle = -90;
}
else {
rotateAngle = 90;
}
$("img[src='images/layout-img/menu-icons/arrow_carrot-right.png']").rotate(rotateAngle)
});
Besides the additional jQuery library you can also apply a CSS class to the image to rotate the image as well. You would use the transform property described here http://www.w3schools.com/cssref/css3_pr_transform.asp. Additionally you can also apply a transition through CSS as well to animate the icon turning. The benefit here is no additional plugins but this is supported only in HTML5 supporting browsers, so if you will run into problems in IE8.
I don't know what will work best for you but I wanted to throw out an additional option.
I have a situation where javascript code causes DOM/style changes that in turn should cause the page to render differently due to a change in the element that is under the mouse. A simple example is:
<style type="text/css">
#one {
position: relative;
}
#two {
background-color: green;
display: none;
}
#one:hover #two {
display: block;
}
</style>
<script type="text/javascript">
$(window).load(function(){
$('#one').on('click', function() {
$('#one').css('left', '100px');
});
});
</script>
<div id="one">One
<div id="two">Foo</div>
</div>
See http://jsfiddle.net/Lq7Ac/1/ - when you click "One" the elements move so that the ":hover" styling should no longer be applied, but they don't actually get updated until you move the mouse after the click.
Is there something I can do in the "click" binding to recalculate/re-render immediately?
Update: This appears to only affect chrome on linux. So possibly a bug in chrome. Still, if anyone has ideas about working around this it would be great to hear them.
Could try doing it with css classes, instead of the :hover selector.
http://jsfiddle.net/4tfYN/
I'm attempting to use an audio player on my site and I need to use jquery to make an image act as a play/pause button.
Currently I'm using JS and CSS image sprites to make the image change when its clicked. So to begin with the image is displayed as a play button, when it's clicked the first time it becomes a pause button. Then if its clicked again it becomes a play button etc.
The first time its clicked it plays the track in the audio player, however if clicked again it wont pause it.
Ideally I need to make it so when the button is clicked it will play the track and then pause it if clicked again.
The audio player comes with custom events which I believe can be used to achieve what I'm after but I'm not too sure how to implement the play and pause event.
The custom event can be found here:
http://radykal.de/codecanyon/fullwidthaudioplayer/#api
Below is the current JS and CSS I'm using.
JS
<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
jQuery(this).toggleClass('playing');
});
});
</script>
CSS
.fap-single-track {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing{
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}
Any assistance would be much appreciated.
According to the link you gave, you have to use .toggle() and not .toggleClass
I got there in the end with a little help. I just had to add in the custom event in the correct place so the JS now looks like this:
<script type = "text/javascript">
jQuery(document).ready(function() {
jQuery(".fap-single-track").click(function() {
jQuery(this).toggleClass('playing');
jQuery.fullwidthAudioPlayer.toggle();
});
});
</script>