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.
Related
Hi I have a cordova app and I need to build a chat.
http://jsfiddle.net/jGLvk/1355/
I put the divs with position absolute to when the keyboard on the phone appears all the content move to up too.
So, when I did that the content doesn't show the scroll. How Can I resolve this?
<div class="page-content messages-content" style="position:absolute; width:100%; bottom:48px; top:auto;">
<div class="messages" style="position:absolute; width:100%; bottom:10px; top:auto; overflow-y:auto;">
Pay attention on this lines, where all the new messages will
be inserted.
Thanks.
I was able to solve it with overriding inline styles. Not sure if you should use it (I'm actually sure that you shouldn't)
.messages-auto-layout {
position: static !important;
}
I'm not sure if this is helpful because those styles are most probably applied via JS so there must be a way how to solve it in a more smarter way. Maybe stripping off all JS styles and use only css? I have never build an App using Cordova so I might be missing some context here.
Here is the link --> http://jsfiddle.net/9rsgdrw5/1/
So first of all let me admit I'm not the best at coding, I'm a graphic designer but I 'm trying to teach myself HTML5. I have managed to troubleshoot most of my problemsbut I'm stumped now.
Essentially my problem is when you click a thumbnail within the iframe, it aligns the thumbnail at the very top of the screen. I tried adding translateY to the "page" class, and I also tried it inside the iframe pages but that caused the main picture to be misaligned.
My testpage is online at http://www.brodylahd.com/index2
In reply to Cat Chen
yes i think that is what i need to do... but will it still have the same horizontal movement?
Thumbnail links aligning the it's container at the very top of the screen on click because you are using anchors (Uri Fragments) like #a1 #a2 #a3 in href attributes.
You can try to remove that fragments or prevent in-page movement using a small javascript workaround like this:
$('#thumbs').find('a').bind('click', function() {
return false;
})
This is an issue with going to anchors in iframe, so that browsers tend to center on the content in them if you're targeting them.
The simplest solution in your case (but not ideal) is to control where the scroll would be, so if you'll add
#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }
The page would be centered more visually correct, but still would scroll.
If you want to still use CSS, you can try to change your links+#aN:target .page{…} behavior to a one, that would use labels and radio-buttons that would go before .page blocks: #aN:checked+.page{…}, but I'm not sure if browsers would or wouldn't scroll the page when you're using radios instead of links.
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>
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
Is it possible to hide a text field on the form of a website. The text field is currently not hidden and I've heard that I could be able to hide it from view by overlaying an external style sheet.
EDIT: The website isn't mine and I have no control of the source etc, I need to be able to do this without touching their code. The reason we need to be able to do this is to send a credit card number to this field from a session variable (obtained by DTMF tones and an IVR) without the person sat in front of the computer being able to see what's been inputted.
I don't want to hide it from EVERYONE, just the people who work for us and access it through our PC's.
Is this possible?
Thanks,
Yes. Add the following css class:
display:none;
yes you can
CSS Approch
use css display:none;
Or use javascript
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
Depending on what you are allowed to do, and whether these machines are only used for that site, you can create a page with an iframe holding the site you want and then overlay what you need.
It might be tricky if the page is scrollable, or the user can alter the size of text etc (cause reflows to the content)
<iframe src="http://url.to.actual.page"></iframe>
<div class="distractor">Position me on top of the iframe to hide some content</div>
and
iframe{
width:600px; /* as needed */
height:300px;
overflow:hidden;
z-index:1;
position:relative;
}
.distractor{
position:absolute;
background-color:red; /* color it as the background of the page */
top:80px; /* position it where you need it */
left:100px;
width:100px; /* size it as you need it */
height:100px;
z-index:1000;
}
demo at http://jsfiddle.net/gaby/GemC2/1/
Not a great solution, but might give you some ideas..
Another solution, if you are allowed to use plugins to browsers is to set Greasemonkey, and install a custom script that will hide the input you need.
Or Stylish and set a custom CSS style to override the page's style.