I'm building an Angular 4 app and I want to use anchor-ing in it. It's a one-page website, on which I have 4 containers, listed vertically. Just like so:
---------------
| |
| |
| |
---------------
---------------
| |
| |
| |
--------------- etc...
Say two of the boxes are 'about us' and 'location'. At the top of the app there is a navbar and I want on click at a <li>, Angular to scroll down with an transition and stop at the proper component (1 of these 4 containers). I'm new to Angular 4, I'm still studying it and I'm asking for an advice. Can I achieve this anchor effect with ng's Router, given that I'll need to attach a scroll-down animation to it, or I should stick to ? Which way is better to go with? And also, if I should do it with router are there any specific things which I have to know about this kind of redirection or it's going again like {path: 'about', AboutComponent }; ?
For the transition I am planning to do, shall I read about #angular/animations or it is going to be plain TypeScript?
Related
I'm trying to scrape the helpful Infobox from most Automobile pages, however I'm messing up the syntax. From other helpful SO posts, I've found a handy method of scraping a standard Infobox template (the example given was for hydrogen):
https://en.m.wikipedia.org/w/index.php?action=raw&title=Template:Infobox%20hydrogen
I can use a similar process to pull the Ford Pinto page (using this as it only has a single Infobox, as there was only one, infamous, model generation):
https://en.m.wikipedia.org/w/index.php?action=raw&title=Ford_Pinto
This page, and most automobile pages, used one of the vehicle-specific Infobox templates, in this case "Infobox automobile" (sorry for the massive block, I'm going to edit this once it's posted as I'm on mobile and I read up on SO formatting):
{{Infobox automobile
| name = Ford Pinto
| image = Ford Pinto.jpg
| caption = Ford Pinto
| manufacturer = [[Ford Motor Company|Ford]]
| aka = Mercury Bobcat
| production = September 1970–1980
| model_years = 1971–1980 (Pinto)<br> 1974–1980 (Bobcat)
| assembly = '''United States:''' {{ubl|[[Edison, New Jersey]] ([[Edison Assembly]])|[[Milpitas, California]] ([[San Jose Assembly Plant|San Jose Assembly]])}}'''Canada:''' {{ubl|[[Southwold, Ontario]] ([[St. Thomas Assembly]])}}
| designer = Robert Eidschun (1968)<ref name=bbw20091030>
...
Snipped some useless stuff
...
</ref>
| class = [[Subcompact car]]
| body_style = 2-door [[Sedan (automobile)|sedan]]<br/>2-door [[sedan delivery]]<br/>2-door [[station wagon]]<br/> 3-door [[hatchback]]
| related = [[Ford Pinto#Mercury Bobcat (1974–1980)|Mercury Bobcat]]<br>[[Ford Mustang (second generation)|Ford Mustang II]]<br> [[Pangra]]
| layout = [[Front-engine, rear-wheel-drive layout|FR layout]]
| engine = {{unbulleted list
| 1.6L ''[[Ford Kent engine|Kent]]'' I4
| 2.0L ''[[Ford Pinto engine|EAO]]'' I4
| 2.3L ''[[Ford Pinto engine|OHC]]'' I4
| 2.8L ''[[Ford Cologne engine|Cologne]]'' V6
}}
| transmission = {{unbulleted list
| 4-speed manual
| 3-speed ''[[Ford C3 transmission|C3/"Selectshift/Cruise-O-Matic"]]'' automatic
...
Snipped
...
</ref>
|wheelbase = {{convert|94.0|in|mm|abbr=on}}<ref>
...
Snipped
...
}}
| wheelbase = {{convert|94.0|in|mm|abbr=on}}<ref>
...
Snipped
...
</ref>
| length = {{convert|163|in|mm|abbr=on}}
| width = {{convert|69.4|in|mm|abbr=on}}
| height = {{convert|50|in|mm|abbr=on}}
| weight = {{convert|2015|–|2270|lb|abbr=on}} (1971)
| predecessor = [[Ford Cortina|Ford Cortina (captive import)]]
| successor = [[Ford Escort (North America)|Ford Escort]]
}}
Though not as pretty as the above, another alternative is to use the REST API and slim the page down to just the article, in HTML, which will let me use a standard HTML parser to pull just the Infobox HTML table (link should work in chrome, but will definitely work on an Android device):
view-source:https://en.wikipedia.org/api/rest_v1/page/html/Ford_Pinto
<table class="infobox hproduct" style="width:22em" about="#mwt7" typeof="mw:Transclusion" data-mw='{"parts":[{"template":{"target":{"wt":"Infobox automobile\n","href":"./Template:Infobox_automobile"}
I can handle parsing either of these for the information I want, namely performance information - model, years, drivetrain layout, engines, transmissions, wheelbase, weight - however despite trying various API/other urls, I've yet been unable to directly scrape just the Infobox using the API alone. Also, I'm not exactly sure what the difference is between using an api.php? action=parse url vs an index.php? action=raw - any clarification here is welcome, though I don't think directly relevant. Here are some unsuccessful examples of what I have tried, each with different errors/results:
https://en.wikipedia.org/w/ <- append the following to this base link as I can't post a bunch of links
api.php?action=parse&page=Template:Infobox%20automobile%20Ford_Pinto&format=json
api.php?action=query&titles=Template:Infobox%20automobile%20Ford%20Pinto&prop=revisions&rvprop=content&format=json&formatversion=2
api.php?action=query&titles=Template:Infobox%20automobile%20Ford_Pinto&prop=revisions&rvprop=content&format=json&formatversion=2
index.php?action=raw&title=Template:Infobox%20automobile%20Ford_Pinto
index.php?action=raw&title=Template:Infobox%20automobile%20Ford%20Pinto
index.php?action=raw&titles=Template:Infobox%20automobile%20Ford_Pinto
index.php?action=raw&titles=Template:Infobox%20automobile%20Ford%20Pinto
This is different from various other Infobox scraping questions as these articles use a specific Infobox template that prevents me from using the very successful API url I've posted above, although I'm sure this is user error and a simple fix. Thank you for your time in reading and assisting!
Edit: the suggested page is the way I'm already trying, and failing. Per that page, I am attempting the 'wrong' way until someone, including myself, figures out what I'm doing wrong - assuming there is a right way for the non standardized/base Infobox Templates. Failing any new information in a day or so, I'll just accept the currently suggested answer to reward that user's helpfulness - but I really hoped I'd get a few more attempts, which is why I created an account and asked the hive mind after searching and failing to find an answer from the many other questions I checked. By the way, any attention is good attention, so thank you kindly for taking the time to look over this!
Wikipedia infoboxes are not designed to be scrapeable. They are primarily a (front-end!) templating mechanism; the fact that they sometimes contain structured data is incidental.
The difference between action=raw and action=parse is simply that raw gives you the original wikitext (like you'd see if you clicked the "Edit" link on the article), and parse gives you the rendered HTML. Neither of these is likely to be much use for your purposes.
Your best bet will be to use data from a downstream project like DBpedia which has already done the dirty work of parsing these articles. For instance, here's their parsed data for the Ford Pinto:
http://dbpedia.org/snorql/?describe=http%3A//dbpedia.org/resource/Ford_Pinto
You could use the Parsoid output of the page https://en.wikipedia.org/api/rest_v1/page/html/Ford_Pinto, which has a table with class infobox and a data-mw with some JSON encoded data.
I would look for the infoboxes (CSS selector table.infobox) and run a JSON.parse on the data-mw value. Check if the infobox has href ./Template:Infobox_automobile then look for the right parameter (in the params field).
Here's a sample request:
curl -X GET --header 'Accept: text/html; charset=utf-8; profile="https://www.mediawiki.org/wiki/Specs/HTML/1.6.1"' 'https://en.wikipedia.org/api/rest_v1/page/html/Ford_Pinto'
In addition to the Accept header it's also good to set the User-Agent header to a unique string.
Is it possible to have a layout in sublime text 2 with two rows at the top and one collumn at the bottom:
--------------------
| | |
| | |
| | |
--------------------
| |
| |
--------------------
thank you.
One way to do that is to install Origami via PackageControl.
Origami is a new way of thinking about panes in Sublime Text 2 and 3:
you tell Sublime Text where you want a new pane, and it makes one for
you. It works seamlessly alongside the built-in layout commands.
Ordinarily one uses the commands under View>Layout, or if one is quite
intrepid a custom keyboard shortcut can be made to give a specific
layout, but both of these solutions were unsatisfactory to me. Perhaps
they were to you too! That's what this plugin is for.
If anyone knows, I would like to make it so no one can put my iWeb site in an iframe? How do I make my pages automatically break out of iframes?
This answer applies to this question as well:
This code will work if it is placed in the HTML that is referenced inside an iframe. The way it works is it looks at top (the page you requested that includes an iframe) and self the page inside the iframe. If there are different then it changes the top.location to match the URL of the iframe.
Here is some ASCII to help understand this
|----[OuterPage.html]------|
| |
| |--[InnerPage.html]-| |
| | | |
| | top !== self | |
| | | |
| |-------------------| |
| |
| top === self |
| |
|--------------------------|
If you request InnerPage.html by itself (not in an iframe) then top === self will evaluate to true, however if you request the same page inside an iframe then the same condition will evaluate as false.
There is also a http header X-Frame-Origin as specified here, that you can put into the server response, which will block the browser from rendering the iframe at all, if set to SAMEORIGIN.
However it's a browser dependant solution (as in the browser will have to support the header to respect its value), but nicer than JS trickery IMO.
Background
I am presenting data using a HTML frameset. The left-side frame is a navigation tree-table constructed as an HTML table. Only minimal data is shown in this frame because I want to use the right-side "details" frame to give the user more details when he selects one of the navigation table rows.
+----------------------------+
| | |
| tree | "details" |
| table | pertaining to |
| nav. | selected |
| | row |
|=selected=| |
| | |
| | |
| | |
+----------------------------+
Think of this like a directory browser where you can see filesize, type, modification date, etc. on the right when you select an item in the left-hand tree.
Obtaining item details server-side is a sequential task, i.e. to get details on the nth item, the server has to work through all n-1 preceding items. For this reason, I think the most straightforward way to present the detailed data to the user is to have the server embed all detailed information within the navigation table rows and have a script generate the details page in a right-hand frame.
Question
How should I represent the detailed data within the navigation table HTML? Should I make up my own element tagnames? Should I use extra columns that are not displayed? Or something else? The data is typically name-value pairs - both name and value can be text. Each element may have a different set of data pairs. Is there a standard way to represent user data within an (X)HTML document?
NEVER, EVER EVER EVER EVER EVER EVER mix data and display. I also think you can easily get around the iterating over n elements to get the data you require. Here is how you do it.
Create a model (your data storage) in the javascript.
var data = [
{
title: "item 1",
foo: "bar",
baz: 10
},
{
title: "item 2",
foo: "bazbar",
baz: 20
}
];
Then, using Javascript, you could use the above data to create the following table on the left
<table>
<tr><td>item 1</td></tr>
<tr><td>item 2</td></tr>
</table>
So then you would have your show details function
function showDetails(index){
var currentData = data[index];
/* Do something with data */
}
I have created a working example here. There is an error in that code that says showDetails is not defined, but that is due to a jsfiddle issue, the code will work if put into a HTML page. ALSO, be sure to use the strict doctype at the top (to avoid cross browser quirsk).
Might I also suggest, that you look at YUI 2's layout manager instead of using a frameset. Framesets require multiple pages with javascript snaked throughout and can be a maintenance nightmare down the road.
This is an odd question, and I think it belongs on Stack Overflow since it has to do with HTML/Javascript - if it doesn't belong, let me know and I'll ask it elsewhere.
I am trying to implement a component in my web application, but I do not know what it is called, so I don't know how to search for help on it!
It is where you have a list of things in a combo box on the left side, some arrows in the middle to send list items between combo boxes, and a combo box on the right side that shows the items you have selected.
Here is a "picture" of what I mean:
+-------+ +-------+
| item1 | ---> | item2 |
| item3 | | |
| item4 | <--- | |
+-------+ +-------+
I'm sure there is a JQuery plugin for this too, so if anyone has any recommendations, I'd appreciate it. Thanks in advance!
There is no 'component' that will do this. This thread should help:
Moving items in Dual Listboxes
You have both a jQuery and native javascript example.
There isn't an HTML tag for this, it has to be implemented in JavaScript. It wouldn't be all that hard even without jQuery.
There is also a jQuery plugin here. The examples aren't very flashy, but they do the job.