I am trying to access x3d nodes with javascript. I am adding further x3d elements with the following code:
var scene = document.getElementById('scene');
inline = document.createElement('inline');
inline.setAttribute('nameSpaceName', 'myX3d');
inline.setAttribute('url', '1_2__0_elem.x3d');
inline.setAttribute('mapDEFToID', 'true');
inline.setAttribute('render', 'true');
inline.setAttribute('load', 'true');
scene.appendChild(inline);
The elements get displays and it works fine. But now I want to change the attributes inside 1_2__0_elem.x3d, but I always get null as return value of document.getElementById("myX3d__inner"). It works when I am adding it without javascript. Is there a way to access the id of dynamic elements with js?
Thanks in advance, clax
I found an alternative way to solve my problem (access during render time with javascript). I used php to write all files of interest in the main x3d file. I set the render tag "false" and the load tag "true". On client side the attribute render tag gets changed to "true" by an user request. If too many files are inside the main .x3d file load can be set to false or can be deleted by php.
Related
I am currently working on a website which uses MVC model.
I have a Layout page and 4 pages(home,contactus,aboutus,ourwork) which use this Layout. I am having this situation where I want to use the html element defined in layout page in one of the page(ex. home).
use in the sense modify certain property of that element(using javascript).
example:
lets say there is a button defined in layout page and i want to change the display property of the button when some action happens in home page
Yes, it is possible! You have to create a global Javascript file and add that into the layout body and select the element you want, e.g.:
If the element id is readm, put the script into that file:
var readm= $("#readm");
Include the script file src into the layout body, e.g.:
If the filename is accesselement.js:
<script src="accesselement.js">
Use the variable name in your view in which that element is required.
That's it.
I want to make sure that all JavaScript happens before the page is loaded. I am changing some innerhtml, but don't want the original innerhtml to show.
Currently, when my page loads "Books" is displayed for a brief moment, then finally when the script is read, it gets replaced. How do I prevent it from displaying the initial text?
FYI the script exists inside a php file.
<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") { //is this the "Welcome" span?
spans[i].innerHTML = myvar; //change to new value
break; //hop out of the loop, we're done
}
}
}
window.onload = function() {
changeme();
};
</script>
It is not a good idea to load JS before HTML, because you can not change the HTML elements before loading it using js.
Solution 1: Initially, keep the html tags empty that you do not want to show, because you want to show new data from JS.
Solution 2: Initially, keep the styles for those elements "display: none" and when you add the data using Js in element. Update the style to display: 'block' or any other you want, eg spans[i].style.display = 'block';.
You cant apply JS to a html document that doesnt yet exist. Your html is always loaded first, then your JS is applied. What you could be seeing here is the html is loaded and the JS is taking like what--a second to load and make the change? I recommend figuring out a more efficient way to implement the JS you need. You could just be seeing JS latency. You could use a more efficient implementation plus some CSS to fix it. I could be wrong here but it just doesn't make sense to apply JS to html went the html isnt even there yet.
How would I apply any JS to that if I'm trying to do it before the browser has even parsed and rendered my html?
Also remember that PHP is always "loaded" first, then html, then JS
So I have this nice piece of javascript that will load local HTML files into my document for me on the fly, which is pretty cool.
function load_html(src) {
var html = document.createElement("object");
html.type = "text/html";
html.data = src;
document.getElementById("wrapper").appendChild(html);
}
I got the idea from the post here How do I load an HTML page in a <div> using JavaScript?.
The only problem with it is that it seems that the object tag that I create needs a default width and height, which I want it to wrap the size of it's containing elements, and the new elements that are within the object tag have their own set of css values instead of using the css value of the current page.
Does anyone know how to make the elements within my object get the css values from my current page?
Also, how can I make my object be the size of it's containing elements?
I'm sure there is an easy way to do it, but I haven't found much on object tags.
What's the best way to get usable DOM for an AJAX-requested page without loading any related images/scripts/etc?
Backstory:
I want to load a page in background, then perform a sort of data-mining on it (this is a browser extension, so I can't control the pages themselves). I do not want to spend time loading images and running scripts on the background page, since it is only page contents I need.
load data via ajax
strip all the tags containing src and href attributes, or simply change the value of those attributes with data:null. If data also contains inline style you should remove all statements containing a reference to external resources (e.g. background and border images, .htc components, xul bindings, .ico cursor)
append filtered data to the DOM and analyze it
step 2 could be achieved through a regular expression in javascript. e.g.
/* here we are in the ajax "success" callback */
...
data = data.replace(/(src|href|style)=['"]([^'"]+?)['"]/gi,
function(match, attribute) {
return (attribute.toLowerCase() === 'style')
? attribute + '=""' /* remove all inline style */
: attribute + '="data:null"'; /* href and src set to data:null */
})
/* append filtered data */
$(data).appendTo($('body_or_other_element'))
If possible, use jQuery, as I mentioned above. It makes it easy to select portions of the page DOM as needed.
Here are some examples:
You can grab tags href attribute like this: $("a", $(ajax_response)).attr("href");
Title's contents: $("title", $(ajax_response)).html();
You might have to test out the selectors to see which work best, but, I think this would be an easy way of going about this.
I have created a static HTML page with anythingslider to show sliding portfolio works. In that static HTML page it works just fine. Now I am trying to convert this page to a WordPress template page. At first, I just copy contents of the static main container page (excluding header and footer) and it stops working. It gives me an error jQuery("#portfolioslide").data("AnythingSlider") is null
Where should I dig in to define the cause of the problem?
I'm not sure what you are trying to do, but .data() is for storing arbitrary data together with an element. Have you previously saved the data to the same element, with the same key, on the same page? If not, .data() is expected to return null. See documentation
Edit
In the source code for anything slider I found the following:
if ($(this).is('.anythingBase')) { return; } // prevent multiple initializations
In you HTML you have the following:
<ul id="portfolioslide" class="anythingBase" style="width: 4800px;">
Not good since anything slider thinks that you've already initialized portfolioslide. Remove class="anythingBase" and it should work