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.
Related
I have
<input type="color" id="colorDialogID">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID">
and I want to by clicking on button to display color dialog. And when I select particular color and press on 'ok', some text to get the selected color.
I need js code for this. I am googling almost one hour now to find a way how to display code picker window from code and no success. I get only kind of plugins. I can not understand why everything has to be so complicated with javascript.
OK, for future reference it is always good to provide a snippet of your code - or even better a JSFiddle link but this is what I've got now.
document.getElementById("setColorButtonID").addEventListener("click", function() {
document.getElementById("colorDialogID").focus();
document.getElementById("colorDialogID").value = "#FFCC00"; //Set the default color NOTE: Remove the line to get the default of #000000
document.getElementById("colorDialogID").click();
});
function getColor() {
var color = document.getElementById("colorDialogID").value;
document.getElementById("textToColorID").style.color = color;
}
#colorDialogID {
position: absolute;
visibility: hidden;
}
<input type="color" id="colorDialogID" onchange="getColor(this)">
<div id="textToColorID">Text to color</div>
<input type="button" id="setColorButtonID" value="Edit Color">
I can add some comments to the code to explain it line by line if you wish - but this should work.
Hope it helps :)
Take a look at jscolor. It's dead simple and the functionality that you're looking for can be easily reached.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
Color: <input class="jscolor" value="ab2567">
I'm learning to code with bootstrap, html, css, js. And I'm wondering if it's possible to modify the language of my webpage with a toggle button?
I'm using bootstrap toggle which can set events like this:
<input id="toggle-event" type="checkbox" data-toggle="toggle">
<div id="console-event"></div>
<script>
$(function() {
$('#toggle-event').change(function() {
$('#console-event').html('Toggle: ' + $(this).prop('checked'))
})
})
</script>
And I also saw this thread on stack about changing languageusing element.lang.
And I'm not able to 'mix' the two methods to change the language on deman simply by clicking on the toggle button, and I don't understand why =/
Here's my attempt:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-toggle.min.js"></script>
<body class="fr" id="test1">
<p lang="en">
Je parle la baguette
</p>
<p lang="fr">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="Fr" data-off="En">
<!--<script>
$(function() {
$('#toggle-event').bootstrapToggle({
on: document.body.className= 'fr',
off: document.body.className = 'en'
});
})
</script>-->
<script>
$(function() {
$('#toggle-event').change(function() {
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
});
});
</script>
</body>
CSS:
body.en :lang(en) {
display: none;
}
body.fr :lang(fr){
display: none;
}
https://jsfiddle.net/mttkchfc/1/
There are a number of issues with your attempt.
The most obvious one is that the languages are the wrong way round. Your "en" section contains French text, and the "fr" one contains English text!
The CSS is also mangled compared to the example you cited - look more carefully at how the :lang part is constructed in the original. In the original example, it is used to hide the opposite language, whereas you're using it to hide the same language. You've got the concept the wrong way round.
Also, this line is total nonsense:
$('#test1').body('Toggle: ' + $(this).prop('checked')).className='en'
There's no such jQuery function as ".body" - if you look in your browser console (press F12, if you didn't know, to open the Developer Tools in most modern desktop browsers), you'll see this error reported when you click on the toggle.
"classname" is a native JS property, it doesn't work on jQuery objects, which this would be if it was valid
If it was possible to use a function like "body" to set the body content, all it would do is set the content of the whole <body> section to "Toggle: true", or similar. This would be useless.
Even if all of that were to be ignored, and it were capable of setting the class, it only ever sets it to English - you wouldn't be able to change back to French.
The example in the link you gave, using document.body.className works perfectly well. You just need to vary the class name depending on whether the toggle is on or off. I have chosen to store the class names in data- attribute values "true" and "false", which of course correspond to the string representation of a boolean. This means we can neatly use the value of the "checked" property of the toggle to fetch the correct data- attribute value and use that as the new class name, without any tedious if or switch statements:
CSS
body.en :lang(fr) {
display: none;
}
body.fr :lang(en){
display: none;
}
HTML
<body class="en">
<p lang="fr">
Je parle la baguette
</p>
<p lang="en">
I speak the baguette
</p>
<input id="toggle-event" type="checkbox" checked data-toggle="toggle" data-size="large" data-onstyle="info" data-offstyle="info" data-on="English" data-off="French" data-true="en" data-false="fr" >
</body>
JS
$(function() {
$('#toggle-event').change(function() {
document.body.className = $(this).data($(this).prop("checked").toString());
});
});
P.S. Your JSFiddle didn't work at all because you didn't include jQuery, your scripts were in the wrong section, and you have to reference bootstrap etc as external resources - the inline links you provided were pointing to local resources which don't exist in a JSFiddle environment. I've fixed that for you, plus updated it so it works as you intend:
https://jsfiddle.net/mttkchfc/4/
i've been trying to change the color of the "balls" of the rangeSlider component of Kendo. I only changed both ball-color but it's the same. I need diferent color for each one. I thought there's something I can do in the html code
<div id="rSlider">
<input />
<input />
</div>
generating some class in css to make each input diferent from the other, but I don't know how to do that.
If you want to have different css foreach "ball" you can achieve it using css:
.k-draghandle:first-of-type
{
background-color:#234;
}
.k-draghandle:last-of-type
{
background-color:#e23;
}
http://dojo.telerik.com/EvUHo
I have a website that allows users to create new content and I use javascript as a way to check for spam. If user has javascript turned off how can I hide or disable the post search button
<input type="submit" name="submitmee" id="creatingpost" value="Post" />
Is there a combination of if statements or noscripts that I can use. I have seen some examples online but they all redirect user, im trying to do something like
if(javascript== off)
{
/* please turn on javascript */
}
else
{
/* show button */
}
You could just use a noscript tag, in your head that is only loaded when javascript is disabled.
HTML
<noscript>
<style type="text/css">
#creatingpost {
display: none;
}
#noJsBanner
{
display: block;
}
</style>
</noscript>
Check this demo with JavaScript disabled.
Why not show the "no JS" version by default and toggle it with JavaScript (that will obviously only run if JS is enabled)?
HTML:
<div class="js-show">
<input type="Submit" value="Go!" />
</div>
<div class="js-hide">
<p>Please switch JavaScript on.</p>
</div>
CSS:
.js-show
{
display: "none";
}
JavaScript (jQuery):
$(function() {
$('.js-hide').hide();
$('.js-show').show();
});
Fiddle.
Alternatively, you could place a "no-js" class on the html element and swap it for "js" on document.ready, then style things with these classes accordingly.
Either of these approaches gives you a flexible way of creating JS-free alternatives for features across your entire site with only a couple of lines of code.
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.