I am trying to create a sidenav bar with nav items in it which has sub menus . I am able to create it but i am getting space between 2 navitems which have submenus .
I am trying that both these Admin and Support come one after the other and get slided down when sub menu is clicked .
Can anyone please help me on this ?
I think you need a var for admin and support length and make a loop like this
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
Related
Is there a way to rearrange the order of the context menu items and possibly add dividers between them for grouping?
I followed this post https://forge.autodesk.com/blog/customize-viewer-context-menu to make a custom context menu.
For dividers I found functionality in the source code:
menu.push({divider: true})
Snippet of the source code for show() in contextMenu:
for (var i = 0; i < menu.length; ++i) {
var defn = menu[i],
title = defn.title,
target = defn.target,
icon = defn.icon,
shortcut = defn.shortcut,
divider = defn.divider;
var hasChildren = Array.isArray(target);
if (hasChildren && !menu.isChild) {
addExpandDiv = true; // Keep track of any item that is expandable
} else {
// As described in the design, limit the the number of menu levels to two.
// We will flatten the target array
hasChildren = false;
}
if (divider) {
menuItem = this.createDivider();
menuDiv.appendChild(menuItem);
} else {
I have a function that hides a div with the corresponding ID based on a radio button change, however, I would like to hide multiple items at once and as ID is unique I am not able to just hide them all. How would I set up a class that I can hide and how would I adjust this code below to make that work?
Any help greatly appreciated
function onChangePackage() {
const nodes = document.getElementsByClassName("baseClass");
var selectedValue;
// Get selected radio
for (var i = 0, length = nodes.length; i < length; i++) {
if (nodes[i].checked) {
selectedValue = nodes[i].value;
break;
}
}
// Showing all nodes first
const nodePostFix = ['A','B','C'];
nodePostFix.forEach( node => {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden" + selectedValue)) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
});
};
You can use data attributes for this purpose together with the attribute selectors. So you need just to add the data-hidden-for attributes to the required nodes and access them using document.querySelector() or document.querySelectorAll()
First give all the elements a base class name baseClass. You could just give them a class name like hidden and then in your code you could do something like below:
const elementsToHide = document.getElementsByClassName("baseClass");
for (var i = 0; i < elementsToHide.length; i++) {
const currentElement = elementsToHide.item(i);
if (currentElement.hasClass("hidden")) {
currentElement.style.display = "none";
} else {
currentElement.style.display = "block";
}
}
And on the click event of the radio button you could add this class I mentioned above to whichever ones you want to hide:
element.classList.add("hidden");
or
element.classList.remove("hidden");
I want to make a bootstrap carousel with text, on top of this 4 circles where everytime 1 circle is 'selected/hovered' the right circle and the right line underneath is shown. Something like this:
Who can help me with this issue?
Here's a vanilla JS carousel you can look at, however as others pointed out Stack Overflow is not a service to create your projects for you. You will need to research CSS more so you can get the carousel to appear how you would like.
//Changed index so 1 is actually first image, rather than starting at 0 index
var index = 1;
var paused = false;
var slideShow = [];
for (i=0; i<document.getElementsByClassName("slideShow").length; i++) {
slideShow[i] = document.getElementsByClassName("slideShow")[i];
slideShow[i].style.display = "none";
}
slideShow[0].style.display = "inline";
var slides = setInterval(function() {
if (index < slideShow.length) {
index++;
showDivs();
}
else {
index = 1;
showDivs();
}
},1000);
function control(n) {
clearInterval(slides);
if (index+n > slideShow.length) {
index = 1;
}
else if (index+n <= 0) {
index = slideShow.length;
}
else {
index += n;
}
showDivs();
}
function showDivs() {
//Hide all slideShow elements, and then show only the targeted element
for (let i=1; i<=slideShow.length; i++) {
slideShow[i-1].style.display = "none";
}
slideShow[index-1].style.display = "inline";
}
<button onclick="control(-1)" class="arrows" id="left"><</button>
<p class="slideShow">1</p>
<p class="slideShow">2</p>
<p class="slideShow">3</p>
<p class="slideShow">4</p>
<p class="slideShow">5</p>
<button onclick="control(1)" class="arrows" id="right">></button>
I have searched high and low and tried many different options from here, but i need a point in the right direction now :)
On this site:
http://www.michael-smith-engineers.co.uk
On the main nav, (in mobile view) if you click on Pumps, there should be further dropdown options, but i can not get this working. Any ideas would be appreciated.
I have tried adding the following script, without any luck...
<script>
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
var iOS5 = /iPad|iPod|iPhone/.test(navigator.platform) && "matchMedia" in window;
// hook touch events for drop-down menus
// NB: if has touch events, then has standards event handling too
// but we don't want to run this code on iOS5+
if (hasTouch && document.querySelectorAll && !iOS5) {
var i, len, element,
dropdowns = document.querySelectorAll("#nav-site li.children > a");
function menuTouch(event) {
// toggle flag for preventing click for this link
var i, len, noclick = !(this.dataNoclick);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].dataNoclick = false;
}
// set new flag value and focus on dropdown menu
this.dataNoclick = noclick;
this.focus();
}
function menuClick(event) {
// if click isn't wanted, prevent it
if (this.dataNoclick) {
event.preventDefault();
}
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.dataNoclick = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
</script>
This script above is ridiculous for what i was trying so, tried this:
<script type="text/javascript">
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
if(is_touch_device()) {
jQuery('.toggle-menu').on('click', function(){
jQuery(this).toggleClass('activate');
jQuery(this).find('ul').slideToggle();
return false;
});
}
</script>
</head>
Still no luck tho?!!!!
I need to create one single web page with 4 tab. By pressing on a tab the relevant content should display on the whole page and that should work for all tabs. I mean, when user press on one tab it will display content which will be linked to that tab and hide another tab's content. How can I do it in HTML and CSS?
Jquery UI has an out of the box solution for this:
http://jqueryui.com/demos/tabs/
Granted it's not a pure HTML and CSS solution however I'm not sure you'll be able to do it without some form of scripting
This is my final solution to my problem:
function show(showEl) {
var elements = new Array("tahsilatlarIcerik", "faturaTabGraf", "odemeIcerik", "kasaIcerik");
for (var i = 0; i < elements.length; i++) {
if (showEl == elements[i]) {
document.getElementById(showEl).style.display = "block";
}
else {
hide(elements[i]);
}
}
}
function hide(hideEl) {
if (document.getElementById(hideEl).style.display != "") {
document.getElementById(hideEl).style.display = "none";
}
}
Basically, I've created an Array with elements id's inside and manipulate them with 2 function. Functions are called inside of tabs, e.g., <a id="faturaMenu" onclick="show('faturaTabGraf')">Fatura Analizi</a>. I hope this will be helpfull to someone.
I solwed problem with javascript code. I am posting it and I am wondering if there is another,
less coded way to do it? As far as I researched, I've found that in javascript declaring and asigning global variables at the same time is not supported, do you know any other simple way to do it?
AND CODE:
function getFatura() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "block";
faturaGrafikId.style.display = "block";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getTahsilatlar() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "block";
odemelerId.style.display = "none";
kasaId.style.display = "none";
}
function getOdemeler() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "block";
kasaId.style.display = "none";
}
function getKasa() {
var tahsilatId = document.getElementById("tahsilatlarIcerik");
var faturaTabloId = document.getElementById("faturaTabloIcerik");
var faturaGrafikId = document.getElementById("faturaGrafikIcerik");
var odemelerId = document.getElementById("odemeIcerik");
var kasaId = document.getElementById("kasaIcerik");
faturaTabloId.style.display = "none";
faturaGrafikId.style.display = "none";
tahsilatId.style.display = "none";
odemelerId.style.display = "none";
kasaId.style.display = "block";
}
AND I AM CALLING THESE FUNCTION IN a element WITH onclick event. Basically I am changing display propertie of selected tab to BLOCK and display properties of other tabs to NONE.
Now, I have 4 tab, but I can not imagine what crowd of code will I need if it exceed to, for example 10 tabs.
Thanks,
You could do it with CSS/javascript by changing the z-indexes of the pages (as divs) onclick. This would bring one in front of the other.
Just have a div containing all the tabs, and then divs with different ids for each one.
Start with the page divs all having z-index:0;, except for the home div, which hasz-index:1;.
Each tab has an onclick="nextpage('page1') (Change page1 to the id of the corresponding page).
Then in the javascript, place this code:
function nextpage(pageid) {
//Find the highest z-index. May need to be customized
var elements = document.getElementsByTagName("*");
var highest_index = 0;
for (var i = 0; i < elements.length - 1; i++) {
if (parseInt(elements[i].style.zIndex) > highest_index) {
highest_index = parseInt(elements[i].style.zIndex;
}
}
var highest_index_1 = highest_index + 1;
//set the z index of the tab-page to the highest+1
getElementByid(pageid).object.style.zIndex="1";
}