When I try to update a value in type=number or type=range, the page scrolls to the top. IS there any way to stop that from occuring?
<input type=number bind:value={temper} min=0 max=50>
I see sapper has something this --
<a href='path' sapper:noscroll>Path</a>
which supposedly stops the scrolling when link 'Path' is clicked. Anything similar for svelte 3?
thanks,
gani -
Related
I am trying to get animations on scroll to work within an angular7 frontend, however it doesn't work within a router-outlet.
I assume this has to do with how angular handles scrolling position within router-outlets as suggested by a lot of related questions on scrolling.
My questions:
How can the intended behavior be achieved within router-outlets?
Is this even possible?
Does someone have an explanation on why the problem occurs?
Specifically, I would like to apply a zoomIn animation from animations.css on some divs once they are reached via scrolling.
In order to get this to work, I am using the package "ng2-animate-on-scroll", which works well, until the divs are located within a router-outlet.
In my app.component.html:
<div animateOnScroll animationName="animated zoomIn">
text to zoom in on scroll <---works
</div>
<router-outlet></router-outlet> <--- everything in here doesn't work
<div animateOnScroll animationName="animated zoomIn">
text to zoom in on scroll <---doesn't work
</div>
When I place some divs within app.component.html above the router outlet, the animations on scroll are visible, and work as expected.
However, everything within the router-outlet or below is not animated.
Any suggestions?
Turns out the pages under router-outlet use their own module, which is why ng2-animate-on-scroll has been imported within the wrong module file.
Apparently,it could not be inherited from app.module.ts.
I'm using this, Angular-UI Bootstrap Popover
And below is my code snnipt:
<a href=""
popover-placement="{{$index < 4 ? 'bottom' : 'left'}}"
popover-trigger="outsideClick"
uib-popover-template="'popover_table.html'">
Click me
</a>
When I click the link, it will show the popover_table.html content in page, it's a table which shows the data returned from backend. When there are too much data returned, The popover_table will show many records, and user need to scroll down inside the table. So They are asking if we can fixed the table header in the popover dialog top when scroll. Screenshot added below
So if there are more than 4 records, I need to add scroll-y and keep the table header fixed in the popover top so user can see it all the time when scrolling.
How to implement this feature? position fixed does not work in this case.
and also, if I add ng-click for <a>, then is there a way to execute the ng-click function after the popover shows? I tested and found that ng-click function execute first..
If you are using ng-click then it suppose to be worked if its still fails use $scope.$apply() inside click function
I'm currently using JQM1.3 with iscrollview and was wondering how I would go about fixing this issue I have when I put an iscrollview inside another iscrollview.
My HTML goes something along the lines of:
<div data-iscroll="">
<!-- some content goes here -->
<div data-iscroll="">
<!-- more content goes here -->
</div>
</div>
The problem I have is when scrolling down everything looks good but if I scroll up; both div will scroll up. Is there anyway that I can stop the outer div from scrolling until the inner div is at the top?
I don't even know where to begin doing something like this so I was hoping for some pointers as to where to begin/look for info?
Please and thank you.
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.