On a PC my Magnific popup works perfectly. However, on smaller screens the popup displays in the middle of the screen forcing the user to have to scroll down to find displayed image. Is there a way of aligning the image in the popup to the top of the page?
Have you tried the alignTop config property?
$.magnificPopup.open({
alignTop : true,
items : { /*your items here*/ }
})
http://dimsemenov.com/plugins/magnific-popup/documentation.html#aligntop
Related
I have a Xamarin page with a Navigation bar at the top.
I keep changing the views on the page with some button clicks, but the page remains the same.
What I need is, when I load a new view (say View A) on this page, I want to add a Back button on the top Nav bar of the page.
I saw some forums where they are using Custom page renderers to add Back button.
But here, the page remains the same. Only the view changes. So, I guess I need to use the custom view renderer to add the Navigation button.
How can I achieve this, as NavigationController which I need to add a Nav button is present in Page renderers, not View renderers.
I need some help.
Thanks
UIBarButtonItem customButton = new UIBarButtonItem(
UIImage.FromFile("Image/image.png"),
UIBarButtonItemStyle.Plain,
(sender, e) =>{
//InitView
});
NavigationItem.LeftBarButtonItem = customButton;
this.NavigationItem.LeftBarButtonItem.TintColor = UIColor.Orange;
I was trying to create some POC to try something with jwplayer but for some reason full screen for jwplayer is not working.
Is there any way to make full-screen work in jsfiddle in jwplayer?
Here is my jsfiddle
http://jsfiddle.net/hiteshbhilai2010/6YyXH/63/
Answering too late, but as no share button is available now, the new way for going full screen is copying the URL of your fiddle and append /show to it.
Example : https://fiddle.net/xyz123/show/
This will show you only the result frame in full screen.
You can click on Share button, then take the Full screen result URL, open it, go to full screen in player and then (optionally) click on F11
Another quick way: right click on jsfiddle result --> View frame source --> In the view source tab take the iframe URL and open it, the player full screen should work. If you are intending to use the fiddle as a demonstration, you can write some javascript to grab the url of the underlying iframe and open it in a new window.
In firefox only:
Right-Click the result window in Jsfiddle
Select "This Frame"
Select "Show Only This Frame"
Page will reload with result only in full screen (without a "run this fiddle" banner in it.)
Sometimes however this won't work, I not shure why, but you can always add "/show" to the URL as Zameer Fouzan has said.
If you don't want to see the "Edit in Jsfiddle" button you can always remove it:
Add "/show" to the URL and press ENTER
Press "run this fiddle" button
Press F12 to enter developer mode in FireFox or Chrome
In firefox press: CTRL + SHIFT + C to pick an element from the page
Press the "Edit in Jsfiddle" button, the corresponding code will be highlighted
Right-Click the highlighted line of code
Select "Delete Node"
Press F12 to close developer mode
Open your browser's console and run this:
const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'
const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
document.querySelector('iframe[name=result]').requestFullscreen()
})
div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))
This will add a button with the text "Fullscreen" next to the "Embed" button. If you click on it, your browser should fullscreen the result.
Or, if you don't want to paste something in the browser console every time you go to edit a fiddle, use a userscript:
// ==UserScript==
// #name JSFiddle Fullscreen
// #match *://jsfiddle.net/*
// #version 1.0
// #author GalaxyCat105
// #description Adds a fullscreen button in the JSFiddle navigation menu when editing a fiddle
// #grant none
// ==/UserScript==
const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'
const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
document.querySelector('iframe[name=result]').requestFullscreen()
})
div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))
Create a new script in your favorite userscript manager and copy-paste the code into it.
I have two Pivot pages each with their own unique AppBar. The second pivot page, is accessible through the first pivot page via the AppBar. However, when I visit the second pivot page, its corresponding AppBar is not there. At first I thought the AppBar was not being rendered, but I suspect that it is being rendered, and being hidden. Furthermore, when I press the back button, the AppBar corresponding the first page is also gone.
I've attempted doing the following in the ready block
WinJS.UI.processAll().done(function() {
/* Grab winControl for app bar, and show it */
})
But that didn't work. What is going on?
To solve the problem you need to give the appBar a different identifiers (id option of your appBar div tag) in everyone of your HTML pages.
P.S: don't forget to update id in your related JS code.
I am validating my form using an extension pages dialog box. I popup the dialog box with the error message when the user needs to correct input.
The dialog box has an OK button that closes the dialog box and sets focus to the field that needs to be corrected.
var ef = dojo.byId(errorField);
ef.focus();
This is working great except......
I have a group of buttons and a bunch of other components that float to the top of the form.
They are inside a panel with the following CSS.
.PNCToolBar2 {
position:fixed;
top:68px;
left:0px;
width:100%;
height:40px;
color:#fff;
background-color:#F2F2F2;
padding-top:6.0px;
padding-left:15.0px
}
What is happening is that if the failing field is scrolled up under the "button bar" then the browser scrolls a bit to try to get the button into focus but not enough. Depending on how the user had their browser scrolled on the form, all or part of the field in error might still be hidden by the button bar.
Is there a way to first know if the field is at the top of the browser window under the bar and then scoll a bit if it is to make the field appear? If so how?
Try:
dojo.window.scrollIntoView(ef);
If the DOM node represented by ef is not currently on the screen, Dojo will scroll just enough so that it will be.
More info on this method
using javascript you can use the scrollTo() method
http://www.w3schools.com/jsref/met_win_scrollto.asp
I am having trouble while using the YUI panel as a dialog.
I have a dialog object created with javascript on page load:
$J = jQuery;
dialog = new YAHOO.widget.Panel("dialog", { width: "300px", fixedcenter: true, close: true, draggable: true, zindex: 4, modal: true, visible: false });
Then when I call my loadDialog() function from event on the page:
dialog.setBody("<iframe id=\"ifrDialog\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\"></iframe>");
dialog.hideEvent.subscribe($$F.endDialog);
dialog.render(document.body);
// Set iframe
$J("#ifrDialog").get(0).contentWindow.location.replace(url);
Then the tricky part was that I needed to resize the Panel and the IFRAME object AFTER the IFRAME finished loading its document. I got the width and height of the IFRAMES document and then resized the IFRAME to fit the document without scroll bars, then I resized the YUI Panel to contain the IFRAME correctly.
After this was done I make a call to:
dialog.center();
and this positions the YUI Modal Panel correctly in the center of the screen. Everything is great the first time. Originally when I wanted to close the dialog I tried to remove it from the document altogether by using the destroy() method but I kept getting a config null reference error so I simply hide the dialog now. The real problem arises when I try to show the dialog again for the same page. The Panel appears correctly as it should except now the browser window has vertical scrollbars when it shouldn't.
Is the Modal overlay growing for some reason? Is there some way to * reset * the Panel or remove it from the document so that it can be added dynamically when needed?
Also, same widget but different issue. I ran into another interesting situation after I had resized and repositioned the YUI Panel. The underlay did not grow to match the Panel's new size. I had to manually go and resize the underlay. Is there a better way to do this?
Thanks in advance for the help.
Daniel
have you thought about using:
$("yourpanel_ID").remove();
To remove the panel from the DOM,
this way, you will start with a fresh one anytimes.