I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa
Related
I have a button on the homepage of my application:
<ion-button href="/start" class="btn" color="danger">start</ion-button>
However, I noticed it actually reloads the page when clicked.
I also have ionic tabs (https://ionicframework.com/docs/api/tabs), and when a tab is clicked a component is loaded instantly.
How can I achieve the same functionality for ion-button?
The tab component has an integration with the router, which allows the tab to function as a vue-router link. ion-button doesn't seem to have the same integration. The documentation for the href prop states:
Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Using href makes the button function as a regular browser link which will cause the page to reload. Instead, you can wrap the ion-button in a router-link tag or call $router.push in the button's click event.
I have a set of buttons that each can open the modal. The first one opens fine, but if you don't close the modal the second one fails with 'Uncaught TypeError: undefined is not a function.
I have a bunch of links:
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/forums-modal.html">Open Modal A</a>
<a data-toggle="modal" data-dismiss="modal" data-target="#modal-form" href="partial/facebook-modal.html">Open Modal B</a>
I tried: Twitter Bootstrap open modal over an already opened modal
Not a big help either. Hiding a previous modal when opening a new one.
Yes I have jquery loaded before bootstrap.
The fix for the first error 'Uncaught TypeError' was to upgrade from bootstrap 3.1.1 to 3.2.0. Once this is done, clicking on the second div, the modal closes rather than staying open with the new content.
To update the content, I went down the ajax path. These modals are themselves loaded by ajax (mobile-first and they aren't mobile). Therefore, in a similar vein to Reload Content in Modal Twitter Bootstrap I used the following code:
$('body').on('click', 'a[data-target=#modal-form]', function(ev) {
console.log("clicked");
ev.preventDefault();
var target = $(this).attr('href');
$('#modal-form').load(target, function() {
$('#modal-form').modal("show");
});
});
I have an static HTML page I want to pop up using Magnific Popup when the page loads. In the examples on the site he only shows clicking a link that has the url of the page. I don't want a link but just page load. How do I get the url to be called without a link? I have the onload figured out
$(window).load(function () {
$.magnificPopup.open({
type: 'ajax',
showCloseBtn: true
}, 0);
});
So for example I want test.html to show up in the popup onload. Not sure how this is done.
You can initialize the magnific popup with a DOM Element created by jQuery and then click it. For example:
$(function() {
$('<a href="test.html">').magnificPopup({
type: 'ajax'
}).click();
});
If you need the link appear in the page, then just use appendTo function after click.
i use casperjs for automatical click on twitter share button. Twitter use iframe for create this buttons:
<iframe src="some src">
</iframe>
When i click it open popup window, but when i trying to login into twitter, i got error, form not found
casper.withFrame(0) { //it twitter iframe
this.fill("#twitter-widget-0 form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Why? It possible with casperjs?
I'm not familiar with Twitter widgets, but are you sure #twitter-widget-0 is not the id of the iframe you just switched in to? It seems that way, because I found code like this: https://dev.twitter.com/discussions/11450
If you switched into the iframe, you cannot access elements from the parent page anymore, and you are trying to access the iframe element, which resides in the parent.
You should just select form#update-form, because it's not a child element of #twitter-widget-0: it is just an element that is contained in the iframe.
If so, the solution is simply omitting #twitter-widget-0 from your selector inside the iframe.
casper.withFrame(0) { //it twitter iframe
this.fill("form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
I am using a modal window to display multiple videos, but my autoplay seems to be ignored in the modal window. If I have the video on the page and it is not hidden the autoplay is fine. Do I need to do something else to trigger the autoplay in a modal window?
I am using SimpleModal to do the modal window. For the video I am using a simple video tag and an mp4 video with the autoplay boolean on.
Any help would be appreciated.
I was only able to get this to work by using a javascript play() call in the 'open' handler for a jQuery UI dialog. No other method would work.. maybe simplemodal has an analog? Here is the solution for jQuery UI:
$('div#mydialog').dialog({
open: function(event, ui) {
$('video#myvideo').get(0).play();
}
});