I currently have it so my titles slide in when the link is clicked.
How do I make it so that (when the link is clicked) the current title will slide out before the new one slides in?
This is the clicked event I have been using. It might be all wonky, I have been adding different things to it to try and get it to work.
// list of sections. the first section contains only the h1.
var sections = document.querySelectorAll("section");
function hideSections() {
for (var i = 0; i < sections.length; i++) {
sections[i].className = "hidden";
}
}
// list of links in the nav.
var links = document.querySelector("nav").querySelectorAll("a");
// add listeners to those links
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", clicked);
}
function clicked(event) {
var target = document.querySelector('h2');
target.className = "slideout";
event.preventDefault();
hideSections();
var current = event.target.hash;
// "show" appropriate selection, based on id from link
document.querySelector(current).className = "";
// modify URL to reflect current location
location.hash = current;
target.addEventListener("animationend", newfile);
function newfile() {
target.removeEventListener("animationend", newfile);
}
target.addEventListener("animationstart", newfile);
}
// when page loads...
hideSections();
if (location.hash == "") {
sections[0].className = "";
} else {
document.querySelector(location.hash).className = "";
}
https://jsfiddle.net/yk7w2zt2/
Here is my full code.
You need you delay showing the next section until after the h2 has slid off the screen.
See JSFiddle using setTimeout():
https://jsfiddle.net/w9uypaae/
Related
I got 3 accordions in a Shopify product page out of which I intend to keep the first one expanded by default on page load. Once the page loaded, clicking other accordions should close all previously opened ones. I want to do it only with pure JavaScript(no libraries like jQuery) or CSS. My code below just ensures the first accordion is shown expanded. Could you please help correct my code after having a look at the accordions in the page https://wv3yau73hiyf9fhv-458195004.shopifypreview.com?
window.onload = function() {
var accItem = document.getElementsByClassName('accordion__item');
// Keep the first accordion open by default.
for (i = 0; i < accItem.length; i++) {
console.log("Within first for loop");
accItem[0].click();
accItem[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
console.log("Within second for loop");
accItem[i].className = 'accordion__item close';
}
if (itemClass == 'accordion__item close') {
this.parentNode.className = 'accordion__item open';
}
}
};
Using the browser's console on the page, I used the following to open the first accordion:
let allAccordions = document.querySelectorAll(".accordion__item");
allAccordions[0].click();
Yes, a loop is possible too:
for (var i = 0; i < allAccordions.length; i++) {
if (i == 0) {
allAccordions[i].click();
break; // only the first, can stop looping.
}
}
Finally, the solution is below:
// Keep the first accordion open by default.
let allAccordions = document.querySelectorAll(".accordion__item");
if (allAccordions.length > 0) {
allAccordions[0].querySelector("input[type=radio]").checked = true;
}
// Capture click event for the accordions
allAccordions.forEach(element => {
element.addEventListener('click', function() {
let radioBtn = this.querySelector("input[type=radio]");
let clickedRadioName = radioBtn.getAttribute("name");
allAccordions.forEach(element => {
let elementRadioBtn = element.querySelector("input[type=radio]");
let elementRadioName = elementRadioBtn.getAttribute("name");
if ((elementRadioName != clickedRadioName) && elementRadioBtn.checked) {
element.querySelector("input[type=radio]").checked = false;
}
});
});
});
Javascript
function openPage(pageName, elmnt) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Show the specific tab content
document.getElementById(pageName).style.display = "block";
}
document
list = document.querySelectorAll(".myTextInputID")
list[1].addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
var input = document.getElementsByClassName("myTextInputID")[0]
.value;
if (input.includes("https://www.amazon.co.uk/")) {
document.getElementsByClassName("containFORM")[0]
.insertAdjacentElement("beforeend", itemcont);
document.getElementById("prodcont")
.insertAdjacentElement("afterbegin", imgcont);
document.getElementsByClassName("containFORM")[0]
.style.backgroundColor = "white"
} else {
var URLerror = document.createElement("p");
URLerror.classList.add("error");
var urlerror = document.createTextNode("This is not an amazon url, please input an amazon url and press enter again.");
URLerror.appendChild(urlerror);
var cont = document.getElementsByClassName("myForm")[0];
cont.insertAdjacentElement("afterend", URLerror);
setTimeout(function() {
URLerror.remove();
}, 2000);
}
}
});
function newTab() {
var allTabs = document.getElementById("navigation2");
var tabList = document.createElement("li");
var error = document.createElement("p");
var eNode = document.createTextNode("You cant track this many products");
var button1 = document.getElementById("button1");
var tabButton = document.createElement("button");
tabButton.setAttribute("onclick", "openPage('1', this, 'red')")
error.classList.add("error");
tabList.classList.add("tabli");
tabButton.classList.add("tabs");
if (button1.offsetWidth < 190) {
error.appendChild(eNode);
document.getElementById("tabcon")
.insertAdjacentElement("afterend", error);
setTimeout(function() {
error.remove();
}, 2000);
} else {
tabList.appendChild(tabButton);
allTabs.insertAdjacentElement("beforebegin", tabList);
var newt = ("window.location.href=")+("\'")+("#")+("newtab")+("\'");
var newtab = document.createElement("div")
newtab.id="#newtab";
newtab.className="containFORM";
// true means clone all childNodes and all event handlers
document.getElementById("0").insertAdjacentElement("afterend", clone)
clone.id = "1";
}
}
When you press the new tab button it makes a new tab and creates a clone of a stored element, however with the class selector I can only put a number (0,1) but I need it so its some sort of variable(x), x being the number of the current tab. So when you click on one tab set x to that and then all logic will be performed on each tab, I can't think of a way to do this without copying what I've done multiple times and just changing the number myself, which doesn't feel very efficient.
I have found this piece of code in JQuery that might help you.
var activeTab = $(".tab-content").find(".active");
console.log(activeTab.context.URL);
If you try it while inspect this very page, you can check that the result is the URL of this page:
https://stackoverflow.com/questions/65886250/how-to-tell-javascript-what-tab-is-active
I have the following script, from my previous question. I tried running it but it won't work. There isn't any console message as well. It does conflict with something in console called lstr.js (I think it is chrome related), the code works fine in jsfiddle but not on my machine.
var links = document.getElementsByClassName('link'), // add a class to the links and get them all
contentDivs = document.getElementsByClassName('content'); // same with the content blocks
for (i = 0; i < links.length; i++) { // loop through the links to add the event listeners
var link = links[i];
// add event listener
link.addEventListener('click', function(event) {
// reset color and hide content:
for (a = 0; a < links.length; a++) {
// number of links should match number of content
links[a].style.backgroundColor = 'magenta';
contentDivs[a].style.display = 'none';
}
// set colour of clicked
event.target.style.backgroundColor = 'grey';
// show clicked content
document.getElementById(event.target.getAttribute("href").substring(1)).style.display = 'block';
})
}
Wrap that in a function and then do
document.addEventListener('DOMContentLoaded', function() {
nameOfYourFunction();
});
So in the end, your could would look like
function attachEvents() {
var links = document.getElementsByClassName('link'); // add a class to the links and get them all
var contentDivs = document.getElementsByClassName('content'); // same with the content blocks
for (i = 0; i < links.length; i++) { // loop through the links to add the event listeners
var link = links[i];
// add event listener
link.addEventListener('click', function(event) {
// reset color and hide content:
for (a = 0; a < links.length; a++) {
// number of links should match number of content
links[a].style.backgroundColor = 'magenta';
contentDivs[a].style.display = 'none';
}
// set colour of clicked
event.target.style.backgroundColor = 'grey';
// show clicked content
document.getElementById(event.target.getAttribute("href").substring(1)).style.display = 'block';
});
}
}
document.addEventListener('DOMContentLoaded', function() {
attachEvents();
}
The code is OK except you ought to check if links.length === contentDivs.length
I am trying to write a script (because I can't find one that works) that will export all my separate layers, paths, etc to transparent png files. I have seen many scripts, but all of them do not export all the layers, etc. They seem to just try and export parent layers. So if there are sub layers, these are missed.
Here is my script:
var doc = app.activeDocument;
var counter = 0;
hideOrShowItems(doc, false);
// processLayers(doc);
// displayLayer(doc, true);
function hideOrShowItems(root, show) {
for(var i = 0; i < root.layers.length; i++) {
var layer = root.layers[i];
var pathCount = layer.pathItems.length;
var layerCount = layer.layers.length;
if (pathCount > 0) {
hideOrShowPaths(layer, show);
}
if (layerCount > 0) {
hideOrShowItems(layer, show);
}
layer.visible = show;
}
}
function hideOrShowPaths(root, show) {
for(var i = 0; i < root.pathItems.length; i++) {
root.pathItems[i].visible = show;
}
}
// -- Removed for brievety
When I run the script, the only thing that gets hidden is the top layer
All of the rest are untouched.
I put a counter in and did counter++ in the for loop of hideOrShowPaths and it counts 246, so I know it can see the paths and is actually trying to hide them, but they stay visible.
Has anyone done this before? Can I hide paths, groups, clips and export them all as pngs? or will I have to do this manually?
Looks like the flag you are looking for is hidden not visible.
var doc = app.activeDocument;
var root = doc.layers[0];
// just for testing purpose. Change the color
var newRGBColor = new RGBColor();
newRGBColor.red = 255;
newRGBColor.green = 255;
newRGBColor.blue = 255;
// make all items hidden
for (var i = 0; i < root.pathItems.length; i++) {
var item = root.pathItems[i];
item.hidden = true;
item.fillColor = newRGBColor; // just for testing
}
// now loop all pathItems
for (var i = 0; i < root.pathItems.length; i++) {
var item = root.pathItems[i];
item.hidden = !item.hidden; //make one visible
// export visible part
redraw();
item.hidden = !item.hidden; // hide it again
}
In your script you will need to hide every item first, then unhide one, export and hide it again.
I Hope that snippet helps with your problem
I need to get all the links in a page, and i do get them, the problem is the href exist twice in the website, to not get the link twice i did a little trick with the variables :
getAlllinks: function()
{
var links = content.document.getElementsByTagName("a");
var entries = new Array;
var liens = new Array;
for(var i = 0; i<links.length; i++)
{
if(entries.indexOf(links[i].href) == -1)
{
entries.push(links[i].href);
liens.push(links[i]);
}
}
return links;
}
ok till now everything is fine, i put the links in a tree (Xul) and all, but my problem starts from here on, i use scrollIntoView to scroll to the link
var tree = document.getElementById("Tree_links");
var tbo = tree.boxObject;
var row = { }, col = { }, child = { };
tbo.getCellAt(event.clientX, event.clientY, row, col, child);
var cellText = tree.view.getCellText(row.value, col.value);
var links = new Array;
links = cleanLinks();
for (var i = 0; i < links.length; i++)
{
if (links[i].href === cellText.toString())
{
links[i].scrollIntoView("true");
if(links[i].style.backgroundColor == "rgb(255, 255, 0)")
{
links[i].style.backgroundColor='transparent';
}
else
{
links[i].style.backgroundColor='#ffff00';
}
}
}
it won't scroll for the links that are twice in the page, BUT if i put all the links (twice or single) in the tree it does scroll.
thanks in advance.
Well I figured it out,
the trick i was doing with the variables i did it when filling the tree