How to remove this image border? - javascript

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>

Related

How to change style of the page based on button click

I'm making a page where some style will change when the user click on a button, but, the page should get on load the first button selected.
I make this code to run on load and apply the first class:
$(function() {$('button.volt:first').addClass('voltActive');});
And this to change the class applied:
changeClass: function () {
$("button.volt").removeClass('voltActive');
$("button.volt").toggleClass('voltActive');
}
That's my css:
.volt{
font-size: 20px;
border-color: #333;
border-radius: 10px;
border-style: dotted;
margin-left: 25px;
height: 55px;
width: 135px;
background-color: transparent;
}
.voltActive{
border-color: blue;
border-style: solid;
outline: none;
}
And that's my button:
<button data-bind="click:$parents[1].changeClass()" class="volt"></button>
But isn't working. Could someone help me?
toggleClass() changes the state of the class. If it's already on the control it will remove it, if it's not on the control it will add it. So you are removing it then calling toggleClass to add it again.
Just toggle it.
changeClass: function () {
$("button.volt").toggleClass('voltActive');
}

Remove shadow from a button when its active

I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:
.nav > button{
width: auto;
font-family: 'OpenSansBold';
color: #000;
padding: 3px;
border: none;
margin-right: 10px;
margin-top: 5px;
font-size: 15px;
text-align: left;
background-color: #fff;
}
button:hover{
cursor: pointer;
border: none;
color: #7b1a2c;
}
button:visited{
font-family: 'OpenSansBold';
box-shadow: none;
}
button:active{
box-shadow: none;
}
But with no luck. Is there another CSS code for buttons when its active?
I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys:
$('div.box').slice(1).addClass('hidden');
$('.nav').children('button').on('click', function(){
// console.log('klikk');
$(this).data('content');
$('.box').not('hidden').addClass('hidden');
$( $(this).data('content')).removeClass('hidden');
});
Maybe you talk about outline property or :focus pseudo-class?
Try this one:
button:active, button:focus {
box-shadow: none;
outline: 0;
}
To give you a working example, play around with the following snippet, I think this behaves like you would want it to.
To completely remove the shadow, just remove the second JS rule.
// :active rules
$('button').on('mousedown', function () {
$(this).css('box-shadow', 'none');
});
// :visited rules
$('button').on('mouseup', function () {
$(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<body>
<button>test</button>
</body>

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

Add Javascript Onclick To .css File

I wonder whether someone may be able to help me please.
I'm using this page to allow users to view a gallery of their images.
You can see that I've added a cross at the bottom of each image which I will use to delete the image and this is set up in my .css file as:
.galleria-thumbnails .galleria-image {
width: 80px;
height: 80px;
float: left;
margin: 0 7px 7px 0;
border: 2px solid #fff;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
padding-bottom: 20px;
background-color:#FFFFFF;
The problem I have is that I'm very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.
I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.
Thanks and regards
You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:
<span class="btn-delete icon-remove icon-white"></span>
You even have the click handler already:
$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; });
All you need to do is apply the styles so you can actually use this. Something like:
.galleria-thumbnails .btn-delete {
display: block; /* Or just use a div instead of a span*/
position: absolute;
bottom: 0px; /*align at the bottom*/
width: 80px;
height: 80px;
cursor: pointer;
background: url(cross.png) no-repeat bottom;
}
CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.
a standards compliant, JS version
var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
dbLength = db.length,
i;
for(i=0;i<dbLength;i++){
db[i].addEventListener('click',function(){
var thumbnail = this.parentNode;
thumbnail.parentNode.removeChild(thumbnail);
},false);
}
a jQuery 1.7+ version is this:
$('.galleria-thumbnails').on('click','.btn-delete',function(){
$(this).closest('.galleria-image').remove()
})
If you set this above style sheet with in a <td> just write onclick event...
here a sample
<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
onmouseout="this.className= 'menubuttonhome'">
Home
</td>
here my css
.menubuttonhome
{
background-image: url('Images/homebutton.png');
background-repeat: no-repeat;
vertical-align: top;
color: #005a8c;
font-family: Arial;
padding-top:11px;
font-size: 10pt;
font-weight: 500;
}

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.

Categories