I'm loading a link into a popup like this: popup.load(this.getTrigger().attr("href"));
This is working, but more specifically I only want the content within the .include div of the loaded href. How would I update the code above to call the content within .include in said href?
Thankyou
Related
A plea to all wiki gurus - can anyone help me create a link to another page in the same wiki when the wiki page is constructed in html?
Alittle background & context: I decided to get a bit arty in my mediawiki and made a simple landing page constructed using CSS and div elements to sit on a mediawiki page. After a little fettling, I managed to get the HTML rendered correctly and the page looks very nice!
Now I wish to use the div elements (lets call them 'buttons') as links to other mediawiki pages within the same wiki. (the actual 'buttons' are made up of several elements wrapped in a containing div element)
The actual html for a 'button' looks like this:
<div class="cf-box"><div class="cf-box-title">Button Title</div><div class="cf-button-icon"></div><div class="cf-box-text">Description of the information the button links to</div></div>
Using HTML, this would be a simple process of wrapping the containing element (cf-box) in a link and all is good in the world. I assumed that you would be able to do something similar in mediawiki such as..
[[Some Page|<div class="container"><div class="button"><div class="text"></div></div></div>]]
but when I try this, the outer 'container' opening and closing div elements are stripped out and displayed on the page as text leaving the internal div elements orphaned rendering garbage on the page. The link does work though!
Thanks to anyone who takes a look!
Is it possible to have a non-scrolling iFrame inside a scrolling div, and have anchor links inside the iFrame work correctly? The anchor links inside the iFrame should scroll to the spot inside the iFrame, I don't need/want them to point to elements on the parent page.
Here is my jsFiddle with a simple example:
http://jsfiddle.net/shopguy/WjmHG/
and the code for it:
<div style="width: 100%; height: 300px; overflow: auto;">
<iframe style="width: 100%; height: 2000px;" src="http://www.hypergurl.com/anchors.html" scrolling="no"></iframe>
</div>
I have no association with that hypergurl.com link used in my example, it was just the first example I could find of a page with an anchor by id/name syntax link in it.
If you load the JSFiddle and click the "Jump to Bottom" link inside the iFrame, it does nothing (testing with FireFox 19.0.2). When testing with various pages it never works in FireFox, in Chrome it sometimes works the first time it is clicked, but then if you scroll up and click again it doesn't work. In IE8 it works (scrolls) most of the time.
Scrolling works correctly all of the time if I let the iFrame itself have the scrollbars (remove scrolling="no"). This isn't a practical solution for me though, as I have content outside of the frame that I want to scroll with it. In my real code I dynamically set the height of the iFrame to fill its content, this way it appears to be more like content on my page.
Additional info as to why I need to do this:
I'm creating a web-based email client and so far there seems to be the least amount of issues if I display the HTML body of emails inside an iframe, vs trying to display inside a table cell or div inside my page. I'd like for these type of links to work. I do have some control over the content, it comes from my server and I can modify it some (but don't want to hack it too much). For example, I already modify all links to open in a new window (but not links that start with #, so that isn't my issue).
I know GMail doesn't use iFrames, but my XFINITY (by Comcast cable) web-based email client does, and they managed to get these to work (but so far haven't figured out what all they are doing).
Check out this post: Jump Link Inside an iFrame
If your iframe has a different domain then you will be unable to use a javascript solution to solve this, but if it is then you can add the target="_parent" attribute to all the anchors within the iframe.
var iframe = document.getElementById('iframeId');
var doc = (iframe.contentDocument)? iframe.contentDocument: iframe.contentWindow.document;
var anchors = doc.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++)
anchors[i].target = '_parent';
I've recently added code to this library to sort out all the issue with Anchor Links inside an iFrame.
https://github.com/davidjbradshaw/iframe-resizer
It intercepts all requests for in page navigation and scrolls the parent page to the correct position. If it doesn't find the anchor in the iFrame, it bubbles it up to the parent page and looks for it there.
Here's the way I've set-up my site. I have a page called "news.html". The content of this page is just an iframe with a fixed size. The iframe links to "innernews.html", which is the actual content I'm trying to display. I have it set-up this way to keep every page consistently sized. The iframe prevents the height of the page from expanding due to extra content, and is scrollable.
How would I create a link targeting a specific element/header within my "innernews.html" page? If there isn't a way to achieve this, I'll remove the iframe and just plug content straight into "news.html". But still I wouldn't know how to create a link that targets a specific element/header...
You can link to an element (on another page or on the same page) only if the element has the id attribute or it is an a element with the name attribute. In both cases, put the fragment identifier #foo at the end of the URL in the link, where foo is the value of the attribute.
If the page being linked to does not contain such an attribute, and if it is outside your control, you are out of luck
Basically, you can simply create a link to specific header of a page:
<a name="your_header_name"></a>
<h1>Header Text</h1>
...
Link to the header
I strongly recommend you to remove iframes from the page if there is no reason to keep them. Iframes can complicate your life when you're trying to do something not trivial.
Have you considered using a container such as:
#newsContainer {
overflow: scroll;
height: /*whatever*/
}
I just want to display one particular div of a web page inside a newpage.How this can be done?
create a webpage with only that particular div and use iframe imbed code.
<iframe>my div</iframe>.
Every web page load from top to bottom means first my header will be loaded then content and finally footer. How can i make it to load from bottom to up.means first footer then content and then finally header content.
Are you getting what i am trying to say.??
OR
to make it load from right to left OR
left to right..
This is probably one of the more bizarre questions I've seen here...
You cannot change the order in which the browser loads the file, it will always start at the beginning and read to the end. However, if you change the order of the file such that the footer is first and the header is last, the browser will render it in that order. As long as the CSS places each element in the correct place, it should work.
This will probably have some strange side effects since the browser will have to rerender or move elements several times as it moves the footer down the page to make room for the elements above it.
Is there really a need for this? Web pages generally load fast enough that users won't notice what direction they load in, and if your page isn't loading that fast, then I would focus on finding out why instead of trying to render it in a different order.
A web page is HTML + additional files.
The HTML file is loaded and read start-to-finish. When it gets to a point in the file where it requests another file (such as CSS, .JS, an image, etc.) it then sends a request to get that image.
You have control over that in that you can rearrange your HTML any way you want to.
What you don't have control over is how long it takes to request and then retrieve each of the individual files.
If you want full control, then you pretty much need to load everything but keep it hidden, and then reveal the items in the order you want them to appear via javascript and CSS.
All that said, though, the better answer is "No. You can't. That's just how the web works".
If this is for some kind of cool effect on your page, you could check out Page Transitions. These only work in IE though. If that is the case, it looks like you want the Wipe effect.
If you want it to just look like its loading from bottom to top then you could hide everything with css in the header and then have javascript unhide them starting from the bottom of the page - but I really don't know why you'd want to do this. Can you give us some more information on the effect you're trying to create?
Visually, you could get the sort of effect where one would see the content before the header by putting the header after the content in the HTML output then use CSS to make the header appear first visually.
If you want to scroll your content in somehow, I'd check out jquery and animations.
Assumption 1: Load content before styles/javascript.
In this assumption you care about the page loading first THEN the css/javascript executing thus allowing the user to get the content before all scripts/styles load and thus speed up the usability of the page.
To accomplish this put the style/script tags as the last elements in your body.
Assumption 2: Bizarro-world loading.
In this assumption you want the footer loaded/displayed first, then content, then header in that exact order.
1) The html head element will load before the body. No way to change that. Header = page header in my wording.
2) Use the following html pseudocode
<html>
<head></head>
<body>
<div id="footer"></div>
<div id="content"></div>
<div id="header"></div>
</body>
</html>
And in your css float everything to the right having them take up 100% width. This will cause the page to load backwards but when it is displayed it will be displayed appropriately.
#header,#footer,#content { width: 100%; float: right; }