Mouseover Function not working - javascript

Lets try something more simple. I have a pink box and I want it to turn from pink to red when the user mouseovers it. This function is not working. Can anyone help me fix the code or find the error?? They have told me if I can't get this working I am going to be let go!!
<html>
<head><title></title>
<script src="raphael-min.js"></script>
<script src="jquery-1.7.2.js"></script>
<style type="text/css">
#input
{
margin-top:-200px;
}
</style>
</head>
<body style="background-color:black";>
<div id="draw-here-raphael" style="height: 400px; width: 400px; background: #666; z-index:0;">
</div>
<div id="input" style="z-index:99;" >
<input type="text" value="0"; style="text-align:right;" /><br />
</form>
</div>
<script type="text/javascript">
//all your javascript goes here
$(function() {
var r = new Raphael("draw-here-raphael"),
// Store where the box is
position = 'left',
// Make our pink rectangle
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
$("rect").(function(i) {
$("rect").mouseover(function() {
$("rect").attr({"fill": "red"});
});
});
});
</script>
</body>
</html>

why dnt u use css for this
#draw-here-raphael:hover{background-color:Red;}
Or, Use this code instead
$(rect).mouseover(function() {
this.attr({"background-color": "red"});
});

Try changing the $("rect") to just rect
rect = r.rect(20, 20, 250, 300, 10).attr({"fill": "#fbb"});
rect.(function(i) {
rect.mouseover(function() {
rect.attr({"fill": "red"});
});
});
However as someone pointed out in a comment it may not work with SVG.
If you have the rect as a div with height and width, fixed position with left and top and a background-color you can just change the css value of background-color on mouseover.
For a div example:
Suppose you have a div with id="pinkBox"
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
You will need to position the div too, I'm not sure how the Raphael stuff works, never looked at it personally, but if its fixed positioning then you can emulate this in css with position:fixed; top: some value; left: some value; width: some value; height: some value
Full code:
HTML:
<div id="pinkBox" style="position:fixed; left:20, top:20; width:250; height:300" ></div>
Javascript:
$(document).ready(function() {
$('#pinkBox').mouseover(function() {
$(this).css('background-color','#ff0000');
});
});
Unfortunately if you are not using CSS3 you will not be able to have rounded corners unless you use images. Using CSS3 though you can add rounded corners by adding the following style to the div
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
For simplicity I have added the styles inline on the div, I would suggest making a class though and using the class attribute, keeping your css in a seperate file or in the head of your document.

I changed it around a bit, but what about something like this:
var canvas = Raphael(document.getElementById("draw-here-raphael"));
// Make rectangle pink
var r = canvas.rect(20, 20, 250, 300, 10).attr("fill", "#fbb");
$("#draw-here-raphael").mouseover(function() {
r.attr("fill", "red");
});
http://jsfiddle.net/7PLy9/

Related

Increasing div's width doesn't work as expected

What I would like to achieve is when scrolling to the end of row(right arrow) then to have selection div stop on the last element. Before I was adding few dummy cells and it worked. But now I decided to just increase width of row div by some amount.
if(!rows[currentRowIndex].reachedEnd)
{
console.log("increasing ");
$("#row" + currentRowIndex).width("+=210");
rows[currentRowIndex].reachedEnd = true;
}
This doesn't work for some reason. I even tried to increase by some bigger number but it jumps to some unexpected location, which means I don't understand well what is going on with div after width is changed.
Working copy(resize window to show 2 cells in the client area) https://jsfiddle.net/souren/98rddfzp/3/
UPD1:
I even tried:
$("#row" + currentRowIndex).width($("#row" + currentRowIndex).width() + 210);
with same result.
jQuery's width takes the actual width as parameter and does not evaluate expressions. You have to do so yourself.
Here's an working example:
$(function () {
var $div = $('#myDiv')
$('#increase').on('click', function () {
$div.width($div.width() + 250)
})
})
#myDiv {
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>
<button id="increase">Increase</div>
Try to follow this example, this will solve your problem::
HTML
<div class="testDiv" style="background-color: grey; width: 100px;">Rana</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('button').on('click', function(){
$(".testDiv").width($(".testDiv").width() + 210);
});
});
</script>

HTML/JavaScript Expand buttons/divs when hovering over

I know the onmouseover and onmouseout so that they can run a function when hovered over on when not being hovered over but I don't know how to make them expand. I have made dropdown boxes, but I can't get them to expand.
EX:
123 [Not Hovering]
123456789123 [During Hover]
I've Tried This:
<!DOCTYPE html>
<head>
</head>
<body>
<p id="exp" onmouseover="over()" onmouseout="out()" style="background- color: #FFD700;width: 100px;height: 250px;">
Expand Me!
</p>
<button onclick="run()">Run</button>
<script type="text/javascript">
function over() {
document.getElementById("exp").style.width = "250px";
}
function out() {
document.getElementById("exp").style.width = "100px";
}
</script>
<div id="x" style="background-color: #0FF"> </div>
</body>
</html>
but I want it to come out and go back in slowly not instantly, and I'm sure there is a better way to do this because I don't want to go pixel by pixel to get it to go slower because that would lagg the webpage
I think a CSS transition would be best for this, no JS needed.
div {
width: 25px;
overflow: hidden;
transition: width 1s;
}
div:hover {
width: 100%;
}
<div>123456789123</div>

How to animate inserts and removes in a container with justify-content?

Using the flexbox justify-content property, elements can be distributed evenly in their container. However, I want to animate their positions when a new element is inserted or an existing one is removed.
I only managed to animate the height of the elements so far. However, there is a jump at the end of the animation since the gaps around the removed element that got animated to height: 0 vanish. Analogously, when inserting an element there is a jump at the beginning of the animation.
Is it possible to make an animation from end to end with justify-content? Here is an example to play with. Using CSS transition is preferred.
The main problem is that the behavior you are getting is the expected one.
In the very same instant that card.remove() is executed the flexbox justify-content property need to adjust the gaps around the removed element (as you said). And, as Paulie D has pointed out, there is nothing to animate about.
The only solution I can think about is to skip the flex thing and use javascript to create the necessary gaps among the card elements.
Here I leave the snippet:
var animation_time = 500;
var column_height = $('.column').height();
var cards_height = $('.card').height();
var cards_number;
var cards_total_height;
var space_to_be_distributed;
var placeholder_height;
function updateSizes(cards_number)
{
cards_total_height = cards_number * cards_height;
space_to_be_distributed = column_height - cards_total_height;
placeholder_height = space_to_be_distributed / (cards_number + 1);
}
updateSizes($('.card').length);
$('.placeholder').height(placeholder_height);
$(document).on('click', '.card', function () {
var card = $(this);
card.animate({height: 0, opacity: 0}, animation_time, function () {
card.remove();
});
updateSizes($('.card').length - 1);
var placeholder = card.next();
$('.placeholder').not(placeholder).animate({height: placeholder_height}, animation_time);
placeholder.animate({height: 0}, animation_time, function () {
placeholder.remove();
updateSizes($('.card').length);
$('.placeholder').animate({height: placeholder_height}, animation_time);
});
});
$('a').click(function () {
var card = $('<div class="card">');
card.css({opacity: 0, height: 0})
.appendTo('.column')
.animate({height: 25, opacity: 1}, animation_time);
var placeholder = $('<div class="placeholder">');
placeholder.css({height: 0})
.appendTo('.column');
updateSizes($('.card').length);
$('.placeholder').animate({height: placeholder_height}, animation_time);
});
body, html, .column {
height: 100%;
margin: 0;
}
.column {
float: left;
width: 100px;
background: navy;
overflow: hidden;
}
.card {
height: 25px;
width: 100px;
background: grey;
}
.placeholder {
height: 25px;
width: 100px;
}
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<div class="column">
<div class="placeholder"></div>
<div class="card"></div>
<div class="placeholder"></div>
<div class="card"></div>
<div class="placeholder"></div>
<div class="card"></div>
<div class="placeholder"></div>
</div>
Add card
</body>
</html>
Hope it helps!
EDIT - I made the following changes in the code:
I change the fiddle for a SO snippet.
I forced an update of elements size at the end of the animation (in case you click to remove an element before the last one has been completely removed)
I change the size of the elementes to adapt it to the (small) SO snippet window.

Javascript: Smoke-Logo effect

I am trying to make a logo to have smoke all over it. I bummped into this jsfiddle:
http://jsfiddle.net/jonnyc/Ujz4P/5/ and now I am trying to change it so it goes over a logo
however it doesn't want to work.
index.html
<html>
<head>
<title>Smoke</title>
<style>
.container
{
width: 360px;
height: 200px;
border: 2px solid black;
}
</style>
<script type="text/javascript" src="smoke_effect.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<img id="smoke-logo" src="images.jpg"/>
</div>
</body>
</html>
and all of the javascript on the left hand side in the jsfiddle I paste it in a docment called smoke_effect.js however I haven't change the code at all I just change the tag from "myCanvas" to "smoke-logo".
I made 2 big changes to your fiddle
I changed the CSS to read:
#myCanvas{
background:transparent;
}
and the draw function, instead of filling with semi-transparent black, just clears canvas.
// The function to draw the scene
function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,400,400);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
This will allow you to put an image behind the smoke.

On mouseover, changing an image's opacity and overlaying text

I want to drop the opacity and overlay text on a thumbnail image when I mouse over it. I have several ideas about how to do it, but I'm fairly certain they're inefficient and clumsy.
Make a duplicate image in Photoshop with the text overlay and reduced opacity. Swap the original out for the duplicate on mouseover.
Use CSS to drop the opacity on mouseover. Use Javascript to toggle visibility of a div containing the overlay text.
The problem I see with 1 is it seems like an unnecessary use of space and bandwidth, and will cause slow load times. With 2, it seems like I'd have to hard-code in the location of each div, which would be a pain to maintain and update. I know this is a somewhat general question, but I'm at a loss about how to go about this. How can I do this relatively simple task in a way that will make it easy to add new thumbnails?
Wrap your image in a <div class="thumb">
Add position: relative to .thumb.
Add <div class="text> inside .thumb.
Add display: none; position: absolute; bottom: 0 to .text.
Use .thumb:hover .text { display: block } to make the text visible on hover.
Like this: http://jsfiddle.net/dYxYs/
You could enhance this with some JavaScript/jQuery: http://jsfiddle.net/dYxYs/1/
$('.text').hide().removeClass('text').addClass('text-js');
$('.thumb').hover(function(){
$(this).find('.text-js').fadeToggle();
});
This way, the basic effect still works without JavaScript, and users with JavaScript get the appealing fade effect.
Go with option 2. There are ways to do it to not have to write a jQuery function for each image. As seen in my jsfiddle.
http://jsfiddle.net/daybreaker/dfJHZ/
HTML
<img src="http://placekitten.com/300/300" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
<br><br>
<img src="http://placekitten.com/200/200" />
<span class="text" style="display:none">THIS IS A KITTEN</span>
jQuery
$('img').mouseover(function(){
$(this).css('opacity','.2');
$(this).next('span.text').show();
}).mouseout(function(){
$(this).css('opacity','1');
$(this).next('span.text').hide();
});
You would need to modify the span.text css to overlay it on top of the image, but that shouldnt be too bad.
Wrap it in an element and do something like this:
var t;
$('div.imgwrap img').hover(function(){
t = $('<div />').text($(this).attr('title')).appendTo($(this).parent());
$(this).fadeTo('fast',0.5);
},function(){
$(this).fadeTo('fast',1);
$(t).remove();
});
with a markup similar to:
<div class="imgwrap">
<img src="http://www.gravatar.com/avatar/3d561d41394ff0d5d0715b2695c3dcf0?s=128&d=identicon&r=PG" title="text" />
</div>
example: http://jsfiddle.net/niklasvh/Wtr9W/
Here's an example. You can position the text however you want, but the basic principle below.
http://jsfiddle.net/Xrvha/
#container { position: relative; }
#container img, #container div {
position: absolute;
width: 128px;
height: 128px;
}
#container img { z-index -1; }
#container div {
z-index 1;
line-height: 128px;
opacity: 0;
text-align: center;
}
#container:hover img {
opacity: 0.35;
}
#container:hover div {
opacity: 1;
}
If you don't want to change your HTML wraping things etc, I suggest you this way. Here is the jQuery:
$(function() {
$(".thumb").mouseenter(function() {
var $t = $(this);
var $d = $("<div>");
$d.addClass("desc").text($t.attr("alt")).css({
width: $t.width(),
height: $t.height() - 20,
top: $t.position().top
});
$t.after($d).fadeTo("fast", 0.3);
$d.mouseleave(function() {
$(this).fadeOut("fast", 0, function() {
$(this).remove();
}).siblings("img.thumb").fadeTo("fast", 1.0);
});
});
});
2 is a good solution, have done about the same as this and it isn't as hard as you would've tought;
Drop de opacity with css indeed, than position a div relative to the img, and over it. It can be done with plain css. The z-index is the trick. That div can just be shown with $('#div').slideUp() ie.

Categories