How to show specific elements of webpage in webview in android? - javascript

So i know I can manipulate webspages in a webview by hiding elements i don't want to be seen.
What i'm trying to figure out is... is it possible to just show one element vs. NOT showing other elements?
Essentially, there are times when I don't know which elements there are, but I will always know that a specific element exists, so it's easier for me to just show that one.
I tried:
view.loadUrl("javascript:document.getElementByClassName('content-container')");
However it still shows the whole site.

You will have to fetch the data in the form of json from the website and manually manipulate them into the app.
Go through WordPress to Android App using WP REST API Tutorial to get the details

Related

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

Is it possible to load a web page within a web page and have access to the html element within that page you loaded?

Here is my problem.
I am attempting to have a way to help teach people about css selectors and various html pieces by allowing them to go to a website of their choosing, selecting an html element from that site, and me displaying to them all the properties of that element. Basically show them how to generate css selectors to retrieve that element etc.
Problem is, using iframes/object tags/etc do not allow you to access the page inside from your page. So I have no way of determining when the user clicks in any buttons or anything inside the other page.
I am open to pretty much any suggestions, I have thought about Java applets, or Java web start. But I wanted some professional opinions on the topic.
Is it possible at all using only Javascript or various Javascript plug ins etc?
Is it possible using a Java applet or some variation of?

Get content from div on another page/site by ID and display it on my site

I kinda tried everything.
I'm on Wordpress and using snippets to add code to a specific location on the website and pull some numbers generated on another website. To be more specific it's a counter, I want to sync the numbers on my site to the other site.
I tried jquery, but I don't really know any.
All PHP codes I tried retrieve NULL.
The get page url function doesn't work, so I iframed the page through a proxy hide website and the HTML content does display, just to have it on my domain rather than on another one.
But I just can't seem to pull the content out of the div I want.
I included the DOM document files and tried that code, but it won't display anything.
Any suggestions ?
You have 2 options to do that:
place targeted website url in an iframe - and use "postMessage" to communicate with parent and vice versa (http://javascript.info/tutorial/cross-window-messaging-with-postmessage, https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)
create a service (even a simple JSONP service) that will provide the data you want - when being called (Simple jQuery, PHP and JSONP example?)

How do I create select menu in an external file and embed it in html to show the menu

My website has individual pages for members, but I have a select menu used to scroll from one member to the other. I have the select menu coded in the html on every page, but I need a better solution since my membership is growing.
I need to be able to create that same select menu in a separate file with the ability, when selected to jump to another member page, have that embedded in the body where I need it so that all I have to do is alter/ update the external file and it'll be done for all the member pages.
I've looked into javascripting it, mysqling it, but can't find (looking on youtube) a code to exactly help me in what I need.
My typical code for the select
//(select.....
//(option value="http:www.website-Profile-blahblah.html.... so on and so forth.
I need to pull this from an external file to use across the board and place it in the body where I need it.
thanks for any help you can offer.
In general this sounds like something you should be using a back end rendering engine for. As far as the select goes, this would be a great place to use a dropdown menu such as the one provided by bootstrap since clicking a select won't actually move you to another page.
If you dont want to use/can't use a back end rendering engine to render the options, I would suggest looking at angular.js which has a great ng-repeat and ng-option feature that would allow you to dynamically build the select/dropdown with as many users as you want.
angular ng-repeat page: https://docs.angularjs.org/api/ng/directive/ngRepeat
bootstrap dropdown: http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp (note the a tags could go directly to the user's page)
From experience in cases like this, it is much easier to have an SQL table to store the links you would like to use. The next thing to do is to have your back-end send you the list of links. With this, you can dynamically create the option tag and append it to your select tag. functions like newOptionTag.setAttribute('value', 'url'),document.createElement('option') and selectElement.appendChild(newOptionTag) should help you on your way
If you really want to use a seperate file, you could store the membernames and links in a json file. On document load get the file, parse it, then use the object to build the options.
The w3schools website (though frowned upon by some) has a json tutorial and an example that is already halfway there.
EDIT: I see it actually uses mysql to build the json file...

Hide WSS 3.0 Webpart Using JavaScript

I am using WSS 3.0 in my application. I am displaying a List as a DataView Webpart. My objective here is to make this webpart visible to a selected group of individuals. As there is no option for Target Audience in WSS 3.0, I went to edit Permissions for List and gave Read permissions only to selected users. This doesn't hide the web part from the page, rather shows an Access Denied message to other users.
Access denied. You do not have permission to perform this action or access this resource.
As I said, I want to hide this webpart, as in make it invisible on the web page from other users who do not have permissions to view it. As this message will be displayed only to those users who do not have permissions!, my approach is to search for the above message in the html and identify and hide the parentnode, thereby hiding the webpart.
I am not quite sure how to do this. Any ideas? Thanks in advance!
I'm going to assume you're in a situation where you can add additional web parts to the page and not trying to add JavaScript to the DataView Web Part directly. My suggestion won't work on a separate page if a Designer adds another view of this list.
Upload a blank .js file to your Site Assets. Add a Content Editor Web Part to your page, point it at that file. Add JQuery from a provider or host it yourself, adding the reference in your file. From there, you have 3 directions in which to work: first, explore the web part with Internet Explorer's F12 Developer Tools, keeping a particular eye on divs and tables with good unique ids, names, or classes that would solve your problem if hidden. Also keep an eye on the id of the div or table or cell or whatever that contains your access denied text. Second, (assuming you're new to JQuery) do some JQuery tutorials and then start playing with selecting the above items and, say, changing their background color. Once you have both of those, you're 90% there: (try to) select the object that would contain the access denied text, and if the innerHTML is present and equals that string, then set display:none for the div or tables to hide your web part. The third tool you have is editing the page directly with SharePoint Designer: you can toss a div with an id of your choosing around any xsl:template, which might help in your JQuery selecting.
I'm sorry I can't give you the specific code, since I'm not in a position to test it. If that changes, I'll try and give a more detailed response.
Old, misdirected answer: Do either of the answers here work for you? Alternatively, this answer has some great resources to solve your problem. Just change the message to an empty string.
Thanks Aron :D
I found the id for the webpart and hard coded it. It provided the solution, but I was hoping to programmatically fetch the id instead by searching the innerhtml, as I have more than one web parts that have to be hidden.
I found a partial solution here:
Hide SharePoint web part using javascript onclick method
I put a CEWP on the page and added the following script in it:
<script>
function hide()
{
var content = document.getElementById("webpartID").innerHTML;
var n = content.search("Access denied. You do not have permission to perform this action or access this resource");
if(n!=-1)
{ document.getElementById("webpartID").style.display="none";
}
}
_spbodyonloadfunctionnames.push("hide");
</script>
In my case, I picked up the webpart id from the aspx page or view source for the page.

Categories

Resources