We Keep Coding

Image positioned below to be visible on mouse hover

There are two images placed one below the other, what i want to do is when you hover a mouse over the top image only the portion of the image below should be visible not the entire image to be replaced.Is this possible using jquery ?.
I am stuck on where to start. I tried changing the div background on hover but i couldn't get anywhere near what i need.Thanks.
html
<div style="background-image: url("image1.jpg")></div>
<div style="background-image: url("image2.jpg")></div>

Try this?
$(document).ready(function() {
var $hover = $("#hover");
var $foreground = $("#foreground");
$hover.hide();
$foreground.mousemove(function(event) {
var top = event.pageY - $hover.height() / 2;
var left = event.pageX - $hover.width() / 2;
$hover.css("top", top);
$hover.css("left", left);
});
$foreground.mouseover(function() {
$hover.show();
});
$foreground.mouseleave(function() {
$hover.hide();
});
});
http://jsfiddle.net/WV8jX/685/
EDIT: Updated to hide before mouse entering
http://jsfiddle.net/WV8jX/686/
EDIT:
It doesn't really solve your problem tho if you need the background to be shown as according to your description.

Since you have tagged jQuery, use the jQuery .hover().
Example:
$("selector").hover(
function() {
show your hidden image functionality here
}
);
https://api.jquery.com/hover/

I think there is no need of using Javascript/Jquery. CSS can do the job as below
HTML
<div class="bgdemo"></div>
CSS
.bgdemo{
background-image: url("image1.jpg");
}
.bgdemo:hover{
background-image: url("image2.jpg");
}
and there is a typo in your HTML, style tag is not ending properly.
edit
Check this jsfiddle, Position the background according to your requirement.
edit
Here I found good article seems bit complicated but worth reading..

Adding multiple div element by clicking a button

I want to create 4 div elements by clicking on button.
Please see, this fiddle for my current implementation.
In this current view the new element added to the bottom of each other.
My problem is that I don't know how to put them side by side.
I want to have 4 div elements (two at the top and two at the bottom, square shape)
Thats part of my code:
var box = document.getElementById('box'),
template = box.getElementsByTagName('div'),
template = template[0];
submit1.onclick = function () {
var new_field = template.cloneNode(true);
box.appendChild(new_field);
return false;
};
How can I do this?

It is because div's default display is block so you need to add
display:inline-block;// add this to your div style
Css
div { margin:1em;display:inline-block; }
Demo

you can use float:left as well as display:inline-block to your div.
div { margin:1em;float:left; }
OR
div { margin:1em;display:inline-block; }

You can try this using CSS
div { float :left }
You can give dynamic id to each div so it doesnt effect to other div.
here's your demo
Fiddle

On mouse hover show a div like jQuery Tooltip

Let consider fallowing scenario
<p>jhony</p>
<p>ram</p>
<p>lilly</p>
<div id="about"></div>
<script>
$(function() {
$('p').hover(function() {
$('#about').show();
}, function() {
$('#about').hide();
});
});
Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hovering element.
Example:
If I place mouse on 'jhony' then about div should be shown left to it,
If I place mouse on 'ram' then about div should be shown left to it,
If I place mouse on 'lilly' then about div should be shown left to it.
Finally it should work like jQuery Tooltip.

Why u use jQuery for it? U can use only css
p:hover span{display : block}
or if you want use jQuery/js you must calculate height from top of window to your p and set it for your div:
$(function() {
$('p').hover(function() { $('#about').css('top',this.offset().top
)}

how to remove hover on click

I'm working on a jQuery game. I have a 4 divs in a 2x2 design. The player needs to pick 1 option and verify with another button. The thing is, I have a hover effect adding a class which changes the background with a low opacity, and a click effect setting the background with a higher opacity. For divs 2, 3 and 4 it works fine - I hover and background changes color with opacity 0.3 and when I move the mouse out, it goes back to white. And when I click it, it changes the background to 0.4 and the hover doesn't affect them anymore. However, this is not working for the first div: the div changes background color on hover, but when I click it ,it keeps the hover color, and when I mouse out I see the click color, and every time I hover it changes the hover color again and so on.
Why is it happening only on div 1?
Code:
//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(
function () {
$(this).addClass("respuestahover");
},
function () {
$(this).removeClass("respuestahover");
});
//on click function for div1
$(".respuesta1").on("click", function () {
//if it hasnt been clicked, toogle class and change var to true
if (prendido1 == false) {
$(this).toggleClass("respuesta1b");
prendido1 = true;
//if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
if (prendido2 == true) {
$(".respuesta2").toggleClass("respuesta2b");
prendido2 = false;
}
if (prendido3 == true) {
$(".respuesta3").toggleClass("respuesta3b");
prendido3 = false;
}
if (prendido4 == true) {
$(".respuesta4").toggleClass("respuesta4b");
prendido4 = false;
}
//if is already clicked, turn off and change var to false
} else {
$(this).toggleClass("respuesta1b");
prendido1 = false;
}
});
The last part is repeated for every div "respuesta2", "respuesta3", etc..
Any idea?
EDIT
I was trying to clean up the code to make a jsFiddle and I think I got it to work:
http://jsfiddle.net/bqySN/2/
I'll just leave the code there if anyone is interested, be aware the code is unpolished and it need more generalisations.
EDIT 2
After some testing I actually found the problem:
if I alter the order of my css clases the app goes crazy:
This one is correct, with hover first
.respuestahover{
background-color:#f00;
opacity:0.2;
}
.respuestab{
background-color:#f00;
opacity:0.5;
}
This one is incorrect, hover second:
.respuestab{
background-color:#f00;
opacity:0.5;
}
.respuestahover{
background-color:#f00;
opacity:0.2;
}
I'm not really sure why it is behaving like that, but I'm glad I figure it out.

You are adding a class on hover... why would you do that via javascript if you can just use the :hover state from css? For example:
#foo .element p { color: red; }
#foo .element:hover p { color: blue; }
EDIT:
Sorry, I miss the original question.
If you want to remove the hover effect after clicking, you have lot of different ways to do this. You can remove the class defined with the hover via css, or if you want a jQuery solution you can use mouseenter/mouseleave with .on and then unbind with off.
See the following fiddle example.

You should simplify the bindings to just target them a little more generically, then remove the hover classes on all of them:
$(".respuesta").on("click", function (index) {
$(this).removeClass("hover");
// do other things
});
You can also use the index to find which number they are if they're in a list.
if you want the hover to not override the click, give the click an active class and tell the hovers to work on everything but them:
$('.respuesta:not(.active)').hover(function() {
// do something
}

Get the background of the row in a table to change for a click?

How can I get the background of the row in a table to change colors when a proper click is performed by the user?
I tried this via the :active pseudoclass, but doesn't work as I want. For example, on a mobile device touch screen, as soon as the user touches the screen, the intersected row will change colors, even though it's not a click [a click being a short mouseDown+mouseUp combination].
Here's the table:
<table>
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<div class="GPBYFDEEB"
__gwtcellbasedwidgetimpldispatchingfocus="true"
__gwtcellbasedwidgetimpldispatchingblur="true">
<div>
<div class="GPBYFDEAB" tabindex="0" style="outline:none;" __idx="0" onclick="">
<div class="GPBYFDECB" style="outline:none;" __idx="1" onclick="">
<!-- finally this is me. -->
<div class="tableRow">
Here's my css:
.tableRow {
background-color: green;
}
.tableRow:active {
background-color: red;
}
Is there a way to do this? (I'm using gwt to generate the above html, but don't think it matters here).
Just to be precise, what'd I'd like is for the background color of the row to change to red after an onclick event is hit. After a brief period, revert the background to its original color. I'm basically trying to reproduce the visual effect of clicking a list item on iOS or android native widgets.
Thank you

JavaScript makes it pretty straight-forward:
var rows = document.getElementsByClassName("tableRow"); //get the rows
var n = rows.length; //get no. of rows
for(var i = 0; i < n; i ++) {
var cur = rows[i]; //get the current row;
cur.onmousedown = function() { //when this row is clicked
this.style.backgroundColor = "red"; //make its background red
};
cur.onmouseup = function() {
this.style.backgroundColor = "green";
}
}
If you have jQuery included, it's even simpler:
$(".tableRow").mousedown(function() {
$(this).css("background-color", "red");
});
$(".tableRow").mouseup(function() {
$(this).css("background-color", "green");
});
A little demo that uses the pure JavaScript version: little link. (I took the liberty to change the colors a bit!).

This is how you do it in GWT: you attach a handler to your CellTable or DataGrid.
myTable.addCellPreviewHandler(new Handler<myObject>() {
#Override
public void onCellPreview(CellPreviewEvent<myObject> event) {
if ("click".equals(event.getNativeEvent().getType())) {
myTable.getRowElement(event.getIndex()).getStyle().setBackgroundColor("red");
}
});
}
If you don't like the way it looks (background color being different from border color), you can use this instead:
myTable.getRowElement(event.getIndex()).addClassName("redRow");
This way you can specify more rules in your redRow CSS class, like:
.redRow {
background: red;
border: 2px solid red;
}
When you do not need this color for your row, you just remove this class or use .getStyle().clearBackgroundColor(), if you prefer the former solution.

Changing styles on click is indeed something that requires javascript and that is not veryu difficult, as #Abody97 already demonstrated in his answer.
I think it is worth mentioning what the :active pseudo selector stands for, as you seem to be confused. Personnaly I think its name is pourly chosen, it would be much clearer if it was called :down or something. Cause that is exactly what it is. It targets the down state of a button or link.
Each link or button has 3 states:
- default: no pseudo selector required. You could call this the 'up' state.
- hover: targeted with the :hover pseudo selctor. Only usefull when working with the mouse, and triggered when the mouse is over the element (for modern browsers this is any element, not just a link or button)
- active: this is the down state as I mentionned before. It is targeted by the :active pseudo selector. When using a mouse it is not realy that usefull cause it will only be triggered as long as the mouse button is held down. On a toutchscreen it is much more usefull cause it indicates the user tapped correctly.
I am not sure what the content of your table is going to be (your html snippet stops when it becomes interesting), but I think it is worth mentionning the :focus pseudo selector as well. This one gets triggerd when an element 'has focus'. It works only on input elements (input, textarea) or links (typicly only usefull when navigating with the keyboard). I believe this is the one you where after when you where trying to use the :active.
I set up a small example with the :focus here: http://jsfiddle.net/6tN6B/
Especially the last sample could be usefull for you. It can be done easier with js, but I am a big fan of using js only when it is absolutly nessecary, so non js users get the same experience on your site.