I'm new to D3 and javascript. I have found a tree layout that suits my needs and now I'm trying to make it display information dynamically. This is the jsfiddle for the tree.
Right now, when you click on a node, a hyperlink is displayed on top of the tree. The problem is that this is just a text string and not a clickable hyperlink.
I know that this is related to my code not actually telling D3 to display this as a hyperlink:
function click(d) {
d3.select("#link").text(d.url);
update(d);
}
I've tried to make it work using the javascript link() method, but wasn't very successful (the debugger said: link() method not found). How can I turn the text string into a clickable link?
Add a <a> tag to the <div> displaying your link:
<div>
<a id="#link"></a>
</div>
Then, you can update the link tag, like this:
d3.select("#link")
.attr("href", d.url)
.text(d.url);
Related
I'm loading a self-created HTML page into a WebView in an Android app.
The HTML page contains a tag like <a name="here"></a> somewhere in the middle.
After loading that page, I'd like to be able to programmatically scroll to that position, as if I had clicked on a here link.
I tried with loadURL and with loadDataWithBaseURL, with every possible parameter combinations that I could think of, without success.
Note 1: I want to be able to scroll to that position after the page has been already displayed.
Note 2: I cannot use scrollTo(x,y) because I don't know the y position of that <a name="here"> anchor within the page. If I could figure out the y position in the page of that <a name> tag, that would also solve the problem, but I don't know how to find that y value either.
(P.S. I'm loading the self-created HTML page by calling loadDataWithBaseURL(null, _html, null, null, null); where _html is the string with my HTML page)
1) Inside <script></script> part of your HTML page, create a Javascript function to programmatically click a link on the same page:
function myFunction(){
document.getElementById('myLink').click();
}
2) Instruct your HTML to run your Javascript function once the page is 100% loaded adding an onload event handler to your body HTML tag, this way:
<body onload="myFunction();">
3) Inside the body area of your HTML, anywhere, create an empty link just to have the functionality of a click to the anchor you want (as you suggested, the reference to your anchor is #here:
4) Finally create an anchor at the desired position inside HTML:
<a name="here">HERE</a>
That's it. When the page is loaded it will go to the desired position.
If you want to try this before use... https://jsfiddle.net/vapx8rzk
Answering my own question, thanks to the above suggestions I found that calling "scrollIntoView()" works for me, like this:
Instead of <a name="here"></a>, I use an "id" attribute, like e.g.: <span id="here">
I call webView.loadURL("javascript:document.getElementById(\"here\").scrollIntoView()");
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I have hyperlinks with href="#" that are assigned to client-side javascript event handlers. When making requests via ajax, these links behave as expected (via "click" events) but when I occasionally use a link generated by the Rails link_to helper these href values suddenly become corrupted: href="#" becomes href="users/1/photo/4" for example. Every link on the page picks up the same value!
When I use Chrome's Inspect Element, it reveals that the rendered href value remains href="#", yet rolling over it reveals it is pointed to the unwanted url. The event listeners fail. Is this turbolinks forcing my link placeholders to take on unwanted values? Why is rails messing with my links?
Here is typical javascript code assigning an event handler:
Menu.prototype.activatePhotosLink = function() {
var self = this;
// ======= get all user photos =======
$("#main-nav").on("click", function(){
event.preventDefault();
self.getUserPhotos();
});
}
Here's how the link looks via Chrome's Inspect Element with href="#":
photos
I tried to fix this problem with data-no-turbolink="true" but that did not work. Meanwhile, here is what I see in the browser's "link to tooltips" on rollover:
localhost:30000/users/1#
Why not href="#"? Thank you for any thoughts!
The path is not corrupted. It should be the path of the page you are at with the hashtag appended to it. This is not related to Rails nor JavaScript, but rather a feature in HTML. In HTML, if you want to create an anchor link to a certain element in the page, you pass its id to the href. You can read more about it here.
If you don't want a url to appear when you roll over the link, you can use href='javascript:void(0)'
I have one area of space and two body's of text to show. I have two "hyperlinks" above this area and would like to use those to show/hide the text below. Upon first loading the page, nothing will be showing except for the two links. When you click one link it shows the body of text. When you click the other link it will hide the previous body of text and show the new text. There are only two hyperlinks, but I would like for the user to be able to toggle back and forth at their convenience. Is this possible? Previously I was using javascript to unhide the text because they were in two different areas. I am not too experienced with writing code. I have found some other answers on this topic useful but most of them use buttons and on click listeners. Is there a way to do this using a hyperlink? Code examples are very much appreciated!
You could define a class in CSS that says "Don't show the text in here" then use JS from the hyperlink click to switch the class of the element?
so your html will contain:
<a onclick="showText('text1','text2')" href="javascript:void(0);">Show Text 1</a>
<div id="text1" class="hide"> text1 </div>
<a onclick="showText('text2','text1')" href="javascript:void(0);">Show Text 2</a>
<div id="text2" class="hide"> text2 </div>
Your CSS would contain:
div.hide { display:none; [your properties]; }
div.show { [your properties]; }
and the your JS would look something like this:
function showText(show,hide)
{
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
Does this help at all?
<a id="myLink" href="javascript:void(0)" onclick="javascript:myLinkButtonClick();"> </a>
in javascript you can do this if you use jQuery:
function myLinkButtonClick()
{
$("#myDiv").hide();
}
or
function myLinkButtonClick()
{
$("#myDiv").show();
}
Alternatively you can do .toggle
function myLinkButtonClick()
{
$("#myDiv").toggle();
}
Many will agree that using anchor tags to execute Javascript (and do nothing else) is a little on the messy side, since, among other things, it generates a hash tag in the address bar which can confuse users. That isn't to say that they don't have their place in JS execution.
It is very possible to achieve this however. Here is one possible solution:
Link1
Link2
<div id="div1">Text1</div>
<div id="div2" style="display:none;">Text2</div>
<script>
var currentDiv = document.getElementById("div1");
function show(divID) {
var div = document.getElementById(divID);
currentDiv.style.display = "none";
div.style.display = "block";
currentDiv = div;
}
</script>
The script tag defines a variable and a function: currentDiv, which references the currently displayed div element and a show function, which is used for hiding the currently displayed div and showing a new one.
The anchor tags at the top, when clicked, call the show function, replacing the currently shown element with the one the anchor tag specifies.
In order to get elements to show/hide, the code changes the element's CSS display attribute. A value of block shows the div element, and a value of none hides it. The second div has its display property set to none when the page loads. Javascript will change this attribute when a link is clicked.
No, you do not need JQuery to do this, but it can help.
There's a nice jQuery script that does something along these lines, have a look to see if it's any good for you:
http://api.jquery.com/slideToggle/
This is possible, but a more user friendly way of doing this would be with something like jquery tabs. It's very easy to do it with jquery UI's tab feature, it's all HTML markup with a script that just runs .tabs(); as the function on the ID of the tab element.
Here is a link: Jquery Tabs
Tabs would be the best way to do this. There's plenty of tutorials around for jQuery tabs - here's a fairly basic one which outlines the concepts pretty well, and here's a more advanced one (which goes into using CSS to generate rounded corners on tabs).
I would like to make a link that finds some text and scrolls to that point. I can't add span or div tags.
I have found this and ideally I would like to turn it into a link and add animation. Thanks
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
Original stackoverflow question
It seems to me that this is the sort of thing a standard <a> tag does already without JavaScript, if you can add an <a name="jumppoint"> tag around or at the start of that text and then another <a href="#jumppoint"> tag where you want your visible link. You could insert such an <a> dynamically with jQuery.
But if you're determined to use that code you can add a link as follows:
Your link text here
Of course that's kind of ugly so you'd probably be better off creating a function:
Your link text here
function findLink() {
$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);
}
If you want some animation add it in the findLink() function.