This is probably a simple lookup, but since I don't know how to word my question in the form of a google search, I brought it here. I have a number of divs with an image associated inside each div. With each image, I gave it an alt for word association. I might need to use title instead, but for now I am just going to use alt for the purpose of my question. I want the user to click each image and link them all to the same html page (kind of like an under construction page). For obvious refactoring, I only want one of these html 'under construction sites'. However, I want them slightly personalized to show that the image they clicked is being noted as under construction. iE:
<div class="view view-first">
<img src = "img/storage.jpg" alt="Storage Corp">
<div class="mask">
<h2>Storage Rental Space</h2>
<p>Develepment, Server</p>
Read More"
</div>
</div>
So I would want them to click on read more, have them go to server.hml where it says something like 'Sorry Storage Corp is under constriction'.
Easy enough for one image, but let's say I have 20, and I want one server.html that spits out a different 'Sorry xxxx is under construction'. Do I created an empty div in server.html and call the text from the image alt text for the image they clicked into the html page for each image? If so, what is the proper syntax? Maybe I have been too knee deep in JS for the last few weeks that I just can't think of a proper way to do with without declaring a universal scope to hold the string and call it on an image click?
Thanks for any tips!
You’re likely to need either a server-side language or JavaScript to make the result page dynamic. The simplest way to do this would be to include the text you want in the href as part of the URI. For example "server.html?text=Sorry+wrong+page". In server.html, you could then grab this variable from the GET string and put it into the page.
All server-side languages give you access to GET variables. In JavaScript, it’s a little more complicated. See this question for ways to do it.
Related
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.
Sorry if the question in the title is a bit vague, here's what I'm trying to accomplish:
Is there a script out there that can search a page (or page source) for a particular determined value (for example, a product ID "1234") and insert it dynamically or on-the-fly into a variable which can be used anywhere on the page if called?
For example:
I'm working on a site that uses a shopping cart/feed platform that is closed source, so I can't grab variables I need (such as the product ID, product price, and order ID), as they are "locked down" (so to speak). And I need to be able to grab them and dynamically insert them into click trackers/pixel URL strings.
I'm not sure if this is possible or if this is a much larger task at hand.
A webpage might have many ways of showing a value, and it takes some human interpretation to determine what values are important. Example:
<div id="couponDisplay" class="inset hidden">Enter your coupon code: <input name="coupon"/></div>
<div id="cartRegion">
<div class="cart">
<div class="lolbx_quantityControl" data-initialValue="1" onKey="lolbx_notify()">
</div>
</div>
</div>
It may be that you're looking at a shopping cart page, and though the whole HTML is hundreds of lines long, the most important part of that page for you is the data-initialValue="1" part. That's less obvious to a computer. The first step for you might be the path the computer uses to reach the value you want, then see if you can replicate that.
I'm not sure if I understand what sort of system you're connecting to, though; I will say that using outside web services through "hacks" like this without their permission may be violating their terms of use (ie, grabbing Google Maps data to make your own map control with no Google branding)
I have a question that bothers me on some projects I'm currently working on. This question is not a duplicate of What's the difference if I put css file inside <head> or <body>? or similar.
For example imagine an email service. User has some email inbox at goodmail.ex, where he receives an email from Badguy. Badguy knows source codes for goodmail.ex and knows there is some input on the page next to where the letters open, where the user should insert some sensitive information. Or may even be a popup, so Badguy writes the letter in HTML format and adds some position:fixed or position:absolute styles, so one of the blocks (for this example let it be email information - login and password popup, saying user session has ended, to renew, enter your data) with design like the goodmail.ex service has. The user thinks it's okay and not related so he inputs it and this information gets send somewhere else.
So! The question is not how I can block this css, some filtering with a custom parser should work well here, but how can I block user to use any of the CSS classes that goodmail.ex is using? For example goodmail.ex is filtering every letter for position:fixed, but has some block floating with a class named "goodmailfloatingbox", so the Badguy simply writes and the fakelogin gets the position:fixed attribute. This is something not really well explained, but I hope you will understand what is required.
Oh yes, iframe is not an option.
So is it possible to override existing defined class styles with some code in the middle of the page to make it safe AND make it as much crossbrowser compatible as it can?
Thank you
You could write a short script that uses document.getElementsByTagName for either style and link and the resultant array of values can then be checked to see if all the loadede css files are proper.
To override existing definitions, just use !important in the css file, and that will be the most dominant style (for that type).
If you want to load it in the middle of the page, you can use a javascript function that does the same as the first paragraph here, except it deletes the object that appears in the body, and appends it to the head object. I do that if I use ajax to update a page.
I wonder how it is possible to (more or less ) reliably clip the content from a random web site (using Ruby or JavaScript, doesn't really matter).
Much like Evernote and Flipboard do.
What is the best way to determine where the actual content is within a page?
The purpose: given a URL - retrieve the actual content of that page and ignore all the layout and other unrelated information.
For example:
given http://ninemsn.com/ => the HTML of the main news topic that is in the middle part of the content.
given the http://news.cnet.com/8301-1035_3-20104048-94/a-beginners-guide-to-telecom-jargon-part-7 => the HTML of the main article.
Just use Evernote's "clip full page" option to see exactly what I mean.
Thanks.
My initial thoughts would be to DOM parse the page, then traverse the DOM tree to the content of a specific div and show that (via XPath, etc). For pages without clearly-defined sections it's going to be difficult regardless of which method you use. The AutoPager plugin for Firefox and Chrome implements XPath parsing behaviour. Get the latest version and open up the .xpi to see how he does it. It's a JavaScript implementation.
Pick the div by letting someone enter, per URL/site scheme, what the id or class of the content div is. For your ninemsn example, the div containing the article's title, share buttons, the author's image, and the post content is
<div class="post">
and the actual body of the text is
<div class="postBody txtWrap" section="txt">
So someone would enter that you need to parse the first h1 from <div class="post"> and that's the article title, and then get all the text from <div class="postBody"> and make that the article content (you might need to parse the class in such a way that it can match both postBody and txtWrap).
Another example (for funsies): Stack Overflow. A question's title is contained in
<div id="question-header">
A question's text is trickier, because it's in a div with the same class as an answer's text, and no id. You need to match <div id="question"> and then traverse down to
<div class="post-text">
Similarly for answers, each <div id="answer-[UINTEGER]"> contains a <div class="post-text"> with its respective text.
In both situations, you can traverse those top-level question and answer- divs for <div class="user-details"> to fetch usernames, reputation and badge counts, etc.
I want something that the webmaster can copy into his site.
It just needs to have my logo, a text box, and a submit button. (When the user clicks submit using that widget, it forwards to my site.)
I know there are many ways to do this. What is the fastest and easiest?
I don't know about fastest and easiest, but maybe you could write a little JavaScript file that creates and injects the content into a div with a special ID.
This is along the lines of what StackOverflow does for their "flair."
Fastest way is to just put some HTML code that people can paste in their page. There's no need for buttons or form, just a simple link.
Something on the lines of:
<a href="http://www.yoursite.com/">
<img src="http://www.yoursite.com/yourlogo.jpg" alt="yoursite.com logo" title="Visit yoursite.com!" />
</a>
You'll probably want to add a couple of style tags (e.g to avoid borders around the image etc)
Also, it would be easy on your site to have a little JS that changes the code above so that people can personalize it (point to different images, different sizes etc etc)
Some may frown upon it but possibly the fastest and easiest way is to use an iframe. It means that the embed code can be quite short + you can change the behaviour at a later date.
Iframe's main advantage is that you don't have to deal with the css that's already included in the page. Might not seem like a big deal but sooner or later you'll run into a page that does something with a css attribute that you just hadn't expected.
It's not pretty but it's worth considering.