I use Fancybox2 to open an iFrame popup window (content comes from the same website). Within this popup, I have tabbed content (Bootstrap tabs). Each tab has content of different heights.
I am hoping that Fancybox can resize its height accordingly when I click tabs to see content on different heights.
I tried different combinations of autoSiz, autoHeight, etc. Got no success. Googled, and it seems many people asked related questions.
Am I missing something? Or is it doable? I feel this should be an easy configuration.
Thanks!
You may need to trigger the $.fancybox.update() (fancybox v2.x) method after the tab selector event
If using iframes, try parent.$.fancybox.update()
You may also need set fitToView to false
Related
I have an html file being served by Express, which also fetches data from an api. When I click a link in the navbar and switch routes (or the page is reloaded), the top navbar moves right, then left, and I can't figure out how to fix it.
If you look at the JSFiddle (link below), you'll notice that I have links to other pages, like /profile, /about, etc. Each time one of these pages loads, the navbar shifts (it's adjusting for the vertical scroll bar disappearing, then reappearing).
https://jsfiddle.net/h7bjyk63/5/
To mimic the api call, I added a setTimeout. To reproduce the issue and see what I'm talking about, you will probably need to run this code locally on your machine, and then refresh the page.
The strange thing is that this issue only occurs when there's some kind of delay (like an api call, or setTimeout). If I remove the delay and immediately load the content, everything works fine.
Some css code is commented out. The only key element I want to add later is position: fixed to fix the navbar to the top of the page.
How do I prevent the navbar from moving around?
The browser first renders the page without the scrollbar because it simply doesn't have to. Then you dynamically add few long paragraphs into the DOM, which makes the scrollbar to appear. This is what's causing your content 'shifting'.
The scrollbar is adding up to the width of your page. To prevent it from doing so, you need to do this:
html{
overflow-y: scroll;
}
I finally found something that worked, although I'm not 100% sure it's the correct way to do things. I just changed the width under the navbar--site-header class to 100vw instead of 100%.
DVN-Anakin's answer helped me understand the problem (and one possible solution), and this answer provided some additional good solutions.
I am thinking to implement a custom tabbed page with some custom functionality and I thought about using MultiPage.
I am thinking about that because it seems to be the base class of the Forms's TabTabbedPage and would like to actually have a page at the bottom to display the buttons and the top space to display come content pages based on the selection(of the user).
Currently I only added 2 pages on the MultiPage and the last page from the data set is being displayed but I can't shrink its height so that I can add another content page below to add the buttons. I tried to set the HeightRequest on the pages but with no effect.
Does anyone have at hand some samples involving the MultiPage or knows how to change the ContentPage width or height?
Thanks a lot!
I have tried various solutions to get the iframe to adjust according to the website's content height, so that I can do away with vertical scrollbars, but cannot get a satisfactory solution.
Many solutions ask for a section of code to be added on the 'server side'. If that means I have to edit lines of code within my Wordpress files, where would I do this?
Here is a link to the iframe in question.
Rather than try to adjust the Facebook page to fit your WordPress install, you're better off changing your WordPress theme to deal with being shown in a Facebook iframe.
When displayed in the iframe, you should have a theme that is fixed-width to your canvas, and no sidebars. Just a content pane. You would then have your regular theme for when visitors arrive outside of a Facebook frame.
The Virtual Theme plugin looks like it could help with this. I've never used it personally.
I need to build a tab looking like this one:
https://www.facebook.com/auto.co.il/app_134594493332806
I know how to add an image and a comment box and i know of several "plain" ways to hide the content from non-fans, but i came across the above tab and i really like the way it shows thee content yet you cant engage it until you press the like button.
Any help please?
Thanks in advance.
Oren
Your link didn't work for me, but you can place a absolutely positioned div with a high z-index above the rest of your content to prevent the user from clicking on anything.
Update: Now that the link has been updated I see that they are doing exactly what I described above. In chrome if you right-click the background and select "inspect element" you will see the following computed style for the div:
rgba(0,0,0,0.796);
display:block;
height:1612px;
width:810px;
The content is blacked out simply with a div with a black background and some opacity. Just for fun, you can overcome their like gate (without liking) via chrome's JS console by selecting the iframe context and then entering the following:
$('.like_float_c').detach();
... now call youself a 'hacker' ;)
Chat portlet is displayed as a long bar at the bottom of the screen. I want to write a similiar portlet.
I can draw my bar anyway on the screen with CSS styles and also I have learned how to make static portlet visible always for all users with portal-ext.propeties.
But along with my bar, Liferay draws standard portlet frame with a title and controls on it. I found that it is named "topper" in HTML code.
So how to disable topper and border for one specific portlet in the way chat-portlet did it? I failed to figure this out from chat-portlet sources.
I found two options which can be relevant to this
<use-default-template>false</use-default-template>
<system>true</system>
but they weren't work.
First one causes ClassNotFoundException and second one causes portlet content not reaching page source.
Thanks.
I was to use
<use-default-template>false</use-default-template>
correctly. It does not work if placed in incorrect order.