I'm trying to make sort of a folder and file system in Vue.
What I want it to do
When user selects an item and drags it over another item it shows 2 divs. One div says "swap positions" and the other "put into folder". Depending on which od these divs the user lets go of the mouse button the chosen action would be carried out.
What it does
Vue dragable just autosorts the items when I drag one over the other. No events like mouseover can be detected to show the mentioned divs.
Example
This will not resolve your problem, but will help you a lot: Because you drag "file" by clicking and holding with your mouse, don't use #mouseenter or other #mouse.... Instead of use #drag...start/over/enter. And so you can print your red and green zone if you are on folder by clicking a file:
<div
class="item folder"
#dragover="
callMe(); /*you can for instance call method in METHODS part too*/
actions = true;
"
#mouseleave="actions = false" /*works just if you are not holding a file woth the mouse*/
>
Related
I want to automate the download of images in a dynamic website that has:
An array of boxes (divs), and in every box there is:
String ID
Thumbnail
Menu button with the id #contextmenu
To download images the process is
click on Menu button > (dropdown) select p with id "download-button" > (another dropdown) click on list item with class "Original ui-menu-item"
It's one of those sites that doesn't allow multiple selection and it's making my life awful, any help would be appreciated.
I want to integrate it to my Power Automate Flow, so I'm not currently making a separate program, but I'm open to ideas, so far I had:
var children = document.querySelector("#lightboard > div.media-page__thumbnails-wrapper.overflow-auto > ul").children var length = document.querySelector("#lightboard > div.media-page__thumbnails-wrapper.overflow-auto > ul").childElementCount
and was planning to iterate an action over each children item, but no matter what code I added in the loop, it's not working.
Thank you
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.
So I'm new to JavaScript so I'm unsure how to setup my code.
Before explaining its vital to look at my code -
https://jsfiddle.net/avaris/bexn436s/
When right clicking inside a container a custom context menu pops up with a button, the button makes div (line 1) visible.
I'm trying to make it so if you open the context menu by right clicking inside container4 on line 38 (or any other container) whatever is in ID & NAME class will match infoID, infoName of div (line 1).
All I'm looking for is advice or direction on possible solutions.
If opened by right clicking on "NAME4"
<p class="NAME4">Valentine</p> (line 41)
to
<p class="infoName"></p> (line 4)
The context menu script starts on line 61 and you determine in which element the context menu displays at line 144:
var taskItemClassName = "container";
-
I've tested everything but could not figure out a setup due to accessing the "info page" through the custom context menu made it way out of my expertise.
Any direction is all i'm looking for.
Tried to keep it short but if i explained poorly i'd love to give any more information.
You can use the title attribute for each of your components. If you hover over a particular item, you can get the intended value. Using JS you can add the title tag for each of your list components.
I am trying to grey out the Finish button in jquery steps (like the Previous button in the image below, for steps 1 and steps 2 in my wizard. The third and final step will enable the Finish button.
I thought the best approach is to set
enableFinishButton: true
so it is available for manipulation.
I inspected the grayed out 'Previous' button in chrome editor and I saw this:
It seems to me that I want the id="finish_button" to appear in the
<li class = "disabled" aria-disabled="true">
along with the Previous button in Step 1, and remain there in Step 2, then move to
<li class = "aria-hidden ="false"" aria-disabled="false">
in Step 3. It would also be nice to move the Next button to
<li class = "disabled" aria-disabled="true">
in that third and final step.
I have no idea how to move an element by id around these different classes based on user clicks.
Thanks for any help anyone can provide.
Tom
I have some examples of what I think you are looking for:
// move an element to another element
$("#finish_button").appendTo("li.disabled");
// or leave element where it is and change attributes and classes
$("li[aria-hidden='false']").attr("aria-disabled","true");
$("li[aria-hidden='false']").addClass("disabled");
// set up onclick events for the buttons to make these types of changes
$("#next_button").click(function() {
// code to run when next is clicked
// like enable finish button, disable next button.
$("li.disabled").removeClass("disabled");
});
These may not be the exact selectors you will need to use, depending on if there could be other li elements on the page with similar attributes.
The onclick and href can work together as long as the click function does not return false, or run preventDefault() on the click event.
I hope it helps.
I am looking to create a tool where I can drag an image from one div to another and on drop, the following to happen:
1 - The dragged image returns to where it came from
2 - A series of controls are added within a container
Similar to https://formbuilder.online/ when a textbox is added to the form.
I understand how to perform the drag (i.e. make the item draggable) and I can understand the drop event. I'm struggling to return the dropped object back to it's original location.
The overall aim is to drop a list item into a sortable list so I can reorder the items (it's similar to the formbuilder linked above, but for a custom application, nothing to do with forms.
I'm just not sure what I need to put into my dropEvent function to return the dragged item to it's location. I can use jQuery append to add the list item containing the controls I want to the list, so that should be fine, it's just the returning the item to where it came from.
Sory, have just seen the documentation and the revert option when making an item draggable.
You might wanna try jQuery Sortable:
https://jqueryui.com/sortable/