I have a hidden iFrame (display:none) which I change the src attribute of to load new contents. When the iFrame has finished loading I make it visible again (display:inline). This works fine except for anchors. The iFrame will not jump to an anchor when finished loading if its hidden in FF.
View 2 RepliesI have a script that scans an HTML document for headers and special comment tags for the purpose of generating a left-floating/position-fixed DIV that contains the document's outline or "table of contents." Within the DIV are lists (UL element by default) whose items (LI elements) are jump-to links (A elements) to the points (headers, special points marked for inclusion in table of contents) in the document. The problem is this. I have typical HTML document with links that jump to points (usually headers) inside the document, as shown below:
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a>Header Text</h1>
<p>...
</body>
But my script, being a document outliner that finds headers in a document, inserts another anchor as a jump-to point just before the first occurrence of text in the header (inserted A element shown in red below). This somehow disables the document-coded jump anchor (shown in blue below). And it occurs in FF and IE, which suggests it is not a browser-specific issue. Why does it occur? Is there something in the HTML spec that states that two anchors to which a jump occurs are not allowed to be adjacent elements in the document?
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a><a id="jump-1"></a>Header Text</h1>
[code]....
To reproduce what I am seeing, search for the text "Why Is A Survey Done". The first occurrence is a within-document jump-to link, which should jump to a header below it. If the script execution to generate a document outline is disabled, the jump works. But if the script is executed and the document outline generated, the jump-to link does not work.
Have a drupal site and jquery update1.3. seems to avoid the posiblity to jump to anchor tags. In order to this I use this script for jumping on a page. I works..But how to I manage a jump, if the href is on a different page (not external!).Something like jump on pageload to an anchor.click on page node/5/products on link href: node/5/products/xyz/#anchor1 How do I manage this?
$(document).ready(function(){
$a[href*=#]").click(function(e){
$
[code]....
You know how when you visit [URL] your browser jumps to #test1 automatically? Not talking about when you open page.html and THEN click an anchor to #test1. I mean typing the anchor explicitly at the end of the url before even visiting page.html. How do you prevent that jump? Just a sample scenario, to make sure I'm being extra clear:
[Code]./..
I currently have a script to jump to an anchor tag when the page loads:
<script type="text/javascript">
function goToAnchor() {
location.href = "myPage.html#myAnchor";
}
</script>
Now, I would like to take it a step further and would like to link from page A to page B that usually takes a while to load and once the page loads, run a script to jump to the specified anchor tag on the page after everything has loaded. I know I have to add some parameters at the end of the url link on page A, but that's where I get stuck.
vBulletin uses a template system so I can't create a separate element for everything -- we have had several people ask for a "skip to the next post" feature and I'd like to implement that for them My first thought was to use anchor tags such as:
<a name="$post[postid]">
for each post and then to create a link for "Jump to Next Post" which would advance the user to the next instance of <a name="$post[postid]"> in which the postid obviously would've changed. With that I didn't know if there was a way that I could have javascript look for the next instance of this, or to pull the postid number and add 1 to it to find the next post on the page. I'm also not sure if it would need to be as complicated as reading where it was at and then adding one and directing person to that anchor point, which is why I thought maybe it could just look for the next instance of <a name="$post[postid]"> and refocus the screen on that.
It doesn't have to be an anchor, it can be a hidden input, whatever makes the JS be able to seek it as a point to move the page to. We do have some members that select a different number of posts per page than the default, so I'm guessing that the plus one might not be a great idea if they used a smaller number per page and then clicked the last one, whereas people with more per post wouldn't need to stop at the same point before it no longer let them. If there's a solution for that, that'd be great as well (such as once it hits the last element on the page, it no longer receives instruction, goes to the top of the page, or something).
When you click a link it jumps to an anchor point on the page and scrolls there smoothly. I was wondering how I get the same effect if I want the link to jump to another page? A normal anchor point on another page would set the href to, for instance, 'index.html#contact' but it won't work in this case as the javascript isn't reading the '#'.
<script type="text/javascript" src="jquery.js"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
</head>
<body>
<ul>
<li><a href="javascript:void(0)" onClick="goToByScroll('contact')">Go to anchor 1</a></li>
</ul>
I've used the ScrollTo plugin for header images for each topic and I have created a menu to change the content in the div(s) that contain readable content with ajax, so it looks like different pages with headers using the one page.
everything works well, but on browser refresh the page jumps down after the menu and on to the header.
Would anyone know a script that would deactivate all anchor links in the page so that page onload the page loads as default index.html instead of index.html#some_anchor
using js to force a specific anchor call to jump after the page completely loads. The reason I am doing this is because the page I am linking to with anchors takes a long time to load and a standard browser anchor link sometimes does not work 100%. With that said, I would now like to make the script I wrote universal to get ANY anchor param in the url and jump to that spot on the page. Right now it's coded to just look for "#anchor". I want to re-code it so it will look for "#" + "anyAnchorName".
[Code].....
I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?
View 2 Replies View RelatedMy website uses a very tall iframe to display catalog pages from an external website. I'm using iframes here to make it look like the external catalog pages are on my webpages.
The problem is that when a visitor goes to my page, scrolls down to view all the contents inside the iframe, and then clicks a link inside the bottom of the iframe to goto the next page, that next catalog page will load inside the iframe, but the visitor will still be looking at the bottom of the iframe on my website, and thus has to scroll up to the top of my website to see the top of the iframe's contents.
To see exactly what I mean, go here, scroll down, and click the next page link: [URL]
How can I make it so when someone clicks a link inside the iframe, that the page with the iframe automatically scrolls to the top appearing as if the whole website has refreshed?
I have created a page using collapsible divs through a simple javascript toggle. This is the javascript:
Code:
<script language="javascript">
function getItem(id)
{
[Code]....
This page is a class listing and each toggle bar is a class category. What I want to do is be able to link from another page to the class page, but to a specific class listing within the hidden div section.
The actual page is: [URL]
note that I am working within the confines of a content management system.
I need something like: go to the page, do the toggle function to show the div, then find a page anchor to locate the correct class.
The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, i can't seem to .show() the selected 'gallery' w/o showing them all...........
View 1 Replies View RelatedAn Iframe exists inside a page (that has content exceeding the height,
therefore scrollbars kick in) - normal stuff.
When I want to use anchor references inside the Iframe the parent
page is affected also, in that it jumps to the top of the iframe, as though
there were an anchor at that point.
How would i go abouts putting a javascript code into a hidden iframe and then have it update new messages to another frame if there is a new message?
By message i mean it checks the database for a new message ( this is for a chat )
Its the javascript im not sure how to set up... If someone could point me in the right direction thatd be great.
i have a page containing an iframe somewhere in the middle of it. the iframe stretche to the end of the page and its height is calculated from its content with javascript.
i want some of the pages i load into the iframe to have a "back to top" link at the bottom. but i can not put the anchor inside my iframe because my iframe doesn't start at the top of the page.
so i put the name linke of the anchor at the top of the parent page which has the iframe inside. but i couldn't find a way to call that anchor from within the iframe.
i'm sure this could be done with a simple code of javascript. how do i get to the parent frame within the iframe?
I have a page that opens up an iframe for the user to be able to select photos. Each photo has a checkbox, and on select I add a hidden form element to the parent frame form. This all seems to work fine, but im now stuck on how to remove the form element when the checkbox is un-checked.
[Code]...
I need to get the page to reload with the anchor in the link when it is clicked in a dropdown menu. For example if I am on 'www.domain.com/about/#2' and I then click on 'www.domain.com/about/#3' the url changes but the page doesn't reload so I need the page to reload, but keep the new anchor (#3).I gave the links with anchors a class of 'reload' and tried this:
$('a.reload').click(function() {
window.location.reload();
});
I'm using the following script to trasfer content from a hidden Iframe to a div.
function loadExternal(url) {
if ( window.frames['buffer'] ) {
window.frames['buffer'].location = url;
var lyr = document.getElementById? document.getElementById('display'): document.all? document.all['display']: null;
if ( lyr && typeof lyr.innerHTML != "undefined" ) {
lyr.innerHTML = '<img src="ld.gif" alt="">'
}
return false;
}
return true;
}
function displayExternal() {
var lyr = document.getElementById? document.getElementById('display'): document.all? document.all['display']: null;
if ( window.frames['buffer'] && lyr && typeof lyr.innerHTML != "undefined" ) {
lyr.innerHTML = window.frames['buffer'].document.body.innerHTML;
}
}
It works ok and brings up the linked pages but the images on the pages will not show. The pages are in sub folders along with all the images that pertain to it. Im just confused here, Why does the script load the pages but will not the display any of the corresponding images?
what im trying to do here is create a dynamic hidden iframe and write a form into it and submit. this approach works in FireFox but not in IE7, below is the code im using
document.forms[form].appendChild(isProcessFQ);
var ifText = document.getElementById(rootElID).innerHTML;
var ifSubmit = document.createElement('iframe');[code]........
But when i run this in IE7 its openings a new blank window after the statement doc.open(); and shows some error(which has no useful details) and not maing any calls to server.
i am creating a Greasemonkey script that adds an ajax chat to a website. Greasemonkey is an addon for firefox that lets you modify the html code of websites before they are showed to the user.
I am in the process of creating a wizz feature that will allow you to send a message to a member and where ever he is on the web his gona receive it. The way it works right now is there's a hidden iframe in every page load and when the player has a message it popups a small window
It's working great but the popup is always instantly blocked because firefox has a popup bloker integrated and because it can popup on random websites they don't allow it and there for never gets the message ...
Everything else i tryed was blocked by the fact that it opens in the iframe that is invisible.
I even tryed doing it the old fashon way with an alert() but same thing you don't see it because it's in the hidden frame.
And i tryed adding top.alert() but i get a javascript the "Access Denied" message. The "Access Denied" error in any browser usually means that a script in one window or frame is trying to access another window or frame whose document's domain is different from the document containing the script.
I know DHTML AJAX popup would be the only way to give the user the message with out being blocked ... but how can i make it popup out of the iframe into the main frame with out being blocked in anyway ..
I'm trying to solve problem I'm having with my iframe and forms. I have a form that is brought into a hidden iframe. Now I can't seem to get the form to submit? I am guessing this is the case because of how the content in the iframe is brought into the main page. I'm not very good with scripts. Here is my page: [URL]. The form is on the reservations page. This is the form that won't work.
Here is my code:
This is in the stylesheet:
#buffer { position:absolute; visibility:hidden; left:0; top:0 }
div#display {
margin:0 0 0 0;
/*margin: 2em 0;*/
/*border-top: dashed 2px #999;
border-bottom: dashed 2px #999;*/
padding-bottom:6px;
display:none; /* until loaded */
}
This is in the main page (which calls the iframe)
<div id="display"></div>
<!-- onload attribute does not validate but is included here rather than assigned via JavaScript to maximize cross browser support -->
<iframe id="buffer" name="buffer" src="home.html" onload="dw_displayExternal()"></iframe>
How can I copy the the html code of a hidden iframe and post it to a server side script?
View 1 Replies View RelatedHaving a little bit of trouble with a site I'm currently working on I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:[URL].. This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).
I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?
If you have a look at [URL].. and click on an image you will see what I mean.It's as if the image is converted to a div while animating.
View 1 Replies View RelatedI believe I'm having an issue with the jQuery Cycle plugin. For the duration of the occurrence of a transition, the page appears to be "jumping" due to the fact that the site content is centered vertically and horizontally and the transition is making (inactive) scrollbars disappear entirely. I have not witnessed this personally in Safari/Firefox on Mac or Firefox/IE8 on Windows, but a colleague took a video of it happening on their machine with Firefox (Mac). Some see this problem, and others don't—I haven't been able to narrow it down. I also can't put overflow:hidden; on <body>, as I need the site to scroll if the browser window is too small.Here's the video, it's a 1.8 MB QuickTime file:[URL]
View 1 Replies View Related