I can see this web site is somewhat over my head, but I'm having trouble finding an answer.
I want to put my header, with links to other pages, over external content. Here's why: My MLM gives me a replicated web site that they maintain. I want to add links to my blog, contact info, even meta tags to the site. I though I had it done by using an iframe. I have my content at the top, and the MLM site shows up in the iframe. (here is the link www.trivanijoanne.com) The problem is that the iframe doesn't resize when the external content changes, and it is confusing for the user to need to scroll up to see the page. Also, the pdf pages don't load inside the iframe.
I looked around online and see that iframes are a thing of the past. What should I be using to accomplish this task?
you could use PHP to get the page markup (possibly using cURL or fopen) and display it whilst putting your own content into the body section
(str_replace()
<body>
with
<body><div id='header'>my content</div>
)
and attach your own css stylesheet with
*{
position:relative;
top:-100px;
}
if you cant use PHP for some reason then this could also be done using javascript and iFrames
Related
im using wordpress and want to add a link which open in a frame/lightbox. Cant find a small solution for that.
There should be no new window. Just a content box which appear inside the page where i am. I hope u know what i mean
That should be pretty easy using the Easy Fancybox plugin.
Citing the entry from the FAQ section of the plugin's page:
Can I display web pages or HTML files in a FancyBox overlay?
Yes. First, enable the iFrame option on Settings > Media. Then, in your post or page content create a link to any web page or .htm(l) file in your content. Then switch to the Text tab in the Classic Editor or to Edit as HTML (under More options in the block menu) in Gutenberg, find the link <a ... > tag and give it a class="fancybox-iframe" attribute.
Voilà !
Beware, though, that:
Note: Not all external web pages are allowed to be embedded in an iframe and may be blocked by a server response header or script. The result will be either an empty/blank light box or the target page “breaking out” of the light box and loading in the main browser tab.
And you'd probably face the same problem with any other iframe solution. So that would work better with locally served pages.
I have placed some custom HTML, CSS, and jQuery inside an HTML box in my google site. but as the page loads, the unformatted content shows for several seconds until the loading is complete. attempts to add the following:
html { visibility: hidden; }
and then turning it back on later in jQuery do not appear to work inside a Google site.
Does anyone have another suggestion?
I don't know if this works on a google site or not, but using
<body style='display:none;'>
and then in the jQuery document ready function place
$("body").show(); has worked for me.
For some reason using style on the body statement works faster than the CSS file even if the CSS file appears in the head section.
Our webapp displays untrusted html uploaded by end users. At the moment, we display the html in an iframe, which nicely isolates the html from the rest of the site. Any css contained in the html can't mess up anything outside the iframe.
Unfortunately, the iframes are causing problems as we try to migrate to a mobile-friendly site. We're having trouble getting mobile touch event handlers to function correctly inside an iframe.
Is there any alternative to iframes for this app? We'd like to load the html into a plain <div>, but <html> and <head> tags aren't really valid inside a div and we'd have to play a bunch of games to get the css to work. And then we'd have to prevent the css from affecting anything else on the site.
We could try to sanitize the html, but we really do need to allow end users to apply their own arbitrary css to the html. The nature of the app requires it.
I am trying put place a Facebook Like-Box on a page on my site, and then style it via my own CSS (chiefly to increase the height awarded to div#stream_content. (The idea is to have the FB feed act as a news feed, but I don't want the user to have to scroll to see more the top two items or so as it does by default).
I have read and experimented with suggestions from these articles and more:
http://stackoverflow.com/questions/4064038/customizing-facebook-like-box,
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/,
http://hitech-tips.blogspot.com/2010/05/facebook-like-button-xfbml-tutorial.html
I am going the FBML route (rather than using an iframe) as I gather is required for applying a cross-domain stylesheet. I gather also that I need this doctype declaration for my webpage:
<!doctype html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
So then I have this in the body of the page:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box
profile_id="***my ID here***"
width="450"
height="600"
colorscheme="dark"
show_faces="false"
stream="true"
header="false"
logobar="0"
css="http://***my domain here***/css/FBstyles.css?1"
href="http://www.facebook.com/***my page name here***"
></fb:like-box>
But I still get these sorts of errors:
"(4) Unsafe JavaScript attempt to access frame with URL ...(my webpage)...from frame with URL http://www.facebook.com/plugins/likebox.php?channel=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Dfd907a0e%26origin...blahblahblah. Domains, protocols and ports must match."
Where am I screwing up?
I went this route too. Although you are using FBML, the actual embedded code ends up being an iframe anyway. (you can see it in the DOM with an HTML inspector after it loads). About the only thing I was able to do was put it in a div with a colored background, since the iframe is transparent, and a border.
You are probably getting errors since the javascript on the Facebook server is trying to access the CSS on your server. I didn't think you could do this.
EDIT:
In the StackOverflow link you provided, the posted answers clearly state that using your own CSS only works with a "Fan" box, not with a "Like" box.
Due to network or some other reasons, some sites do not have their css files loaded and you will see unformatted/un-layout-ed ugly page.
It happened to pages I did before also. Kind of beyond control from a developer/design point of view.
I'm thinking of something like this place at the top of the page and obvious:
/*.... header and stuff */
<body>
<h2 id="hiddennote">If you do not see this page properly, please refresh</h2>
/*.... rest of the page .... */
The external stylesheet have a definition like this:
/* other styles defined */
#hiddennote {display: none;}
Functionally I know it'll work. Any drawbacks?
Another potential drawback is that it depends on the user knowing what the page is supposed to look like. You could fix that by changing the language of the message to something like, "This page is not displaying properly! While you are free to use the content below, you may want to refresh your browser to try loading the layout and styling information." You could also include a screenshot, assuming your images are not hosted on the same troublesome network.
The obvious drawback is if the page fails to load the CSS the second time.