Remembering colour layout of page - javascript

Using cookies, I want it to remember the colour layout of the page. (So, if they set the gallery one color and the body background another color, it will save that on refresh. But it doesn't seem to be working.
Here's my JavaScript code:
$(document).ready(function() {
if (verifier == 1) {
$('body').css('background', $.cookie('test_cookie'));
}
if (verifier == 2) {
$('#gallery').css('background', $.cookie('test_cookie'));
}
if (verifier == 3) {
$('body').css('background', $.cookie('test_cookie'));
$('#gallery').css('background', $.cookie('test_cookie'));
}
$('#set_cookie').click(function() {
var color = $('#set_cookie').val();
$.cookie('test_cookie', color);
});
$('#set_page').click(function() {
$('body').css('background', $.cookie('test_cookie'));
var verifier = 1;
});
$('#set_gallery').click(function() {
$('#gallery').css('background', $.cookie('test_cookie'));
var verifier = 2;
});
$('#set_both').click(function() {
$('body').css('background', $.cookie('test_cookie'));
$('#gallery').css('background', $.cookie('test_cookie'));
var verifier = 3;
});
});
and my HTML:
<body>
<div id="wrap">
<div id="header">
<img src="media/header.png" alt="Community Header" />
</div>
<p>Please select a background color for either the page's background, the gallery's background, or both.</p>
<select id="set_cookie">
<option value="#1d375a" selected="selected">Default</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="darkblue">Dark Blue</option>
<option value="darkgreen">Dark Green</option>
<option value="darkred">Dark Red</option>
<option value="fuchsia">Fuchsia</option>
<option value="green">Green</option>
<option value="grey">Grey</option>
<option value="#d3d3d3">Light Grey</option>
<option value="#32cd32">Lime Green</option>
<option value="#f8b040">Macaroni</option>
<option value="#ff7300">Orange</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="#0fcce0">Turquoise</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
</select>
<input type="button" id="set_page" value="Page's Background" /><input type="button" id="set_gallery" value="Gallery's Background" /><input type="button" id="set_both" value="Both" />
</div>
</div>
</body>
</html>
Here's an example jsFiddle: http://jsfiddle.net/hL6Ye/

The problem you have is
if (verifier == 2) {
$('#gallery').css('background', $.cookie('test_cookie'));
}
$('#set_gallery').click(function() {
$('#gallery').css('background', $.cookie('test_cookie'));
var verifier = 2;
});
in your code you are setting the test_cookie to the background color and the above verifier variable to 2.
From your code you expect verfier to be 2 when the page is loaded. This is not true, javascript variables are not persistent across sessions. We would not need cookies if it did, Would we ?.
Your approach should be two different cookies. page_background and gallery_background. When the page loads you should check the values of these cookies and set the color accordingly. If the cookies are not set, the user never bothered to save them.

Full solution here: http://zequinha-bsb.int-domains.com/index.html
I could not make it work in jsfiddle.net
Here is a paste of it (too much, maybe):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
/* http://www.quirksmode.org/js/cookies.html */
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
var date = new Date();
date.setTime(date.getTime()+(-1));
var expires = "; expires="+date.toGMTString();
document.cookie = name+"="+""+expires+"; path=/";
}
/************************** quirksmode.org *****/
function setBGColor() {
alert('Background color set!');
var theBGColor = $("#setCookie").val();
$('body').css('background-color',theBGColor);
createCookie('MYSITEPGBG',theBGColor,365);
}
function setGLColor() {
alert('Gallery background color set!');
var theGLColor = $("#setCookie").val();
$('#gallery').css('background-color',theGLColor);
createCookie('MYSITEGLBG',theGLColor,365);
}
$(document).ready(function() {
var bgCookie = readCookie('MYSITEPGBG');
var glCookie = readCookie('MYSITEGLBG');
var bgVerifier = true;
var glVerifier = true;
if (bgCookie != undefined) {
bgVerifier = false;
$('body').css('background-color',bgCookie);
}
if (glCookie != undefined) {
glVerifier = false;
$('#gallery').css('background-color',glCookie);
}
if (bgVerifier || glVerifier)
$('#giveChoices').toggle()
else $('#allowChange').toggle();
});
</head>
<body>
<div id='gallery' style='float:left; width:400px; height:200px; display:block; ' >
blah blah clah blah blah blah albh
</div>
<div id='giveChoices' style='display:none; ' >
<p style='clear:both; margin-top:20px; ' >
Please select a background color for either the page's background, the gallery's background, or both.
</p>
<select id="setCookie">
<option value="#1d375a" selected="selected">Default</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="brown">Brown</option>
<option value="darkblue">Dark Blue</option>
<option value="darkgreen">Dark Green</option>
<option value="darkred">Dark Red</option>
<option value="fuchsia">Fuchsia</option>
<option value="green">Green</option>
<option value="grey">Grey</option>
<option value="#d3d3d3">Light Grey</option>
<option value="#32cd32">Lime Green</option>
<option value="#f8b040">Macaroni</option>
<option value="#ff7300">Orange</option>
<option value="pink">Pink</option>
<option value="purple">Purple</option>
<option value="red">Red</option>
<option value="#0fcce0">Turquoise</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
</select>
<input type='button' onclick='setBGColor(); ' value="Page's Background" />
<input type='button' onclick='setGLColor(); ' value="Gallery's Background" />
<input type="button" onclick='setBGColor(); setGLColor(); ' value="Both" />
</div>
<div id='allowChange' style='clear:both; float:left; display:none; '>
<input type='button' onclick="$('#allowChange').fadeOut('slow'); $('#giveChoices').fadeIn('slow'); " value='Change Colors' />
</div>
</body>
</html>

Related

Using IF statements in a form to narrow choices down

I basically want to limit my choices in my form so that when a car is chosen as well as the transmission only certain colors may appear. I have created the form. The problem is creating the code in the Javascript file. I don't know how to make it so that if Car 1 is chosen as well as Automatic then for example only Black and blue appear as options. Im relatively new to coding and any help would be appreciated.
Thanks
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic','1');
make.options[make.options.length] = new Option ('Manual','2');
}
if (Car =="2" ) {
make.options[make.options.length] = new Option('Manual','2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic','3');
}
}
Is this what you want:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission();">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" onchange="Transmission();">
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color" onchange="ChoicesMade();">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
<div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
</form>
<script type="text/javascript">
function Transmission() {
var Car = document.CarConfigurator.Car_make.value;
var make = document.CarConfigurator.A_M.value;
var color = document.CarConfigurator.Color;
color.options.length = 0;
if (Car == "1" && make == '1') {
color.options.add(new Option('Black', '1'));
color.options.add(new Option('Blue', '2'));
}
else if(Car == '2' && make == '1')
{
color.options.add(new Option('Red', '3'));
color.options.add(new Option('White', '4'));
}
ChoicesMade();
}
function ChoicesMade()
{
var form = document.CarConfigurator;
var car = form.Car_make.value;
var make = form.A_M.value;
var color = form.Color.value;
if(car != ' ' && make != '' && color != '')
{
var imageContainer = document.querySelector('#imageContainer');
imageContainer.style.display = 'block';
}
}
</script>
</body>
</html>
You can use objects in JavaScript and then loop through each array in object to change options. For example
var cars = {
"Audi_RS6":{
"name":"Audi RS6",
"Automatic":["color_1","color_2"],
"Manual":["color_1","color_2"]
},
"BMW_M4":{
"name":"BMW M4",
"Manual":["color_1","color_2"]
},
"Mercedes_C63_AMG":{
"name":"Mercedes C63 AMG",
"Automatic":["color_1","color_2"]
}
};
values can be accessed like this
var result = cars.Audi_RS6.Manual[1];
Here you go Duncher, this code does exactly what you want
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="configurator.js"></script>
</body>
</html>
And the JavaScript:
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
You will have to make a few tweaks to get your other car & trans combinations working how you want them to (i.e. displaying only the colors you want) by adding more if else statements in the transmission() method but this should get you on your way. This is using jQuery by the way.
Screen shot

Make image change with selecting different option in dropdown - Javascript / Html

I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.
HTML
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>
Javascript
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.
In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.
you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.
Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more
$("#car").change(function () {
transmission();
selection();
});
$("#trans").change(function () {
transmission();
selection();
});
$("#color").change(function () {
selection();
});
var cars = {
car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
function selection(){
if ($("#car").val() && $("#trans").val() && $("#color").val()) {
var carVal = $("#car").val();
var transVal = $("#trans").val();
var colorVal = $("#color").val();
var combineVal = carVal+transVal+colorVal;
//var imageLink = combineVal+".jpg";
//$("#showImg").attr("src", imageLink);
//$("#showImg").attr("alt", imageLink);
//console.log(cars[combineVal]);
var inputDivHTML = "";
var car = cars[combineVal];
for(i in car){
inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>";
}
$(".imageHere").html(inputDivHTML);
}
}
img.showImg{
width:150px;
height:70px;
margin:10px 3px;
border:1px solid red;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<div class="imageHere">
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>

javascript Display children with Nav link when click

I have this code, and when I click on story or career, I want it to get the h1, and also the div and display the paragraph or information for that link. So far it's only displaying the h1, and not the div or other information associated with that link.
$(document).ready(function () {
var fontFamily, fontSize, fontWeight;
$("section h1 a").slice().hide().first().show();
$("section article").slice().hide().first().show();
$('#nlist a').on('click', function(e) {
e.preventDefault();
var $link = $(this);
var href = $link.attr('href');
href = href.substring(1);
$('section h1 a').each(function() {
var $a = $(this);
var id = $(this).attr('id').toLowerCase();
if (id === href) {
$a.show();
} else {
$a.hide();
}
});
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
$(document).on('click', 'a', function(e){
var hide = document.getElementById("toolsb");
e.preventDefault;
if($(this).text() === "Add Though") {
$(this).text("Hide Though Bar");
hide.style.display = "none";
$(document).find($(this).attr('data-target')).fadeIn(2000).show();
}
else if ($(this).text() === "Read full story") {
$(this).text("Hide Paragraph");
hide.style.display = "none";
$(document).find($(this).attr('data-target')).fadeIn(1800).show();
}
else if ($(this).text() === "Hide Though Bar") {
$(this).text("Add Though");
hide.style.display = "block";
$(document).find($(this).attr('data-target')).slideDown().hide();
}
else if ($(this).text() === "Hide Paragraph"){
$(this).text("Read full story");
hide.style.display = "block";
$(document).find($(this).attr('data-target')).slideUp().hide();
}
});
$(document).on("click", "#chnage", function() {
var selectP = document.getElementById("paragraph");
var getValue = selectP.value;
var getParagraph;
var selectFF = document.getElementById("fFamilys");
fontFamily = selectFF.value;
var selectFS = document.getElementById("fSize");
fontSize = selectFS.value;
var selectFW = document.getElementById("fWeight");
fontWeight = selectFW.value;
switch (getValue) {
case "first": {
document.getElementById("p1").style.fontFamily = fontFamily;
document.getElementById("p1").style.fontSize = fontSize + "px";
document.getElementById("p1").style.fontWeight = fontWeight;
break;}
case "second":
document.getElementById("p2").style.fontFamily = fontFamily;
document.getElementById("p2").style.fontSize = fontSize + "px";
document.getElementById("p2").style.fontWeight = fontWeight;
//getParagraph = $("p2").val();
break;
case "third":
document.getElementById("p3").style.fontFamily = fontFamily;
document.getElementById("p3").style.fontSize = fontSize + "px";
document.getElementById("p3").style.fontWeight = fontWeight;
break;
default:
}
// if ($(this).val() === "Italics") {
// $(this).val("UnItalics");
// document.getElementById("textarea").style.fontStyle = "italic";
// }
// else {
// $(this).val("Italics");
// document.getElementById("textarea").style.fontStyle = "normal";
// }
});
$(function () {
$("[id^=font]").on("change", function () {
$(".textarea").css(this.id, /\d/.test(this.value) ? this.value +
"px" : this.value);
});
});
$(document).on("click", "#itali", function() {
if ($(this).val() === "Italics") {
$(this).val("UnItalics");
document.getElementById("textarea").style.fontStyle = "italic";
}
else {
$(this).val("Italics");
document.getElementById("textarea").style.fontStyle = "normal";
}
});
document.getElementById("delete").onclick = dele;
document.getElementById("before").onclick = before;
document.getElementById("after").onclick = after;
});
var dele = function () {
$("#stor").find("p").last().remove();
};
var before = function () {
$("#fParagraph").append("<p>" + $("#textarea").val() + "</p>");
$("textarea").value("");
};
var after = function () {
$("#lParagraph").append("<p>" + $("#textarea").val() + "</p>");
$("textarea").value("");
};
<!DOCTYPE html><meta charset="UTF-8">
<title>Life Story</title>
<link rel="stylesheet" href="style/Style.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jScript/javaScript.js"></script>
</head>
<body>
<div id="ndiv">
<nav id="nlist">
Story
Career
Education
Contact
</nav>
</div>
<section>
<h1> <a id="store">Coming To United State</a></h1>
<article>
<div id = "stor">
<span id ="story"></span>
<span class = "textarea" id ="fParagraph"> </span>
<p id= "p1">But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.
</p>
<p id = "p2"> Gates’s father could have spoken out, when Mr. Wilson did not addressed him properly at the Cut-Rate Drug Store by called he George. Addressed someone in-properly is an insult in today world, but we all know the old history, back in the day, people dealt with racial differences by drawing a strict line between white people and black people.</p>
<p id = "p3"> Wilson started addressed he George because of the incident that happen between them. I remember When I first came to the United sated, and I was playing for my high school, Ganger. I was a running back, one day, we were practicing and one of my teammate call me black monkey. <a id ="full" href="#" data-target ="#fullStory"
style="text-decoration: none">Read full story</a>
</p>
<span class = "textarea" id ="lParagraph"> </span>
<div class= "tools" id="toolsb">
<p>Make Changes to Paragraph</p>
<select id="paragraph" name="fonts">
<option value="first">First Paragraph</option>
<option value="second">Second Paragraph</option>
<option value="third">Third Paragraph</option>
</select>
<select id="fFamilys">
<option value="arial">Arial</option>
<option value="arial black">Arial Black</option>
<option value="book antiqua">Book Antiqua</option>
<option value="geneva">Geneva</option>
<option value="georgia">Georgia</option>
<option value="helvetica">Helvetica</option>
<option value="lucida sans unicode">Lucida Sans Unicode</option>
<option value="lucida grande">Lucida Grande</option>
<option value="palatino">Palatino</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="tahoma">Tahoma</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="times">Times</option>
<option value="times new roman">Times New Roman</option>
<option value="verdana">Verdana</option>
</select>
<select id = "fSize">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</select>
<select id="fWeight" name="fonts">
<option value="bold">Bold</option>
<option value="normal">normal</option>
</select>
<input type= "button" id = "i" value = "Italics"><br><br>
<input type= "button" id = "chnage" value = "Make Change">
<input type= "button" id = "dLastP" value = "Delete Last Paragraph">
</div>
</div>
<div class = "hide" id = "fullStory">
<p>I lived in Africa for sixteen years, but the four years I have spent in United States
have taught me more the previous sixteen years I did in Africa, so much more.
SomDue to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectivelytes, the better I will become.</p></div>
<div class = "thougharea" id = "addNote">
<div class= "style">
<select class = "fontFamily" id="fontFamily">
<option value="arial">Arial</option>
<option value="arial black">Arial Black</option>
<option value="book antiqua">Book Antiqua</option>
<option value="geneva">Geneva</option>
<option value="georgia">Georgia</option>
<option value="helvetica">Helvetica</option>
<option value="linotype">Linotype</option>
<option value="lucida sans unicode">Lucida Sans Unicode</option>
<option value="lucida grande">Lucida Grande</option>
<option value="palatino">Palatino</option>
<option value="sans-serif">Sans Serif</option>
<option value="serif">Serif</option>
<option value="tahoma">Tahoma</option>
<option value="trebuchet ms">Trebuchet MS</option>
<option value="times">Times</option>
<option value="times new roman">Times New Roman</option>
<option value="verdana">Verdana</option>
</select>
<select class ="fontSize" id = "fontSize">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
<option value="26">26</option>
<option value="28">28</option>
<option value="30">30</option>
</select>
<select class ="fontWeight" id = "fontWeight">
<option value="bold">Bold</option>
<option value="normal">Normal</option>
</select>
<input type= "button" id = "itali" value = "Italics">
</div>
<textarea class ="textarea" id= "textarea">Enter some text</textarea>
<div class= "buttions">
<input type= "button" id = "before" value = "Append At B">
<input type= "button" id = "after" value = "Append At A">
<input type= "button" id = "delete" value = "Delete Last Paragraph">
</div>
</div>
<div></div>
<div class ="add">
<nav id="thing">
<a id ="tools" href="#" data-target ="#addNote" style="text-decoration: none">Add Though</a>
</nav>
</div>
</article>
<h1> <a id="career">Career and Opportunity</a></h1>
<article>
<div id ="edu">
<span id ="caree"></span>
<p>Hav
has taught me a negative can turn into a positive experience. I immigrated
</article>
</section>
</body>
</html>
This is what I have so far. But it's only selecting the h1 element.
$("section h1 a").slice().hide().first().show();
$("section article").slice().hide().first().show();
$('#nlist a').on('click', function(e) {
e.preventDefault();
var $link = $(this);
var href = $link.attr('href');
href = href.substring(1);
$('section h1 a').each(function() {
var $a = $(this);
var id = $(this).attr('id').toLowerCase();
if (id === href) {
$a.show();
} else {
$a.hide();
}
});
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
console.log(text);
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
I was hopping someone can help me out
> The problem is coming from here. It's not selecting the article with
the div.
$('section article').each(function () {
var isTrue = false;
$(this).children().each(function () {
var text = $(this).text().toLowerCase();
console.log(text);
if (text.indexOf(href) !== -1) {
isTrue = true;
}
});
if (isTrue) {
$(this).show();
} else {
$(this).hide();
}
isTrue = false;
});
});
You appear to be looking for the href in the article text but the href is the previous element to the article.
Does this fix the problem?
$('section article').each(function () {
var h1Link = $(this).prev().attr("id");
if(h1Link==href){
$(this).show();
}else{
$(this).hide();
}
});

How to Merge Java scripts to change font size and font color By getting User Input

I have written separate Javascript to change font color and font size. How to merge it to make the change of both simultaneously to the same font.
`enter code here`
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeFont (this);" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<span id="fontTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeFont (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}
</script>
</body>
</html>
Another one is font color change:
<!DOCTYPE html>
<html>
<body>
</form>
<select name="color" type="text" onchange="changeBackground(this);" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="coltext">This text should have the same color as you put in the text box</span>
</form>
<script>
function changeBackground(obj) {
document.getElementById("coltext").style.color = obj.value;
}
</script>
</body>
</html>
How to merge these two Java scripts? Please help me.
Try this
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeBackgroundFont(this,'font');" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="fontbackgroundTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeBackgroundFont (selectTag,type) {
if(type=="font") {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontbackgroundTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}else{
document.getElementById("fontbackgroundTest").style.color = selectTag.value;
}
}
</script>
</body>
</html>
I did for you enjoy ):

Javascript calculator issue

I have a problem with a script and I don't know how to handle it.
I'm trying to make a simple calculator that displays how much you must pay for a random model. I'm trying to display a different answer depending upon the amount of time and advance chosen in the select menu. The formulas in each if statement does actually work when I simply list the variables outside of if statements displaying each answer in a series of alert boxes, but I'd like to display only the applicable answer.What I am doing wrong?
Escuse my rudimentary JS skills butt I am still a beginner in this domain.Thanks for your time.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calculator</title>
<script script language="javascript" type="text/javascript">
function rata() {
var selection1 = document.getElementsById("model")[0].value;;
var selection2 = document.getElementsById("time")[1].value;;
var selection3 = document.getElementsById("advance")[2].value;;
if(selection2 === "t1" && selection3 === "a1"){
var pay1 = "100 euro";
alert("You must pay" + pay1 + ".");
}
else if(selection2 === "t1" && selection3 === "a2"){
var pay2 = "200 euro";
alert("You must pay" + pay2 + ".");
}
else if(selection2 === "t2" && selection3 === "a1"){
var pay3 = "400 euro";
alert("You must pay" + rata3 + ".");
}
else if(selection2 === "t2" && selection3 === "a2"){
var pay4 = "800 euro";
alert("You must pay" + pay4 + ".");
}
}
</script>
</head>
<body>
<form name="calculator">
Model <br><select name="model" id="model">
<option value="">selectati modelul</option>
<option value="model">Model 1</option>
<option value="model">Model 2</option>
<option value="model">Model 3</option>
<option value="model">Model 4</option>
<option value="model">Model 5</option>
<option value="model">Model 6</option>
<option value="model">Model 7</option>
<option value="model">Model 8</option>
</select><br>
Time <br><select name="time" id="time">
<option value="">select time</option>
<option value="t1">1 year</option>
<option value="t2">2 years</option>
</select> <br>
Advance <br><select name="advance" id="advance">
<option value="" >select advance</option>
<option value="a1" >0%</option>
<option value="a2" >50%</option>
</select> <br>
<input type="button" value="Send" onclick="pay()">
</form>
</body>
</html>
<input type="button" value="Send" onclick="pay()"> <--- this calls "pay()", but your function is called "rata()"
document.getElementsById("model")[0].value; <-- there is no such function, it's not plural, it should be: getElementById
document.getElementById("model")[0].value; will never give you the value of a SELECT. Use this:
var sel1 = document.getElementById("model")
var val1 = sel1[sel1.selectedIndex].value
Since you're getting the value, and all of the values are "model" you will get the same value regardless of what the user chooses.

Categories