Am trying to draw d3 charts when a button is clicked.
But all the d3 tutorials I've seen says the d3 code should be placed inside the element
you want the charts to appear. This means the d3 code will execute when the page loads but I
want the code to run only when a button is clicked.
I also want to know if I can place my d3 code in an external file wrapped in a function
that I can call when I want to. If no, how do i create button that will show a d3 chart when clicked?
HTML
<input type="button" Value="show" />
<div id="presentation">
<!-- bar charts to show up here when the "show" button is clicked.
The button makes an ajax call and gets a json that contains data
that will be used to draw the chart.
-->
</div>
Check this out: http://jsfiddle.net/rUtS5/
Edit CSS first
#presentation {
...
display: none;
}
Then add a blank class on your buttons
<input type="button" Value="show" class="example" />
Use jQuery
<script>
$(".example").click(function () {
$('#presentation').fadeIn("slow");
});
</script>
Result:
presentation div will not be seen when the page load. When someone click the button which has example class it will be seen.
You can also use toggle(), slideToggle() or fadeToggle() functions instead fadeIn() for show/hide property.
I hope it helps... :/
P.S. If you try this solution
add this code in <head> section
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
and use jQuery codes at the bottom of page before </body>
Related
Let me preface by saying this is all in relation to a Wordpress page. My knowledge of JS is lacking at best and the concept of installing/loading/enqueueing a function on one area of the site and then calling that function in another area of the site is a something that makes sense to me in my head but is very new to me in practice and might need a little explaining.
I have two separate javascript files that I would like to load on a single page, but toggle visibility/display of either based on radio button input. The JS is provided by a 3rd party and is offsite. Their provided code is this:
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
and
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
Each file presents a separate set of filtered results from their database. How can I incorporate both onto a page but only have one or the other showing based on a radio button form input? I would like the page to start off with nothing visible (hopefully giving time for both JS to load in the background while the user selects an option) and then show one or the other depending on what they selected.
You can see a single one of these in action at http://pricelesspetrescue.org/adoptable-dogs/. I'm trying to incorporate the use of an additional file on that same page based on input from the user and only showing one or the other rather than both.
I have tried to manage the following
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script type='text/javascript'>
function displayForm(c) {
if (c.value == "2") {
jQuery('#claremontdogContainer').toggle('show');
jQuery('#chdogContainer').hide();
}
if (c.value == "1") {
jQuery('#chdogContainer').toggle('show');
jQuery('#claremontdogContainer').hide();
}
};
</script>
<label>Please select a location to view:</label>
<form>
<input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>Chino Hills
<input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>Claremont
</form>
<div style="display:none" id="chdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/FzemP6HU/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
<!-- If I uncomment this second block the whole thing breaks
<div style="display:none" id="claremontdogContainer">
<script src="https://toolkit.rescuegroups.org/j/3/4ANRW3x8/toolkit.js"></script>
<script type="text/javascript">
</script>
</div>
-->
This gets pretty close to what I need. The problem I have is the second script load seems to conflict with the functions they provide in the script. It will display the initial result but does not carry any of the functionality that it should have. http://pricelesspetrescue.org/test-page/ Nothing is clickable inside those results and should be.
Been searching through various similar posts and the wordpress codex and...and...I just haven't been able to come up with anything that seems close enough to what I'm looking for to make the answer click in my head.
Edit: It seems that if I only load one of the scripts in either what I have above or the suggested answer below, all functionality is present when loaded. It's the loading of the second toolkit script that is breaking the page. I'm guessing one would need to be loaded then unloaded before loading the second for it to work. Any ideas?
The toolkit.js file you linked adds some common scripts to the DOM (via document.write function, which is not a good solution - see here: http://www.jameswiseman.com/blog/2011/03/31/jslint-messages-document-write-can-be-a-form-of-eval/), then populates an array (toolkitObjects) with a series of variables that are custom per file and finally loads some other scripts.
It also seems that each file loads a div with a specific class containing all the pets, and each div is identifiable by a specific class ( "rgtk-SOMEID" ) and therefore can be shown/hidden via javascript.
Here is an example of what you can obtain using the div class:
http://jsbin.com/loneyijuye/edit?html,output
I cant get javascript tooltip to work on dynamic output,
I am using backbone to populate my divsCells
<script class="bookTemplate" type="text/template">
<div class="divRow">
<div class="divCell <%= Slot.StyleClass %>"><a class="tool" data-tip-type="text" data-tip-source="<%= Slot.TooltipText %>" href="#"><%= Slot.ValueText %></a></div>
</div>
</script>
This outputs the html exactly as expected, but the tooltip wont work on it,
If I hardcode the html Cell, the tooltip works.
I call the javascript tooltip file in footer of my page (asp/mvc)
Output from Dynamic:<div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it!" href="#">Open</a></div>
Output from Static: <div class="divCell open"><a class="tool" data-tip-type="text" data-tip-source="Book it Now!." href="#">Open</a></div>
<script type="text/javascript" src="/Assets/js/views/tooltip.js"></script>
I dont understand why the tooltip is not showing on the dynamic? the html is the same, (Im still new to the world of JS) so I tried moving things around, I dont know how to debug this or work around this, if i want the tooltip script to work on the dynamic field do i have to use special methods?
Your Javascript might not take into account the new elements your are creating with backbone.
You can use a jQuery function called on(), which have the ability to handle events on descendant elements not yet created
$( "#selector" ).on( "click", function() {
//do your tooltip call
});
Either that or your call to tooltip should be done after backbone has finished its inserts.
I need to create a simple button made only of an image, and which will open a JQuery Dialog when the user clicks on it.
I am doing some reading and notice many solutions: <button>, <image> with a <a>, using CSS to modify a button background, etc...
This is confusing, what is the proper way to implement my image button?
Thanks.
P.S.: The button/image should be focussable. An operational JSFiddle example is welcome.
The proper way largely depends on what the button will do if JavaScript is not available.
If you are going to submit a form then:
<button> <img src="..." alt="..."> </button>
If you are going to go to a URL then:
<img src="..." alt="...">
If you are going to do absolutely nothing (generally not a good idea, you should follow the principles of Progressive Enhancement and Unobtrusive JavaScript, but acceptable if you only generate the button with JavaScript in the first place and the loss to the user is convenience rather then essential functionality):
<button type="button"> <img src="..." alt="..."> </button>
You then bind the JavaScript to either the form's submit event, or the button/anchor's click event and prevent the default behaviour so the form won't be submitted / the link won't be followed if the JavaScript executes successfully.
Create a button and put background-image for it.
Checkout the fiddle.
http://jsfiddle.net/siyakunde/Y38nz/
I found the solution after many struggles: http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
And some javascript:
function doSomething() {
alert('Hello!');
}
It depends on what you want to do in every case. There is no guideline that says "you should do it like this", but there are situations that some cases are more suitable than others.
For example according to this review, IE versions of 8 and below have some buggy behaviour regarding <button> tag when trying to use it as a submit button.
Ηowever the <button> has some new attributes added in HTML5 which you can see here , ammong them is autofocus and other useful that will be supported by most modern major browsers.
In your case that you want to maintain the "focus" (i assume with tabbing support), if you use a single <image> as a button (with or without <a>), you will have to add some JS code to make the image focusable when the appropriate tab is pressed. So you will have to write a bit more code to do the same thing.
There is one more solution which might be suitable for you, since you do not need to submit the form to server side. Using the <input type="image" type and defining the src attribute inside it, will be focusable and not require neither any JS code to run nor any difficult CSS. You can find more about it's syntax here
So, it ends up to you to decide which one of all them to use.
I would use the one that i find more flexible, easier for me to code, easily reusable and is supported by most of my target browsers.
Use jQuery as you own it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#theBtn{
margin: 20% auto 0;
background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<div id="theBtn"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#theBtn").click(function(){
if(confirm('Are you sure?')){
$("#theBtn").fadeOut('slow');
}
});
});
</script>
</body>
</html>
Inside a <button> tag , put your image, and attach an click event to <button> to open the dialog on click.
JSFiddle
First thing, There is either an image or a button. But not both.
I would say, create an image and place your code in the onclick() function of that image.
var img= $("#my-image-id");
image.click(function() {
// your code here
}
As I know You can't change the look of the Safari buttons thats why I suggest to use a for the solution. Here is my simple code: http://jsfiddle.net/djgBK/1/
The basis is:
Take an a element put the link content to the left,
Then replace it with image that is actualy it's background. Becouse it's a element user can select it usin only TAB button.
What's more using an a elemet will let You to put title which will be displayed after hovering/entering over the button.
What is the correct syntax for creating a form when a div is clicked with javascript? I've made a picture button, and I just want this form to appear in place of the button when clicked, but I can't get how it should look. I only want to use some basic javascript and HTML if possible.
Thanks.
The best way would be to have the form already built in your html and then just use javascript or jquery to change the display style when the button is clicked.
I would recommend using an <a> tag. But a div would work too.
HTML
<a class="myLink">Button</a>
<div class="form">
<form>
...
</form>
</div>
CSS
.form {display:none;}
jQuery
$(function(){
$(".myLink").live("click", function(){
if(!$(".form").is(":visible"))
{
$(".form").show();
}
});
});
I am working on a small code snippet.
The Issue:
I want to have a couple of buttons, that on click load content into a div, using ajax.
I can get it working absolutely fine, with say images, and text. But cannot load with css and js.
Example: the index page:
<input type="button" onclick="example_ajax_request()" value="Click Me!" /> | <input type="button" onclick="example_ajax_request2()" value="Or Me!" />
<div id="example-placeholder">
<p>Placeholding text</p>
</div>
<script type="text/javascript">
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("fat.html");
}
</script>
<script type="text/javascript">
function example_ajax_request2() {
$('#example-placeholder').html('<p><img src="images/loader.gif" width="220" height="19" /></p>');
$('#example-placeholder').load("joined_today.html");
}
</script>
The page joined_today.html is a full blown webpage ( which contains a div element ) only, and shaows AMCHARTS. Which obviously utilise js inc Raphael.
Anyhoo, the issue arises, from any webpage with headers, html and body tags. The script above doesnt render these.
So what am i doing wrong. Seemingly, we can only load into div id example_placeholder content that doesnt include JS, or CSS
Is there a better way.
Essentially our scenario is this ( I want to avoide iFrames )
We have web page, and a content div, with 3 buttons above the div.
On click of each button, the div gets loaded with a chart ( using amcharts js version )
On click of another button , another chart gets loaded inplace of the first chart, etc etc
Perhaps I am going about this wrong, any help appreciated.
Ste
You need to insert the <style>, <link> and <script> tags in another place, e.g. <head> or end of <body> with something like:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'somescript.js';
document.getElementsByTagName('head')[0].appendChild(script);
One potential problem is to check whether a file (css or javascript) has been inserted. You may need to maintain a global list to check whether a file is already included.
Take a look at this source for "DOM-based On-Demand JavaScript".
Easy way to do this: load the js and CSS files on the parent page.