We Keep Coding

Code a HTML button to link to a JavaScript file

I'm trying to get a button written in HTML to link to a separate JavaScript file when it is clicked, the button in question is coded below
<input type="button" id="clickme" value="Submit" />
I am using the Brackets code editor, and the js file I want to be linked is in the same project as my HTML code, if that helps at all
thanks in advance

Load the script into the page with a <script> element.
Keep your code in a function instead of simply running the whole thing with the script is loaded.
Find the button in the DOM (e.g. with getElementById) and bind the function as a click event listener with addEventListener).

If you mean link, I would use an <a> (anchor) tag which has an attribute href which is the reference. Therefore, you could use:
Link to JS
Or perhaps you meant the onclick attribute which would be:
<input type="button" id="clickme" onclick="myfunction()" value="Submit" />
However, as was pointed out, this is not best practice either.
jQuery.click() vs onClick
Provides some options and reinforces the idea that onclick is not the best way to trigger a Javascript function.

Just link your js script to a page by:
<script src="js/button.js"></script>
and then just call action in that scripts through the class or id.
<button id="btnShow"><h1 class="jumbotron-heading">Expand</h1></button>
<p class="p1">Test</p1>
That's a jQuery not js, but anyway a good example as I think
$('#btnShow').click(function(){
$('.p1').show();
});

jQuery color scheme changer

I have seen a lot of websites that contain a color switcher through which a user can select/pick any color, and the whole page will change accordingly. Below are a few example links....
http://csmthemes.com/themes/beta/static/
http://magna-themes.com/demos/html/flatapp/index.htm
http://envato.nestolab.com/Batekh/style-1/image-slider-version/index-one-page.html
http://ronseta.com/Roof/index_02.html
What I want: I want the same color scheme, but the problem is that I am that expert to create it on my own, so I want the basic logic and some code to start, I have a basic knowledge of JavaScript and jQuery. If there are any free plugins related to that then please share the link, or share some code through which I can start building my own..

Following "http://magna-themes.com/demos/html/flatapp/index.htm"
0.create multiple css files by color
style/colors/default.css
style/colors/green.css
style/colors/red.css
style/colors/pink.css
1.you create a link to css with an id like color-switcher
<link rel="stylesheet" type="text/css" href="style/colors/default.css" id="color-switcher">
2.you create a menu of color picker
<div id="demo-wrapper">
<h2>COLORS:</h2>
<ul>
<li class="green" data-path="style/colors/green.css"></li>
<li class="red" data-path="style/colors/red.css"></li>
<li class="pink" data-path="style/colors/pink.css"></li>
</ul>
<div class="clear"></div>
<p data-path="style/colors/default.css">Restore Default Scheme</p>
</div>
3.you change the path of your link using javascript
$('#demo-wrapper ul li').on('click', function(){
var path = $(this).data('path');
$('#color-switcher').attr('href', path);
});

The basic theory goes like this! You create a theme with buttons, forms, controls etc.. Styling of the elements are usual. If I developed a theme where the user can select a color scheme, I would add a special class to every element which I want the user to modify. for an example :
I've the following html element.
<input type='button' value='submit' class='yourStyle specialClass'>
I've got the following style
.yourStyle{
** Style **
}
I'll use the following sample jQuery code to change the color scheme.
$('document').ready(function(){
$('colorSchemeChoser').click(function(){
$('.specialClass').css('background-color','sampleColor');
})
})
Above is a basic code to start your development.

Try changing the stylesheet dynamically using jQuery (preferred) or Javascript. Each stylesheet has styles defines a particular theme. To make your code look a little professional, try using data-* HTML 5 attributes to change stylesheet.
Below is an example:
Html:
<button id="grayscale" data-theme="style.css">Original</button>
<button id="grayscale-2" data-theme="style2.css">Custom</button>
And js:
$("button[data-theme]").click(function() {
$("head link[rel=stylesheet]").attr("href", $(this).data("theme"));
}
Hope this helps. Let me know if you need any further clarifications. Thanks!

this answer is a demonstration of how 'you can change the background color from user input'
If, however, you wanted to use a completely different 'theme', I would suggest creating different css files, and modifying the style link in your head section (via jquery/javascript) to point to each 'theme'.
This jquery would do the basics for you, changing the background color on three inputs.
$(document).ready(function(){
$('#changeColor').click(function(){
var red= $('#red').val();
var green = $('#green').val();
var blue = $('#blue').val();
var op = $('#opacity').val();
$('html').css("background","rgba("+red + ","+green+","+blue+","+op+")");
});
});
input[type="number"] {
width: 100px;
height: 50px;
}
#red{
background:red;
}
#green{
background:green;
}
#blue{
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" step="1" id="red" value="255"/>
<input type="number" step="1" id="green" value="255" />
<input type="number" step="1" id="blue" value="255"/>
<input type="number" step="0.1" id="opacity" value="1" />
<button id="changeColor">GO</button>

On your HTML you can add a list with class-name and path to your different css files...
You change your css files dynamically with jquery...
If you want only to change colours check this site out:
http://www.marcofolio.net/webdesign/create_a_better_jquery_stylesheet_switcher.html
good luck

I don't know why this hasn't been mentioned, but jqueryui has a themeroller, with several pre-made themes, and you can make your own. (http://jqueryui.com/themeroller/)
Easiest solution here is to implement a themeswitcher like the one here: https://github.com/harborhoffer/Super-Theme-Switcher
Of course, you could write your own switcher as well, basically you're just switching the src of the jqueryui stylesheet...

You stated you already understand how to switch the style sheet. You could use cookies to make the switch persist between page loads.
This article goes over the concept (also check out the date on it :D)
http://alistapart.com/article/alternate

Here's a really simple solution I put together that I think does what I think you're trying to accomplish.
HTML
<h1>Color Picker</h1>
<input type='text' class="colorPicker"/>
JS
$(".colorPicker").spectrum({
color: "#ff0000",
change: function(color) {
// convert the color output to a usable hex format
color = color.toHexString();
// set the css of your target element to the chosen color
$("body").css({"background-color":color});
}
});
http://jsfiddle.net/edhebert/tbptwz67/
In this demo I'm using the Spectrum Color Picker. It's a free, really easy to use plugin available at https://bgrins.github.io/spectrum/
I'm using a really basic color picker, but Spectrum has all sort of customization options.
Hope this helps.

I just found a cool jQuery plugin from Github which allow you to switch color schemes of the website.
HTML:
<head>
<link href="dist/jquery.colorpanel.css" rel="stylesheet">
<link href="skins/default.css" id="cpswitch" rel="stylesheet">
</head>
<body>
<div id="colorPanel" class="colorPanel">
<a id="cpToggle" href="#"></a>
<ul></ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="dist/jquery.colorpanel.js"></script>
</body>
JavaScript:
$('#colorPanel').ColorPanel({
styleSheet: '#cpswitch',
animateContainer: '#wrapper',
colors: {
'#4B77BE': 'skins/default.css',
'#16a085': 'skins/seagreen.css',
}
});
Repository: ColorPanel .
Demo & Documentation: Demo.

trying to make an already clickable div open fancybox

im not much of a coder. just sort of self taught through wordpress. i have a site I've hacked together from a blank theme and I've taken it pretty far.
the last step i want to do is have my #brick open the permalink page with either rel, or class of fancybox.
using WP fancybox plugin.
here is what I'm doing to make the div clickable in the first place
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;">
where in this line would i add rel="fancybox" or class="fancybox"?
thank you in advance.

Since you already have the href set in your <a> tag, like this part of your code.
<h2 class="entry-title"><a rel="bookmark" title="Permalink to Art and commerce in the digital age" href="http://throughthelattice.com/art-and-commerce-in-the-digital-age/">Art and commerce in the digital age</a></h2>
... then, I would do :
Remove this line
<script src="//throughthelattice.com/wp-content/themes/lh_wordpress_blank_theme/js/jquery-1.7.1.min.js"></script>
... you already loaded jQuery v1.8.3 in your <head> section
Replace all id="brick" by class="brick"
Replace this script
<script>
$('#brick').fancybox();
</script>
... by this :
<script>
jQuery(document).ready(function () {
jQuery("a[rel='bookmark']").fancybox({
"type": "iframe"
});
}); // ready
</script>
See JSFIDDLE

Rather straight forward to add rel or class properties to an element:
<div id="brick" onclick="location.href='<?php the_permalink(); ?>';" style="cursor:pointer;" rel="fancybox" class="fancybox">
And the JavaScript could be:
$("div.fancybox").fancybox();
or whatever selector you'd like to use. Since you can select with jQuery using a combination of class, id or tag name.

HTML/JS: Confused about method to create an image button

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.

How do I navigate to another page on button click with Twitter Bootstrap?

I have to render a html page residing in templates/home.html
I have a button in index.html as:
<div id="browse_app">
<button class="btn btn-large btn-info" type="button">Browse</button>
</div>
All I want to do is when I click on Browse, it takes me to home.html
I tried to write jQuery as:
// onClick on 'Browse' load the internal page
$(function(){
$('#browse_app').click(function(){
$.load('templates/home.html');
});
});
But this doesn't work since load needs to put data somewhere in current page
How do I get to the home.html on button click?

As far as I can tell you are using Twitter Bootstrap. The documentation for Buttons addresses your point:
Default buttons
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.
This is what you want:
<div id="browse_app">
<a class="btn btn-large btn-info" href="templates/home.html">Browse</a>
</div>
In the worst case scenario, this way the rendering of the button won't look nice but the link will work. Using JS, your worst case scenario will render the link useless.

Use: onclick="window.location='INSERT HTML FILE HERE'" in your button tag
One I prepared earlier:
<button class="btn" style="text-align:inherit" onclick="window.location='./Learn/'">« About HerdMASTER 4</button>
I wanted to go to the directory Learn from another directory in the same folder
It's a more elegant solution using the bootstrap class that is included, meaning you don't have to hack code into your page. I wish there was a bit more functionality documentation about the various classes for bootstrap as I figured this out from the above code rather than finding it by a google search.

Use this:
$(function(){
$('#browse_app').click(function(){
window.location='templates/home.html'
});
});

Use onclick="window.open('YourPage.aspx','_self');"
For Example:
<button type="submit" onclick="window.open('YourPage.aspx','_self');" class="btn btn-default">Your Page</button>