Animate Over Shooting Mouse Click JQuery? - javascript

I have the basic idea of my JavaScript operational.
The point of my JavaScript is to make an image of id 'player' move to the position that I click with the mouse, only when I click on the div with the id of 'stage' with the animation lasting 3 seconds.
At the same time, when the animation is running the head should change to 'player is moving' as opposed to when it is still and displaying 'player is still'.
Right now, in Chrome (maybe its a bug with Chrome) the basic functionality of the JS works. However, it seems to overshoot the position of where I click the mouse on the first round and then barely move when I click again in the 'stage' div.
If anyone sees where I might be running into a problem please let me know!
Here's my EDITED JQuery:
$(document).ready(function(){
$('#stage').click(function(e){
$('#header h1').html('Player is moving!');
$('#player').animate({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, 3000, function(){
$('#header h1').html('Player is standing still...');
});
});
});
I have fixed my CSS issue, so don't worry about that but the code is located below for the CSS in case anyone thinks the issue may lie within.
Thanks!
EDIT:
Here's the CSS. The issue has been solved but it has been provided for convenience if you think the issue of the image overshooting the image may lie within for any reason:
#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}

Poor man's example : jsfiddle but it works in FF and Chrome.
Also, I'm curious what styles you lose, simple color style is always applied.
So more information is needed, can you share the complete css?
Update: I'm still not seeing an issue in chrome (with the fiddle example)
Change #stage to something like
#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}
Your player vs page is lying about it's position or where you can click. I wanted the stage to be a fixed item on the page, non-moving. I don't see any other reason (in your CSS or jQuery) why it'd overshoot.
​

Related

How to remove this image border?

Button
This is the Image I want to add, but when I display it on the website it becomes a image with borders: Button with border (there is a background behind the button). I'm using javascript with reactjs, html and css.
Here is the code I used to display the image:
css code: code
js code: enter image description here
How do I display this image without this border? I tried putting in css file border:0; margin: 0; padding: 0; border: none; but nothing works
Try border-style: none;.
Your question isn't very concise, but it should work.. I think.. You should probably add in some more details
But really, I would never use an image in place of a button. Do this instead:
button {
height: 50px;
width: 200px;
padding: 5px 10px 5px 10px;
background-color: white;
font-size: 30px;
border: 2px solid black;
border-radius: 40px;
}
<button onclick="">Contato</button>

Javascript Fixed Navigation Bar Jumping

I've been playing around with a fixed navigation bar, but I've noticed that when it "fixes" itself, the content below all jumps up on the page.
This is the JSFiddle I've been working on, if you look closely you'll notice that when the nav bar becomes fixed to the top of the screen, the content jumps up ~1 line. I've tried playing around with the Javascript:
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
but I'm fairly certain the problem is in the CSS:
*{
margin: 0;
padding: 0;
}
nav {
width: 100%;
background: white;
height: 35px;
border-bottom: solid 1px #E8E8E8;
}
nav.fixed {
position:fixed;
top: 0;
right:0px;
left:0px;
z-index:999;
height: 30px;
border-bottom: solid 1px #E8E8E8;
padding-bottom: 5px;
}
h1{
font-family: 'Lobster', cursive;
font-size: 50px;
text-align: center;
}
Any solutions on how to fix the jumping would be really helpful.
For refrence, I'm trying to get something sort of like this where the very top of the page isn't part of the navbar.
When an element is set to position: fixed, it no longer takes up space on the page, meaning it won't push other elements down on the page. So as soon as your javascript adds the fixed class, the element no longer takes up space, and so the other content jumps up to take the place where it was.
To offset this, you may need to add another rule to add something like a top margin to the next element. The top margin will need to be the height of the (now) fixed element, plus any padding and margin in the fixed element:
https://jsfiddle.net/h6g33wne/8/
nav.fixed + * {
margin-top: 35px;
}

CSS add a fat "frame" around an IMG without changing IMG positioning

I have rows of thumbnails in a <div> with only a small margin/border/padding set. I'd like to add a 'focus' class to highlight one thumbnail on the page during a CSS transition, i.e. 'div.thumb.focus'
Is there any easy CSS Trick to wrap a frame around the 'div.thumb' WITHOUT re-positioning the div.thumb in the page?
The div.thumbs are all absolutely positioned within a container. And I want the frame to be THICKER than the margin/padding between div.thumb. It can live on a higher z-index, and partially cover neighboring thumbs, as long as the click events read the div.thumb.focus. An easy JQuery solution is acceptable.
// using LESS syntax
.container {
position: relative;
.thumb {
&.focus {
<need help here>
}
top: #top;
left: #left;
position: absolute;
margin: #margin;
padding: #padding;
img {
width: #width;
height: #height;
}
}
}
A few solutions come to mind (not Bootstrap specific):
Using a better box model, but it may affect your padding:
box-sizing: border-box
border: 10px solid red
Or using an hard inset shadow that'll look like a border:
box-shadow: inset 0 0 0 10px red
You could use an outline but it would overflow outside the box without affecting its dimensions:
outline: 10px solid red
Now, I'm not too familiar with LESS, so I've just done this in regular CSS.
There are a few options you could choose.
Add a Negative Margin
.thumb.focus{
margin-top: -4px;
margin-left: -4px;
border: 4px solid blue;
}
This may not be suitable for your case, however, as you already have a margin set. It may be useful for others though.
Add a Shadow
.thumb.focus{
box-shadow: 0 0 0 4px blue; //use inset if you want it inside the thumb
}
This could work well, but not if you want multiple colours/thicknesses on some sides.
Use box-sizing
.thumb.focus{
box-sizing: border-box;
border: 4px solid blue;
}
The main problem with this would be browser support.
Use Outline
.thumb.focus{
outline: 4px solid blue;
}
This has a similar issue to the box shadow I believe.

Help with Mootools Gallery - Transition text

I'm not sure if what i want is possible but i'm using a Mootools image gallery which you can see an example of here:
</script>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
The gallery rotation is above but what i'd like to achieve, ideally, is the second text element (with the white background) to be wider than the top text element, so it looks more like the picture underneath.
There's a lot of Javascript involved so i don't know what i should post here to enable people to help, but just let me know what i should put in here and i'll come back and edit.
Or, if some knows of somethign similar in jQuery which would allow me to get the same effect, but not require too much JS coding, i'd be much obliged.
Thanks in advance as always,
Dan
Try this css and see if its what your after.
.slideInfoZone {
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
top:40px;
color: #FFF;
text-indent: 0;
overflow: hidden;
padding: 10px 0 0 20px;
height: 70px;
}
.slideInfoZone h3{
background: #000;
width: 200px;
padding: 30px;
margin-left: -30px;
display:inline;
}
.slideInfoZone p {
position: absolute;
bottom: 0;
background: #FFF;
font-size: 14px;
color: #000;
margin: 20px 0 0 -20px;
padding: 10px 0 10px 20px;
width: 50%;
}
Basically what I did was remove your background color for the containing element, then I gave the p tag a bg color, and modified the padding/margin for the h3. Im not too happy with what I had to do with the h3 but without changing the markup at all it works.

How do I make a div stick to another element

I am making a voting system. When user click on a link with class "vote" a voting box appears just belov the clicked link. It looks like this at the moment:
My problem is that if the page is scrolled then the vote box is not positioned correctly. I want it to always appear just below the link and to stick to the link even when page is scrolled.
My container is styled like this:
#vote_container {
position: fixed;
height: 82px;
min-height: 83px;
background-color: #e7edf3;
border: 3px solid #d3d6d8;
border-radius: 10px;
left: 40%;
margin-top: 6px;
padding: 10px;
text-align: left;
top: 60%;
z-index: 199;
}
And this is the code I use to position the container:
var pos = $(this).offset();
var width = $(this).width();
$("#vote_container").css({ "left": (pos.left - 16) + "px", "top": (pos.top + 28) + "px" });
Ive even created a simplified example at jsFiddle.
Does changing the #vote_container position to absolute resolve your issue?
http://jsfiddle.net/xkNqG/9/
EDIT:
Also, in the css I added display:none and in the function added $('#vote_container').show()
The #vote_container should not be 'position: fixed' as ngen says it should instead be 'position: absolute' here is my fiddle I simplified your css (for temporary purposes) just to help get to the root of the problem and added more text so that the fiddle would actually demonstrate the scroll problem.
If you want a pure css solution try this.
css
.tipLink{
color:#33f;
cursor:pointer;
position:relative;
}
.tip{
position:absolute;
display:none;
top:80%;
left:110%;
background-color:#dddddd;
border:1px solid black;
width:100px;
color:black;
z-index:20;
padding:3px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
text-align:center;
}
.tipLink:hover .tip{
display:block;
}
HTML
<span class="tipLink">
Mouse Over Me
<span class="tip">Hello World</span>
</span>
You will have to style the inner span tag to the design you need, but this should work.
Why don't you use the jQuery tooltip plugin, http://bassistance.de/jquery-plugins/jquery-plugin-tooltip, and enhance it by styling it the way you want. It already handles positioning and can have text or markup in it.

Categories