I have several divs with content. Some of the context is wrapped with,
content <a name='SomeName'> cool content </a> more content
In Javascript how do I force the SomeName name to scroll into view for that DIV only. The catch is that there are many DIVs on the page with content.
I have the Div's object known. The Div can contain other divs etc in a hierarchy. Somewhere in there is the SomeName anchor.
site: http://BiblePro.BibleOcean.com
what about scrollintoview command? Not sure if thats IE specific.
document.getElementById("SomeName").scrollIntoView(true);
You could set the Window Location to include the # anchor, and the browser will scroll to it.
Window.Location = "http://yourSite.com/YourPage.html#SomeName";
Related
Is it possible to get a custom context menu (DIV) expanding over several iframes?
I have 2 iframes (within a DIV each for some reason). In iframe 1 I have a custom context menu (another DIV). When I right-click in iframe 1 next to the border, the context menu appears under iframe 2:
This is how it should be:
I already gave the context menu a z-index of 99.
EDIT:
Here are my 3 sites. The both iframes (left, right) and the index, where they are linked.
Sorry, I don't know how to import iframes into fiddlejs, so that I had to link them separately.
index.html
left.html
right.html
Specify z-index: 1 for both iframes. Keep the div with "context menu" at z-index:99.
Are you floating the div?
.contextmenu{float: left; z-index: 999999}
use something like
z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999
thats what i do when i want something to float on top of everything else.
One option is to add logic that intelligently positions your context menu.
In other words, add code that re-positions the context menu div if it gets too close to the edge of the iFrame.
In other words:
IF popup's x-position IS GREATER THAN ( iFrame's size MINUS popup's width )
THEN reposition popup window to the left
This process is sometimes referred to as clamping the position of your context menu.
NOTE:
This will not be elegant unless the end user is aware of a logical separation between the two iFrames.
Core issue : http://jsfiddle.net/pipip/P46Xg/
I have a div container with a few paragraphs of text,
and inside one of these paragraphs is the following anchor <a name="stop" />
The container is set to overflow:hidden
Is it possible with javascript / JQuery to set the height of the container so that the bottom of the container stops exactly at or below the anchor?
Added Depth & Background : http://jsfiddle.net/pipip/yj9dB/
This would be used for a modified JQuery Slider. Where someone using a CMS could type [readmore] anywhere into the Content field, which would be replaced by the above anchor via PHP. This way they would be easily able to control where the Read More break appears within the container. In the associated example I am hard-coding the height to 75px, although what I want is for the height to be dependent on the location of the anchor name="stop" in the text.
Thanks. If this is an awful way to go about it, I'm all ears!
With jQuery you could do it like this:
$('#container').height( $('a[name=stop]').position()['top'] );
and CSS:
#container {
position: relative;
}
We need this because .position() gives us the position relative to an element's offset parent, and we can make #container the offset parent of the anchor tag by setting its position to relative.
JSFiddle: http://jsfiddle.net/divad12/RYPm7/1/
Also, for HTML5, you may want to consider setting an anchor tag's id attribute instead of name: HTML Anchors with 'name' or 'id'?
Still, the best way is to make the link load the full article via Ajax.
Is it possible to change the position of the scroll bar relative to a new hash tag?
Currently, the page scrolls to the top of the element that is targeted using #target, which is normal behaviour. Is there a way to move it so the page scrolls to, for example, 100px further down the page than the anchor tag (adding an extra 100px before the anchor tag)?
Not sure whether cunning placement of the anchor or javascript should be used. Not sure I'm really able to change the position of the anchor so im hoping for a javascript solution.
Thanks
You could combine the answer to this question: On - window.location.hash - Change?
With some extra logic:
$(function(){
var win = $(window); //cache your jq objects!
function fixScrollTop(){
win.scrollTop(win.scrollTop() + 100);
}
if(window.location.hash !== ""){
fixScrollTop();
}
win.bind('hashchange', fixScrollTop);
});
Oh, if you have control over the #anchor in the URL, you can (probably, depending on the browser compatibility you're shooting for) set it to the ID of any element with an ID to make the browser scroll to it.
I have a small popup window with dynamic contents. Nothing too complex. It has just a table with some text in it.
How do I find the height and the width of a window so that its content will show entirely?
The problem with using arbitrary, static values for the window's dimension is that it can be way off depending on the browser's font settings.
If this is not possible, what are the common practices?
Thanks.
Copy the HTML contents you want to put in the popup into a div that's positioned off the page, measure it, then remove the div. I don't know dojo, sorry, but this is a way to do it in jQuery:
var measuringDiv = $('<div class="sameAsPopupContainer" style="position:absolute; left:9999px; top:0px"></div>');
$('body').append(measuringDiv);
measuringDiv.html(theHtmlForTheTable);
heightOfContent = measuringDiv.width();
widthOfContent = measuringDiv.height();
measuringDiv.remove();
I assume dojo has similar methods. It's important that the off-page div you're creating maintains the same style rules as the popup container, which can be a little tricky.
I have a HTML page that scrolls up and down (not a lot, but it does scroll). How can I set the scroll position in the page after executing some JavaScript?
I'm using jQuery to inject some additional HTML at the bottom of the page and I'd like to programmatically scroll to the position of that new content after it's added.
Try using window.scroll.
Example:
// put the 100th vertical pixel at the top of the window
<button onClick="scroll(0, 100);">click to scroll down 100 pixels</button>
Another way to do this, so that you have the option:
In the HTML you are adding to the bottom of the page, you can insert a named anchor tag and then change the URL so that the page moves there (FYI: it will not refresh the page).
// add HTML like this, dynamically:
// <a name="moveHere" />
// the javascript to make the page go to that location:
window.location.hash = "moveHere";
Depending on what you are doing, this may or may not be a useful solution.