I've added Magnific Popup gem in my Rails web app, and have initialized it simply with
$('.box p a').magnificPopup({
type:'image'
});
in my application.js.
How do I go about modifying content of the popup window? I would like to add some hover effects on left and right side of the image displayed in popup, in such way that if I, for example, hover on the right side of the image - div container with certain image info slides in.
Thank you for any information!
image.markup option allows you to change the HTML structure of popup content - http://dimsemenov.com/plugins/magnific-popup/documentation.html#image_type
Also, you may just use "inline" type of popup, and provide all the content by yourself.
Related
I'm new to electron and some principles, concept of doing things in it.
For now i created a window, with a index.html inside and the standard main.js and the bootstrap css. Here is what I've done so far: Image
Now I'm getting to the point "what to do now to get the content when clicking on the links in the menu?"
The main goal is a menu at the top and load content from different websites below that menu.
I don't get how to load that content (maybe in tabs?)?
The best would be not to load the content twice, if someone clicked on that menu points at the top. So if once clicked to Calendar the calendar should not opened a second time, instead it should jump to the according tab. Content should be scrollable while the menu should stay at the top.
What's the way to go here? Tabs? Is the idea even possible?
I am trying to make a toggle box similar to the one you use in the Angular Material docs when you want to view the source code. You press the <> button on the menu bar and the panel slides open underneath revealing the html. For example, this page has one: https://material.angularjs.org/latest/demo/button
I can't seem to find it anywhere in the docs and I am not sure what the element is called or how to use it.
I want to create a panel/frame that looks like the "History" panel that appears on the left of firefox when you punch in "Ctrl+H". I want my panel to be at the bottom.
I feel I must use panel but there's no function that tells me how to set it to the bottom of the currently opened webpage.
How to do it?
The show() method on a Panel object allows you to set an anchor for positioning the panel, `show(anchor). It requires an object in the browser DOM which you can get fairly easily.
You can use that to anchor the panel on any element in the browser. It might be tricky to find the element you want to use for exact positioning, I just opted for the status bar since you wanted the panel at the bottom.
Here's the SDK code that will position a panel at the bottom (left) of the page:
var wuntils = require('sdk/window/utils');
var panel = require("sdk/panel").Panel({
contentURL: 'http://stackoverflow.com/questions/15390974/firefox-addon-development-setting-the-panel-to-the-bottom-of-the-page'
});
panel.show(wuntils.getMostRecentBrowserWindow().document.getElementById("statusbar-display"));
This feature is not currently supported yet, but it will be soon. Here the proposal: https://github.com/mozilla/addon-sdk/wiki/JEP-Panel-positioning where you can follow the discussion and the bugs. I already have a prototype that hope will land soon.
Would like to use a popup(jquery mobile) with content and make it fill the screen. Also with overlay.
Like this, scroll down to bottom, Overlay set to A button.
http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html
But I want the popup to fill almost the entire screen. This should act as a new page but be filled with ajax content, I will fix this later...
How can I do this?
jQuery Mobile will not size a popup or dialog larger than needed to contain the rendered content. If you really want to fill the page, go with a new page. Consider transitioning to a new page with a pop transition instead.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
You might also consider a dialog as it obscures the underlying page content
http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html
I am using jQuery mobile and trying to show jQuery pop on page load. But when the page is loaded popup is not appearing in center, instead popup's TOP LEFT corner is appearing in center.
But as soon as browser window size gets change popup automatically shifts to center (Even if I press F12 for developers tool). And then all frequent calls to $('#popupBasic').popup("open"); make it to appear in center of the screen.
But first time top left corner of the popup box appearing in center.
try this: data-position-to="window".
this is the source
You may try repositioning the popup on pageshow:
$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );
I reckon what you are experiencing is down to the positioning happening prior the page is fully drawn by the browser. You can overcome this by repositioning the popup like this:
$(document).on('pageshow', '.selector', function(){
$('#popupBasic').popup('reposition', 'positionTo: window');
});
$(document).on("popupafteropen", function() {
$('#popup').popup('reposition', 'positionTo: window');
});
You can use the custom pop up events to reposition it after opening
I was getting the same error. You only want to show the popup after the page has been painted.
Adding your code to listen to the pageshow event instead of the pageinit event will probably fix your problem. It fixed it for me.
This is a very vague question.
A few items you should provide:
What browser are you testing on and what version?
What version of JQM?
Are there any custom CSS interacting with JQM?
As of JQM 1.2, Popup options available:
default: "origin"
Sets the element relative to which the popup will be centered. It has the following values:
"origin" When the popup opens, center over the coordinates passed to the open() call (see methods page).
"window" When the popup opens, center in the window.
jQuery selector When the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with ":visible". If the result is empty, the popup will be centered in the window.
Source
It worked for me when I set the width of popup div manually; try:
$("#popupBasic").css("width","200px");