We Keep Coding

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>

Can I set a div's margin-top with respect to the top of the page instead of the element right above it?

Imagine I have a paragraph and a big rectangle div under it. The paragraph appears after a few seconds (because it is pulled from some API, not because of jQuery). Because of this, the div appears higher than its intended position when the page loads. And when the paragraph loads, the div jumps down.
It looks ugly when the page is loading because the paragraph is set to appear with a fadeIn effect.
Basically I want to leave some space for the paragraph as it loads. I am kinda okay with a manually defined height for this text, because it's static and only changes when I change it on another website. Long story, don't ask.
HTML is simple:
<!-- <p> inserted with fadeIn from jQuery via some API </p> -->
<div id="big_rectangle">
...
</div>
CSS in case you want it:
p {
text-align: left;
margin-right: 5%;
margin-left: 40%;
font-size: 21px;
color: #FFFFFF;
text-shadow: black 0px 0px 3px;
}
#big_rectangle {
height: 700px;
width: 90%;
margin-left: 5%;
margin-top: 10%; /* Results in 10% gap between this and whatever is above */
background-color: #FFFFF9;
box-shadow: 0 0 3px;
}

Can you make another top div to load paragraph data with some hight on it

Yes you can for that you have to use the position of the div as relative.
Try this. Just add this.
#big_rectangle {
position:relative;
height: 700px;
width: 90%;
margin-left: 5%;
margin-top: 10%; /* Results in 10% gap between this and whatever is above */
background-color: #FFFFF9;
box-shadow: 0 0 3px;
}

How do I apply a css class to certain elements using jquery?

I have a CSS-class RoundedActivityCell in my stylesheet, like this:
.RoundedActivityCell {
-moz-border-radius: 4px 4px 4px 4px; /* rounds corners for firefox */
border-radius:4px 4px 4px 4px; /* rounds corners for other browsers */
float: left;
text-align: center;
vertical-align: middle;
height: 18px;
width: 150px; /* Follows the grid columns */
border:solid 2px;
padding: 3px;
}
Then I have a span in my cshtml file, like this:
<span class="RoundedActivityCell" id="signalRAsxActivity-#:ViewUnitContract.ConveyanceId #">
#: ViewUnitContract.Status.StatusText#
</span>
I know how to apply certain css properties like border-color etc. using jquery, but I was wondering if it's possible to remove the class="RoundedActivityCell" part from the html tag and set that using jquery instead?
I.e (Never mind the conveyanceId part, it's automatically generated and works the way it's supposed to :) ):
$('#signalRAsxActivity-' + conveyanceId).css.class('RoundedActivityCell');

Use addClass:
$('#signalRAsxActivity-' + conveyanceId).addClass("RoundedActivityCell")

Animate Over Shooting Mouse Click JQuery?

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.
​

Z-index & jQuery Toggle

I have a few divs arranged horizontally that acts as buttons on a navigation bar. When this button is clicked, a hidden submenu div will be made visible below the button that was clicked, but above all the other buttons.
Problem: The submenu div that appears stayed above all the other button divs even though the z-index if the button div that was clicked was changed to be larger than the submenu div's z-index. Will be great to have some help with this! :)
HTML Code
<div class="filter_tab" id="filter_tab_rent"><p>Min/Max Rent</p></div>
<div id="filter_submenu_rent">
Hello
</div>
jQuery Code
$("#filter_tab_rent").click(function(e) {
$("#filter_tab_rent").toggleClass('filter_tab_selected');
$("#filter_submenu_rent").toggle();
});
CSS Code
.filter_tab {
height: 38px;
min-width: 50px;
border: 1px solid #D9D9D9;
border-bottom: none;
float: left;
}
.filter_tab_selected {
z-index: 500
}
#filter_submenu_rent {
width: 300px;
height: 50px;
background: #FFF;
position: absolute;
top: 65px;
display: none;
z-index: 100;
border: 1px solid #D9D9D9;
box-shadow: 0px 2px 5px #888;
}
Additional Info: I'm using Chrome to view this.

z-index will only work with elements position relative and absolute. Add a position to your .filter_tab_selected style.