This is the question that I asked before but didn't get a problem-solving response. What's happening right now is that I am opening modal on the click of a panel. The modal opens with no problem but the problem occurs when I scroll to bottom and click a panel which moves to body scroll to top.
Here is the fiddle with the code.
Here is the panel code I am using:
<div class="panel">
<div class="panel-body" onclick="loadArticle('Metrico Release Date Announced', 'http://www.ign.com/articles/2014/07/16/metrico-release-date-announced')" data-toggle="modal" data-target=".bs-example-modal-lg">
<h4>Metrico Release Date Announced</h4>
<div class="news-item-background-image"></div>
<br>
<div class="article-info">
<p class="text-muted pull-left">
<img src="http://s1.wp.com/wp-content/themes/vip/techcrunch-2013/assets/images/favicon.ico" width="16px" height="16px">TechCrunch-1 hour ago</p><p class="text-muted pull-right category">Category</p>
</div>
<div class="clearfix"></div>
<p>Metrico will be released on August 5 in the US exclusively on PS Vita, according to an announcement on the PlayStation Blog. Digital Dreams also announced that Palmbomen, a Dutch synth composer who has been featured in games like GTA V worked with the studio to create the soundtrack for Metrico.</p>
</div>
<!--/span-->
</div>
In my CSS, I have added this:
body.modal-open {
overflow: visible !important;
position: fixed;
left: 0;
width: 100%;
}
And I know that this is the reason why is this happening because position:fixed with no top value I guess moves it top. If not this, then what should I do to fix the problem.
P.S the css above fixes the extra scrollbar issue that is also happening. So keep that in mind while answering. Just a tip! :)
So after a heck of time, figuring out the way to fix it, this is my workaround (inspired by the accepted answer here):
$('.bs-example-modal-lg').bind('hidden.bs.modal', function () {
$("html").css("overflow", "visible");
});
$('.bs-example-modal-lg').bind('show.bs.modal', function () {
$("html").css("overflow", "hidden");
});
The first bind regulates the event of modal when it hides and enables the scroll of whole page while the second one regulates the event when it shows up and disables the scroll of whole page.
Simple. :)
Related
I have an Angular 8 project, which receives list of products from the server. Since the number of products per user might be very large, I'm making request and displaying to user only first 20 items, but when he reaches the bottom of the container, I'm uploading 20 more items. For scroll detection I'm using infinite-scroll library. Everything worked fine until I've added another library, that autoresizes product title to fit container width. After adding it, scroll started automatically jump to the end of the container (to the latest uploaded item) and because of that it triggers uploading of another bunch of additional items. Before adding autoresize, users were staying on the same place (at the end of the first 20 items).
I have already tried next steps:
Removed infinite-scroll and wrote my own method to detect when user
reaches end of container to upload new items. Result: same behavior
with scroll drop.
Removed fittext library and wrote my own directive to resize text
label. Result: same behavior with scroll jump.
Tried to switch overflow on container to hidden to prevent scroll,
tried to change scrollTop value.
Nothing helps. Scroll is still jumping to the end each time new items are loaded. But when I'm removing autoresize feature - everything works fine, except I don't have autoresize..
Maybe someone had similar issue or have any ideas about how to prevent that scroll jump?
Thanks!
This is my html:
<div class="prizes__wrapper" *ngIf="viewModel.prizes.items.length > 0" infinite-scroll [scrollWindow]="false"
(scrolled)="scrollDown(this.viewModel.prizes, 0)">
<div class="content-wrapper">
<div class="outer__wrapper" *ngFor="let prize of viewModel.prizes.items; let i=index; first as isFirst">
<div class="inner__wrapper">
<div class="prize">
<div class="image-wrapper">
<div class="prize__date">
{{'claim_page_won_title' | translate:(prize.created | date:'mediumDate')}}
</div>
<div class="prize__image" [ngStyle]="{ 'background-image': 'url(' + prize.machineImage + ')' }">
</div>
</div>
<div class="prize-controls">
<div class="title-container">
<p class="title" appTextFit>{{prize.prizeShortName}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Styles for container with overflow:
.prizes__wrapper
height: 100%
overflow-y: scroll
scrollbar-width: none
-ms-overflow-style: none
Adding trackBy on ngFor element helped to fix that issue.
<div class="machine" *ngFor="let machine of viewModel.machines; let i = index; trackBy: trackByFn">
I've added the appropriate js link from pinterest in the appropriate place on my website, and checked all the known errors and still can't seem to get the pin it button to appear on the images of my site.
Thanks for any help. Here is the page live on my personal website:
http://lancebeaudry.com/lindsay/
I've noticed:
<div>
<img src="images/img1.jpg" class="slider-img">
</div>
<!----far away---->
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1895px; z-index: 8675309; display: block;"></a>
Change that to:
<div>
<a class="..." title="Pin it!" data-pin-log="button_pinit_floating" data-pin-href="//www.pinterest.com/pin/create/button/?..." style="top: 110px; left: 1585px; z-index: 8675309; display: block;"></a>
<img src="images/img1.jpg" class="slider-img">
</div>
Fixing the slider can be kind of complicated, but I tell you about the process I'd follow.
Go to https://github.com/kenwheeler/slick/blob/master/slick/slick.js and download it locally.
The error is most probably related to the swiping effect, so you could try to set swipe: false, where you define the slider image container $('.slider-for').slick({
If that doesn't work reiterate the process with any variable set in the _.defaults or _.initials = { that deals with mouse events.
Furthermore, if that doesn't work identify the part of the code that detect the mouse and change the cursor look. Comment it out. If it works notify the author of your findings.
Hope it helps.
My website's mobile site, (http://www.codesrce.com/thedrumcenter) has a very modern and functioning push menu. However, I am looking to make it more user friendly. Can someone please help me tweak my code so that when the user presses on the menu button the menu will open, and also when the user slides the screen to the right to open it, and then once it's open then they slide to the left to close it? Also, when the button is pressed, I would like it to turn to this color, #0099FF, and then when it is closed turn back to gray. Sorry if my wording isn't the best, but I hope you know what I mean. :) I will provide my code so far:
HTML
<div id="Mobile">
<div id="menu">
<ul>
<li>Top Brands</li>
<li>Drums</li>
<li>Hardware</li>
<li>Cymbals</li>
<li>Sticks</li>
<li>Drum Heads</li>
<li>Terms of Use</li>
<li>Affiliations</li>
</ul>
</div>
<div id="right">
<div id="Top">
<div id="menubar">
<a id="menubarheader">DrumCenter</a>
</div>
</div>
</div>
</div>
JQuery
$('#button').toggle(
function() {
$('#right').animate({ left: 275}, 'fast', function() {
$('#button');
});
},
function() {
$('#right').animate({ left: 0 }, 'fast', function() {
$('#button');
});
}
);
Any help would be appreciated, as I am a complete NOOB at Javascript and JQuery. Thank you!
Essentially there are different ways to go about this.. I inspected the CSS on your site to see how you were doing things but with 8 CSS's I gave up... too much to look at in the browser.
So.. essentially this question I believe was asked in
Swipe in the middle to open panel with jQuery Mobile?
and he gave a fiddle such http://fiddle.jshell.net/Palestinian/2B4Ht/
So I would implement that into your coding in some way. Have a top-fixed navbar that when collapsed will show your "push menu". Then just have the options if the the screen width is less than say 768pixels or something you can swipe left or right to open the pannels that will be menu's themselves..
Just my advice. I have never made a menu like the one you asked but I don't think it will be difficult.
I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.