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.
Related
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.
So I am really new with javascript, html, and css and am currently in the process of creating a game web application. I would like to be able to have kind of a pop up box when you click on a card the appears in the middle of the screen showing the options that you can click for that card (meanwhile the main page colors get darker) and when you select one of those options it goes away (Or if you click off of the popup).
I'm not sure if I'm explaining it very well, but I don't even know what to look up online because I don't know what that is called or even where to start with that. Any ideas?
Make a div in your html and a :
<div id="test"></div>
<div id="card"></div>
give the diff a background color using rgba to enable transparency and the default display value set to none and give it 100% width and height:
#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}
Then in javascript u can use an event listener on click to trigger change the display state to block:
document.getElementById("card").addEventListener("click", function() {
document.getElementById("test").style.display = "block";
});
Here is a jsfiddle so you can check it out: click
I currently have a div that I am trying to make into a like button that when clicked it switches to another image and back again when clicked again.....
With that I am having a problem where every time I click the div image it adds a class called "pressed" and the 2nd image only stays until I lift my finger off of the left-click.
I am using phonegap and and Intel mobile framework to help with the html, css, and javascript.
Is there anyway to disable this function from popping up on click or is there anything I can do to make the 2 images swap on click with a much easier method?
Thanks for the help. I am a little new at this.
HTML
<td align="right">
<div class="like_button"></div>
</td>
CSS
.like_button {
background-color: transparent;
border-color: transparent;
border:0px;
background-image: url(../img/like_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
.like_button:active {
background-image: url(../img/liked_button.png);
background-size: 52px 52px;
height: 52px;
width: 52px;
}
JAVASCRIPT
jQuery('like_button').click(function(){
jQuery(this).toggleClass('active');
});
Like what lmgonzalves said in the comments, I think the problem has to do with the :active pseudo selector which is mostly used to alter an element's state while it is being activated (being clicked on or otherwise activated), hence the split second effect you are experiencing when you lift your finger away.
Instead, you should remove the pseudo selector and use a simple class selector like .like_button.clicked in handling state changes CSS.
You can see the demo here: https://jsfiddle.net/k135g025/
Hope this helps!
You need to change .like_button:active to .like_button.active in your CSS.
And also jQuery('like_button') should be jQuery('.like_button') in jQuery code.
I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
Here's an example button:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap
Any ideas for why those left two pixels don't trigger a click event?
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.
Given this situation, we should definitly take a look at the CSS pointer-events Property
The pointer-events property defines whether or not an element reacts
to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:
button > i {
pointer-events: none;
}
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
Your page sets an outline on .btn:focus, but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
Moving the box on :active
You can move the box on :active, which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position.
You can see this in action by keeping the mouse button pressed; the box will move, but the event won't be fired until you release the button. So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.
This is according to spec, from the DOM spec:
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup
over the same screen location. The sequence of these events is:
mousedown
mouseup
click
This seems to be the problem, this following CSS seems to solve it:
button.btn:active {
left: 1px;
top: 1px;
}
Example
Here's a script to demonstrate both issues:
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>
i have a button in asp.net like below :
<asp:Button ID="btnSaveInrpvEdit" CssClass="btnSaveInrpvEdit" runat="server"
Text="" ValidationGroup="B" onclick="btnSaveInrpvEdit_Click" />
and it's css :
.btnSaveInrpvEdit
{
background: url(/Images/Admin/btnSave.png) no-repeat left top;
width: 155px;
height: 63px;
border: 0px;
outline: none;
}
.btnSaveInrpvEdit:hover,.btnSaveInrpvEdit:active
{
background: url(/Images/Admin/btnSave_Hover.png) no-repeat left 1px;
cursor: pointer;
outline: none;
}
so every thing is ok about it's hovering...
at this time i want to implement this button behaviour about left mouse HOLDING and RELEASING on it!
if you attention to regular buttons in asp.net u will see when left mouse is clicked and holded on that button , so it seems it's text has been moved a bit...
also when we release left mouse, that button goes back to normal mode!
how can i do this job with css and javascript?
thanks in advance
First, note that the text moving (and if the text moves) in the pressed button has nothing to do with the <asp:Button (or the input element it renders) directly. The button styles and visual behaviour depend to a small part on the browser and to a large part on the windows version and theme the client uses. Manually moving the background image could look very weird on themes that don't actually move the text.
That said, you can emulate the behaviour relatively easy with JavaScript respectively jQuery in particular.
Something like this should work:
CSS (I used normal style here because pressing usually removes the hover style)
.btnSaveInrpvEdit.mousedown
{
background: url(/Images/Admin/btnSave.png) no-repeat 1px 1px;
}
JS + jQuery
$("#btnSaveInrpvEdit").mousedown(function () { $(this).addClass("mousedown"); });
$("#btnSaveInrpvEdit").mouseup(function () { $(this).removeClass("mousedown"); });
You probably also have to handle the user pressing the button but then holding and dragging the cursor away from the button, which causes the button to un-press visually but will also return to the pressed state if you move the mouse back over the button. This is a bit more tricky but I'm sure you got the gist of it and can work something out ;)
As a quick fix to at least prevent the button background staying offset forever you can add
$("#btnSaveInrpvEdit").mouseleave(function () { $(this).removeClass("mousedown"); });