Develop Reference

Multi theme website

I want to change the color of the whole website when I click on a button. This will remain whenever I do not change. If I go to another page, the color should remain the same as what I previously selected.
E.g. https://india.gov.in/
In the top header, when select the color black, whole website will be black until we do not change. Same I want functionality.
I have done to change the color on current but not wholw page. When I go to another page default colors is coming.
<script>$(document).ready(function () {
$('#demo-wrapper ul li').on('click', function () { var path = $(this).data('path');$('#color-switcher').attr('href', path); });
}); </script>
<ul class="dropdown-menu multicolors-name">
<li data-path="Content/theme/assets/admin/css/custom_website.css‌​">
Green</li><li data-path="Content/theme/assets/admin/css/blue.css"><a href="#" >Blue</a>
</li>
</ul>

A way to do this, get a master.css file. Inside this file you can import your other css files. Like this:
#import 'header.css'
#import 'main.css'
Then you can have another master-theme2.css where you would import other css files. The way to change your master.css file is like this:
https://stackoverflow.com/a/22445820/4673847
For keeping the theme per page, you should use sessions or cookies

The easiest way to do this is with help of some css preprocessor for example LESS. Then you can loop over prepared color schema setting:
.generate-widget-colors(#list) {
.iter(length(#list));
.iter(#index) when (#index > 0) {
.iter(#index - 1);
#item: extract(#list, #index);
#key: extract(#item, 1);
#color: extract(#item, 2);
.color-schema-#{key} {
color: #color;
}
.background-color-schema-#{key} {
background-color: #color;
}
div.connect-container.wizard-schema-#{key} > div > div > div > h3 {
color: #25414c;
}
div.connect-container.wizard-schema-#{key} .widget-icon {
color: #Green;
}`
}
}
.generate-widget-colors(#WidgetColors);
This is my own example when I pass the color(key) value into this loop from my backend and all my widgets get new colors. And for saving the schema you can use browsers local storage for example or if you have an authentication then ofc store user schema in db

in layout apply this jquery. Get the selected color value and apply it here.
window.jQuery("#ButtonId").click(function ()
{
window.jQuery('#Layoutid').css("color", "selectedcolor");
});

You can make use of HTML5 local storage or cookies to achieve it. You need to store the selected color and then retrieve it on window load.
I have created a working fiddle based on HTML 5 local storage. Just select a color and reload the fiddle, the background color will remain the same as you selected.
You can switch CSS files with something like this.
<span class="css-selector" id="style1" data-css="path_to_style1.css">Theme 1</span>
<span class="css-selector" id="style2" data-css="path_to_style2.css">Theme 2</span>
$(".css-selector").click(function() {
$("head link#maincss").attr("href", $(this).data("css")); //where main css is placed in head like <link rel="stylesheet" id="maincss" type="text/css" href="path_to_style1.css">
}
And for simple color switching, you can use this code:
<div class="selector">
<span class="color red" data-color="#990000"></span>
<span class="color green" data-color="#009900"></span>
<span class="color blue" data-color="#000099"></span>
</div>
<div class="content">
India is a "Sovereign, Socialist, Secular, Democratic Republic" with a parliamentary system of government. This section seeks to introduce the Constitution of India, its origin, the Parliament, various Acts and Rules that govern the nation, Documents, Public Notifications, Welfare Schemes and Application Forms to avail them, apart from updates on what’s happening around us. Know the "Who's Who" of the Indian Government and check out a range of such vital information that may help you in your daily life.
</div>
$(document).ready(function(){
var themeColor="#ffffff"; // define default theme color
if(typeof(Storage) !== "undefined") {
if (localStorage.themeColor) {
themeColor = localStorage.themeColor //get stored color
}
$('.content').css('background', themeColor); set stored color as background
}
});
$('.selector .color').click(function(){
themeColor = $(this).data("color");
$('.content').css('background', themeColor); //set selected color as background
if(typeof(Storage) !== "undefined") {
localStorage.themeColor = themeColor; // store selected color
};
});
.color{
display:inline-block;
height:20px;
width:20px;
border-radius:50%;
margin:5px;
cursor:pointer;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
Check it here. https://jsfiddle.net/hcfejaez/3/

Set hidden value via clicking on <a> block

Could you help me with this one please?
If you click on my hosting http://www.gosu.cz and select first image from top|left then it's gonna expand on top of the page with a additional info.
Header
Description
link
Now I need to set hidden value for each image which is defined as:
<li class="item col-xs-12 col-sm-6 col-md-4">
<a href="http://placehold.it/857x712" data-caption="description">
<img src="http://placehold.it/857x712" class="img-responsive" alt="alt" />
</a>
</li>
and when is selected then it's gonna show up at this div which is right below header:
<a href="LINK+KEYWORD">
<div class="least-preview"></div>
</a>
Any ideas how could I do that please? My poor skills in programing includes some basic of html, php but not scripting.
This is how it looks like: http://imgur.com/a/CU30N
Cheers,
Martin

So as David Arce suggested it might be done through alt value.
What I have done is using script at the start and also creating link for search queue:
<script>
$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});
</script>
Thanks to document.ElementById... I was able to set a href value via id to generated link.
<a id="link">
<div class="least-preview"></div>
</a>

I think you can use an tag like this inside the li tag
<input type="hidden" name="Image_details" value="Additional details offf that image">
And then on img onclick="getDetails();"
in js:
function getDetails()
{
div.innerHTML = document.getElementById("Img_details").value;
}
//The code is conceptual, so the idea is to assign the hidden input value to the when an image is clicked or selected

I am not quite sure what you are trying to hide, or what you want your code to do. If you want something to be hidden or visible you can use the visibility property in the css for the element you want to hide.
/* Hides h2 element */
h2 {
visibility: hidden;
}
/* Shows h2 element (default value)*/
h2 {
visibility: visible;
}
Here is the reference here...
http://www.w3schools.com/cssref/pr_class_visibility.asp
In enlightenment to what the question is, you can have an onClick="function()" attribute to your image which will grab whichever value, id, class, etc you have in your new which can be put into a search query by variable. All can be done through a function.

$(document).ready(function() {
$('img').click(function () {
var alt = $(this).attr("alt")
var strLink = "link&Key=" + alt;
document.getElementById("link").setAttribute("href",strLink);
});
});

document.write a new page with a unified font-size across the page

I want to open a new page that has content identical to a div called Div1 in the old page.
In my JavaScript function I have a newWindow variable that is returned by a window.open command, and I write the inner HTML of Div1 into newWindow, and I want every single text within the new page has a font size of 7px. Here is what I wrote:
newWindow.document.write('<html><head><title>Hello World</title>');
newWindow.document.write('</head><body style="font-size:7px">');
newWindow.document.write($('Div1').html());
newWindow.document.write('</body></html>');
The new page renders but since the content in Div1 are splited into 3 fieldsets, only the legends of those fieldsets have their font size changed to 7px, everything within the fieldsets still has default font size (which is approximately 11px). How to change every text in the new page to 7px? I can document.write a link to a new stylesheet for the new page but I prefer inline styling. Thanks.
Old page (ASP.net):
<div id="Div1" runat=server>
<fieldset>
<legend class="LLegends"> Header </legend>
<asp:FormView ID="FormView1" runat="server">
contents that I want to be 7px in the new page
</asp:FormView>
</fieldset>
<!-- other 2 fieldsets with the same set up -->
</div>
Class LLegends (only class of elements that has CSS style)
.LLegends {font-size: large;}

You can try this snippet. Add your actual styles, then append them to the document with your other HTML.
SO is preventing the new window from opening, so try this url: http://output.jsbin.com/sobewavagi
(function(undefined) {
/**
*
*/
'use strict';
function addStyleOnOpen() {
var style,
stylesheet,
pageTitle = 'my title',
prnt = open();
style = document.createElement("style");
style.setAttribute('media', 'all');
style.setAttribute('type', 'text/css');
style.setAttribute('rel', 'stylesheet');
style.appendChild(document.createTextNode(""));
prnt.document.head.appendChild(style);
stylesheet = style.sheet;
stylesheet.insertRule('body {width: 100% !important;margin: 0 !important;padding: 0 !important;line-height: 1.45;font-family: "Open Sans", sans-serif;color: #999;background: none;font-size: 14pt;}', 0);
stylesheet.insertRule('#new-window {color: green;}', stylesheet.cssRules.length);
stylesheet.insertRule('h1 {color: red;}', stylesheet.cssRules.length);
prnt.document.title = pageTitle;
prnt.document.body.insertAdjacentHTML('afterbegin', '\n <h1>Heading</h1> \n <p id="new-window">Hello World!</p>');
}
document.getElementById('new-window').addEventListener('click', addStyleOnOpen, false);
}(undefined));
Open

Cannot do inline styling on the new page's body but I figure I can change
newWindow.document.write('</head><body style="font-size:7px">');
To:
newWindow.document.write('<style>.body {"font-size:7px"}</style></head><body>');

Hidden forms shown when pages load

Hidden form element shown when page load. i tried using this code but that hides after the pages load too
here is my html/PHP code
<div id="i1" class="hidden1" style="position:relative; overflow:hidden;">
<?php
$record = mysqli_query($con,"SELECT DISTINCT Tread_Design FROM db WHERE Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='HF3' or Tread_Design='HF4' or Tread_Design='HF2' or Tread_Design='I3' or Tread_Design='I1' or Tread_Design='R3'");
while ($row = mysqli_fetch_array($record))
{
echo "<input type='checkbox' name='".$row['Tread_Design']."' value='".$row['Tread_Design']."'>"." "
.$row['Tread_Design']." ";
}
?>
Here is the page
<script type="text/javascript">
$(function() {
$('#i1').hide();
$('#mylist').change(function () {
if ($('#mylist').val() == "TURF") {
$('#i1').show();
$('#i1').show();
} else {
$('#i1').hide();
$('#i1').hide();
}
});
});
I USE THE CODE BELOW IT HIDES AFTER THE PAGE LOADS TOO
div.hidden
{
display: none
}
$(document).ready(function() {
$("div#extraControls").removeClass("hidden");
});

you should put the CSS at first in head ... so they will load first
then the html ... so the browser will not show the hidden forms
then the JS ... at the footer so it will load last and remove the classes
btw in your CSS to are point to wrong class name . it should be hidden1
div.hidden1
{
display: none
}

//change your css
div#extraControls
{
display: none;
}

You are referring the wrong class name.
The hiding property is set to class hidden and you have applied class hidden1.
It should be:
<div id="i1" class="hidden" style="position:relative; overflow:hidden;">
<!-- Observe the class name, you have given display:none property to class hidden not hidden1-->
Basically, you need to hide some of the elements at page load.
Later they can be shown.
So, use display:none property.
This will load elements on page load but hide them.
This is very simple and no javascript/jQuery needed.

Your container's using hidden1 instead of hidden as defined in your css. change either the class of the container or the class name in the style.

SPA how to swap content

Cheers! Building a webpage from scratch using tornado io. I have different graphs and wanted to use some of the single page app magic. So I thought do a div and swap out the content doing:
<div id="chartType"> Chart goes here</div>
Load Graph
<div id="maincontent"></div>
<script type="text/javascript">
$('#addContent').click(function(){
$("#maincontent").replaceWith("{% include graph.html %}");
return false;
});
</script>
HTML does not seem to like the {% include graph.html %}
If I do something like $("#maincontent").load(/path/to/file) it keeps adding the content and not swapping it.
My question is how to swap the div content with different {% includes %}?
Is there a better way of doing this (Am I misusing the %includes% )?
Many thanks

I believe that $("#maincontent").load(/path/to/file); should work. I think you may be running afoul of caching, and so you may need to do this:
var setMainContent = function(path) {
$.get({
url: path,
cache: false
}, function(data){
$("#maincontent").html(data);
});
};
And then call your function in your click handler:
setMainContent(/path/to/file);

What I usually do with very simple content swaps is use css to handle it.
For instance, if I have the content I want to show originally in Div A and the content I want to replace it with in Div B, by default I will have Div A set to 'display: block' and Div B set to 'display: none'. Then, to swap the content, use javascript to set Div A to 'display: none' and Div B set to 'display: block'.
var divA = document.getElementById('divA');
var divB = document.getElementById('divB');
function hideDivA() {
divA.style.display = 'none';
}
function showDivB() {
divB.style.display = 'block';
}
function swapContent() {
hideDivA();
showDivB();
}
#divA {
background: #74CFAE;
color: #000;
display: block;
}
#divB {
background: #555;
color: #fff;
display: none;
}
<div id='content-wrap' onclick='swapContent()'>
<div id='divA'>Div A (initially visible content)</div>
<div id='divB'>Div B (initially not visible content)</div>
</div>

Depending on your use case, you can also create a template and assign that into your DOM.
For instance.
<div id="runtime_area"></div>
<script type="text/html" id="page1">
<b>Banner</b>
</script>
Then later
document.getElementById("runtime_area").innerHTML = document.getElementById("page1").innerHTML