I am trying to load specific html id content in Dojo content pane on click of a tree node.
I have a long html, which has several headings. I am trying to load content from this html on click on a tree node. I am able to get html loaded, but I am not able to bring content with specific id on top of content pane.
Say my html is abc.html and it has several ids say id1, id2 ...
if I open this html in IE with argument abc.html, page gets loaded, with first line on top. Now if I open it with argument abc.html#id9
This specific section of html get loaded to top of IE window.
I am trying to achieve same effect in dojo content pane - here content is loaded in Dojo ContentPane on click on tree node and goal is load specific #id associated with that tree node in content pane, instead of loading top of html.
It never loads specific id content on top of content pane. It always load as if argument is abc.html. I do not see any effect of abc.html#id9
below is code snippet on how I am creating content pane and loading content on click on tree node.
....
var CenterPane = new ContentPane({//content pane at center for loading urls of selected designs
content:"Click to get the details about node",
region:"center"});
bordContainer.addChild(CenterPane);//add content pane to the border container
....
....
var fileTree = new Tree ({
model: treeModel,
showRoot: false,
openOnClick:true,
autoExpand:false,
_createTreeNode: function (args)
{
return new MyTreeNode(args);
},
onClick: function(args) {
CenterPane.set("href", vHtmlPath); }
....
vHtmlPath is dynamically set to abc.html#id9 or abc.html#id1 ....
ContentPane does not load into an iframe. If you want to move, you have to change the current page url.
For instance
CenterPane.set("href", vHtmlPath).then(function() {
document.location.href = "#id9"
}
Related
How would I insert a "toolbar" style header into a page using the Shadow DOM that pushes down all other content?
The process is well documented elsewhere using iframes, but doing so with the Shadow DOM is something I am struggling with.
An iframe won't allow elements in the iframe to generally overlap the rest of the page content, so it prevents the creation of a clean interface in said toolbar.
If you want to insert something that is shadow DOM, one way would be to create a custom element and then insert that into the DOM. You can do this in a static way (i.e. have this simply replace the position your iframe would be), or you could insert it dynamically with JavaScript running on the page.
This fiddle shows the basics for creating a custom element http://jsfiddle.net/h6a12p30/1/
<template id="customtoolbar">
<p>My toolbar</p>
</template>
<custom-toolbar></custom-toolbar>
And Javascript like
var CustomToolbar = Object.create(HTMLElement.prototype);
CustomToolbar.createdCallback = function() {
var shadowRoot = this.createShadowRoot();
var clone = document.importNode(customtoolbar.content, true);
shadowRoot.appendChild(clone);
};
var CToolbar = document.registerElement('custom-toolbar', {
prototype: CustomToolbar
});
Just as a little pre-info, I'm running a Volusion e-commerce site that has internal page HTML locked down, so I am unable to add any ID's or classes to internal page elements.
The default HTML provided by Volusion puts a table out of order for my design on my category pages. I have a bit of script that targets that table on my product category pages, and moves it. The problem is that the script is run after the page is loaded, causing a "jumping" effect as the table is moved via jquery.
The simple solution would be to hide the table first via css, and then have the jquery show the element after it has been moved, however, I am unaware of how to accomplish this.
Here is the moving script. It first detects if the user is on a category page via a URL check. It then finds the first child table inside the #content_area element, and moves it.
<script type='text/javascript'>
$(function () {
if (location.pathname.indexOf("-s/") != -1) {
var table_to_move = $("#content_area").find("table").first();
$("#content_area").find("form").before(table_to_move).show();
$('#jmenuhide').insertBefore('.refinement_price_section');
}
else {
}
});
</script>
I have tried targeting the element via css, and hiding it, and then re-showing it after the script has run. However, since I can only reference it through css selectors, and not an ID or class, the page will end up hiding the wrong table, as the table orders change when the script is run.
Anyone have any idea how I can smooth out this table movement? Thanks!
You can view this script in action at: http://www.yandasmusic.com/Folk-Instruments-s/1821.htm
This is a jQuery tooltip.
In a nutshell, the jQuery creates the popup from another HTML page.
EDIT
i put up an example. HERE
So I need to grab the title from the popup. When I use the document.title or whatever, it echos the title from the current page and not the popup.
<div id='JT_close_right'>"+title+"</div>
I need the title in a variable:
var title = (pop-up page's title)
simply use:
var title = $('#JT_close_right').html();
Since you are populating that element with the title in the function, you just need to grab that element by its id. The popup you are creating is not a separate window, but just using a div as an overlay overtop of the current content, so it does not have its own document.title for example, or document object for that matter.
I have an ExtJS window, with a toolbar at the top, and loads with plain Panel at the bottom with plain HTML. This works fine. On a button click, I'd like to be able to replace the bottom panel (called content), with another panel. If tried this
var clickHandler = function(calendar){
// 'content' is the panel id
// calendar is also an Ext.Panel object
Ext.getCmp('content').update(calendar);
};
What am I missing?
Update replaces HTML content.
You want to remove the old panel and add the new. Try .remove()ing the old panel and .add()ing the new one, and don't forget .doLayout().
I need to know how to load a external image e.g. http://www.google.co.za/intl/en_com/images/logo_plain.png into a new ExtJs window.
If this is the only content in the EXTjs Window then you can set it using the html option in the window configuration. Something like this
var win = new Ext.Window({
html: '<img src="http://www.google.co.za/intl/en%5Fcom/images/logo%5Fplain.png" />',
height: 150,
width: 250
});
If there are more contents in the window then you can add the html to the html property of the container for the image
now it showing perfectly
Please take a close look at body property documentation:
body : Ext.Element
The Panel's body Element which may be
used to contain HTML content. The
content may be specified in the html
config, or it may be loaded using the
autoLoad config, or through the
Panel's Updater. Read-only. If this is
used to load visible HTML elements in
either way, then the Panel may not be
used as a Layout for hosting nested
Panels. If this Panel is intended to
be used as the host of a Layout (See
layout then the body Element must not
be loaded or changed - it is under the
control of the Panel's Layout.