Hi i have a tab menu and i wanted to activate tab 2 when i click on a button from tab 1..
here is my javascript:
<link rel="stylesheet" type="text/css" href="http://oliveshades.com/dashboard_menu.css">
<script type='text/javascript' src="http://oliveshades.com/jquery.idTabs.min.js"></script>
<script type='text/javascript'>
function toggle_visibility(id) {
var thelist = document.getElementsByClassName("alist");
for (var i = 0; i < thelist.length; i++) {
thelist[i].style.display = 'none';
}
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}</script>
here is my HTML:
<div class="dashTab">
<ul class="idTabs">
<li>Statistics</li>
<li>Traffic</li>
</ul></div>
<div id="tab1"><input name="" type="button" value="redirect me to tab 2" /></div>
<div id="tab2">This is Tab2</div>
http://jsfiddle.net/UCjYS/
Try this:
function changeTab(arg){
switch(typeof arg){
case "number":
$('.idTabs > li:eq(' + arg + ') > a').click();
break;
case "string":
$('.idTabs > li:contains(' + arg + ') > a').click();
break;
}
}
http://jsfiddle.net/DerekL/UCjYS/1/
idTabs doesn't seem to have methods to activate a tab, but you can trigger it manually.
$('#tab1 input').click(function(){
$('li:contains("Traffic")').click();
return false;
});
Related
I'm stuck. I'm a beginner at JavaScript and here is what I am trying to do.
I'm adding a "click" eventListener to my .tab-container. When I click the .tab element, it will perform event.target.matches(".tab").
If it does match, it's going to loop through the NodeList of the .tab elements and compare them to the event.target.
The element that equals event.target will have its className updated to make it active class="tab active". Any other tab will have the className of class="tab" so that it is not active.
JS
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.matches(".tab")) {
for (var i = 0; i < tabElements.length; i++) {
if (tabElements[i] === event.target) {
event.target.className = "tab active";
} else if (tabElements[i] !== event.target) {
event.target.className = "tab";
}
}
}
});
HTML
<div class="tab-container">
<div class="tab active" data-view="html">HTML</div>
<div class="tab" data-view="css">CSS</div>
<div class="tab" data-view="javascript">JavaScript</div>
</div>
Try this code, it should work:
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.classList.contains("tab")) {
for (i of tabElements) {
i.className = 'tab';
if (i === event.target) {
event.target.classList.add('active');
console.log(i.innerHTML + ' is active');
}
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="tab-container">
<div class="tab active" data-view="html">HTML</div>
<div class="tab" data-view="css">CSS</div>
<div class="tab" data-view="javascript">JavaScript</div>
</div>
</body>
</html>
You shouldn't be setting event.target's className (especially in the else condition)
Try
var tabContainer = document.querySelector(".tab-container");
var tabElements = document.querySelectorAll(".tab");
var viewElements = document.querySelectorAll(".view");
tabContainer.addEventListener("click", function (event) {
if (event.target.matches(".tab")) {
for (var i = 0; i < tabElements.length; i++) {
if (tabElements[i] === event.target) {
tabElements[i].className = "tab active";
} else {
tabElements[i].className = "tab";
}
}
}
});
Notice that its tabElements[i] instead of event.target. I've also removed the redundant if condition like Chris G mentioned.
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>
I got this problem...I have an input which works as searcher and when I write something it show an ul with the list of matches and it works,
the <ul> and <li> items are generated with PHP via AJAX
This is my input
<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />
This is the <ul>
<ul id="list">
<li id="match1" class="itemList"></li>
<li id="match2" class="itemList"></li>
<li id="match3" class="itemList"></li>
</ul>
After the list is generated the focus is still on the input and it's ok but I would like to use the arrow keys (up and down) to select one of the items
And I'm trying with code that I see in another answer but it is not working for me, I know that I'm doing something wrong but i can't figure out what the problem is... this is the javascript code
var li = $('#list > li');
var liSelected;
$(window).on('keydown', function(e){
if(e.which === 40){
if(liSelected){
liSelected.removeClass('background');
next = liSelected.next();
if(next.length > 0){
liSelected = next.addClass('background');
}else{
liSelected = li.eq(0).addClass('background');
}
}else{
liSelected = li.eq(0).addClass('background');
}
}else if(e.which === 38){
if(liSelected){
liSelected.removeClass('background');
next = liSelected.prev();
if(next.length > 0){
liSelected = next.addClass('background');
}else{
liSelected = li.last().addClass('background');
}
}else{
liSelected = li.last().addClass('background');
}
}
});
NEW INFO:
$('#searchProduct').keyup(function() {
var search = $(this).val();
if (search != '') {
$.ajax({
type: 'post',
cache: false,
url: '../includes/procedures/autocomplete.php',
data: { search: search },
success: function(datos) {
$('#coincidenciasBusqueda').show();
$('#coincidenciasBusqueda').html(datos);
}
});
}
});
you can use the build-in datalist to achieve arrow key select
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
I give your window's function a arguments to catch the value, every time when you press arrow key. and print it out. just like below.
var li = $('#list > li');
var liSelected;
$(window).on('keydown', function(e){
var selected;
if(e.which === 40){
if(liSelected){
liSelected.removeClass('background');
next = liSelected.next();
if(next.length > 0){
liSelected = next.addClass('background');
selected = next.text();
}else{
liSelected = li.eq(0).addClass('background');
selected = li.eq(0).text();
}
}else{
liSelected = li.eq(0).addClass('background');
selected = li.eq(0).text();
}
}else if(e.which === 38){
if(liSelected){
liSelected.removeClass('background');
next = liSelected.prev();
if(next.length > 0){
liSelected = next.addClass('background');
selected = next.text();
}else{
liSelected = li.last().addClass('background');
selected = li.last().text()
}
}else{
liSelected = li.last().addClass('background');
selected = li.last().text()
}
}
console.log(selected)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
.background{
background: hsla(0, 100%, 0%, 0.4);
}
</style>
</head>
<body>
<input type="text" class="form-control" id="searchProduct" placeholder="Search..." />
<ul id="list">
<li id="match1" class="itemList">1</li>
<li id="match2" class="itemList">2</li>
<li id="match3" class="itemList">3</li>
</ul>
</body>
</html>
If you want to set to your input box, just give selected's value to it or you also can replace selected to $('searchProduct').
You could use jquery autocomplete along with ajax and PHP via JSON.
So now you can use the arrow keys to select. You can also do some CSS to customize the drop-down's look and feel.
I think you're looking for something like:
$(function(){
var li = $('#list li'), n = -1, ll = li.length-1;
$('#searchProduct').keypress(function(e){
var x = e.which;
li.removeClass('background');
if(x === 40 || x === 39 || x === 38 || x === 37){
if(x === 40 || x === 39){
n++;
if(n > ll)n = 0;
}
else if(x === 38 || x === 37){
n--;
if(n < 0)n = ll;
}
var ci = li.get(n);
ci.addClass('background'); $(this).val(ci.text());
}
});
});
I'm trying to hide and show two divs with one click.
<a href="javascript:showhide('bbb','ccc4')">
you click here to see two div contents </a>sddsds<br />
</a>
I have been able to only hide and show one div. When I try to hide and show two divs, using ID, I can't. I've tried some other suggestions, but they do not work.
<a href="javascript:showhide('bbb','ccc4')">
you click here to see two div contents </a>sddsds<br />
</a>
<div target='ccc4' name='ccc4' id='ccc4' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > ddfddddd
<iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='ccc' name='ccc' id='ccc' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ></iframe>
</div> <div target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ' > sdds
<iframe class='shark' src='imagehugeblow.php?midd=<?=$row5['mid'] ?>ccc' target='bbb' name='bbb' id='bbb' frameborder='0'onload='setIframeHeight(this.id)' style='display:none;' ></iframe>
</div>
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
I've tried using the Javascript below, but it doesn't work either.
<script type="text/javascript">
function toggle_visibility() {
for (var i = 0, len = arguments.length; i < e; i++) {
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
Is there a way to hide more than one div with one click, or must I use class instead of using ID?
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
Here you are dealing only with one ID.
Rewirite your function to hide two IDs. Something like that:
function showhide(id1, id2) {
var e = document.getElementById(id1);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
e = document.getElementById(id2);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
To reduce code replication use array to store ids:
function showhide(ids) {
for (var i = 0; i < ids.length; i++) {
var e = document.getElementById(ids[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
And call it:
showhide(['bbb', 'ccc4'])
Or you can use arguments:
function showhide() {
for (var i = 0; i < arguments.length; i++) {
var e = document.getElementById(arguments[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
In this case call should be:
showhide('bbb', 'ccc4')
Add each div you want to toggle display as a seperate parameter:
<a href="javascript:showhide('bbb', 'ccc4')">
Then change your JS to include a loop over the arguments array:
<script type="text/javascript">
function showhide() {
for(var i = 0; i < arguments.length; i++){
var e = document.getElementById(arguments[i]);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
}
</script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function toggle_visibility(id)
{var e = document.getElementById(id);
if(e.style.display == 'block')e.style.display = 'none';
else e.style.display = 'block'; }
</script>
<a onclick="toggle_visibility('div-to-hide');">
<div id="div-to-hide" class="div-to-hide">
---- content here ---
</div>
My version
window.onload=function() {
document.getElementById("ccc4").style.display="none";
document.getElementById("bbb").style.display="none";
document.getElementById("toggle").onclick=function() {
var divs = this.getAttribute("data-divs").split(",");
for(var i = 0,len = divs.length;i < len;i++){
var e = document.getElementById(divs[i]).style;
console.log(e.display)
e.display = (e.display == "") ? "none" : "";
}
return false;
}
}
<a href="turnonjs.html" id="toggle" data-divs="ccc4,bbb">
you click here to see two div contents </a>
<div target='ccc4' name='ccc4' id='ccc4'>div 1</div>
<div target='bbb' name='bbb' id='bbb'> div 2</div>
Or give both divs the same class and use document.querySelectorAll(".classname")
From previous threads I've used the following code.
Current code is available for review at http://jsfiddle.net/sLHKq/
<div id="question1">
<ol>
<li id="correct1">A1</li>
<li id="">A2</li>
</ol>
<div id="answer1" style="display:none;"></div>
<button onclick="toggle('answer1');">Button 1</button>
</div>
<hr>
<div id="question2">
<ol>
<li id="">B1</li>
<li id="correct2">B2</li>
</ol>
<div id="answer2" style="display:none;"></div>
</div>
<button onclick="toggle('answer2');">Button 2</button>
The Javascript I used is as follows for OnClick correct1 and correct2 id's in both divs are changing background color.I tried this code to achieve it for Only the respective Button's toggle to work.
function toggle(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct1").style.backgroundColor = '#BCF5A9';
document.getElementById("correct2").style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct1").style.backgroundColor = '#FFFFFF';
document.getElementById("correct2").style.backgroundColor = '#FFFFFF';
}
}
How can restrict the onclick and background color change to just the question's button div ?
do you mean like:
function toggle(id) {
var e = document.getElementById("answer" + id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
document.getElementById("correct" + id).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
document.getElementById("correct" + id).style.backgroundColor = '#FFFFFF';
}
}
See updated Fiddle
I would suggest to pass correct answer id also in the function like this:
function toggle(id, ans) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
e.style.display = 'block';
document.getElementById(ans).style.backgroundColor = '#BCF5A9';
} else {
e.style.display = 'none';
document.getElementById(ans).style.backgroundColor = '#FFFFFF';
}
}
check fiddle: http://jsfiddle.net/sLHKq/2/