I recently created a fb page for sharing my photography work. I'm new to iframes n stuff so I did my welcome page via an app provided by wildfire
Here is the link to the page https://www.facebook.com/pages/Bharath-Keshav-Photography/144046682351773
Now, how exactly do i get rid of the vertical scroll? The app specifically says that scripts aren't allowed. Also, setting body style="overflow: hidden" isn't allowed as tells me that the body tag can't be used
The best solution would be to use the JS-SDK.
You can either use FB.Canvas.SetAutoResize to have your page automatically resized or, if you know exactly what the height and width of the page will be, use Fb.Canvas.SetSize
You can find more info here: https://developers.facebook.com/docs/reference/javascript/
Also, keep in mind that the maximum width of a page app is 520 pixels and from personal experience, it's best to keep it around 500-510px
You have to make your css in this way
body {
width:520px;
margin:0;
padding:0;
border:0;
overflow:hidden;
}
and use FB.Canvas.setAutoResize();
In this way you can do your tab 520 pixel without scrollbar
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
I have an old-index.html for a old-touchscreen project(800*600 pixel), now I have a much larger touchscreen(1920*1024) and have more displays, a new-index.html. I prefer to keep all info of old-index.html in new-index.html in a simple way, i.e, leave a 800*600 space in the new touchscreen, and display the exact size of the old touchscreen. The last way is to merge everything of old-index.html into new-index.html, but too much work. if there is a way I could "insert" old-index.html into new-index.html (I define a special area in new-index.html,and then force old-index.html inside this area.....), that will be great!
You can use an IFRAME : https://www.w3schools.com/tags/tag_iframe.asp to load the entire old html inside the new page without any CSS or JS clashing.
i.e.
<iframe style="width:800px; height:600px; border:none" src="/old-index.html"></iframe>
Just have all the old stuff inside a section tag, and make the new one responsive to change the dimensions of the old one smoothly on a larger viewport that I think you are trying to say. I don't know for sure if I understood the problem.
is there any way I could pull only a portion of an external website using iframe?
This is the page I am trying to pull..
http://clep.collegeboard.org/search/test-centers
The div I wanted to get specifically is the white box in the center (#mainContentWrapper).
I already have a solution myself although it has some flaws. The trick I made was I made an outer div and disabled the iframe and I tweaked the height/width and the positioning where it would only show that portion ...
#outeriframe
{
width:960px;
height:1415px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-300px;
left:-160px;
width:1280px;
height:1415px;
}
The problem is, if the iframe is too big, the footer would show up, if it's too short, the results would be cut off and you can't see them all...
Is there any way I could get around this? Maybe Hide the footer? or grab only the Div I need? Please help me...
Thanks!
You can't, the same origin policy forbids you to interact with a Web page located in a different domain.
Some techniques like CORS or postMessage allow you to work around this limitation, but require some level of control on the other domain.
So, there have been some questions about this already, but mine is a bit more specific.
I want to add a 40px high admin bar to the top of all pages of my CMS when the user is logged in as an admin.
But I don't want to obscure the content on the page, so I want to push it down. Remember, this is a CMS so there is a lot of different CSS/designs on all the pages that use it. The system do have control of all the CSS though, so I can change it on the fly.
I started out by adding a "margin-top: 40px" to the body element before realizing that the background-image of BODY isn't actually attached to the body, but rather the otherwise unstylable root element.
So, I used "background-position: 0 40px" to move down the background image. Score! Only, some sites already used background-position to position their background in relation to the content and me overriding that severely messed up the design of those pages.
So - is there a better way to handle this? Or am I going to have to parse and alter every sites possible background-position on the fly - which I can do, but rather not :)
Thanks for your help!
To avoid the problem, you could change the way your CMS functions. Add a full page wrapper div that acts as a body for the user's content. Then, inserting a 40px high element above the wrapper will universally push it down.
You can try the following, you might need to position your cms toolbar negatively though.
html { margin-top: 40px; }
#yourCmsBar { position: absolute; top: -40px; height: 40px; }
You can push down the html element if the background is applied to the html element, and then use position:absolute to positioning your header. Example: http://jsfiddle.net/u22zE/2/
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).