I am attempting to create a simple iOS application, mostly for the learning process, but one which might also be useful to other botanists. The California Native Plant Society has a new Rare plant database online. At first I would like to just do simple querys for a plant by name. Later adding some type of location search, finding known occurrences of rare plants in your specific area.
So a search for `Layia' brings us to a page with a table. Looking at the source for the page I believe the table is generated by:
<div class="breadcrumb top20">
<div class="line1 center">
<!-- Modify Search Criteria -->
<span id=modifyCriteriaSlot></span>
<span id=exportPdfSlot></span>
<span id=exportExcelSlot></span>
<!-- END line1 -->
<span id=modifyColumnsSlot></span>
<span id=sortSlot></span>
<span id=displayPhotosSlot></span>
</div>
<!-- END line1 -->
</div>
I guess I am stuck. As far as the app goes I have been playing around with ASIHttpRequest and I see references to XMLKiss to parse web pages, but I just don't see any data on this page TO parse, it seems to be generated else ware and then just appears? I know I am a little out of my element here, but I want to put in the time and learn what I need to, so a little direction would be an awesome help! Thanks.
If it helps, they are showing the results table with this DIV
<div id=resultListSlot align=center style="max-width: 960px;"></div>
The DIV is being populated with javascript. The JS can be found here:
http://www.rareplants.cnps.org/org.cnps.Result/org.cnps.Result.nocache.js
Im not sure how you can get that to reply to your own request... let me look at it when I get back later today to see if I can help even more.
--------- Update -----------
If you wanted to skip learning JS you could just use firefox to view the DOM source which will include all the HTML generated by the JS. I just did a search for ALL of their plants, CTRL+A to select all of the page, right click on a highlighted area and "view selection source".
Then you could host your own page like I have done. Look at this page here http://luistovar.com/plants.html
Now you have all the plants, the HTML, the links and everything you need to create your own list. The only downfall is you would have to update every few weeks?? or so. It all depends on how often their data changes, or how much an updated list matters to you.
Might be better than learning JS though.
Related
I am totally new to Web Development. Here, I have an HTML file which I am showing in the text-angualr. Here, I am getting a string which is from the Html file itself like you can say,
<p style="padding:0;color:#000000;font-size:12pt;line-height:1.0;margin-right:0;margin-left:72pt;text-indent:-72pt;font-family:"Times New Roman";margin-top:0;orphans:2;margin-bottom:0;widows:2;text-align:justify"><span style="vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-weight:700">Description: </span><span style="color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-style:normal">Developed web app for add management.</span></p>
<span style="vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-weight:700">Contribution: </span><span style="vertical-align:baseline;font-size:11pt;font-family:"Calibri";font-weight:400">It was the internal use web app for the <br>we developed the app for the add management for the. </span>
this is a Html document,which represents it
Description: Developed web app for add management.
Contribution: It was the internal use web app for the
we developed the app for the add management for the
Here, I am able to highlight a single word from this text. what I want is to highlight a whole text like from Description to the, which I am getting as an input. I tried Different options like,
How to highlight text using javascript
Here From this I am able to highlight a text which is in one tag but what about the remaining text in the next few tags ? I am not able to understand this, can any one please explain me this? The solution I tried was 3rd one. I don't have required reputation to put a comment so I am asking this question. Thanks in advance.
I think I can do it with javascript by manipulating the DOM but I get lost in the complexity. Can someone point me in the right direction?
I want to place a hidden site in a site. So the public never knows the difference unless they know the key combination that changes everything which toggles back the next time you hit the combo
Anyone ever hear of this and if so can you forward me a link so I can study up on it. Thank you... Searched for awhile but couldn't find anything...
An easy way to achieve this effect would be to write two pages directly on top of each other but only have one showing at a time like so:
<body>
<div id="page1">
...content...
</div>
<div id="page2" style="display:none">
...content...
</div>
</body>
Then use javascript to hide the first page and display the second on keypress.
i've created a website with a date-picker calender
But the calendar is hardcoded as 365 divs with 365 div IDs and text inside.
How do i make a "real" calender that works* and then i can style it to look and behave (with javascript) like the one i've simulated (created with divs) ? :) Now it is created like:
<div id = "calender">
<div id = "january1"> 1 </div>
<div id = "january2"> 1 </div>
...
</div>
I want a real calendar which generates the right amount of days in a month for all years...
What is the purpose of your website? For any dynamic content you'll probably want to look at some background frameworks with processing abilities, such as Ruby on Rails, Django, Node.js or even PHP(not recommended though), to create a fully functional dynamic website. Of course you can also present a boilerplate page to the client first, before dynamically altering the divs with Javascript on client side. But that doesn't make much sense.
A starting point for Rails would be https://www.railstutorial.org/book, which doesn't only explain Rails but also does a decent job guiding you through the whole basic web development process.
On my HTML index page, I am using a popup javascript code that has something like
<li> <font color ="#000"> » </font> <font color ="#ccc">
Some text</font><b>, XYX, Country</b></li>
<li><font color ="#000"> » </font><a href ="secondpage.php" alt="Blog" />
I used a free xml-sitemap generator and strangely, the second li which is a regular a href URL and shows up in the sitemap as a linked page. However, the first one which calls the page using a javascript function does not show up.
This got me thinking,
Would this impact SEO results, would search engines also skip JS code and hence not crawl the linked pages which open in a popup?
Or is this an issue with the sitemap generator that does not understand JS and I have to manually create it?
Totally new to this. Was hoping to get some advise .
thanks!
Ryan
answer will vary based of crawlers, but you should keep your markup readable and less dynamic in areas you want crawler to read or you can follow the guidelines provided. For specific answer to your question:
Since 2009 Google looks for and finds OnClick links in any and all HTML tags. When found they will add the URL to their crawl.
If there is sensible "anchor" text then the text of the element will be used as anchor text.
The OnClick link also passes PageRank.
For more info:
http://www.searchenginepeople.com/blog/onclick.html
http://seogadget.com/google-does-not-crawl-hidden-java-onclick/
I'm taking a course in webdesign. I and a lot of the other students are really interested in ajaxifying our work. Our teacher is only into design and HTML - so he can't help.
I hope I use the right term - otherwise please correct me. By ajaxifying, I mean having my webpage only update certain parts when navigating.
For example, let's say I have a webpage consisting of 3 subpages:
1: index.html
<!DOCTYPE html><html><head><title> Welcome! </title></head>
<body>
<div id="Content"> Welcome, dear visitor... take a look around! </div>
<div id="Menu">
<ul>
<li><b> Home </b></li>
<li> Projects </li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
2: projects.html
<!DOCTYPE html><html><head><title> Projects </title></head>
<body>
<div id="Content"> All my projects are shown here! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li><b> Projects </b></li>
<li> Contact </li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
3: contact.html
<!DOCTYPE html><html><head><title> Contact </title></head>
<body>
<div id="Content"> Contact info! </div>
<div id="Menu">
<ul>
<li> Home </li>
<li> Projects </li>
<li><b> Contact </b></li>
</ul>
</div>
<div id="Footer"> Email and mediaplayer </div>
</body></html>
When using the links:
Only the Content-div should be reloaded.
The Menu should update which menu-point is active (here shown with bold-tags). If that's too complex a reload of the menu could work.
The Footer should not be reloaded at all.
The title should be updated.
The url should be updated.
I would really like the urls to be clean. That is: NOT /#projects.html or /#/projects.html, but just straight-up /projects.html or /projects
Working bookmarking and back-button are crucial.
Is this possible at all? I would be forever insanely thankful to anyone helping me here! :-D
I've tried out (and hacked around with) jQuery Address and History plugins, the History.js and a 'gist' to it. Couldn't get any of it to work. I've trawled and trawled stack overflow and google, but can't seem to find anyone explaining these things or having a simple solution.
A solution aiming at modern webbrowsers would be fine. If the IE guys and the no javascripts guys just gets the simple html-version, that would be cool - but it's not absolutely necessary.
Please help - any help would be very, very appreciated! Thanx! :-)
What you want is possible, but not quite easy to do.
As already mentioned, the HTML5 History API makes it possible, but you will need a good knowledge of javascript. Displaying more or less static pages isn't exactly what it's intended for, but the sake of learning, let's think about how it could be done.
You might probably want to use a framework like backbone that already comes with a router so that you don't have to write your own abstractions.
The basic idea behind a client side router is that you have an easy way of defining what URL triggers what javascript function similar to this:
var routes = {
"index": "open_index",
"projects": "open_projects",
"contact": "open_contact"
}
var open_index = function(){
// Do the logic that has to be done
// to open the index page
}
...
Note that the code is only there to illustrate the idea, it doesn't conform to any actual framework or library.
Anyway, every time that one of these routes is triggered you need to take care of basically taking apart the entire page and replacing everything with the desired content.
Now you have basically two choices for that. Either you fetch HTML from the server and just plug it in, or you only fetch the actual data in JSON and use client side templating.
What does that mean? Well, right now you use static HTML pages. They do have a basic structure that is shared by all the pages, namely the separation in 'Content', 'Menu' and 'Footer', however, since this is not a web application but a web site, the content of the 'Content' probably does not follow a structure that represents some kind of structured data.
An example for it representing structured data would be a phone directory. You always have a list of 'First name', 'Last name' , 'Phone number' and this is primarily what defines the page. The way it looks is not what the page is about.
The entire content of the page can be defined by an array like this:
var people = [
{ "firstName" : "John", "lastName" : "Doe", "number": "+12-2322132"},
{ "firstName" : "Dick", "lastName" : "Dobson", "number": "+12-656533"},
...
]
and rendered client side using a simple template like for example:
<ul class="phone_book">
{{#each people}}
<li>{{firstName}} {{lastName}} - {{number}}</li>
{{/each}}
</ul>
to generate the needed HTML. (That was handlebars by the way)
Using a framework, you can easily set it up for the script to update the information display automatically upon updating the data - for example by using AJAX.
In your case however, it is most likely that the way the page looks is what it is about. You need one image here and one image there and a bit of text inbetween, and all of this changes with every single page. You need HTML.
That's the reason why what you want isn't exactly what you would use the History API and AJAX for. It is primarily intended for complex web applications that need to spread several pages with their own urls that can also potentially capture the state of the application so that linking to a specific part of a javascript heavy web application becomes possible. Loading static websites works just fine without using AJAX and the History API.
Let's ignore this right now and just continue anyway.
Let's try and see what the open_index function needs to work.
var open_index = function(){
// 1. Fade out the old content and remove it
// 2. Request the new html content from the server
// 3. Mark the new active link in the navigation
// 4. Add the content to the DOM
// 5. Fade in the new content
}
All of this you can easily do with jQuery. You'll have no trouble finding an explanation for how to do this.
Now you are almost there. The only remaining thing to take care of is to make sure that you intercept the click events for your navigation so that you can use the History API and it won't just load the static page from the beginning.
For a simple use such as this, not a whole lot more is needed structure wise.
I'll say it again. This is complete overkill for your purpose and you should not be using it for that other than for learning purposes. If you don't use a library that abstracts away the History API a bit, the code will become a lot more complex.
I hope this helped giving you an idea of what you are dealing with.