I'm trying to make a blue div that turns red when clicking on it and the red div turns back to blue ( so I can add more events on the click after clicking, so .css isn't really an option)
When clicking on the div when it's blue, it turns red. But when I click the red div it doesn't respond, even when I add a simple alert()
Does anyone know what I'm doing wrong?
This is my current code and a JSFiddle
code:
$("#Blue").click(function(){
$("#Blue").attr("id","Red");
});
$("#Red").click(function(){
$("Red").attr("id","Blue");
});
If anyone could tell me what Exactly I'm doing wrong that would be great, thank you in advance
You need to use event delegation -- your click handlers are bound to the matching elements at the time the code is first run, and only then. Since there's no #Red element at that point in time, that second click handler isn't bound to anything.
$(document).on('click',"#Blue", function(){
$("#Blue").attr("id","Red");
});
$(document).on('click',"#Red", function(){
$("#Red").attr("id","Blue");
});
http://jsfiddle.net/mblase75/HDFyn/
http://api.jquery.com/on
That said, the "proper" way to do this would be to add and remove a class, not change the ID:
$('#btn').on('click', function(){
$(this).toggleClass("red blue");
});
http://jsfiddle.net/mblase75/mKMW6/
.click() binds only to existing elements at the time you call it; it will not bind to a later-created element or an element to which you assign the id later.
The fix is to use event delegation. See here and here for more information.
Also, use classes, instead -- much more flexible.
HTML
<div class="Test blue">Test</div>
jQuery
$(".blue, .red").click(function(){
$(this).toggleClass('red blue')
});
CSS
.Test{
width: 50px;
height: 50px;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Fiddle: http://jsfiddle.net/8FmSt/3/
You could use the class and update the ID like below instead of having 2 function to do that action,
$('.Test').on('click', function () {
this.id = (this.id == 'Blue')?'Red':'Blue';
});
DEMO: http://jsfiddle.net/8FmSt/2/
If it is all about changing color, then use a css to change to color like below,
$('.Test').on('click', function () {
$(this).toggleClass('Red Blue');
});
http://jsfiddle.net/8FmSt/5/
Try:
$(".Test").click(function(){
var id = $(this).attr("id");
if(id == "Red"){
$(this).attr("id","Blue");
}
else{
$(this).attr("id","Red");
}
});
Updated fiddle here.
Let's uncomplicate
HTML
<div class="Test">Test</div>
JQUERY
$(".Test").on('click', function () {
$(this).toggleClass("red");
});
CSS
.Test {
width: 50px;
height: 50px;
background: blue;
}
.red {
background: red;
}
Related
As I said in title my problem is I can't hover just one element. I gave some effect but each element is affected. I know it's a simple question and I search google and stackoverflow, I found. But any solution is working.
İn the codes are here: https://jsfiddle.net/dty0wth0/
Also I tried that too:
$("section#box").mouseenter(function() {
$('section#box span').css({'transition':'1s','top':'80px'});
}).mouseleave(function() {
$('section#box span').css({'transition':'1s','top':'-80px'});
});
Thanks for helping.
You have an addressing problem.
This hovers the div (entire image), and only works with the span.
$("section#box div").hover(
function() {
$('span', this).css({'transition':'1s','top':'80px'})
},
function() {
$('span', this).css({'transition':'1s','top':'-80px'});
}
);
Although, frankly, this should just use CSS transitions entirely:
section#box div {
position: relative;
}
section#box div span {
top: -80px;
transition: all 1s;
position: absolute;
}
section#box div:hover span {
top: 80px;
}
use jQuerys hover which handles both the mouse in function and hte mouse out function:
$("section #box").hover(
function() {
$('section #box span').css({'transition':'1s','top':'80px'})}
,function() {
$('section #box span').css({'transition':'1s','top':'-80px'});
}
);
also you could proabably use $(this).find('span') inside the hover functions to target the span to the #box that is focussed.
I cannot comment so Ill do it here...
I guess you will need to do is showen here:
https://css-tricks.com/text-blocks-over-image/
You should add the span to your main selector then your mouseenterer and mouseleave will be wrapped in that context.
$("section #box span").mouseenter(function() {
$(this).css({'transition':'1s','top':'80px','text-size':'25px'});
}).mouseleave(function() {
$(this).css({'transition':'1s','top':'-80px','text-size':'12px'});
});
You have a lot of syntax errors (missing comma after function, extra parentheses)
You have a lot of unnecessary code (section selector, extra this context)
You need to include a library that has that method (for instance, jQuery) as you did not attach jQuery to your fiddle
jsFiddle
$("#box").on('mouseenter mouseleave', 'div', function(e) {
var $target = $('span', this);
if (e.type == 'mouseenter') {
$target.css({ transition: '1s', top: '80px' });
} else {
$target.css({ transition: '1s', top: '-80px' });
}
});
When the div is hovered (e.g., mouseenter, mouseleave) call the in/out function. Inside the in/out determine if it was the enter or leave event and apply the CSS to the target span inside the div.
This is actually the better solution because you're binding one event handler to the #box, instead of to each div or span. Once the box is hovered, it checks to see if the target (div) was hovered and if so, calls the function.
Inside the function, the target for the effect is span. this points to div, so simply find the span within the this (div) context and apply the CSS.
I'm trying to toggle the css of two buttons in a list. If one is clicked, the other one should have no border, and vice versa. Here's my code:
function navigate_menu(event, ec){
$(event).css("border-top", "3px solid rgba(102,205,0, 0.8)");
var search_id=$(event).attr("name");
var chartid = "pie_chart_"+$(event).attr("name");
var editid = "edit_"+$(event).attr("name");
if(ec=="c"){
$(".li-edit").css("border-top", "0px solid rgba(102,205,0, 0.8)");
$("#"+chartid).appendTo($("#chart_"+search_id+"_container"));
$("#"+editid).css("display","none");
$("#"+chartid).css("display","block");
}else{
$(".li-chart").css("border-top", "0px solid rgba(102,205,0, 0.8)");
$("#"+editid).appendTo($("#chart_"+search_id+"_container"));
$("#"+chartid).css("display","none");
$("#"+editid).css("display","block");
}
}
HTML:
+"<ul id=\"navigation_list\">"
+"<li onclick=\"navigate_menu(this,'c')\" class=\"li-chart\" name=\""+search_id+"\">Chart & Legend</li>"
+"<li onclick=\"navigate_menu(this,'e')\" class=\"li-edit\" name=\""+search_id+"\">Edit Chart\\Change Data</li>"
+"</ul>"
So, when I first click, nothing happens, and then after the second it works. Then when I click on the other button, same (first nothing, second works). I thought that maybe on the first click it thinks I click on the parent (ul), but I don't know how would I fix it. And sorry for the pluses, its because this "menu" gets added to multiple elements from a JS function.
I have also tried addClass() and removeClass(), still same outcome.
Thank you!
Give each a li a shared class, e.g. li-item:
<ul id="navigation_list">
<li onclick="navigate_menu(this,'c')" class="li-chart li-item" name="+search_id+">Chart & Legend</li>
<li onclick="navigate_menu(this,'e')" class="li-edit li-item" name="+search_id">Edit Chart Change Data</li>
</ul>
Then use a JQuery .on("click" function to detect the click and apply the border to the clicked and remove from all others:
$(document).ready(function() {
$(document).on("click", ".li-item", function() {
$(this).addClass("border");
$(".li-item").not($(this)).removeClass("border");
})
})
Make a CSS class with the style to apply:
.border {
border: 2px solid blue;
}
Fiddle: https://jsfiddle.net/w9bwq57m/
Create bordered class in your css. Then call this fn somewhere in your click handler by passing element and second argument (no idea how to name it) I just wrote context. Make sure that you have deleted obsolete staff from the code above , which is responsible for border change .
function toggleBorder(element, context){
if(context === 'c'){
if($(".li-chart").hasClass('bordered')){
$(".li-chart").removeClass('bordered');
}
$(".li-edit").addClass('bordered');
}else{
if($(".li-edit").hasClass('bordered')){
$(".li-edit").removeClass('bordered');
}
$(".li-chart").addClass('bordered');
}
}
I would suggest using jquery click instead of onlick on li elements. Also you'd need to add data-key="c" and data-key="e" to the li elements so those values can be passed to the function:
$("#navigation_list li").click(function () {
navigate_menu(this, $(this).data('key'));
});
There are a bunch of div elements on the page.
I have a nested div inside of them.
I want to be able to add a class to the clicked element, and .show() the child div.
$('.container').on('click', function(){
$(this).toggleClass('red').children('.insideItem').slideToggle();
});
I can click on it, it drops down.
Click again, it goes away.
So, now I need some method to removeClass() and slideUp() all of the other ones in the event of a click anywhere except the open div. Naturally, I tried something like this:
$('html').on('click', function(){
$('.container').removeClass('red').children('div').slideUp();
});
Well, that just stops the effect from staying in the first place. I've read around on event.Propagation() but I've read that should be avoided if possible.
I'm trying to avoid using any more prebuilt plugins like accordion, as this should be a pretty straightforward thing to accomplish and I'd like to know a simple way to make it work.
Would anyone be able to show a quick example on this fiddle how to resolve this?
Show only one active div, and collapse all others if clicked off
https://jsfiddle.net/4x1Lsryp/
One way to go about it is to update your code with the following:
1) prevent the click on a square from bubbling up to the parent elements
2) make sure to reset the status of all the squares when a new click is made anywhere.
$('.container').on('click', function(){
$this = $(this);
$('.container').not($this).removeClass('red').children('div').slideUp();
$this.toggleClass('red').children('div').slideToggle();
return false;
});
See the updated JSfiddle here: https://jsfiddle.net/pdL0y0xz/
You need to combine your two approaches:
for (var i = 0; i < 10; i++) {
$('#wrap').append("<div class='container'>" + i + "<div class='insideDiv'>Inside Stuff</div></div>");
}
$('.container').on('click', function() {
var hadClassRed = $(this).hasClass('red');
$('.container').removeClass('red').children('div').slideUp();
if (!hadClassRed) {
$(this).toggleClass('red').children('div').slideToggle();
}
});
.container {
width: 200px;
height: 200px;
float: left;
background: gray;
margin: 1em;
}
.insideDiv {
display: none;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap"></div>
i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.
Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.
Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}
Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});
first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}
<div><span>shanghai</span><span>male</span></div>
For div like above,when mouse on,it should become cursor:pointer,and when clicked,fire a
javascript function,how to do that job?
EDIT: and how to change the background color of div when mouse is on?
EDIT AGAIN:how to make the first span's width=120px?Seems not working in firefox
Give it an ID like "something", then:
var something = document.getElementById('something');
something.style.cursor = 'pointer';
something.onclick = function() {
// do something...
};
Changing the background color (as per your updated question):
something.onmouseover = function() {
this.style.backgroundColor = 'red';
};
something.onmouseout = function() {
this.style.backgroundColor = '';
};
<div style="cursor: pointer;" onclick="theFunction()">
is the simplest thing that works.
Of course in the final solution you should separate the markup from styling (css) and behavior (javascript) - read on it on a list apart for good practices on not just solving this particular problem but in markup design in general.
The simplest of them all:
<div onclick="location.href='where.you.want.to.go'" style="cursor:pointer"></div>
I suggest to use jQuery:
$('#mydiv')
.css('cursor', 'pointer')
.click(
function(){
alert('Click event is fired');
}
)
.hover(
function(){
$(this).css('background', '#ff00ff');
},
function(){
$(this).css('background', '');
}
);
I suggest to use a CSS class called clickbox and activate it with jQuery:
$(".clickbox").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
Now the only thing you have to do is mark your div as clickable and provide a link:
<div id="logo" class="clickbox"></div>
Plus a CSS style to change the mouse cursor:
.clickbox {
cursor: pointer;
}
Easy, isn't it?
add the onclick attribute
<div onclick="myFunction( event );"><span>shanghai</span><span>male</span></div>
To get the cursor to change use css's cursor rule.
div[onclick] {
cursor: pointer;
}
The selector uses an attribute selector which does not work in some versions of IE. If you want to support those versions, add a class to your div.
As you updated your question, here's an obtrustive example:
window.onload = function()
{
var div = document.getElementById("mydiv");
div.style.cursor = 'pointer';
div.onmouseover = function()
{
div.style.background = "#ff00ff";
};
}
<div style="cursor: pointer;" onclick="theFunction()" onmouseover="this.style.background='red'" onmouseout="this.style.background=''" ><span>shanghai</span><span>male</span></div>
This will change the background color as well
If this div is a function I suggest use cursor:pointer in your style like style="cursor:pointer" and can use onclick function.
like this
<div onclick="myfunction()" style="cursor:pointer"></div>
but I suggest you use a JS framework like jquery or extjs