Here is the problem:
I have a slideshow containing 3 slides changing after 10 seconds which is generated by plugin so i don't have access to the html file.
<ul>
<li data-index="rs-101">
<li data-index="rs-102">
<li data-index="rs-103">
</ul>
<div class="content1">
content1
</div>
<div class="content2">
content2
</div>
<div class="content3">
content3
</div>
This slider is on the top of the screen and now I want to change the bottom of the screen according to the slides:
if rs-101 is selected: do this
if rs-102 is selected: do that
..
I found this which is not working:
function Content1(){
if ( $('html').attr('data-index') == 'rs-101' ) {
var x1 = document.getElementById("content1");
x1.style.display = "block";
} else {
x1.style.display = "none";
}
function Content2(){
if ( $('html').attr('data-index') == 'rs-102' ) {
var x1 = document.getElementById("content1");
x2.style.display = "block";
} else {
x2.style.display = "none";
}
function Content3(){
if ( $('html').attr('data-index') == 'rs-103' ) {
var x3 = document.getElementById("content1");
x3.style.display = "block";
} else {
x3.style.display = "none";
}
Please advice.
You could use something like this https://stackoverflow.com/a/18311216/9785689 to monitor the list for changes, when it detects a change call a single function changeContent(). If this doesn't work then you need to have a way to listen for the automated changes from the plugin (I would check with the author or the plugin).
function ChangeContent(){
var data = $('html').attr('data-index');
if ( data == 'rs-101' ) {
var x1 = document.getElementById("content1");
x1.style.display = "block";
} else {
x1.style.display = "none";
}
if ( data == 'rs-102' ) {
var x1 = document.getElementById("content1");
x2.style.display = "block";
} else {
x2.style.display = "none";
}
if ( data == 'rs-103' ) {
var x3 = document.getElementById("content1");
x3.style.display = "block";
} else {
x3.style.display = "none";
}
}
Related
I'm trying to make a toggling function with js to hide all comments with its children.
this is a comment in html:
<div>
<a onclick="return toggle(4 /*id*/, 7 /*lft*/, 10 /*rgt*/)" href="javascript:void(0)">[-]</a>
<div id="com4" class="md" value="7-10">yellow</div>
</div>
⬆ this comment has a child value="8-9", I want to hide the comment with id="com4" and it child.--> this is the question how to find the id where the comments where it value="8-9"
and this is my js:
function toggle(id, lft, rgt) {
var kids = (rgt - lft - 1) / 2;
if (kids >= 1) {
var element = document.querySelectorAll("div.md").getAttribute('value');
var low = Number(element.split('-')[0]);
var high = Number(element.split('-')[1]);
if (low > lft && high < rgt) {
var x = //get the ids of these elements where: low>lft && high<rgt
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
} else {
var x = document.getElementById("com" + id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
return false;
}
I'm trying to find all ids of the children ⬆:
if (low > lft && high < rgt) {
var x = //get the ids of these elements where: low>lft && high<rgt
here's an image to understand how my comment system works:
nested sets
thanks in advance, and I'm sorry for my bad english ;)
Please take a look at these codes:
function toggle(id, lft, rgt) {
var kids = (rgt - lft - 1) / 2;
if (kids >= 1) {
var element = document.querySelectorAll("div.md#com" + id)[0].getAttribute('value');
var low = Number(element.split('-')[0]);
var high = Number(element.split('-')[1]);
for(var i = low + 1; i <= high - 1; i += 1){
var x = document.querySelectorAll("div.md#com" + i)[0]
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
}
}
<div>
<div id="com4" class="md" value="7-10">yellow
<a onclick="toggle(4, 7, 10)" href="javascript:void(0)">[-]</a>
</div>
<div id="com5" class="md">Should not collapse</div>
<div id="com8" class="md">Should collapse</div>
<div id="com9" class="md">Should collapse</div>
<div id="com11" class="md">Should not collapse</div>
</div>
I am trying to cretae an expand/collapse menu using javascript. The structure something like this.
.menu
.subItem
.subItem
this a part of css
ul.menu {
display: none
}
but menu items not expandind from the collapse
this the js file
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle() {
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById(thisMenuName).style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
when I open up chrome developer tools I have realize that Its been pointed out
this line once click the menu
var thisMenu = document.getElementById(thisMenuName).style;
What am doing wrong again again again
#Edit:I forgot to add html file
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
a
</head>
<body>
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
I don't know what you tried to do with the substring part in togle function. That's the only problem with your code. Change the line:
var thisMenu = document.getElementById(thisMenuName).style;
to
var thisMenu = document.getElementById('menu1').style;
and it will work. Take a look:
window.onload = initAll;
function initAll() {
var allLink = document.getElementsByTagName("a");
for (var i = 0; i < allLink.length; i++) {
if (allLink[i].className.indexOf("menuLink") > -1) {
allLink[i].onclick = togle;
}
}
}
function togle(e) {
// can't understand the use of the 3 lines below:
var startMenu = this.href.lastIndexOf("/") + 1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu, stopMenu);
var thisMenu = document.getElementById('menu1').style;
if (thisMenu.display == "block") {
thisMenu.display = "none";
} else {
thisMenu.display = "block";
}
return false;
}
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
a much simpler and modern version of your code would be:
function initAll() {
Array.from(document.getElementsByTagName("a"))
.filter((link)=>link.className.indexOf("menuLink") > -1)
.forEach((link)=>link.onclick = ()=>{
var thisMenu = document.getElementById('menu1').style;
thisMenu.display = (thisMenu.display == "block") ? 'none' : 'block';
return false;
});
}
window.onload = initAll;
ul.menu {
display: none
}
<div>
trajedi
<ul class="menu" id="menu1">
<li>deneme</li>
<li>deneme</li>
</ul>
</div>
Why is this code not working and how to solve the one block is shown and some block is hide?
function vsd(){
var asd = document.getElementById("asd");
var vsd = document.getElementById("vsd");
var psd = document.getElementById("psd");
var vps = document.getElementById("vps");
var asp = document.getElementById("asp");
var vsp = document.getElementById("vsp");
var sad = document.getElementById("sad");
if (vsd.style.display === "none") {
vsd.style.display ="block";
asd.style.display = "none";
psd.style.display = "none";
vps.style.display = "none";
asp.style.display = "none";
vsp.style.display = "none";
sad.style.display = "none";
} else {
vsd.style.display = "none";}
}
Be sure that vsd is in display:none mode at load time and in the else statement think to show back psd, vsd blah
I have replaced your approach with a css class hide
window.onload = vsd();
function vsd(){
var asd = document.getElementById("asd");
var vsd = document.getElementById("vsd");
var psd = document.getElementById("psd");
var vps = document.getElementById("vps");
var asp = document.getElementById("asp");
var vsp = document.getElementById("vsp");
var sad = document.getElementById("sad");
console.log($("#vsd")[0].attr('style'))
if (vsd.classList.contains("hide") {
vsd.classList -= "hide";
asd.classList += "hide";
psd.classList += "hide";
vps.classList += "hide";
asp.classList += "hide";
vsp.classList += "hide";
sad.classList += "hide";
} else {
vsd.classList += "hide";
}
}
.hide {
display : none;
}
<button id="vsd" class="">vsd</button>
<button id="asd" class="hide">asd</button>
<button id="psd" class="hide">psd</button>
<button id="vps" class="hide">vps</button>
<button id="asp" class="hide">asp</button>
<button id="vsp" class="hide">vsp</button>
<button id="sad" class="hide">sad</button>
For my website I need a function with questions and answers in loop.
After the last question the first question should come again.
I have found something but the loop does not work, it is certainly simple but I do not get that.
<!DOCTYPE html>
<html>
<body>
<div>
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
</div>
<script type="text/javascript">
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
function changeText(){
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
}
else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion(){
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if(max > 0){
var num = 0;
var qst = questionList[num].split("ans:");
div.innerHTML =qst[0];
ans.innerHTML = qst[1];
questionList.splice(num,1);}
else {
}
}
</script>
</body>
</html>
You must reset value of n every time reach to max so you must put n in outer scope in global variable scope and don't splice questionList because you want to iterate over that array again after reaching to end of it:
var details = "Question 1ans:Answer 1qst:Question 2ans:Answer 2qst:Question 3ans:Answer 3qst:Question 4ans:Answer 4qst:Question 5ans:Answer 5qst:Question 6ans:Answer 6qst:Question 7ans:Answer 7qst:Question 8ans:Answer 8qst:Question 9ans:Answer 9qst:Question 10ans:Answer 10";
var questionList = details.split("qst:");
var div = document.getElementById('question');
var ans = document.getElementById('answer');
//Variable n must declare here
var num = 0;
function changeText() {
if (div.style.display !== 'none') {
div.style.display = 'none';
ans.style.display = 'block';
} else {
div.style.display = 'block';
ans.style.display = 'none';
}
}
function nextQuestion() {
div.style.display = 'block';
ans.style.display = 'none';
var max = questionList.length;
if (max > 0) {
var qst = questionList[num].split("ans:");
div.innerHTML = qst[0];
ans.innerHTML = qst[1];
//there is no need to splice questionList
//questionList.splice(num, 1);
num++;
//Check for num to not to be greater than questionList.length
if (num >= max)
num = 0;
} else {
}
}
<div id="question" onclick="changeText()">
Start Quiz
</div>
<div id="answer" onclick="nextQuestion()">
are you ready?
</div>
the code so far
Now if you press a button, no matter which one, a div and a percentage will be shown. I've got that going for me, but if one div is toggled, and another one is pressed, the 66% div should be toggled and so on if two divs are shown and the third is toggled the 100% div should show up.
Basicly if you click a button, a div and a percentage div is revealed if you click aonther the percentage bar goes up. How do I do this? if two divs are toggled and if you press the button two diffrent divs are shown?
JS
function showhide()
{
var div = document.getElementById("lol");
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
if (div.style.display !== "none")
{
div.style.display = "none";
id3.style.display = "none";
}
else {
div.style.display = "block";
}
}
function showhide2()
{
var div2 = document.getElementById("lol2");
if (div2.style.display !== "none") {
div2.style.display = "none";
}
else {
div2.style.display = "block";
}
}
function showhide3()
{
var div3 = document.getElementById("lol3");
if (div3.style.display !== "none") {
div3.style.display = "none";
}
else {
div3.style.display = "block";
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div id="lol"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "5"><p>100%</p></div>
<!-- End your code here -->
</body>
</html>
Not entirely sure what you mean but I think it might be something like this?
http://liveweave.com/PcZ7vL
HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<div id="lol1"><p>div1</p></div>
<div id="lol2"><p>div2</p></div>
<div id="lol3"><p>div3</p></div>
<button id="button" onclick="showhide()">div1</button>
<button id="button" onclick="showhide2()">div2</button>
<button id="button" onclick="showhide3()">div3</button>
<div id = "3"><p>33%</p></div>
<div id = "5"><p>66%</p></div>
<div id = "7"><p>100%</p></div>
</body>
</html>
JavaScript:
var one = 0
var two = 0
var three = 0
var id3 = document.getElementById("3");
var id5 = document.getElementById("5");
var id7 = document.getElementById("7");
var div1 = document.getElementById("lol1");
var div2 = document.getElementById("lol2");
var div3 = document.getElementById("lol3");
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
div1.style.display = "none";
div2.style.display = "none";
div3.style.display = "none";
function showhide()
{
if (div1.style.display !== "none")
{
div1.style.display = "none";
one = 0
}
else {
div1.style.display = "block";
one = 1
}
showper();
}
function showhide2()
{
if (div2.style.display !== "none") {
div2.style.display = "none";
two = 0
}
else {
div2.style.display = "block";
two = 1
}
showper()
}
function showhide3()
{
if (div3.style.display !== "none") {
div3.style.display = "none";
three = 0
}
else {
div3.style.display = "block";
three = 1
}
showper()
}
function showper()
{
var sum = one + two + three
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
if (sum == 1) {
id3.style.display = "block";
} else if (sum == 2) {
id5.style.display = "block";
} else if (sum == 3) {
id7.style.display = "block";
}
else {
id3.style.display = "none";
id5.style.display = "none";
id7.style.display = "none";
}
}
EDIT:
A slightly neater way to do it would be this: http://liveweave.com/YAHn55.
Also, you should take a look at jQuery, makes things like this much simpler.
EDIT:
see example