I have a problem that I just cannot figure out on my own. This is the issue.
I'm making a website that is using javascript to make the website write out things as you type on your keyboard using JS. As you're 'writing' this text I would like your location to be shown, making the illusion that you're the actual person writing. I solved this problem by calling the IP adress and translating it to a city and country using google maps or something like that. The issue now is to get this to 'write it out' as actual text. Take a look at this fiddle -
http://codepen.io/anon/pen/RagdVB
Hello, I am viewing this page from <span id="usergeoip">unknown location</span>.
In this example you can see how its supposed to be, but the problem is that I cannot use <span id> inside the text because it inflicts with the other js making the code be 'typed out'. Is there a solution for calling out this location without using <span> or <p> or such, or is that impossible?
Related
I followed advice from this site on how to embed
the code that i found on how to recreate the
Animated Sign In Form … shown here:
https://youtu.be/5uANWpkuPww
I was hoping to modify it, so that one face of the
animated circle contained text inviting people to
subscribe to my mailing list … with the clickable
link causing the circle to rotate, allowing people
to then enter their name and email address.
In any case, I got the code from:
https://github.com/DaftCreation/Animated-Sign-In---Sign-Up-Form
and tried it out on w3schools.com
Here is the result:
https://www.w3schools.com/code/tryit.asp?filename=G15FD7XT1JF6
If anybody will be kind enough to get it to work,
please save it on w3schools.com … and post the link / URL
here on stackoverflow.com
I am guessing that the guy that created it, may have left out
a character or two, when he cut and pasted it, which has
resulting in the code not working correctly ... and be sure to
let me know what was wrong with it, so that i can learn from this.
Thanks : )
Your code is fine - the only real problem with is that you didn't wrap your jQuery in between <script></script> tags. Use the link below and you can see it working.
https://www.w3schools.com/code/tryit.asp?filename=G15LTVZCBB4R
Also you need to make sure your jQuery link is valid (just copy and paste the one from my code - it is via Google CDN).
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 working on creating a way for editors at my school's newspaper to be able to go to a page that would have places to type in info (ie. img url, titles, captions) and it would output HTML code that is already stylized.
So they type into the form in the title area: "Title"
And in the paragraph area: "This is a test"
and it would output something like this:
<div class="div1">
<span>Title</span>
<p>This is a test</p>
</div>
(div1 since since it's the first one you put and could add more later)
I've been looking into finding something like this, which I know it's possible, I just don't know where to start with this or what I would even google search. Any help would be greatly appreciated.
Thank you.
EDIT: We can't set up a Wordpress due to contracts with outside companies.
It depends on whether you want to implement a solution yourself or use what is already out there.
This type of functionality is already built into platforms like Wordpress and SquareSpace out of the box via a WYSIWYG (what you see is what you get) editor - similar to Stackoverflow's question box.
If you are looking to implement a custom solution then I would recommend looking into into markdown languages.
For example, here is one markdown javascript library called Remarkable:
https://github.com/jonschlinkert/remarkable.
This code snippet is taken directly from their github README
var Remarkable = require('remarkable');
var md = new Remarkable();
console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>
As you can see the markdown text is passed to a render function and it translates into html.
Alex
Hello i want to write an extension myself and looking for guides/tutorials. I have never created one but i am good with js and html/php.
I need a tutorial/sample code, and here is what i want to do:
when an extension is loaded, i want to add icon next to the google search results (matched links). What it would do is, it will check all the link in a webpage by matching them with a database (php server mysql) and if a match of a domain is found, then it will simply add an icon next to that link (by ofcourse manipulating dom).
Seems like a fairly simple task to do. So if anybody can help me by showing me a correct path or if there is any similar extension already available to learn from, then please advice.
I would be very grateful, thanks!
http://developer.chrome.com/extensions/getstarted.html
Have a browse through this. You'll likely get the hand of it if you're proficient with JS.
I'm working on a very simple form filler with Chrome Extension to a spcific site.
I'm getting the name, subject and the message from the user, and just put it in the right places.
I've got a problem with the message part, because it uses an HTML editor. I want to be able to let the user create text message with href links using Microsoft Word or even Front Page and of course a content editor, and just copy the content the user made into the extension, and it will fill it in the right place on the site.
I tried using http://ckeditor.com/ but it can't work without a server. (Use the 1 Visual Studio create to test it).
Is there a content editor like ckeditor, that can work on client side too, and that I can use Javascript to get the info from the user?
I know this is a weird request, and even sound illogical, but is for a friend (and for learning).
(sorry for my english)
Afther some days for serching the web i found this: http://html5demos.com/contenteditable
it work only for html 5, and it amazing feature!
if any 1 have this wierd request too, this simple code with get your start:
<div contenteditable="true">this is a smaple</div>
this attribute is what make the megic happend: contenteditable="true"
in that div, you can throw any thing from out side your work space. meaning, you can do a href with WORD, and just copy it to the div, and it will set it up for you!
1 thing that is still wierd, if you dont have borders to the div, it will not set 1 for you like normal text field or textarea. so if u dont see it, it dosnt mean is not there!
enjoy.