I am trying to create an onclick event which will show/hide elements of an array however I am struggling with the showSubTabGroup() function below.
Sidenote: Eventually I would like to make this onmouseenter and onmouseleave, rather than 'click' as you see below.
I would like to be able to click on a div and show subsequent div's below as you might expect from a navigation feature.
The console is not returning any errors, however the 'click' function seems alert("CLICKED") properly.
Any help would be greatly appreciated.
Problem:
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
alert("CLICKED");//Testing 'click' call
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
function Tab (subTabGroup) {
this.tab = document.getElementsByClassName("tab");
this.subTab = document.getElementsByClassName("sub-tab");
this.subTabGroup = subTabGroup;
}
Tab.prototype.hideSubTabs = function () {
for (var i = 0; i < this.subTab.length; i++) {
this.subTab[i].style.display = "none";
}
}
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
});
}
var tab = new Tab(3);
tab.hideSubTabs();
tab.showSubTabGroup(0,0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Nav</title>
</head>
<body>
<!-- JQuery CDN -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
<div class="container">
<div class="tab">
<p>TAB</p>
</div>
<div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
<div class="sub-tab">
<p>SUBTAB</p>
</div>
</div>
</div>
<script type="text/javascript" src="tab.js"></script>
<script type="text/javascript" src="tabEvents.js"></script>
</body>
</html>
The problem of what is this inside the click. It is not your tab code, it is the reference to the element that you clicked on. You need to change that by using bind
Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
this.tab[tabIndex].addEventListener('click', (function () {
for (var i = subTabIndex; i < this.subTabGroup; i++) {
this.subTab[i].style.display = "";
}
}).bind(this));
}
As I read your post, I assume hideSubTabs() is working properly. In that case I will suggest to use in showSubTabGroup():
this.subTab[i].style.display = "initial";
instead of
this.subTab[i].style.display = "";
"initial" will set to its default e.g. as "block" for div and "inline" for span
I see that you also have included jQuery. If I may ask why don't jQuery functions which will do the same with less code:
$('.tab').on('click',function() {
$(this).closest('.container').find('.sub-tab').toggle()
})
$('.tab').click();
$('.tab')[0].click();
Related
I am trying to write a code when click on the link it toggleSlide the relevant div and hide all other divs. But the issue I am facing, when I click to close same div then it reopens.
jQuery(document).ready(function($){
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian(){
var _this = $(this);
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
_this.toggleClass('opened');
filters.slideToggle();
}
});
.facetwp-facet {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>
Basic we have to check if the one you click on already is "opened"
var opened = _this.hasClass("opened");
Then we can use that to determent if we shall toggle the class or not.
if (!opened) {
_this.toggleClass('opened');
filters.slideToggle();
}
Demo
jQuery(document).ready(function($) {
var facetTitle = $('.facetwp-facet-title');
facetTitle.on('click', facetAccordian);
// Facet Accordian Function
function facetAccordian() {
var _this = $(this);
var n = _this.hasClass("opened");
$(".filters-holder .facetwp-facet-title").removeClass("opened");
$(".filters-holder .facetwp-facet").slideUp("opened");
var filters = _this.parent().find('.facetwp-facet');
if (!n) {
_this.toggleClass('opened');
filters.slideToggle();
}
}
});
.facetwp-facet {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filters-holder">
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Type</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
<div class="fl-col">
<div class="facetwp-bb-module">
<h4 class="facetwp-facet-title">Size</h4>
<div class="facetwp-facet">
Content Here
</div>
</div>
</div>
</div>
I have some javascript function - shows me a popup with some texts. I try to rotate two "section" elements, but if I add to HTML one more section with class custom, the page shows only first element. Please, help me to add 1-2 more elements and to rotate it. The idea is to have 2 or more elements with class custom and to show it in random order, after last to stop. Thanks.
setInterval(function () {
$(".custom").stop().slideToggle('slow');
}, 2000);
$(".custom-close").click(function () {
$(".custom-social-proof").stop().slideToggle('slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="custom">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Some Text
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
Set section display none of page load instead of first section. Check below code of second section:
<section class="custom" style=" display:none">
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
<img src="checkbox.png">
</div>
<div class="custom-notification-content-wrapper">
<p class="custom-notification-content">
Mario<br>si kupi <b>2</b> matraka
<small>predi 1 chas</small>
</p>
</div>
</div>
<div class="custom-close"></div>
</div>
</section>
And you need to make modification in your jQuery code as below:
setInterval(function () {
var sectionShown = 0;
var sectionNotShown = 0;
$(".custom").each(function(i){
if ($(this).css("display") == "block") {
sectionShown = 1;
$(this).slideToggle('slow');
} else {
if (sectionShown == 1) {
$(this).slideToggle('slow');
sectionShown = 0;
sectionNotShown = 1;
}
}
});
if (sectionNotShown == 0) {
$(".custom:first").slideToggle('slow');
}
}, 2000);
Hope it helps you.
I'm not actually a programmer but I have to do this website work properly. And for that I'll need your help.
I'm messing with some javascript and I manage to maek this:
<script>
function funcaosabores1() {
document.getElementById("testeagora1").innerHTML = "";
document.getElementById('contento1').style.visibility="visible";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores2() {
document.getElementById("testeagora2").innerHTML = "";
document.getElementById('contento2').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores3() {
document.getElementById("testeagora3").innerHTML = "";
document.getElementById('contento3').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores4() {
document.getElementById("testeagora4").innerHTML = "";
document.getElementById('contento4').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento5').style.visibility="hidden";
}
function funcaosabores5() {
document.getElementById("testeagora5").innerHTML = "";
document.getElementById('contento5').style.visibility="visible";
document.getElementById('contento1').style.visibility="hidden";
document.getElementById('contento2').style.visibility="hidden";
document.getElementById('contento3').style.visibility="hidden";
document.getElementById('contento4').style.visibility="hidden";
}
</script>
And I can't find on how to make for example: funcaosabores1 is clicked and is now visible, when I click funcaosabores2, the first one is hidden and the second is showing. But I can't click on the first one back because it was already clicked. (Idk if it's called return)
This is the div's called in the script:
<div class="animacao_saborgingerale" id="contento2" style="visibility:hidden;"></div>
<div class="animacao_saboruvasyrah" id="contento3" style="visibility:hidden;"></div>
<div class="animacao_sabortangerina" id="contento4" style="visibility:hidden;"></div>
<div class="animacao_saboruvabranca" id="contento5" style="visibility:hidden;"></div>
<div class="sabor-melancia"><p onclick="funcaosabores1()" id="testeagora1">MELANCIA</p> </div>
<div class="sabor-gingerale"><p onclick="funcaosabores2()" id="testeagora2">GINGER ALE</p></div>
<div class="sabor-uvasyrah"><p onclick="funcaosabores3()" id="testeagora3">UVA SYRAH</p></div>
<div class="sabor-tangerina"><p onclick="funcaosabores4()" id="testeagora4">TANGERINA</p></div>
<div class="sabor-uvabranca"><p onclick="funcaosabores5()" id="testeagora5">UVA BRANCA</p></div>
This seems quite messy but I'm here if you guys can help me! Thanks.
The CodePen of how it is right now. #nielsdebruin
I think you just want to do something like this:
let prevButton;
let prevContent;
function toggle(e) {
if (prevButton) prevButton.style.visibility = 'visible';
prevButton = e.target;
e.target.style.visibility = 'hidden';
let id = e.target.id;
let number = id.slice(-1);
if (prevContent) prevContent.style.visibility = 'hidden';
prevContent = document.getElementById('contento' + number);
prevContent.style.visibility = 'visible';
}
<div class="content animacao_saborgingerale" id="contento1" style="visibility:hidden;">1</div>
<div class="content animacao_saborgingerale" id="contento2" style="visibility:hidden;">2</div>
<div class="content animacao_saboruvasyrah" id="contento3" style="visibility:hidden;">3</div>
<div class="content animacao_sabortangerina" id="contento4" style="visibility:hidden;">4</div>
<div class="content animacao_saboruvabranca" id="contento5" style="visibility:hidden;">5</div>
<div class="button sabor-melancia"><p onclick="toggle(event)" id="testeagora1">MELANCIA</p> </div>
<div class="button sabor-gingerale"><p onclick="toggle(event)" id="testeagora2">GINGER ALE</p></div>
<div class="button sabor-uvasyrah"><p onclick="toggle(event)" id="testeagora3">UVA SYRAH</p></div>
<div class="button sabor-tangerina"><p onclick="toggle(event)" id="testeagora4">TANGERINA</p></div>
<div class="button sabor-uvabranca"><p onclick="toggle(event)" id="testeagora5">UVA BRANCA</p></div>
I have this html:
<div class="container">
<div id="element-1" class="element-show"></div>
<div id="element-2"></div>
</div>
I want class element-show to hide from element-1 and show in element-2 and vice versa; called from one function in jQuery.
Any way I can do this properly?
will something like that be OK?
$("button").on("click", function(e){
$('.container').children("div").toggleClass("element-show");
})
.element-show{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="element-1" class="element-show">x</div>
<div id="element-2">y</div>
</div>
<button>Toggle class</button>
You can achieve that by doing this:
function getClass() {
var children_container = document.getElementsByClassName("container")[0].children;
for (var i = 0; i < children_container.length; i++) {
if ($(children_container[i]).hasClass('element-show')) {
$(children_container[i]).removeClass();
if (i == "0") {
$(children_container[1]).addClass("element-show");
break;
} else if (i == "1") {
$(children_container[0]).addClass("element-show");
break;
}
}
};
};
getClass();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="element-1" class="element-show"></div>
<div id="element-2"></div>
</div>
If you have more than 2 elements and you want to add the class on rest of them and remove it from the element which already has that class, then you can achieve that by doing this (this function will also work for the case you mentioned too):
function getClass() {
var children_container = document.getElementsByClassName("container")[0].children;
var class_elem;
for (var i = 0; i < children_container.length; i++) {
if ($(children_container[i]).hasClass('element-show')) {
class_elem = i;
$(children_container[i]).removeClass();
i = 0;
}
if (class_elem != undefined) {
if (i != class_elem) {
$(children_container[i]).addClass('element-show');
}
};
};
};
getClass();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="element-0"></div>
<div id="element-1" class="element-show"></div>
<div id="element-2"></div>
<div id="element-3"></div>
<div id="element-4"></div>
</div>
I can't get closed captioning to work on my video, I am pretty sure that I have a lot of the code that is required for getting it to work, and I am just not sure what I might be missing. I am also getting a message in the body, where it shows that the data-begin, and data-end are underlined green, and it says that Attribute data-begin is not a valid attribute of element span, I am not sure if thats the problem, and I may need to use another tag, and that can still get it to work. I am pretty new to html. Here is all my code
Thanks
<!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>
<link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
m4v: "videos/sequence01mp4video.mp4",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "/javascripts",
supplied: "m4v"
});
});
(function (_global) {
var captions = [];
var video;
var output;
var caplen;
window.addEventListener('load', function () {
output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
output.id = 'caption'; // it has an id of caption
video = document.querySelector('video'); // and it's after the first video element
video.parentNode.insertBefore(output, video.nextSibling);
getCaptions();
video.addEventListener('timeupdate', timeupdate, false);
}, false);
// function to populate the 'captions' array
function getCaptions() {
captions = []; // empty the captions array
var nodes = document.querySelectorAll('#transcript span');
var node = "";
var caption = "";
for (var i = 0, node; node = nodes[i]; i++) {
caption = {
'start': parseFloat(node.getAttribute('data-begin')), // get start time
'end': parseFloat(node.getAttribute('data-end')), // get end time
'text': node.textContent
};
captions.push(caption); // and all the captions into an array
}
caplen = captions.length;
}
function timeupdate() {
var now = video.currentTime; // how soon is now?
var text = "", cap = "";
for (var i = 0; i < caplen; i++) {
cap = captions[i];
if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
text = cap.text; // yes? then load it into a variable called text
break;
}
}
output.innerHTML = text; // and put contents of text into caption div
}
// hide transcript div when scripting is enabled
document.write('<style>#transcript{display:none}</style>');
})(this);
</script>
</head>
<body>
<div id="jp_container_1" class="jp-video ">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
play
</div>
<div id="transcript">
<span data-begin="0:00:00.380" data-end="0:00:03.670">hello, my name is rob carson environmental engineer with the</span>
<span data-begin="0:00:03.670" data-end="0:00:06.880">hello, my name is rob carson environmental engineer with the.</span>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li>full screen</li>
<li>restore screen</li>
<li>repeat</li>
<li>repeat off</li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>Big Buck Bunny Trailer</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
</body>
</html>