Rectangle 27 30

XmlDocument is great for developers who are familiar with the XML DOM object model. It's been around for a while, and more or less corresponds to a W3C standard. It supports manual navigation as well as XPath node selection.

XDocument powers the LINQ to XML feature in .NET 3.5. It makes heavy use of IEnumerable<> and can be easier to work with in straight C#.

Both document models require you to load the entire document into memory (unlike XmlReader for example).

I think you meant "and can be easier to work with in straight VB.net". Because VB supports direct creation of elements where C# still requires code.

c# - XDocument or XmlDocument - Stack Overflow

c# xml xmldocument linq-to-xml
Rectangle 27 11

They are complementary rather than competing. DOM provides a tree model of XML with low-level navigation capability (get first child, get next sibling, etc); XPath adds a much higher-level search and navigation capability (e.g. get the average price of all books, get the title of the last chapter).

Note also that DOM is just one tree model for XML, and is very far from being the best: it's the first and the worst, and it's a shame that so many people still use it. In the Java world there are much better designs available such as JDOM and XOM.

DOM vs XPath - Difference? - Stack Overflow

dom xpath difference
Rectangle 27 5

You can put nav inside a div , then set the height of the div by nav height. The advantage of this: easier and more meaningful,and In other places you can use other code without concerns..

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>

+1 because this is a great suggestion, though it will behave oddly if the body has nonzero margins. (I'd suggest adding body{margin:0;} as well)

html - Moving DOM elements below a fixed navigation bar - Stack Overfl...

html css html5 css3
Rectangle 27 2

The Nodes are in the form of Tree Structure Memory: It Occupies more memory, DOM is only preffered in the case of small XML documents..Store the entire XML document into memory befor processing Slower at runtime Stored as an objects Programmatically easy to implement Ease of navigation and use,can traverse in any direction. We can insert or delete,alter nodes.

SAX : use when you want to access XML ( not alter XML)

Sequence of events It doesn't use any memory preferred for large documents.Doesn't store the XML in memory before processing Faster at runtime, because of the above mentioned point. Objects are to be created. Need to write code for creating objects In SAX Backward navigation is not possible as it sequentially processes the document,top to bottom traversing We can't insert or delete a node

XPATH: Xpath is useful when you only need a couple of values from the XML document and you know where to find them(you know the path of the data./root/item/challange/text)

XMLPullParser: Fast and requires less memory with DOM

android - The difference among : SAX Parser,XPath,DOM,XMLPullParser - ...

android xml parsing
Rectangle 27 3

Yes AJAX based page navigation is supported when each of your <div data-role="page"> elements are on different pages. On navigation, jQuery Mobile will find only the first <div data-role="page"> element on the page, add it to the current DOM, and then animate it into view.

Make sure you are using .delegate() or .live() to bind your event handlers since the elements you are binding-to do not exist in the DOM until the user navigates to them. Here's an example:

$(document).delegate('[data-role="page"]', 'pageshow', function () {
    alert(this.id + ' --> pageshow');
});

If you are using the pushState feature that updates the URL to not include the hashes (e.g. www.mywebsite.com/index.html#/dir1/page2.html changes to www.mywebsite.com/dir1/page2.html) I would recommend writing all your custom JavaScript in an external .js file and including it on every page. This way if a user refreshes the browser or deep-links into your site they will get all the code for the experience you want them to have.

Thanks jasper, your explanation at first paragraph itself helped me in fixing the issue. I was already using the .live. I transferred the code to .click event binding to 'pagecreate' event and code of ajax call on each show event to 'pageshow', and it is working fine now.

Now I am stuck with different issue, I put all my JS code(which has some event binding inside pagecreate event and ajax call on pageshow event) in serpate .js file. I add this .js file from inside page-div. Now each time i visit this page using normal <a> tag, call to pagecreate and pageshow event keep on increasing by +1. and even though pageshow get called mutliple times,rest of the code written inside it do not get called. I previously explained this issue in separate question stackoverflow.com/questions/7724959/

I added an answer to your other question ( stackoverflow.com/questions/7724959/ ). In short, cache your pages in the DOM (data-dom-cache="true") or move your custom JS code to the bottom of your HTML documents (outside the <div data-role="page"> element). As the pages are not being cached they are gathered via AJAX each time they are requested and the JS code is being run on each visit (which will compound any bind statements you use even though the page is removed from the DOM after the user leaves it).

asp.net mvc 3 - JQuery Mobile Ajax Navigation in Single-Page Template ...

jquery asp.net-mvc-3 jquery-mobile
Rectangle 27 3

Yes AJAX based page navigation is supported when each of your <div data-role="page"> elements are on different pages. On navigation, jQuery Mobile will find only the first <div data-role="page"> element on the page, add it to the current DOM, and then animate it into view.

Make sure you are using .delegate() or .live() to bind your event handlers since the elements you are binding-to do not exist in the DOM until the user navigates to them. Here's an example:

$(document).delegate('[data-role="page"]', 'pageshow', function () {
    alert(this.id + ' --> pageshow');
});

If you are using the pushState feature that updates the URL to not include the hashes (e.g. www.mywebsite.com/index.html#/dir1/page2.html changes to www.mywebsite.com/dir1/page2.html) I would recommend writing all your custom JavaScript in an external .js file and including it on every page. This way if a user refreshes the browser or deep-links into your site they will get all the code for the experience you want them to have.

Thanks jasper, your explanation at first paragraph itself helped me in fixing the issue. I was already using the .live. I transferred the code to .click event binding to 'pagecreate' event and code of ajax call on each show event to 'pageshow', and it is working fine now.

Now I am stuck with different issue, I put all my JS code(which has some event binding inside pagecreate event and ajax call on pageshow event) in serpate .js file. I add this .js file from inside page-div. Now each time i visit this page using normal <a> tag, call to pagecreate and pageshow event keep on increasing by +1. and even though pageshow get called mutliple times,rest of the code written inside it do not get called. I previously explained this issue in separate question stackoverflow.com/questions/7724959/

I added an answer to your other question ( stackoverflow.com/questions/7724959/ ). In short, cache your pages in the DOM (data-dom-cache="true") or move your custom JS code to the bottom of your HTML documents (outside the <div data-role="page"> element). As the pages are not being cached they are gathered via AJAX each time they are requested and the JS code is being run on each visit (which will compound any bind statements you use even though the page is removed from the DOM after the user leaves it).

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

asp.net mvc 3 - JQuery Mobile Ajax Navigation in Single-Page Template ...

jquery asp.net-mvc-3 jquery-mobile
Rectangle 27 1

If you have the DOM extension installed, you could load the HTML navigation, and then create an XML sitemap.

// Create an empty document, load it with your HTML
$dom = new DOMDocument('1.0', 'utf-8');
$dom->loadHTML('<li><a href="index.php">Home</a></li>...');

// Get links
$links = array();
foreach($dom->getElementsByTagName('a') as $link){
    $links[] = $link->getAttribute('href');
}

Now we have an array of relative URLs in $links. You can now generate an XML document using the DOM extension (recommended, but more complicated), or use your $links directly to generate output:

<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; // Be wary of "?>" in your document ?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <?php foreach($links as $link): ?>
        <url><loc>http://www.mydomain.com<?php echo htmlspecialchars($link, ENT_XML1, 'UTF-8'); ?></loc></url>
    <?php endforeach; ?>
</urlset>

And I'd also suggest to use a proper XML library (maybe DOMDocument itself) so there's no need to deal with data escaping and similar dirty stuff.

php - XML automatic sitemaps, is it impossible? - Stack Overflow

php html xml sitemap
Rectangle 27 4

You can use the XmlDocument class for loading your XML File into a DOM.

MSDN - This class implements the W3C Document Object Model (DOM) Level 1 Core and the Core DOM Level 2. The DOM is an in-memory (cache) tree representation of an XML document and enables the navigation and editing of this document. Because XmlDocument implements the IXPathNavigable interface it can also be used as the source document for the XslTransform class.

Thanks, I'll take a look.

.net - How do I create a DOM tree from an XML file in C#? - Stack Over...

c# .net wpf xml dom
Rectangle 27 3

You'll get the biggest accessibility impact focusing on strong keyboard navigation and thoughtful DOM structure including clear heading outline and semantic sectioning with HTML and ARIA. Keyboard navigation is the primary mode of navigation for screen reader users and many folks with mobility impairments, so a foundation there is a prerequisite to any actions or workflows in your site.

Do use HTML5 sectioning elements. Besides making your markup and CSS rules more elegant, it defines the page structure more clearly to screen readers and makes page navigation easier. The semantics of many elements are already supported - albeit inconsistently - in NVDA, JAWS and VoiceOver.

ARIA landmarks also have good support in these 3 screen readers, in particular as a way to skip redundant header content. Use role='main' on the containing element for your primary content.

aria-describedby and aria-labelledby are useful for complex forms and modals. Before relying on these attributes though, focus on creating coherent read order and clearly labeling and grouping form elements. Specifically, use the for attribute to associate <label>s with their controls, and use <fieldset>s with <legend> to group related controls.

Avoid using the title attribute in general. There is no way to display its content via keyboard focus so it is effectively useless for keyboard-only users who do not use screen readers, not to mention mobile devices.

Depending on the scope of your content, you'll need to go further than these recommendations for robust accessibility, but you've got the right idea in trying to address low hanging fruit first. It will go a long way.

role - What simple steps can a web site take to improve accessibility ...

accessibility role wai-aria
Rectangle 27 2

Just add a z-index to the navigation. Since it appears before the content in the DOM it will be displayed BELOW it on the z-axis. Force it to a higher than 0 z-index as below:

.navbar {
    z-index:1;
}

Thanks a lot!!!

html - Position fixed header hidden behind content after using relativ...

html css position absolute relative
Rectangle 27 1

The use of label with input is better because the association between the text "Name" and the label is explicit and the user, using DOM navigation will be able to encounter and discover that explicit relationship which they would not in the case of the DIV.

I disagree. There are plenty of markup choices that will be less confusing than a label and a disabled input (a dl for example). As @DA notes in comments, a disabled input without a clearly stated reason is potentially confusing.

@steveax - the question is specifically about accessibility. You HAVE to have an explicit association between the label and the input field in order for it to be accessible. Label is the most widely supported accessible technique - therefore the acknowledged best practice. The DIV markup provided in the question IS NOT accessible - full stop. This is a fact, it is not debatable, it is not opinion. w3.org/TR/UNDERSTANDING-WCAG20/ w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html

Should form controls be associated with labels? Absolutely. Should a label and a div be paired? No. But what I'm suggesting is alternative markup (since the input will always be disabled) that avoids the potential confusion of the disabled input.

I probably could have been clearer and said: "I think neither of those markup choices are ideal".

duck (semantic) markup - if it looks like an input, and acts like an input (even a disabled one), then it should be an input. In the same vein, if the "input" is really acting like a heading, then it should look like a heading and be marked up as a heading.

html - Is a disabled textbox any better than a div with role="textbox"...

html accessibility wai-aria
Rectangle 27 3

pageinit Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

$( '#home' ).live( 'pageinit',function(event){
    var names = ['Bob','Bill','Phill','Will'];
    var listString = '';
    for(i in names) {
          listString +=  '<li><a href="#">'+i+'</a></li>';
    }
    $("#friends_list_view ul").append(listString);

    $("#friends_list_view ul").listview('refresh');
    $.mobile.hidePageLoadingMsg();
    $.mobile.changePage( "#friends", { transition: "slide"} );
});
<div data-role="page" id="home">
    <div data-role="content" data-theme="b" class="content-primary">
        <div id="friends_list_view" class="content-primary" data-theme="c"> 
            <ul data-role="listview" data-filter="true" data-theme="c">
            </ul>
        </div>  
    </div>
</div>

html - jQuery Mobile List View: initialize error - Stack Overflow

jquery html listview jquery-mobile
Rectangle 27 2

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Navigation } from 'react-router'


ReactDOM.render(
    <Router>
        <Route path="/" component={StorePicker} />
        <Route path="/store/:storeid" component={App} />
    </Router>, 
    document.querySelector('#main'));

Great thats working, so the issue was actually with my <Router> component?

Yes. I think the problem was here: component={StorePicker}. You shouldn't use quotes.

reactjs - React JS Error after requiring ReactRouter - Warning: React....

reactjs
Rectangle 27 18

Usual JS methods of detecting page changes available in a content scri...

Many sites use AJAX to add/show/change content dynamically. Sometimes it's used instead of in-site navigation, so current URL is changed programmatically and content scripts aren't automatically executed by browser in this case since the page isn't fetched from remote server entirely.

Event listener for sites that signal content change by sending a DOM event:

pjax:end
message
window
spfdone
document

Periodic checking of DOM via setInterval: Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.

  • Cloaking History API inside an injected DOM script: document.head.appendChild(document.createElement('script')).text = '(' + function() { // injected DOM script is not a content script anymore, // it can modify objects and functions of the page var _pushState = history.pushState; history.pushState = function(state, title, url) { _pushState.call(this, state, title, url); window.dispatchEvent(new CustomEvent('state-changed', {detail: state})); }; // repeat the above for replaceState too } + ')(); this.remove();'; // remove the DOM script element // And here content script listens to our DOM script custom events window.addEventListener('state-changed', function(e) { console.log('History state changed', e.detail, location.hash); doSomething(); });
window.addEventListener('hashchange', function(e) {
    console.log('URL hash changed', e);
    doSomething();
});
window.addEventListener('popstate', function(e) {
    console.log('State changed', e);
    doSomething();
});

There are advanced API to work with navigation: webNavigation, webRequest, but we'll use simple chrome.tabs.onUpdated event listener that sends a message to the content script:

"tabs"
var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        doSomething();
    }
});

This is a very comprehensive answer. Given its breadth, it might be a good idea to create a question like "How do I determine that the DOM or URL has changed". We could then use it as a duplicate target for many questions. As it is, it is a good answer for "How do I detect that the URL has changed" (and related website specific DOM/URL questions), but this Question is really only an appropriate dup target for DOM change questions.

Is there a JavaScript/jQuery DOM change listener? - Stack Overflow

javascript jquery google-chrome-extension
Rectangle 27 16

Usual JS methods of detecting page changes available in a content scri...

Many sites use AJAX to add/show/change content dynamically. Sometimes it's used instead of in-site navigation, so current URL is changed programmatically and content scripts aren't automatically executed by browser in this case since the page isn't fetched from remote server entirely.

Event listener for sites that signal content change by sending a DOM event:

pjax:end
message
window
spfdone
document

Periodic checking of DOM via setInterval: Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.

  • Cloaking History API inside an injected DOM script: document.head.appendChild(document.createElement('script')).text = '(' + function() { // injected DOM script is not a content script anymore, // it can modify objects and functions of the page var _pushState = history.pushState; history.pushState = function(state, title, url) { _pushState.call(this, state, title, url); window.dispatchEvent(new CustomEvent('state-changed', {detail: state})); }; // repeat the above for replaceState too } + ')(); this.remove();'; // remove the DOM script element // And here content script listens to our DOM script custom events window.addEventListener('state-changed', function(e) { console.log('History state changed', e.detail, location.hash); doSomething(); });
window.addEventListener('hashchange', function(e) {
    console.log('URL hash changed', e);
    doSomething();
});
window.addEventListener('popstate', function(e) {
    console.log('State changed', e);
    doSomething();
});

There are advanced API to work with navigation: webNavigation, webRequest, but we'll use simple chrome.tabs.onUpdated event listener that sends a message to the content script:

"tabs"
var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        doSomething();
    }
});

This is a very comprehensive answer. Given its breadth, it might be a good idea to create a question like "How do I determine that the DOM or URL has changed". We could then use it as a duplicate target for many questions. As it is, it is a good answer for "How do I detect that the URL has changed" (and related website specific DOM/URL questions), but this Question is really only an appropriate dup target for DOM change questions.

Is there a JavaScript/jQuery DOM change listener? - Stack Overflow

javascript jquery google-chrome-extension
Rectangle 27 1

You can download HTML and CSS as much as you want and then use JavaScript to modify the DOM accordingly. It's not set up as any kind of system that lets you substitute pages, and there's no navigation within the app (using A elements), but you are free to modify the DOM.

There's no way to add any JavaScript to what's initially in the app, as eval and the other code-executing functions are disabled. You can certainly add SCRIPT elements to the DOM, but the files they reference have to have been part of the app at the time it was installed.

Having said all that, you can implement the app as an interpreter for some language and then download programs written in that language. It's just that none of the code can be direct Chrome App code, nor can any code you download (regardless of language) make direct Chrome API calls.

Thank you so much I was going in circles trying to understand this, and I see that with this whole DOM , there could potentially be a work around. Where I have the javascript pull a txt file with javascript code and have it placed like a script into a pre-emptied html page.

That works fine provided the text file referenced by the SCRIPT tag is inside the Chrome App (in the same directory as the manifest.json file, or a subdirectory).

can I grab the text from a server? or will the chrome app block this?

The file referenced by the SCRIPT tag must be inside the app. JavaScript in the SCRIPT element or anywhere else in the HTML is disallowed.

So in other words I can not use <script> </script> within a html file?

Does google chrome app development allow you to add html and javascrip...

javascript html google-chrome google-chrome-devtools google-chrome-app
Rectangle 27 15

Usual JS methods of detecting page changes available in a content scri...

Many sites use AJAX to add/show/change content dynamically. Sometimes it's used instead of in-site navigation, so current URL is changed programmatically and content scripts aren't automatically executed by browser in this case since the page isn't fetched from remote server entirely.

Event listener for sites that signal content change by sending a DOM event:

pjax:end
message
window
spfdone
document

Periodic checking of DOM via setInterval: Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.

  • Cloaking History API inside an injected DOM script: document.head.appendChild(document.createElement('script')).text = '(' + function() { // injected DOM script is not a content script anymore, // it can modify objects and functions of the page var _pushState = history.pushState; history.pushState = function(state, title, url) { _pushState.call(this, state, title, url); window.dispatchEvent(new CustomEvent('state-changed', {detail: state})); }; // repeat the above for replaceState too } + ')(); this.remove();'; // remove the DOM script element // And here content script listens to our DOM script custom events window.addEventListener('state-changed', function(e) { console.log('History state changed', e.detail, location.hash); doSomething(); });
window.addEventListener('hashchange', function(e) {
    console.log('URL hash changed', e);
    doSomething();
});
window.addEventListener('popstate', function(e) {
    console.log('State changed', e);
    doSomething();
});

There are advanced API to work with navigation: webNavigation, webRequest, but we'll use simple chrome.tabs.onUpdated event listener that sends a message to the content script:

"tabs"
var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        doSomething();
    }
});

This is a very comprehensive answer. Given its breadth, it might be a good idea to create a question like "How do I determine that the DOM or URL has changed". We could then use it as a duplicate target for many questions. As it is, it is a good answer for "How do I detect that the URL has changed" (and related website specific DOM/URL questions), but this Question is really only an appropriate dup target for DOM change questions.

Is there a JavaScript/jQuery DOM change listener? - Stack Overflow

javascript jquery google-chrome-extension
Rectangle 27 15

Usual JS methods of detecting page changes available in a content scri...

Many sites use AJAX to add/show/change content dynamically. Sometimes it's used instead of in-site navigation, so current URL is changed programmatically and content scripts aren't automatically executed by browser in this case since the page isn't fetched from remote server entirely.

Event listener for sites that signal content change by sending a DOM event:

pjax:end
message
window
spfdone
document

Periodic checking of DOM via setInterval: Obviously this will work only in cases when you wait for a specific element identified by its id/selector to appear, and it won't let you universally detect new dynamically added content unless you invent some kind of fingerprinting the existing contents.

  • Cloaking History API inside an injected DOM script: document.head.appendChild(document.createElement('script')).text = '(' + function() { // injected DOM script is not a content script anymore, // it can modify objects and functions of the page var _pushState = history.pushState; history.pushState = function(state, title, url) { _pushState.call(this, state, title, url); window.dispatchEvent(new CustomEvent('state-changed', {detail: state})); }; // repeat the above for replaceState too } + ')(); this.remove();'; // remove the DOM script element // And here content script listens to our DOM script custom events window.addEventListener('state-changed', function(e) { console.log('History state changed', e.detail, location.hash); doSomething(); });
window.addEventListener('hashchange', function(e) {
    console.log('URL hash changed', e);
    doSomething();
});
window.addEventListener('popstate', function(e) {
    console.log('State changed', e);
    doSomething();
});

There are advanced API to work with navigation: webNavigation, webRequest, but we'll use simple chrome.tabs.onUpdated event listener that sends a message to the content script:

"tabs"
var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    if (rxLookfor.test(changeInfo.url)) {
        chrome.tabs.sendMessage(tabId, 'url-update');
    }
});
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        doSomething();
    }
});

This is a very comprehensive answer. Given its breadth, it might be a good idea to create a question like "How do I determine that the DOM or URL has changed". We could then use it as a duplicate target for many questions. As it is, it is a good answer for "How do I detect that the URL has changed" (and related website specific DOM/URL questions), but this Question is really only an appropriate dup target for DOM change questions.

Is there a JavaScript/jQuery DOM change listener? - Stack Overflow

javascript jquery google-chrome-extension