I have a website where I am using the Twitter API to get my three latest tweets. No problem there. However, if I post a retweet, when the call is made for the latest tweets, it shows the beginning "RT #DennisDMZ" and the retweets, but the return is truncated to 140 chars including the RT #DennisDMZ string.
Also, if there are links, the anchor tags are not created and the crypted url just shows as regular text. I set the parameter include_entities=1 in the API call, and it returns the url information, but it does not automatically add the anchor tags. It even shows the position of the link, so technically you could build the link dynamically but that would be difficult.
Is there a way to get around either of these problems?
I think they make it more difficult...I was able to look at the return object on Firebug with a console.log and see what is returned. The full text is under the 'reseller_status' property and the url under the 'entities' property, The url is given and the character positions as well, so I wrote an insert function to insert the anchor tags at the appropriate positions.
Related
As a coding newbie I'm following a tutorial on the map function which gives this example
As a datasource we'll use HackerNews' big RSS feed and since we can treat RSS as > plain HTML, it's very simple to get started:
var titles = document.getElementsByTagName('title');
When I run this command I don't get anything back, when I inspect the page, I see that all the data and tags are enclosed inside of a top level tag. I can run document.getElementsByTagName('pre') which returns everything, but not the specific title tags.
Any help on understanding this and working around it would be useful.
It turns out that the element that was being applied to the data is being added by Chrome. In FireFox it's possible to see all the rss data properly and continue with the tutorial.
I'm not sure why one browser renders all the dom nodes while Chrome just hides them in pre tags, but that's the reason the query didn't work in Chrome.
I have a simple file based with html that looks like this:
<html>
<body>
<b>Faculty</b><br><br>
Dr Mcgee
<br>
Dr Else
<br><br>
<b>Values</b><br><br>
1
<br>
2
<br>
</body>
</html>
I'm new to the web end of things, and was wondering how I could go about doing this: When the user hovers over a piece of text that's under the Faculty column of my school (I'm not gonna link my schools page because if I do someone from my school will likely create this extension). I want it to show a ratemyproff rating.
I have no idea on how to do this, because well I don't really know what to search on google to do such a thing?
I know there are CSS overlays over images like such:
https://www.w3schools.com/howto/howto_css_image_overlay.asp
But in my case, I'm not guaranteed what professors will be listed (I just want to understand the basic process of doing such things).
I don't think I can use PHP as that would require users who I want to share this eventually with to also have a php/server side thing installed. I guess I just don't know how to go about doing such a thing, and don't know what to search on the internet for it?
If the sites you are requesting data from aren't under your control you are very likely not going to be able to do this without a backend because of CORS, which basically prohibits site A from loading in data from site B. Site B would have to give you special permission. You can read about that here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
However, if you are able to access the pages, or you decide to use a backend for this, the term you are looking for is ajax.
A rough outline of what your script might look like is:
Give these school elements a classname.
Also add data attribute to these elements to store data needed to get the information you are looking for (e.g. a url or a school name or id).
In the JS, set up a trigger so that when something with that classname is hovered over, an ajax request is made to a url to get the data you are looking for.
If the ajax request is successful, show the data you want to show in a container set up on the page.
As far as setting up the container to show, it would probably be simplest to add an empty container for each listing which will then be populated with data.
If you are new to all of this, I would suggest using jQuery. You can find the ajax documentation here: http://api.jquery.com/jquery.ajax/
First Step:
Use something to get the text and store in a javascript variable when hovered over the text that is searchable,
To do this put the text in a single node like <span class="searchable">This text is searchable</span>.
You can do something like this to get node value http://jsfiddle.net/5gyRx/
Second step:
Add an empty node <div class="data"></div> aboslutely positioned inside the container div which will be used to show fetched details about that text.
Third step:
Use JavaScript/jQuery to fire an Ajax call with the text you got from the first step and populate the empty node created earlier with this data.
I'm using some Ajax/other code (from https://jesse.sh/rethinks-dynamic-page-replacing-content/) to load partial page content into a specific div.
As it doesn't grab the title of the new content, the page title unhelpfully remains that of the initially-loaded page.
Unable to find a solution which handles the title appropriately, I'm using a kludge of 'console.log(href);' with 'document.title = location.href.replace ()' to produce an url-based title, from which are then removed the http:// and various other things before the page title.
It seems to work, but requires me to think about just what needs to be removed and chain accordingly.
In the absence of some code which replaces the title accordingly and thus doesn't require the above kludge, I'd like to be able to use a single unchained 'replace' which removes everything before the page title.
However, I don't understand enough to be able to do so.
Suggestions appreciated - please/thanks/etcetera.
Use document.title.
For example
document.title='your title';
I would like to change the tooltip text of of Chrome's Element Inspector. (The one you see within the page when hovering a node in the tree view). I want to add additional information there.
Is this somehow possible? I could not find any information in the docs.
Alternatively creating a new little tooltip at another corner of the highlight rectangle (which will not interfere with the existing one) would be fine too. Thanks for any hints & tips.
So the answer is basically "you can't do that in an extension" (as in, modify the Dev Tools tooltip).
Charles' answer points to a guide that talks about replacing the Chrome Dev Tools. It's possible using the command line of Chrome, but it's not something an extension can do.
You can, however, inject a content script in the page that would mimic the Dev Tool's highlighting. It will not be integrated with Dev Tools, but might be enough for your purpose.
You can take a look at ABP's implementation of element selection/highlight as a starting point. I think it's in this file.
The text format is hard-coded as the concatenation of the node name, ID and class names. Changing any of these values will change the displayed tooltip. For example, setting the class name using element.className = 'Hello\xA0world!'; results in a tooltip containing Hello world! (note: I'm using the non-breaking space \xA0 because normal spaces are replaced with dots in the title).
The previous method doesn't offer much flexibility in positioning or coloring of your custom text. A way to gain much more control over the displayed text is by editing the devtools' source code in resources.pak. This process is explained in detail in this answer (read it before continuing).
The displayed text is part of an overlay that is rendered by InspectorOverlayPage.html. Edit resources.pak, search for that line (e.g. by searching for id="element-title") and modify it (make sure that the number of bytes does not change, e.g. by renaming tags, removing quotes and/or collapsing superfluous whitespace). For example:
OLD: <span id="node-width"></span><span class="px">px</span><span class="px"> × </span><span id="node-height"></span><span class="px">px</span>
NEW: <a id=node-width></a><a class=px>px</a><a class=px> × </a><a id=node-height></a><a class=px>px</a><a style="color:red;">My custom text</a>
Changing colors only
If you just want to change the colors, then you can also solve the issue by changing the (hard-coded) color configuration in resources.pak.
The highlight colors are defined at WebInspector.Color.PageHighlight in Source/devtools/front_end/common/Color.js. This resource is minified and included in resources.pak, so if you open resources.pak with a hex editor and look for WebInspector.Color.PageHighlight=, then you will find a way to change the default color values (note: when I just tried this method, I found two occurrences of this string, I had to modify the second occurrence to get the desired effect.
For example, to change the color of the box's content, I modified the Content color definition. Inside resources.pak, there is a long line containing WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([111,168,220,.66]),.
After changing it to WebInspector.Color.PageHighlight={Content:WebInspector.Color.fromRGBA([255, 0,0 ,.66]), (note: the number of characters must match, pad it with spaces if needed), the default box will be red:
Alternatives
Instead of modifying resources.pak, you could also create an extension that runs in the content of the developer tools that changes the color, e.g. by calling WebInspector.Color.PageHighlight.Content = WebInspector.Color.fromRGBA([255, 0,0,.66]);.
Or, if you don't want to integrate with the devtools at all, you could create an extension that uses the chrome.debugger API and the devtools protocol to highlight a node using the DOM.highlightNode command.
Another option is to open a feature request at https://crbug.com/new and ask for an option to change the colors. A similar feature request was shot down, so this option won't work for your current case.
I am trying to add custom tweet button to my website and all is well but it is not shortening the URL. I am using URL query string instead of javascript. Is that the case?
<a class="btn btn-tweet" target="_blank" href="https://twitter.com/share?text='.$title.'&url='.$url.'&via='.$user.'&wrap_links=true">Twitter</a>
I have read some API document and saying above 19 characters twitter shorten url itself. Just wonder why it is not converting with this.
I am also having trouble to open in popup instead of new window. Does this all possible without adding any separate javascript code but directly inline in anchor tag?
I was hung up on this and realized I was trying to shorten "http://localhost:5000/blog/url" which t.co is unable to do.
Change to a real, non-localhost URL and it worked fine.
It won't be visibly shortened in the compose window, but the compose window does detect URLs and adjusts the character count accordingly. Try pasting a huge long URL - it'll only use up 22 characters in the count.
Do note that Twitter shortens all URLs, even when "shortening" actually makes them longer. For example, "http://bit.ly" will use up 22 characters (not 19), not 13.