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();
}
});
Related
I use Divi Theme in Wordpress.
I have sections that I gave IDs.
I have a select, and for each option value I use the sections IDs.
I want show one section by changing the select option and hide the other section that is showed.
Here is the select :
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
Here is the javascript :
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
if (x.style === "display:none;") {
x.style = "display:block";
} else {
x.style = "display:none;";
}
}
</script>
Could you tell my why it's not working ?
thanks
Caroline
In your code, you are trying to style a string value x.style
If we see closely var x = document.getElementById("mySelect").value; this is returning a string value not an html element. But yes we can use this string value to get html element and make it visible and hide other.
function myFunction() {
var selectElement = document.getElementById("mySelect");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "none") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "none";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
<select name="years" id="mySelect" onchange="myFunction()">
<option value="">TOUTES LES ANNÉES </option>
<option value="section2020">2020</option>
<option value="section2019">2019</option>
<option value="section2018">2018</option>
<option value="section2017">2017</option>
<option value="section2016">2016</option>
<option value="section2015">2015</option>
</select>
<div id="section2020" class='section' style='display:none'><h1>2020</h1></div>
<div id="section2019" class='section' style='display:none'><h1>2019</h1></div>
<div id="section2018" class='section' style='display:none'><h1>2018</h1></div>
<div id="section2017" class='section' style='display:none'><h1>2017</h1></div>
<div id="section2016" class='section' style='display:none'><h1>2016</h1></div>
<div id="section2015" class='section' style='display:none'><h1>2015</h1></div>
So thank you so much #Dupinder Singh. After playing with the code, I got it to work on my DIVI theme.
However, since you can't put in-line CSS styles on a Section in DIVI, I did the following. I went under each section and under the Advanced Tab -> Custom CSS -> Main Content = display: none;
Then since each section appeared like so I changed the javascript to the following:
<script>
function myFunction() {
var selectElement = document.getElementById("serviceoptions");
var selectedValue = selectElement.value;
var selectedElement = document.getElementById(selectedValue);
if (selectedElement.style.display === "") {
var elements = document.getElementsByClassName('section');
for(var i = 0; i < elements.length; i++){
elements[i].style.display = "";
}
selectedElement.style.display = "block";
}
else {
selectedElement.style.display = "none";
}
}
</script>
The following was my HTML for the Selection Menu:
<p style="text-align: center;">
<Select id="serviceoptions" onchange="myFunction()">
<option value="">Choose a Service</option>
<option value="behavior">Behavior Resources</option>
<option value="case">Case Management Resources</option>
<option value="education">Education Resources</option>
<option value="speceducation">Specialized Education Resources</option>
<option value="afterschool">After School Programs</option>
<option value="kidhealth">Children's Health Resources</option>
<option value="kidoralhealth">Children's Oral Health Resources</option>
<option value="homevisit">Home Visiting Resources</option>
<option value="nutrition">Nutrition Resources</option>
<option value="parent">Parent Resources</option>
<option value="transpo">Transportation Resources</option>
<option value="kidcare">Child Care Resources</option>
</select>
</p>
You can see it in action here: first1thousand.com/resources
I have two comboboxs and one button in multiple divs. I need to enable the button when the two comboboxs change. This is what I have currently as a Fiddle:
$size=$('select[name=size]');
$gender=$('select[name=gender]');
var op='';
var ep='';
$size.change(function() {
op =$(this).val();
myFunction(op,ep);
});
$gender.change(function() {
ep =$(this).val();
myFunction(op,ep);
});
function myFunction(p1, p2) {
if(p1 !='' && p2!='') {
$('.nextbutton1').prop('disabled',false);
} else {
$('.nextbutton1').prop('disabled', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="someclass">
<img src="onepic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select id="size" name="size">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select id="gender" name="gender">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1">button</button>
</div>
but when I change the div, the button from the second div is already enabled. How can I reset the variables from the script?
Container
- Combobox1
- Combobox2
- NextButton
Container
- Combobox1
- Combobox2
- NextButton
Loop through Containers and set event listeners for Comboboxes inside each Container separately
$('.someclass').each(function () {
setOnComboboxChange($(this));
});
function setOnComboboxChange($container) {
// Use var keyword to create functional scope variables
var $size = $container.find('select[name=size]');
var $gender = $container.find('select[name=gender]');
var $nextBtn = $container.find('.nextbutton1');
var op = '';
var ep = '';
$size.change(function () {
op = $(this).val();
myFunction(op, ep);
});
$gender.change(function () {
ep = $(this).val();
myFunction(op, ep);
});
function myFunction(p1, p2) {
if (p1 != '' && p2 != '') {
$nextBtn.prop('disabled', false);
} else {
$nextBtn.prop('disabled', true);
}
}
}
Demo on Codepen
just another solution,
you can assign class to each controls and then attach change event to the dropdowns,
and then find the button within parent container using jquery
HTML:
<div class="someclass">
<img src="onepic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
<div class="someclass">
<img src="twopic.png">
<select class="size myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<select class="gender myFunction">
<option value=""></option>
<option value="1">one</option>
<option value="2">two</option>
</select>
<button class="nextbutton1" disabled>button</button>
</div>
JS:
$(document).ready(function(){
$(".myFunction").change(function(){
var $this = $(this);
var $container = $($this.parent(".someclass"));
var $next = $($container.find(".nextbutton1"));
var $size = $($container.find(".size"));
var $gender = $($container.find(".gender"));
var p1 = $size.val();
var p2 = $gender.val();
if(p1 !='' && p2!='') {
$next.prop('disabled',false);
} else {
$next.prop('disabled', true);
}
});
});
fiddle: https://jsfiddle.net/xwgz3doj/
I have a function in my main.js needs to wait until some options selected on select tag. According to that, I will update the element. I tried to do it with addlistenerevent, but I could not succeed it. Any suggestions? Am I doing wrong?
var test = function() {
const langOptions = {
dummy: 0,
one: 5,
two: 8,
three: 2
};
var unit_1 = 1;
var selectSource ="";
var selectTarget = "";
var section = document.getElementById("unit");
var span_1 = '<span>Unit : </span>';
section.insertAdjacentHTML("beforeend", span_1);
var span_2 = '<span id= "span_2">' + unit_1 +'</span>';
section.insertAdjacentHTML("beforeend", span_2);
document.getElementById('source-lang').addEventListener('change', function() {
selectSource = $('source-lang').find('select').val();
for (const key of Object.keys(langOptions)) {
if (key === selectSource || key === selectTarget) { unitPrice *= langOptions[key];}
}
var element = document.getElementById('span_2').innerHTML = unit_1;
});
};
test();
<div id="langs">
<section class="container">
<div class="dropdown">
<select id="source-lang" style="background-color:#5e3080" name="source-lang">
<option value="">Select</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="dropdown">
<select id ="target-lang" style="background-color:#5e3080" name="target-lang">
<option value="">Select</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
</div>
<div class="dropdown">
<div id="unit"></div>
</div>
</section>
</div>
I think that what you are looking for, is the onchange Event
function selectOne() {
const id = 'selectOne';
console.log(id, document.getElementById(id).value);
}
document.getElementById('selectTwo').addEventListener("change", function() {
console.log(this.id, this.value)
});
<p>Select One</p>
<select id="selectOne" type="text" onchange="selectOne()">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<!-- Or using addEventListener -->
<p>Select Two</p>
<select id="selectTwo" type="text">
<option value=a>a</option>
<option value=b>b</option>
<option value=c>c</option>
</select>
Use onchange Event
<select id="source-lang" style="background-color:#5e3080" name="source-lang" onchange="test()">
<select id ="target-lang" style="background-color:#5e3080" name="target-lang" onchange="test()">
I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?
You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!
You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out
there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>
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>