How to make custom scrollbar that shows highlighted items on the page - javascript

I am a student (beginner coding level) coding a prototype and I am trying to make a custom scrollbar that shows highlighted markers of selected items on the page, similar to VS. I was wondering if anyone might help me with this or be able to point me to a source that shows examples of how to do this?
We have html, some css and javascript coded. I am a beginner so I have I have tried searching on websites for examples but have found none.
Our Javascript for selecting items:
$('.highlight').click(function () {
// Get the second class name of the parent li
var highlightClass = $(this).parent().parent().attr('class').split(' ')[
var highlightItem = '.' + highlightClass + ' > .menuDiv'
$(highlightItem).toggleClass('highlight-show')
})
The user should be able to select an icon that highlights that object from a long list of other objects, and then scroll down the page to be able to see all of the objects of the same ID that have been highlighted. There are multiple objects with the same ID on the page, so they would all be highlighted when the user selects one of them.
With the final result, those highlighted objects would show up as 'ticks' on the scrollbar so the user can easily find them on the page. This functionality would be used so that the user can easily find a certain item from a long list of items.
Thank you in advance.

Related

How to fill in Google Form's drop down and text inputs with Tampermonkey?

I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).
Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Javascript Mirror 'Current' Tab to another Tab | Webflow

I've created a widget in Webflow that works but the UX design isn't the greatest and in order for me to create a better experience I need help with some js. Here's a little overview of the widget so you see what I mean:
The goal of the widget is to allow users to
a) browse our product categories and continue to view product options
b) view the aesthetic differences between our offered building types (prefab and container) while also allowing the user to compare building types for each category by following the "compare" CTA
Gif of Widget
We have 5 product categories in 2 different building types: prefab and container. I have 2 tabs to switch between the building types and then inside of those tabs content, I have 5 category tabs: Living space, portable offices, utility, recreation, and storage. Those tabs' contents are the image and CTAs on the left.
My problem is the user's selected product category doesn't mirror over to the other building type. For example if you've selected office spaces on the prefab tab and switch over to the container tab, a completely different product category will be selected.
How it Should work
I was able to mirror the selected prefab product category over to the container tab using this basic logic:
<script>
//prefab
$(document).ready(function() {
$('.livingprefab').click(function() {
$(this).addClass('current');
$('.livingcontainer').trigger('tap');
});
$('.storageprefab').click(function() {
$(this).addClass('current');
$('.storagecontainer').trigger('tap');
});
$('.utilityprefab').click(function() {
$(this).addClass('current');
$('.utilitycontainer').trigger('tap');
});
$('.officeprefab').click(function() {
$(this).addClass('current');
$('.officecontainer').trigger('tap');
});
$('.recprefab').click(function() {
$(this).addClass('current');
$('.reccontainer').trigger('tap');
});
});
</script>
Now, this works but when I try to add the opposite (selected products on the container tab mirror to the prefab side) everything breaks. Why is this? How can I fix it?
P.S. This is literally my second time touching js so the code is probably far from best practice. I'm a UX designer trying to branch out into development so if you have any advice I'd love to read it.
Edit: Here's my Webflow read-only link
Your code above makes an automatic click/tap occur on a container product just after a click occurs on the corresponding prefab product using the trigger method.
If you replicate this code in reverse as you suggest, an automatic click/tap will also occur on a prefab product just after a click on the corresponding container product. So— together these would create a never-ending recursive loop of clicks and I would imagine that everything would break.
Instead of a click on one product triggering an automatic click/tap on the corresponding product, I suggest you use the click/tap events on a pair of products only to make changes directly to the classes on the relevant elements. I would avoid triggering additional click/tap events and in doing so you will avoid such recursive problems. And, as it looks like you are toggling the same class on the pair of corresponding products, you can apply the same function to both to avoid duplicating code.
It's hard to be precise without seeing the rest of your code and the HTML, but something like:
function makeLivingCurrent() {
$('.livingprefab').addClass('current');
$('.livingcurrent').addClass('current');
}
$('.livingprefab, .livingcurrent').click( makeLivingCurrent )
And so on.

Highlight last inserted document in Meteor

I have form and list of objects at the same page. When I insert a new row, it is not very easy to see where the newly inserted row is placed. Therefore, I thought I could color/highlight the newly inserted row (and perhaps remove the highlight after a few seconds).
How can I do this? I think a way to do this could be using a method on the server which returns the inserted id (return Collection.insert(doc);) and on the client use a callback with
Meteor.call('insertDoc', function(err,result) {
// do something with result
});
I think I can use a reactive-var to save the id of the last inserted row and in the loop highlight the row with
{{#each docs}}
<li class="{{isActive}}">{{name}}</li>
{{/each}}
and have a helper to return active if this._id equals the reactive var with the last inserted id.
But is this the best way to do it? How can I remove the color after some seconds? I have seen such behaviour on many pages but I cannot find any tutorials/code snippets to achieve this.
I wrote a package that uses Meteor's UI hooks to fade items in and out of a list as they are added and removed, to help users maintain context as data changes:
https://github.com/mizzao/meteor-animated-each
There is a demo at http://animated-each.meteor.com/. You can see that as items are added and removed, they are faded in and out. If items are inserted off the screen, the visible area does not scroll.
This isn't doing exactly what you want, but you can use the same idea to highlight items as they appear as well, as opposed to the simple fade in.
Note that all of this happens at the UI rendering level - not the template/code level. The UI hooks are also not well documented right now, but they've been around for a while.
I don't know if your method is the best, but that's how I'd go about doing it.
As for the animation, I'd use a CSS3 animation. Plenty to choose from ( https://developer.mozilla.org/en-US/docs/Web/CSS/animation ), and you can easily make them fade to the standard color. The animation would also only be applied to the last inserted item (because of the way you did it, only the last item would have the "active" class)

drop down list with multiple check box levels in JQuery

I need to create a drop down list that contain multiple checkboxes as well as multiple levels. The user should be able to select an option and/or dig deeper to select sub categorical. See the example from the code below.
So far, I was able to create the drop down list and the check boxes. I am having problems getting the id of the button selected and opening the corresponding div
http://jsfiddle.net/Ammarcola/e5CZb/
How can I get the button working?
edit: I will explain my approach to make the code easier to read.
I am trying to create multiple with each of them containing a list of check boxes. Whenever a button is clicked, all the s should .hide() and only the requested would .show(). I am not worried about how the main would be reached again, but all the should reset once the drop down list is collapsed. Hope that helps.
I have given the corresponding id of the buttons to the Div's that have to be manipulated.. Then finding the button that was clicked and constructing the div that has to be opened..
Check this FIDDLE and let me know if this is what you were looking for ..
Or is it a different requirement..
$("button").click(function() {
$("p").toggle();
var btnID = $(this).attr('id');
var coresDiv = $('div#' + btnID);
coresDiv.toggle();
});

Minimize tables under text link (used jQuery and Javascript already)

I have tried jQuery and overflow hidden and toggle options but none of them will allow me to do what i wish to do with these tables.
here's a picture of what I want to do....
http://26.media.tumblr.com/tumblr_lmvixzfYyY1qzp8feo1_500.jpg
I want the tables I've created to span the whole browser, I presume its a bit like tabs except I don't want them to be visible until the user clicks on the text option; I hope there's a way - I've seen it done before - so that when the page loads only the text is visible and then when the user clicks on the text the picture and options drop down. The code I've tried only work for one link or the code conflicts and the tables aren't 100% across either.
Sorry, I'll tell you I'm fairly basic in my coding knowledge but any help is greatly appreciated!
culturecouture.cc
alternative to jquery-ui jquery-tools might be: http://flowplayer.org/tools/demos/tabs/index.html
you could use:
$("#mytabs .shouldBehidden").hide();
Or I hope this code will clarify the potential methods and provided by jQuery Tools!
// Place the filter in the appropriate position
$("#new-filter-tab").before(data.filter);
$("#new-filter-pane").before(data.content);
// Remove the existing Tabs instance
$("ul.filter-tabs").removeData("tabs");
// Recreate the Tabs
$("ul.filter-tabs").tabs("div.filter-panes > div");
var filters = $("ul.filter-tabs").tabs();
// And select the new filter
var filterCount = filters.getTabs().length;
filters.click(filterCount - 1);

Categories

Resources