I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>
Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/
First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.
Related
I'm working on a Facebook reaction bar so it is pretty hard to copy the code here because it has a lot of events binded but all of you got facebook so if you want to check it by yourself - please do it.
The thing is that I managed to move the reaction bar under the react root and now I wanted to make the clicked reaction counter change the background color of itself to green.
And everything is working almost good excluding one thing: it is one click behind. To make you understand better I recorded little example how it looks. The red pulse ring appears when I click: https://vid.me/HqYp
Here is the changing code:
$(this).find('div._iu-[role="toolbar"]').bind('click',function(){
$(this).find('p.counter').each(function(){$(this).css('background-color','#48649F');});
$(this).find('span[aria-pressed="true"]').find('p.counter').css('background-color','green');
});
$(this) is div[id*="post"] so in $(this) I'm getting div with the whole post.
I thought that maybe I should use a callback function after changing-every-counter-to-default-color function but I don't know am I right and if it's right solution.
Thanks from above. (:
You can probably simplify this a bit. Although without the html structure I can't know for sure how the layout of the function works with respect to the event origin. Also I am not sure when the aria-pressed is set to true so I made the function a bit more generic. You simply add a data attribute to target the span you want to be targeted by the click.
<div class="_lu-" role="toolbar" data-target=".facebook-counter">
Later in your javascript you do the following
var $t = $(this);
var $t.target = $(this).data('target');
$t.on('click','div._lu-[role="toolbar"]', function() {
$t.find($t.target).css({
'background-color':'green'
}).siblings().css({'background-color','#48649F'});
});
This code is assuming first that your spans are in the same container, and second that the first $(this) refers to the parent container of this whole toolbar, and last that you have put data-target="" attributes with selectors for the appropriate target you want to affect.
This is a sample:
$(document).ready(function(){
$('.toolbar').on('click','.toolbar-item .icon', function(event) {
event.preventDefault();
event.stopPropagation();
if(!this.$) this.$ = $(this);
if(!this.parent) this.parent = this.$.parent();
if(!this.counter) this.counter = this.$.siblings('.counter');
this.parent.addClass('selected').siblings('.selected').removeClass('selected');
var count = this.counter.data('value');
count++;
this.counter.data('value',count);
this.counter.html(count);
});
});
.toolbar {
font-size:0;
text-align:center;
}
.toolbar-item .icon {
background:#FFF;
padding:30px;
border:1px solid #AAA;
border-radius:100%;
margin:0 20%;
transition:0.8s ease all;
}
.selected .icon {
background:#369;
}
.toolbar-item .counter {
background:#E0E0E0;
margin:0 10px;
transition:0.4s ease background;
}
.selected .counter {
background:#509050;
}
.toolbar-item {
font-size:10pt;
width:25%;
display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="toolbar">
<div class="toolbar-item">
<div class="icon">Like</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Wow</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Sad</div>
<div class="counter" data-value="0">0</div>
</div>
<div class="toolbar-item">
<div class="icon">Angry</div>
<div class="counter" data-value="0">0</div>
</div>
</div>
As of jQuery 1.7 they introduced the .on('click', function().... method. Try that instead and see if you get the same results.
Quick answer without having tested or the time to test your code. I recently had a performance issue with a nested function, so maybe look at that second line with the .each() method.
Is it possible to detect mouse events on an object that is adjacent (not a child for) but under another element in my HTML?
For example:
<style>
#test, test2 {
width: 100%;
height: 100%
}
</style>
<html>
<section class="full" id="test">
Full Screen
</section>
<section class="anotherFull" id="test2">
Full Screen As well
</section>
<script>
var elem = document.querySelector('#test2');
elem.addEventListener('hover', function(){
alert('you are hovering');
}, false);
</script>
<html>
If I however over the page, regardless if I use mouseenter mouseover or hover, and no matter how far down I look in the e (from document.addEventListener('hover', function(e){}, false); (like e.target etc. I can't detect a hover on the second (adjacent) element.
jsFiddle Demo
One way to address this would be to simply chain the events. You can do this with a combination of addEventListener and dispatchEvent. It is outlined in an MDN article named Creating and triggering events
var
outer = document.getElementById("outer"),
inner = document.getElementById("inner")
;
inner.addEventListener('mouseenter',function(e){
alert('hovering inner');
},false);
outer.addEventListener('mouseenter',function(ev){
alert('hovering outer');
this.style.display = "none";
var tar = document.elementFromPoint(ev.clientX, ev.clientY);
this.style.display = "block";
tar.dispatchEvent(new Event('mouseenter'));
},false);
#screen{
position:relative;
width:50px;
height:50px;
}
#outer{
position:absolute;
top:0;
left:0;
z-index:2;
width:50px;
height:50px;
background-color:blue;
}
#inner{
position:absolute;
top:0;
left:0;
z-index:1;
width:50px;
height:50px;
background-color:red;
}
<fieldset>
<legend>Screen Mockup</legend>
<div id="screen">
<div id="outer"></div>
<div id="inner"></div>
</div>
</fieldset>
Your post is unclear so I'll give a couple sugesstions.
If you're just trying to find out how to bind a hover event to the sibling of some known selector...
JavaScript
var el = document.getElementById('test').nextElementSibling;
el.addEventListener('mouseover', function(e){...});
CSS
#test+section:hover {
...
}
NOTE: HTML id attributes must be unique. So your markup shouldn't contain two elements with the same id.
I'm still a bit of a jQuery noob. I'm creating a fitness website where a user can hover over different body parts which then highlight a different colour. I want all divs with class 'arms' to turn red when a user hovers ONE of the arms (ids "leftarm" and "rightarm") but at the moment, nothing happens.
Any help would be appreciated :)
HTML
<div id="muscleStructure">
<div class="arms" id="leftarm">
</div>
<div class="arms" id="rightarm">
</div>
</div>
CSS
#muscleStructure{
position:relative;
width:150px;
}
.arms{
height:150px;
width:25px;
background:#CF6;
position:absolute;
top:15px;
cursor:pointer;
}
#rightarm{
right:0px;
}
#leftarm{
left:0px;
}
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(".arms").hover(function(){
$(".arms").css("background","#F00");
},function(){
$(".arms").css("background","#CF6");
});
</script>
do like this otherwise all the elements with class arms backgroung color will get changed:
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
also wrap it in $(document).ready()
$(document).ready(function(){
//your code here
});
UPDATED:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$(".arms").hover(function(){
$(this).css("background","#F00");
},function(){
$(this).css("background","#CF6");
});
});
</script>
Change the code like this:
WORKING FIDDLE DEMO
Try this:
$(".arms").hover(function(){
$(this).css("background","#F00"); // $(this) instead $('.arms')
},function(){
$(this).css("background","#CF6"); // $(this) instead $('.arms')
});
You're applying css to all elements in the DOM which are having class .arms, Target the current element which is hovered and you will see the desired effect.
Fiddle
I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>
The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)
Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/
[edit]Problem now solved
I have an edit(div with an image) button within another div that contains editable content, my plan is to have the button hidden until the cursor hovers over the content div.
My problem is that if I use display:none; in the CSS and then use a javascript function to show and hide the divButton again then the image does not display in FireFox.
If I use element.style.visibility = "visible"; then FireFox doesn't show the div at all.
Any input would be really appreciated thanks :)
Relevant code:
HTML
<div id="c1ContentSrc" class="widgetContent editable">
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
<div id="c1ContentEdit" class="cmsEditButton"><img src="../../Content/images/cmsEdit.png" alt="edit" /></div>
</div>
CSS
.cmsEditButton{
display:none;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
Alternate CSS
.cmsEditButton{
visibility:hidden;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
javascript function
function showEditButton(id, editId) {
if(editId.style.display == "none"){
if (!id.isContentEditable) {
editId.style.display = "block";
}
}else{
editId.style.display = "none";
}
}
Alternate javascript code
function showEditButton(id, editId) {
if (editId.style.visibility == "hidden" || editId.style.visibility == "") {
if (!id.isContentEditable) {
editId.style.visibility = "visible";
}
}else{
editId.style.visibility = "hidden";
}
}
Function calls
document.getElementById("c1ContentSrc").addEventListener("mouseover", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
document.getElementById("c1ContentSrc").addEventListener("mouseout", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
Problem has been solved now with the following change, moved the image above the razor output, it seemed to be interfering, also removed the unnecessary div
<div id="c1ContentSrc" class="widgetContent editable">
<img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" />
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
</div>
Instead of using visibility; you can use
display:none;
display:block;
display:none !important;
style="display:none;" //inline css
Avoid using visibility if you are using display, You can simultaneously play with them and implement the right code...