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.
Related
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
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.
Currently I have a position: fixed TOC in my side bar that the user can click on to jump to a different (a name="(1, 2, ,3 ,etc)") on the page. This adds a class of "currentlyReading" to the selected li.. When the user clicks another li in the TOC, it of course removes the class and adds the class to the li the user selected.
What I have been trying to add is this: when the user scrolls past the next (or previous) (a name="", I want the TOC to update with the current chapter the user is reading. That means, I need to remove the class of "currentlyReading" and assign that class to the li that is currently being read.
Any tips on how to accomplish this?
I Like waypoints for this. Here is a resource http://imakewebthings.com/waypoints/
To use waypoint, you would include it in your app, then call it in your js.
In head
<script src="js/waypoints.min.js" type="text/javascript"></script>
In your js
$('.currentlyReading').waypoint(function(event, direction) {
//do your trickery here e.g.
//$(this).toggleClass('currentlyReading');
//$(this).next().toggleClass('currentlyReading');
//event.stopPropagation();
});
I found a stack example here for that also How to make jQuery waypoints plugin fire when an element is in view and not scrolled past?
I am working with Apex 5.0, I am in theme 42. I am using the Standard Page template which has the side navigation bar. This side navigation bar is using the template Side Navigation Menu. Now I copied this template and made the new version which I named Side Navigation Menu 2.0, and I set this new template to be used in place of the Side Navigation Menu in all places it is being used since you can not edit the original. I modified the JavaScript in this template to have the default layout minimized which I do not believe has an effect on my problem since it occurs with the original template as well.
Problem:
I am trying to get the hover title to appear with the list items. Now in the default template, there is a title attribute set to the substitution string #A04# for the link <a> element. So it is similar to this:
<li data-current="true" data-id="#A01#" data-disabled="#A02#"
data-icon="#ICON_CSS_CLASSES#">#TEXT_ESC_SC#
The problem is that when I set the A04 substitution string in the list, there is not title attribute which gets set. I changed the attribute to be included in the li element, and I am still running into the same problem. Now, I think I have narrowed the problem down to the classes being used in the parent elements of the list, so I think I have to look into the default javavscript or css files to actually see why the title attribute is being ignored. I inspected the list element and the title doesn't even appear. Does anyone know if/where I should look at these js and css files or if I am going in a wrong direction?
Anything will be helpful, thanks. I can include screenshots or more info if needed.
The two main divs in the navigation list are:
Main div class = "t-Body-nav"
Main div class = "t-TreeNav a-TreeView"
I was able to solve this problem. At the end of this article is a gif with the result of my solution. I will not write in detail how it works but here are two tutorials on how to do it.
If you want menu titles only on one page, just follow these steps:
First step -> In your APEX aplication go to the page where you want the function (I selected Home Page)
Second step -> Go to the events section
Third step -> Create a Dynamic Action based on images
(you can find all scripts at the end of this article)
And you're done it should work.
If you want menu titles on all pages, just follow these steps:
First step -> In your APEX aplication go to the Global Page
Second step -> Go to the events section
Third step -> Create a Dynamic Action based on images
(you can find all scripts at the end of this article)
And you're done it should work on all pages.
Scripts:
document.querySelector(".t-Body-nav");
const elements = document.querySelectorAll(".a-TreeView-label");
for (let i = 0; i < elements.length; i++) {
name = elements[i].innerText;
elements[i].title = name;
}
Result
I'm currently building an application using Sencha Touch. We have a certain Carousel on a page that contains multiple items. Upon clicking a button on a different panel, certain items are added and removed to the panel.
The problem: all works as planned for the first click, but clicking upon clicking the same button again, the functionality stops working and the Carousel display turns blank, with none of the items visible.
Below is the handler for the buttons that change the content of the carousel itemsCarousel. The function adds itemPanels[ b.getBadgeText() ] to the itemsCarousel's items. For the first four clicks or so, this works great. After around then, when I click a button, all the items in the Carousel vanish, and I cannot add or remove any more content, even invoking the Carousel manually from the console.
handler: function(b, e) {
itemsCarousel.insert(1, itemPanels[ b.getBadgeText() ]);
itemsCarousel.doLayout(); itemsCarousel.doComponentLayout();
itemsCarousel.setActiveItem(1);
itemsCarousel.remove(0, false);
}
Things I have attempted:
Changing the order by inserting the item at slot 0, setting 0 active, and then removing 1.
Putting javascript breakpoints on each of the lines, seeing where the carousel goes blank. Sometimes it occours at the .insert() statement, sometimes at the .remove().
Doing all this manually, from the console.
Tweaking the autoDestroy parameter in the .remove() call (as seen above) and in the declaration of itemsCarousel.
If you need more code I can post whatever you think may be relevant, I didn't want to pollute this thread with excess code. Thanks for your help!
Edit: If anyone knows another way to reproduce the same functionality, I am open to that as well. I am thinking perhaps creating a dummy holder Container with one item, a carousel, and deleting the entire carousel and re-adding a brand new (with the new items) one upon the button click?
Well, I figured out how to reproduce the functionality using a different method.
I built multiple carousels, each containing the panels I wanted, and then had a root panel that simply sets the active carousel based on button presses. For example, the hierarchy looks like this now:
rootPanel
{
carousel[0]
{
panel1
panel2
}
carousel[1]
{
panel3
panel4
}
...
}
and I perform rootPanel.setActiveItem(x) to display the new carousel.