1 hyperlinks, Multiple Options in HTML (css) - html

I'm looking for a way that I can link 2 (or more) HTML files to 1 hyperlink. They shouldn't open simultaneously, but the code should choose 1 randomly to open.
I am using .
I hope someone can help.
I have looked online on solutions, but I didn't find anyone talking about it. Or maybe I didn't use the right words to look it up.

You can't do that with CSS or HTML. In order to randomize something you can use JS.
Here is an example of what you can do:
JavaScript
// Your links in array
var links = [
"www.link1.com",
"www.link2.com",
"www.link3.com",
"www.link4.com"];
openLink = function () {
// preventDefault() on an <a> tag
event.preventDefault();
// random number between 0 and the number of links
var randnum = Math.random() * links.length;
// round random number to use as an array index
randnum = parseInt(randnum, 10);
window.location(links[randnum]); // open link
};
HTML
<button onclick="openLink();">Go to random website</button>

Related

how can i know if an anchor link is clicked or not?

I want to know if an anchor link is clicked.
I add anchor links dynamically and set ids with their name file but i dont know how amoutn the number of the cell "clicked" in my Spreadshett.
For ex: the id of file "test.pdf" --> test;
in spreadsheet:
ex:
ColumA <namefile>: test.pdf
ColumB <linkfile>: https://docs.google.com/document/d/1PiMj.....jramcs
ColumC <cliked>: 1
I'm specting that if i clicked my anchor my function could know which anchor is cliked and amount " 1 " in colum C in the ppropriate row.
var html = app.createAnchor(nf, hf).setId(nf);
I am trying to make something like:
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
¿But how i know which anchor is cliked in the function sumDoc?
I think you can get that using client handlers and a textbox (this last one can be visible or not).
var clickedItem = app.createTextBox().setName('clickedItem')
On each anchor you add a clickHandler like this
var handler = app.createClientHandler().forTargets(clickedItem).setText(Anchorname);
anchor.addClickHandler(handler)
and in the server handler you will get the textBoxValue with
var clickedItem = e.parameter.clickedItem;
if you want a more accurate code you should provide the code you use to create the UI with the anchors
This is also possible and easy, format your anchor like you said.
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
Now your return function:
function sumDoc(e){
//this will return the value of the ID of the element thats clicked so in this case its test.pdf
var linkId = e.parameter.source;
}
I hope this is useful

GetJSON and using a Show More link

I'm using getJSON to get data from the facebook pages api, and it works just fine, using this code:
$(document).ready(function(){
$.getJSON('url',function(json){
$.each(json.data,function(i,fb){
var output='';
//here I add to output, as this example line:
output += '<div"><a href="http://www.facebook.com/profile.php?id='+fb.from.id+'>'+fb.from.name+'</a>';
$("#results").append(output);
});
});
However, what I'd like to do is similar to what facebook does in it's social plug in where it starts off with 5 entries and has a Show More link, which when clicked, brings in 5 more entries.
Is there a way to do this by altering the code I have?
Thanks
Well, sure there is. Do you want to fetch the other results when a user clicks the "more link" to save bandwidth or is it OK to fetch it at the same time? (async vs sync)
This answer considers the bold text:
output += '<div' + (i >= 5 ? ' style="display: none;"' : '') + '><a href="http://www.facebook.com/profile.php?id=' + fb.from.id +'>'+fb.from.name+'</a></div>';
Oh, and check that line in your code, you had a syntax error and an unmatched div. Also you should have quotation marks around your HTML element's attributes.
For showing the links when the more link is clicked you could do something like:
$('.more').click(function() {
$(this).hide();
// Find the closest ancestor which is a parent of both
// the more link and the actual results list
var $parent = $(this).closest('.parentSelector');
$('.listSelector', $parent).children().show();
return false; // Don't follow the link
});
The parts with the parent stuff above is for the case when you have multiple such results list on the same page and you need to separate them. If you don't need it, here is a simpler variant:
$('.more').click(function() {
$(this).hide();
$('#results').children().show(); // Show all other list items
return false; // Don't follow the link
});

jqPlot charts on page load

I have a form where I select the number of items. Upon clicking submit, it should take me to a new page where it would display the item selected and depending on the number of items selected, it would create those many jqPlots, one for each item.
Any suggestions on how do I go about doing this?
Thanks,
S.
It's hard to give any specifics without more detail about the items, but basically you would pass a JSON structure to your view with the items to be plotted. Then you would loop through the JSON structure, creating DIV tag for each item to be plotted and appending the DIV tags to the body.
The Javascript part would look something like this:
$.each(items, function(index, value) {
$myPlot = $("<div>");
$myPlot.attr("id", "item"+index);
$.jqplot($myPlot.attr("id"), ...);
$("body").append($myPlot);
});
This question is very general, but answering (specifically and only) the question of loading multiple charts:
You need a unique HTML div id for each chart; consider using an RFC 4122 UUID (generate as needed) for each chart/div rather than a sequential index for each. Use something that looks like this as a placeholder div for each:
<div class="chartdiv" id="chartdiv-${UID}">
<a rel="api" type="application/json" href="${JSON_URL}" style="display:none">Data</a>
</div>
This embeds the JSON URL for each div inside it, in a hidden hyperlink that can be discovered by JavaScript iterating over your multi-chart HTML page.
The matter of the UUID is inconsequential -- it just seems the most robust way to guarantee a unique HTML id addressable by JavaScript for each chart.
Subsequently, you should have JavaScript that looks something like:
jq('document').ready(function(){
jq('.chartdiv').each(function(index) {
var div = jq(this);
var json_url = jq('a[type="application/json"]', div).attr('href');
var divid = div.attr('id');
jq.ajax({
url: json_url,
success: function(responseText) { /*callback*/
// TODO: responseText is JSON, use it, normalize it, whatever!
var chartdata = responseText;
jq.jqplot(divid, chartdata.seriesdata, chartdata.options);
}
});
});
});

HTML Frame Force New Window in all Links

I have frames setup on a page, is there a way to force all links in a child frame to open in a new window('blank') rather than 'self'?
I have no access to the page that I have in my frame, sometimes the links open new pages sometimes they just transfer to a totally new page. I want to keep some consistency by making all links open in new pages.
You could use some javascript:
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
You'll just have to get a reference to the document in your frame (sorry, it's been a long time since I've worked with frames). From memory it's something easy like frame.document
I'm not positive that you can modify the DOM of external pages, but it's worth a shot.
var links = document.getElementsByTagName('a');
for (var i = 0, l = links.length; i < l; ++i) {
links[i].target = '_blank';
}
This will not work for Frames loaded by Javascript to open in a new Window :(
Don't use frames.
Or load them in using a HTTP object (there's plenty in a lot of server-side languages), modify the links using regular expressions to point to '_blank' instead' and then put them on your page.
Alternatively, you might be able to use the DOM:
nodeLink = document.getElementById("alink");
nodeLink.setAttribute("target", "_blank");
What am I missing when I respond with the following?
If you can't change the page in the frame, you're not going to change its behavior.
Put this between your <head> and </head> tags:
<base target="_blank">
Just replace _blank with whatever target you want to be the base for all links on the page.
Source: http://www.w3schools.com/tags/att_base_target.asp

Sending values through links

Here is the situation: I have 2 pages.
What I want is to have a number of text links(<a href="">) on page 1 all directing to page 2, but I want each link to send a different value.
On page 2 I want to show that value like this:
Hello you clicked {value}
Another point to take into account is that I can't use any php in this situation, just html.
Can you use any scripting? Something like Javascript. If you can, then pass the values along in the query string (just add a "?ValueName=Value") to the end of your links. Then on the target page retrieve the query string value. The following site shows how to parse it out: Parsing the Query String.
Here's the Javascript code you would need:
var qs = new Querystring();
var v1 = qs.get("ValueName")
From there you should be able to work with the passed value.
Javascript can get it. Say, you're trying to get the querystring value from this url: http://foo.com/default.html?foo=bar
var tabvalue = getQueryVariable("foo");
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++)
{
var pair = vars[i].split("=");
if (pair[0] == variable)
{
return pair[1];
}
}
}
** Not 100% certain if my JS code here is correct, as I didn't test it.
You might be able to accomplish this using HTML Anchors.
http://www.w3schools.com/HTML/html_links.asp
Append your data to the HREF tag of your links ad use javascript on second page to parse the URL and display wathever you want
http://java-programming.suite101.com/article.cfm/how_to_get_url_parts_in_javascript
It's not clean, but it should work.
Use document.location.search and split()
http://www.example.com/example.html?argument=value
var queryString = document.location.search();
var parts = queryString.split('=');
document.write(parts[0]); // The argument name
document.write(parts[1]); // The value
Hope it helps
Well this is pretty basic with javascript, but if you want more of this and more advanced stuff you should really look into php for instance. Using php it's easy to get variables from one page to another, here's an example:
the url:
localhost/index.php?myvar=Hello World
You can then access myvar in index.php using this bit of code:
$myvar =$_GET['myvar'];
Ok thanks for all your replies, i'll take a look if i can find a way to use the scripts.
It's really annoying since i have to work around a CMS, because in the CMS, all pages are created with a Wysiwyg editor which tend to filter out unrecognized tags/scripts.
Edit: Ok it seems that the damn wysiwyg editor only recognizes html tags... (as expected)
Using php
<?
$passthis = "See you on the other side";
echo '<form action="whereyouwantittogo.php" target="_blank" method="post">'.
'<input type="text" name="passthis1" value="'.
$passthis .' " /> '.
'<button type="Submit" value="Submit" >Submit</button>'.
'</form>';
?>
The script for the page you would like to pass the info to:
<?
$thispassed = $_POST['passthis1'];
echo '<textarea>'. $thispassed .'</textarea>';
echo $thispassed;
?>
Use this two codes on seperate pages with the latter at whereyouwantittogo.php and you should be in business.