I wanna highlight the menu while scrolling the page. As we know, there are so many tutorials about this.
For example, here is one by JQUERY: http://suo.im/6q97rQ
Now the problem is it seems the Blazor server-side has forbidden some method of JQUERY that it can not run perfectly.
In the tutorial above, the scroll method never works.
I searched for something about Blazor forbidden JQUERY, most of the solution is to invoke JQUERY by the Blazor code.
However, I don't know how to get the scrolling event by the Blazor code.
Would you please help me? Thank you.
You have two options
You can use onscroll for detected you scroll page change states. Event argument types
You can call js function by using JSRuntime.InvokeVoidAsync("yourFunction");
Related
We are trying to build an music playing interface on a Vue page that plays in a bottom player as described here:
https://vuetifyjs.com/en/components/bottom-sheets/#music-player
But the playlist and other controls are in the main page. But the problem is that these elements get 'blocked' or deactivated or something, there is no way to interact with them. Just like in this example.
Input elements stop working and scrolling on the main page works only by grabbing the scrollbar on the side.
#clicks are still registered, however, and scrolling on some other components work.
I think I have tried every API setting and combination in the docs, like attaching it to different dom elements, or hide-overlay, and persistent, but nothing seems to work. The same principle seems to apply to other dialogs that take focus in vuetify.
https://vuetifyjs.com/en/api/v-bottom-sheet/
Does anyone have experience with this or know a workaround for it? It would be greatly appreciated!
This is intended behaviour. Your best bet is hide-overlay in combination with persistent
<v-bottom-sheet
hide-overlay
persistent
></v-bottom-sheet>
I face the same issue and solve that with the "retain-focus" property
try this <v-bottom-sheet :retain-focus="false"></v-bottom-sheet>
I've got a rather weird scenario going on here. I am trying to add tooltips to an existing ASP.Net MVC application in which I'm upgrading Bootstrap to 4.6.2. The upgrade was very smooth with no complications; I just want to replace the default display of titles with the nicer looking tooltips, but for some reason they're not appearing. I tried to simplify things by creating a new view to isolate the problem, and still no tooltip. I tried again with completely new solution, and wouldn't you know it, it works! So my question isn't "how do I create tooltips", but "how can I debug what's going on in the failing project?"
Here's what I've discovered so far. I believe you can see everything that's relevant in this screenshot of the nearly-empty view. All the included script files are there in the right order, my script is there, initializing the tooltip, and there are no messages in the console. When I hover over the link, a new <div> element is added to the DOM. In DevTools, I use the arrows to expand the tree, showing everything in the tooltip. The .fade:not(.show) CSS selector is the reason I don't see it. In the working solution, the show class is properly added to the tooltip's <div>.
So, could there be some setting in the existing application preventing the addition of the show class? Is something failing in the tooltip code,causing it to never add the show class without reporting errors? How should I continue debugging this? I tried stepping through the bootstap.js file, but being a JS noob, I'm getting a little lost. The screenshot is from Chrome, but I see the same behavior in Firefox.
This turned out to be one of those embarrassing oversights. My BundleConfig.cs file was still pointing to old Javascript files that were still hanging around after the upgrade. I should have seen it in the version numbers in the <script> tags.
Currently i am working in a project which is already developed in v-DataTable of vuejs which is all new to me. In this project, i need to call an event when the scrollbar reach its bottom.
Any API can also be used.
Please help me out.
If project is built with Vuetify (guessing because you've mentioned v-data-table) - take a look at https://vuetifyjs.com/en/directives/intersect/
Otherwise you can check out Interesection Observer API or third party libraries like Tornis
I've created a simple blazor app that has a slider on top. There is a javascript self executing function that adds some inline css to this slider so it makes its' height the same as window.height.
I'm adding this javascript file in _Host.cshtml, before closing the body tag.
My issue is that this inline styling isn't applied. I've debugged the javascript code and it gets the correct height, the element on which I want to add the styling is found, the element.css('height', myHeight) is being called with the correct value, but in the end there is no style attribute on that element. I've also tried, after the component has been rendered, to remove the script tag from the page and add it again, hoping that it will re-run and then change the height, but no success there as well.
I've created a .NET Core WebApp using that same slider and everything works as expected (I have the style attribute on my element). In this second app I add the script before closing the body tag, in _Layout.cshtml.
Seems preety much the same as the blazor app, but for some reason, on that one doesn't work.
Do you guys have any idea why?
EDIT:
I've found something interesting. In the beginning, the page is loaded correctly, but the component is being reloaded after the app connects to the we socket Information: WebSocket connected to wss://localhost:44361/_blazor?id=cepYgPnJYddq2bHSywwwYw.. This is when I lose the inline styles.
So how can I stop it from reloading? I guess this is the question.
I am using an .aspx page as cluetip bound to an anchor tag. I need to pass a parameter from anchor to this page and then call a WCF service to populate my template with returned JSON. I tried putting body onload function but that doesnt seems to work.
Thanks
Koby.
response to comment
You want to use the .mouseenter() event. This new event in 1.4 is better than .blur() which is what you will see in most examples (and probably why you can find it, a search of blur jquery popup should give you lots of examples). But mouseenter is better in the lastest jQuery
Docs: (very nice example code at the bottom of the page.)
http://api.jquery.com/mouseenter/
old version
just add the function to the onclick handler. You can do this in jquery with something like this
$(selector).click(function () {
code to do stuff (call wcf and populate)
you can use $(this) to see what was clicked on. ("passed" as you put it)
});
see fab new jQuery docs http://api.jquery.com/click/