Jquery click event on div - javascript

I have this code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover {
background-image:url(ikoniceKategorije/07h.jpg);
}
// here I have a code for .kat2,kat2 ... styles
#div {
width:220px;
height:30px;
overflow:hidden;
}
</style>
<script>
$(function() {
$('#div div').click(function() {
var elem = $(this);
var style = elem.css('background-image');
if(/h\.jpg/.test(style)) {
elem.css('background-image', style.replace(/h\.jpg/, '.jpg'));
} else {
elem.css('background-image', style.replace(/\.jpg/, 'h.jpg'));
}
});
});
</script>
</head>
<body>
<div id="div">
<div class="kat1 changing"></div>
<div class="kat2 changing"></div>
<div class="kat3 changing"></div>
<div class="kat4 changing"></div>
<div class="kat5 changing"></div>
<div class="kat6 changing"></div>
<div class="kat7 changing"></div>
</div>
</body>
</html>
I have a problem - when I click once div change bacground color but when I click second time on same icon then I cant change div background...
demo www.pluspon.com/kategorije.html

Why do you want to have this functionality in JavaScript? An other option would be to use CSS classes to simplify the process:
$(function() {
$('#div div').click(function() {
$(this).toggleClass('active');
});
});
CSS:
.kat1 {
background-image:url(ikoniceKategorije/07.jpg);
width:30px;
height:30px;
float:left;
}
.kat1:hover,
.kat1.active {
background-image:url(ikoniceKategorije/07h.jpg);
}

Related

how to conditionally transform div to and from a state on multiple presses of same button

<script>
$(document).ready(function(){
$("button").click(function(){
$(".inside").css("transform","translateX(0px)")
});
hOW DO I ABLE TO MAKE THE JS CODE TRANSLATE ON CLICK BACK AND FORTH?
if($(document).click("button")){
$(".inside").css("transform","translateX(400px)");
}
});
</script>
<style>
#cont{
background:#98bf21;
height:400px;
width:400px;
}
.inside{
background:#09C;
height:400px;
width:400px;
position:absolute;
overflow:hidden;
transform:translateX(-500px);
transition:1s;
}
</style>
<body>
<button>Button</button>
<div id="cont" >
<div class="inside"></div>
</div>
</body>
</html>
Try this
$(document).ready(function(){
var clicked = false
$("button").click(function(){
if (clicked)
$(".inside").css("transform","translateX(-500px)");
else
$(".inside").css("transform","translateX(0px)");
clicked = !clicked;
});
});

Jquery/css displaying an image on hover

I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below :
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton).
Write CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
Demo
You can also use visibility:visible; and visibility:hidden; instead of display property
Give a common parent to them and connect the hover to it.
html:
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css:
#mydiv {
display: none;
}
Jq:
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
Wrap it inside div:
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div.
Wrap your button in a container, like so:
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
http://jsfiddle.net/n4B5b/1/
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? If so (such as adding a class on hover to the #mydiv), check it and don't fadeout.
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>

How to get all elements within a div and putan onclick on them using Javascript

I want to be able to grab all the bubbles inside the "bubble game" div and put an onclick on them so that they dissapear(delete from the page) when being clicked. I have tried making a variable in javascript that contains all bubbles in the div and then put an onclick on them but it doesn't seem to work. Preferably not using jquery.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bubbles</title>
<link href="bubbles.css" rel="stylesheet">
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/bubbles.js"></script>
<script src="scripts/java.js"></script>
</head>
<body>
<!--background bubbles-->
<div id="b-blue" class="b" data-speed="1"></div>
<div id="b-green" class="b" data-speed="2"></div>
<div id="b-red" class="b" data-speed="4"></div>
<!--bubble text-->
<div id="bText">
B<br />U<br />B<br />B<br />L<br />E<br />S<br />!
</div>
<!--bubble game-->
<div id="bubbleGame">
<!-- <div class="bubble"></div> -->
</div>
<!--bubble score and reset-->
<div id="bottomCorner">
<div id="reload">refresh...</div>
<div id="score">0</div>
</div>
</body>
</html>
body{
background:black;
}
#bText{
width:300px;
float:left;
height:auto;
color:white;
font-size:300px;
text-align:center;
font-family:'spilt_inkregular', Verdana, Geneva, sans-serif;
position:relative;
z-index:10;
opacity:0.8;
}
.b{
width:100%;
height:1000%;
position:fixed;
top:0;
left:0;
}
#b-blue{ background:url(images/b-blue.png); }
#b-red{ background:url(images/b-red.png); }
#b-green{ background:url(images/b-green.png); }
#bubbleGame{
width:75%;
height:100%;
position:fixed;
right:2%;
top:0;
}
.bubble{
background:url(images/b-white.png);
background-size:cover;
position:absolute;
}
window.onload = bubblegame;
function bubble(){
var bubbleburst = document.querySelectorAll("#bubbleGame");
for(var i=0; i<bubbleburst.length; i++){
bubbleburst[i].onclick = burst;
}
}
function burst(){
alert("hi");
}
$(document).ready(function() {
$("#bubbleGame").on("click", ".bubble", function() {
$(this).hide();
})
});
If you would like to remove the element from the DOM, use $(this).remove(), instead of $(this).hide().
You should use event-Delegation:
I prepared a simplified Fiddle
document.getElementById("bubblegame").addEventListener("click", function(element){
var target=element.target;
if(target.id==='bubblegame') return;
target.style.display='none';
});
In this case, you do not add eventListener to the bubbles itself, but to the parent div.
When an element is clicked, the event bubbles up to the "catching" div, where a central dispatcher is waiting for that event. So you have the advantage of having one handler to deal with all events. For more information about delegation of events, take a look here
Since you seem to be using jQuery:
$("#bubbleGame > .bubble").click(function() {
$(this).hide();
});
without Jquery:
var bubbles = document.querySelectorAll('.bubble');
for (var bubble of bubbles) {
bubble.onclick = deleteBubble
}
function deleteBubble() {
this.parentNode.removeChild(this);
}
FIDDLE
You could use jQuery and do it like this
$(document).ready(function() {
$(".bubble").click(function() {
$(".bubble").hide();
})
});

Position fixed with slideToggle() to push content down

http://jsfiddle.net/b6rkb/18/
I want to have a fixed bar at the top of my page, that on hover shows a sub-bar. I want this sub-bar to push the rest of the page down when this happens.
CSS:
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
.page{
height:5000px;
}
.fixed{
position: fixed;
}
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
});
});
</script>
<body>
<div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
sup
</div>
You should also give the margin to the page and put the position fixed div above the page.
Working Demo
Jquery
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$(".page").stop().animate({"margin-top":"120px"}, "slow")
}, function() {
$(".page").stop().animate({"margin-top":"0"}, "slow")
$("#panel").stop().slideToggle("slow");
});
});
I'm not sure about the slideToggle, Please comment if you feel this is wrong.
try this... (You can test this http://jsfiddle.net/b6rkb/28/)
<style> <!-- Add to style -->
#page{
height:200px;
display:none;
opacity: 0;
}
</style>
<script>
$(document).ready(function(){
$("#flip").hover(function(){
$("#panel").stop().slideToggle("slow");
$("#page").stop().slideToggle("slow"); //Add this line
});
});
</script>
<body><div class="page">
<div class="fixed">
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
</div>
<br><br><br>
<div id="page"> <!-- Add this div -->
test
</div>
sup
</div></body>

How to change image source in JavaScript through the array?

I have a grid with an template column and in that column I have text and icon,
on icon mousehover (on mode) and mousehoverout (off mode) I am changing the icon.
Now when the user click on icon it opens a popup and the icon must be in "On" mode but if the user without closing clicks another row's icon then previous must be in off and current should be in on mode.
So for that I have written this:
<DataItemTemplate>
<div class="floatLeft titleBlock">
<a href="<%# Eval("Link") %>" class="ellipsesTooltip"><span>
<%# Container.Text%></span><%# Container.Text%></a></div>
<div class="floatRight">
<a onclick="GridValueCatcherMoreLike(this, '<%# Eval("ResearchNoteId").ToString()%>');">
<img alt="+/- 30 days matching Author, Industry, Theme" src="../Image/Research/MoreByOff.gif" onClick="check(this,'../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOn.gif');"
onmouseover="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOn.gif', '../Image/Research/MoreByOff.gif');"
onmouseout="ToggleAuthorMoreLikeImage(this, 'MoreLikePopUp', '../Image/Research/MoreByOff.gif', '../Image/Research/MoreByOff.gif');" />
</a>
</div>
function check(sender, onImg, offImg) {
debugger;
for(var i=0;i<activeImgList.length;i++)
{
if(sender!=activeImgList[i])
activeImgList[i].scr = offImage;
else
activeImgList[i].scr = onImg;
}
return true;
}
function ToggleAuthorMoreLikeImage(sender, popupname, imageurl, offImageurl)
{
var win = ResearchPopup.GetWindowByName(popupname);
if (!ResearchPopup.IsWindowVisible(win))
{
sender.src=imageurl;
activeImgList[arrayIndex]=sender;
arrayIndex = arrayIndex + 1;
}
else
{
activeImgList[arrayIndex] = sender;
arrayIndex = arrayIndex + 1;
return;
}
}
Why not take a step back and use something like jQuery.toggleClass() or jQuery.hover() on the client side?
.hover()
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>
.toggleClass()
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>

Categories

Resources