We Keep Coding

Not able to identify element display values

I have photo gallery type of web page. It is comprised of grid of photo thumbnails, with assigned tags beneath them.
At top of page is a list of all of the tags, formatted as buttons. User can click on one or more tag buttons to filter photos. I am using Isotope js for this filtering. This works fine.
However I want to add new feature that runs after the Isotope filtering that will hide any tag buttons that are not assigned to any of the remaining filtered photos.
My plan was to do following:
identify all visible photos
create array from visible photos' tags
use array to hide any unmatched tags
However, I am having problems identifying visible photos after I click tag buttons and Isotope does its filtering.
It seemed like it would be quite straightforward. Isotope js changes a specified element's display = "none" for the hidden photos. Eg if I inspect the element, I can see hidden elements have display = "none"
I created a 'visibletags' function that is called at end of tag button on click to find elements where display != "none":
$('.filter-button').on('click', function() {
// isotope code here
// isotope hides some photos setting their div's `display = "none"`
visibletags();
}
function visibletags(){
var imgdivs = document.querySelectorAll('.imgdiv');
var showtags = [];
for (var i=0, max=imgdivs.length; i < max; i++) {
if (window.getComputedStyle(imgdivs[i]).display != "none") {
// this should be a div that is not hidden by Isotope js
// so loop through it's tags to build array
// array will be used later to hide unmatched tags
var phototagspans = imgdivs[i].querySelectorAll('.photo-tag');
for (var j=0, max=phototagspans.length; j < max; j++) {
showtags.push(phototagspans[j].className);
}
}
}
}
But I am not able to identify the element's display value. I have tried using window.getComputedStyle(imgdivs[i]).display, imgdivs[i].display and imgdivs[i].style.display
Edited to modify question:
I tested running the 'visibletags()' function as another button on click event that I manually click after the isotope filtering is complete. This successfully gets all photo element display values. So that part of code does work.
So my question now is how to run 'visibletags()' function after the Isotope filtering in a way that it is one complete set of code?
I tried changing the 'visibletags()' function to run as $('.filter-button').mouseup(function() but didn't get filtering results.
Maybe this is now general Javascript question eg how to get on click event's results after they have been rendered?

I'm not familiar with Isotope, but you probably need to use a callback function. Check out this documentation, especially the layoutComplete part: https://isotope.metafizzy.co/events.html
In your case, the result could be something like this:
$('.filter-button').on('click', function() {
// initialize isotope
$isotope.on('layoutComplete', function() {
visibletags();
});
// other isotope code here
}

When A + B are selected from two select lists, Load results page at #Anchor?

I have an on-line store that has a product page. The page has two select boxes to choose from and will filter results based on those two options.
If I choose criteria A + B from the select boxes, the page filters through the products to show products with that criteria. However when this event happens, the page scrolls to the top of the page. This is especially annoying on mobile as the select boxes are not at the top of the page.
How can I add either a javascript event to scroll to a specific div (for example #ProductList) when the selection is made.
Or maybe an onload event that adds the #ProductList to the end of the url.
I have found examples to scroll to a div id based on the id selected. But I need something simpler that always scrolls to the same div #ProductList when the select boxes are clicked.
This Example works for id selected but i need a general one that scrolls to one specific div id
var select = document.getElementById('test');
select.onchange = function(){
var id = this.getElementsByTagName('option')[this.selectedIndex].value,
el = document.getElementById(id),
top = el.offsetTop;
window.scrollTo(0,top);
};
Any help is hugely appreciated!!!!
Frank

You can use URL fragments to jump to the required page element. See the snippet below:
var select = document.getElementById('test');
select.onchange = function(){
var id = this.getElementsByTagName('option')[this.selectedIndex].value;
var link = window.location.href;
// If URL already has a fragment, remove it
if (link.indexOf('#') != -1)
link = link.substring(0, link.indexOf('#'));
// Add URL fragment with id of the div you want to jump to
window.location.href = link + '#' + id;
};

Just write
var id = 'YOUR ID HERE',
instead of
var id = this.getElementsByTagName('option')[this.selectedIndex].value,

what i would do is
$("#test").change(function(){
var val=$(this).val();
var divtext=""+$("#"+val+" p").html();// this is div content
});

I've figured it out!
Thanks for the different perspectives guys! Really helped me to stumble upon the answer!
You can delete/archive this post if needed. First time here so not sure on the protocol!
Thanks again
Frank

Displaying and highlighting a particular line in HTML

I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.

You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.

There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.

Dot Navigation JQuery Slide Show

I am quite new to JQuery and I have a question about Dot Navigation...
I have some Hero content which I have put together (using posts from here and JQuery site). Basically I have 3 div containers which are hidden and shown in a cycle. I also have three other div containers which have dots in them which I want to use as navigation. During the cycle the dots change colour to represent the "slide" the page is currently on.
What I want to do now is add a click event to each dot so the cycle jumps to and displays the corresponding content.
My Java Script is below.
$('.heroContBG').each(function() {
$(this).hide(0);
});
$('.heroContBG').first().show(0);
$('.heroDots').last().removeClass('heroNavOff').addClass('heroNavOn');
var delay = 6000; //Set delay time
var divIdx = 0; //Set divIdx value
var arrDiv = $('.heroContBG').toArray(); //Assign all heroContBG divs to array
var arrDot = $('.heroDots').toArray(); //Assign all heroDots divs to array
arrDot = arrDot.reverse(); //Reserve array index for Dot Navigation
function heroBG(){
var $out = $(arrDiv[divIdx]); //Set $out variable to current array index (set by divIdx)
var $dotOut = $(arrDot[divIdx]); //Set dotOut variable to current array index (set by divIdx)
divIdx = (divIdx + 1) % arrDiv.length; //Convert array index 0-2 into 1-3
var $in = $(arrDiv[divIdx]); //Set $in to $arrDix[divIdx]
var $dotIn = $(arrDot[divIdx]); //Set $dotIn to $arrDot[divIdx]
$out.fadeOut(600).hide(); //Hide element
$dotOut.removeClass('heroNavOn').addClass('heroNavOff'); //Swap classes on .heroDots
$in.fadeIn(1600).show(); //Show next element
$dotIn.removeClass('heroNavOff').addClass('heroNavOn'); //Swap classes on .heroDots
}
setInterval(heroBG, delay); //Tell browser to loop through elements.
I think what I need to do is have a click event set the divIdx value to match that of the corresponding div container but as yet I have had no luck.
I will keep playing around with this and if I have success I will post it here. If anyone else knows how to do this that would be great.
I should also mention I don't really want to use a 3rd party plugin as I am quite keen to improve my JQuery skills.
Cheers,
Simon

Simply use $('.heroDots').index(myClickedHeroDot) to get the position of the targeted sibling. Then assign the returned index value to divIdx.
Hope this helps :)

How to display a description text image for 3 seconds in Dom?

Hi I'm working on a site. I need help making a text appear in a div where it saids any image clicked their title and size. in DOM scripting. Can anyone help? No innerhtml.
Thanks

using pure dom scripting and no helper framework like jquery, gotta dust off some things I haven't used in awhile!
That said here ya go. Must be placed after page has loaded. (Or remove the last "showCredit();" line and put it in your body onload.
Note you'll need to alter this, I just put the "source" in the text, other attributes and styling is up to you.
function showCredit(){
//find all image tags we want
var elements = document.getElementsByTagName('img')
//iterate through them
for(var i=0; i<elements.length;i++){
//bind the onclick function to all image tags
elements[i].onclick=function(){
//create the new div
var el = document.createElement('div')
//alter this to be whatever text you want
var text = document.createTextNode('Source = '+this.getAttribute('src'));
//alter this if you're going to have more than one clickable div
el.id = 'test';
//add the text to the div
el.appendChild(text);
//add the new div after the image tag
this.parentNode.insertBefore(el, this.nextSibling);
//set a timer to find the element we've named "test" and remove it
window.setTimeout(function(){
var element = document.getElementById('test');
if(element){
element.parentNode.removeChild(element);
}
}, 4000);
}
}
}
//execute the function (bind all images)
showCredit();