I am using javascript to control a button for a 3d carousel and trying to use an image instead of the button. My HTML looks like:
<button id="previous" data-increment="-1" >Previous</button>
<button id="next" data-increment="1">Next</button>
I tried the obvious by adding img tag where "Next" and "Previous" are:
<button id="previous" data-increment="-1" ><img src="URL" /></button>
That made the images appear, but when clicked they do nothing. I also tried to alter it with CSS and could change the style of the buttons, but the same images would not appear for both buttons. I need separate images for Next and Previous:
button {
background-image: url(images/myimage.png);
background-repeat: no-repeat;
height: 50px;
width: 200px;
border: none;
}
button span {
display: none;
}
Any ideas on why this is not working?
There are a number of things wrong here.
There is no span element in your buttons. button span style isn't doing anything for you. If you want to hide the text, I suggest using color: transparent;.
You need to apply a different image for each button, which means you need different selectors.
button#previous {
background-image: url('prev.jpg');
}
button#next {
background-image: url('next.jpg');
}
Generally, applying styles to a button won't affect listeners added in js. Something must be wrong in your js if the buttons aren't working anymore. Please post the relevant code if you'd like help with this.
Related
I am trying to set an image in my assets as a button, and for the most part, have it working. The image is a PNG.
Here is my HTML code for the button:
<button type = "button" onclick = "start()"> <img src = "assets/site/start-button.png"> </button>
Here is the PNG image:
Here is what I see:
How do I make the white part of the button go away? I think (not completely sure if this is the case -- if not, could someone please explain what is happening?) that the button is encasing the image, like it does text, instead of simply having the image as a button. How do I change this? I want it to only show the PNG image, nothing else.
EDIT: I do not have any css for the button. Do I need to add anything?
You would need to remove all styles from the button, such as its background-color, border etc..
You can remove the browser's default styles by adding the CSS property apperance: none;
I'd recommend using an anchor tag, instead of a button if you're wrapping an image.
I would suggest removing the image from the button, and instead setting it as a background image in css, while remove the default button styles. Working example:
function start() {
console.log('start');
}
.button {
background: url('https://mdn.mozillademos.org/files/7693/catfront.png') no-repeat;
cursor:pointer;
border: none;
}
<input type="button" name="button" onclick="start()" class="button" />
If you are unfamiliar with css, see https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started
I want to add a button in my web page when a certain event is occurred by using javaScript. I searched online much and try to solve this problem by using appendChild() function.
My code is like this :
var btn = document.createElement(‘button’);
btn.body.appendChild(btn);
Here I am facing two problems
My button is added but in a certain corner of my html page and
I can’t add style to this new created button without providing css to other buttons.
So how can I add this button in a certain positon and add css to this button
Thanks in advance.
Your first problem is you added the button after body. So that your button is appeared in a certain corner of your html page.
To solve this problem you may add this after an id containing div. And this div must be in your expected location.
Make a div which id is myButton in your expected location
id="addButton"
Then append your button after this id like this
document.getElementById("addButton").appendChild(newButton);
To provide CSS to this new created button your CSS code will be like this
#addButton button {
display: block;
background: green;
padding: 10px;
color: #ffffff;
}
To provide the hover effect your code will be
#addButton button:hover {
background: red;
}
Append it to the document instead of a button..
var btn = document.createElement('button');
btn.innerText="button";
btn.style.background="red";
document.body.appendChild(btn);
I am trying to create a sweet looking Button in Bootstrap. I have 4 images which show the discrete states of my button (Normal, Hover, Pressed, Disabled).
But I cant figure out what the best practice for this is. using the src in an input type image doesnt seem to be working that nice, since browsers will create a blue rect when clicking.
(I just need the whole image to be the button, its not a logo or smth that needs to be displayed on a certain position)
EDIT: its for my custom facebook/google/outlook login buttons
You need to replace the url's with the images you have.
.fb {
background: url(http://placehold.it/50x20/00ff00);
}
.fb:hover {
background: url(http://placehold.it/50x20/0000ff);
}
.outlook:disabled {
background: url(http://placehold.it/50x20/000000);
color: white;
}
.fb:active {
background: url(http://placehold.it/50x20/666666);
}
<button type="button" class="fb">button</button>
<button type="button" class="outlook" disabled>button</button>
Best practice will be to use :before elements where You will be displaying image on "button".
You can use img tag inside anchor tag to do so
For toggling between the states you can use jQuery.
Let me know if you require any further help!!
Is it possible to add a button to Photoswipe? I know that I can make a on-click event to a button, but then i can't change the button-icon. Is it possible to just add a new button that print the picture with the normal java script funktion 'print' ?
Recent versions of Photoswipe (4.1.0, 4.1.1) seem to require you to actually customize it to add a new button. Just adding the button in the html and styling it appropriately worked on most browsers, but not Android, where Photoswipe does not let the event through to trigger your button.
Here's an example of adding a like button.
Add your button to where the other buttons are placed in your html:
<button class="pswp__button pswp__button--like" title="Like"></button>
Photoswipe uses the css background property to add icons to their buttons, so you can do something like this in your css file:
.pswp__button--like {
background: url(like.png) 0 0 no-repeat;
background-size: 44px 44px;
}
The file like.png would have your button icon in it. I did things differently since I was using a font-based icon, so rather than using the background property I added content to my <button>. If you do that you need to override the default background by adding something like this to your css:
.pswp__button--like {
background: inherit !important;
}
To get it to work on Android, you then need to edit photoswipe-ui-defaults.js and add an entry for your button in _uiElements like this:
{
name: 'button--like',
option: 'likeEl',
onTap: function() {
// handle your button click event here
}
}
Don't forget to update photoswipe-ui-defaults.min.js if you are using it.
Finally, where you initialize photoswipe in javascript, add the option
likeEl: true
If you skip this last step your button won't be activated.
I am doing something similar with a download button.
Add a new button:
<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button>
In your CSS:
.pswp__button--download, .pswp__button--download:before {
background: url('/path/to/image') 12px 12px no-repeat;
background-size: 20px 20px;
width: 44px;
height: 44px;
}
The 12px 12px is the offset for the image to help center it. Adjust this and the background-size as needed.
Keep the hight and width as is to keep it the same size as the toolbar.
I am using a simple style rule:
.off { float: left; background: url(image.png); }
.on { background: url(different_image.png); }
in conjunction with a simple JavaScript event:
<a href="#">
<div class="off" onclick="this.className='on'; return false;">
link
</div>
</a>
In order to change an image in my navigation bar upon being clicked. To give a bit more insight, I am using an image of an "admit one" ticket for the link, with an image of a torn ticket appearing once clicked. Essentially, I want the action of tearing the ticket once clicked, not just while " :active " (that only applies while the mouse is still clicked down). I need the image to change, and presumably would use the " :visited " pseudo element (is that what that's called?) to have the ticket remain torn once visited.
My problem is this: The JavaScript seems to be functioning properly, except that when I click the link, my link moves from its floated position in the nav bar to some (seemingly, though not actually) random location near the top of my page.
It seems that the script ignores my CSS once it's clicked; what am I missing?
Do I need to specify a new set of rules, or duplicate them, for the "new" class? Does JavaScript actually change the element in its entirety? I suck with JS, but I have a very firm grasp on CSS.
You need float:left on both.
.off { float: left; background: url(image.png); }
.on { float: left; background: url(different_image.png); }