I'm trying to use Angular-Scroll (https://github.com/oblador/angular-scroll) to simply scroll to an <a> link on the same page, but do it nicely and smoothly. When I couldn't get it to work, I made a super simple setup in Plunker.
Plunker: https://plnkr.co/edit/w1GBTAjxtHL3H4LAuHoO
If you download the zip of the GitHub, there's an example I'm trying to do in the folder location angular-scroll-master/example/container.html. There's really nothing complex, the angular script is basically just finding the container id for the directive to use.
I cannot figure out why my page will not scroll.
HTML
<div class="medium-6 columns" du-scroll-container="container">
Link
</div>
<div id="container" class="medium-6 columns" du-scroll-container="">
<div id="junk">LINK JUNK HERE YAY!!</div>
</div>
</div>
JS
angular.module('scrollDemo', ['duScroll']).
controller('myCtrl', function($scope) {
var container = angular.element(document.getElementById('container'));
});
I edited your plunker and it seems to be working now. Here is the link.
The problem was that the container div is not the scrollable container that would be the body element to make it work as the scrollable element you can set the max-height of the container so that it will become the scrollable element or remove the du-scroll-container="container" atribute so that it will use the body as the scrollable element.
Related
I am trying to create a div with a fixed left section & scrollable right section and other divs below them. I went through many blog posts and I am not able to figure out, how to create this particular page in react JS using Tailwind CSS.
I am using react JS & Tailwind CSS.
I have added the structure of my page and also added a similar page for reference.
Structure of my page :
<div className="mainDiv">
<div className="rowDiv">
<div className="staticDiv">
<ProductImages
images={productData.mediaUrls}
/>
</div>
<div className="scrollableDiv">
<ProductInfo
productData={productData}
/>
</div>
</div>
<div className="relatedProductsDiv">
<RelatedProducts
sectionHeading="Related products"
/>
</div>
<div className="recentlyViewedProductsDiv">
<RecentlyViewedProducts
sectionHeading="Recently viewed products"
/>
</div>
</div>
Similar page: Click here to view a similar page
div with className staticDiv should scroll only after scrollableDiv
completes its full scroll.
once scrollableDiv finishes its full scroll, both the divs (staticDiv and scrollableDiv) should scroll normally to show relatedProductsDiv and recentlyViewedProductsDiv.
Please click here to view a similar page to get my question in more detail.
I am trying to create a page similar to the one in the link.
I have this code that shows contents outside of the ng-controller.
HTML
<div class="btn-group companyName">
<!-- buttons -->
</div>
<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
<div class="faq-breadcrumbs">
<!-- contents -->
</div>
</div>
JS
angular.module('sample').controller('TopicsCtrl', function ($scope) {
//how to hide first div?
};
The top div is inside the site's header, so it is shown in all pages of the site. The second div is only shown if I am in the FAQ page. Now I don't want the first div to show on the header whenever I am in the FAQ page. How can this be done? Can anyone help me? Thank you very much.
The angular way to do this would be to create a directive that manipulates the DOM and will hide the element on the page when the route is on the FAQ page. In order to do this you will have to increase the scope of your app to include the header.
If you can't do that, I would suggest just going the javascript/jquery way and hiding the companyName div when the location is at faq. Something like this could work.
$(document).ready(function() {
if(location.pathname == 'faq'){
$('.companyName').css('display', 'none');
}
}
This solution does pose the problem of potentially showing information before the document is completely loaded.
I'm new to JavaScript and also to using Isotope. I've created a basic grid using the demo relayout code:
http://isotope.metafizzy.co/demos/relayout.html
Where do I need to tweak the code so that the default layout shows the images in toggle variable size state.
I do not need that toggle button. Just need the page to already display the grid in variable size layout.
Please guide~!!
Thanks a ton!
After the filtering options, but before the content starts, you need to insert "variable-sizes" as a class of the id "container". At least, that worked for me! :)
...
</section> <!-- #options -->
<div id="container" class="variable-sizes clickable clearfix">
<div class="element alkaline-earth metal" data-symbol="Mg" data-category="alkaline-earth">
...
I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>
hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.
Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";
I have an html fragment that is being loaded by the backend into the main div of my page. It contains a modal that appears when a link is clicked on. The issue is, is that the modal is able to be covered up by other elements on the page. Setting the z-index is useless, because if an element in the header has a higher z-index than the main div, the modal will show up behind the header, regardless of its z-index. I'm currently solving the problem by using javascript (jQuery) to clone the modal, appending the clone to the body, and then deleting the original modal. This seems like a hacky workaround and could cause potential problems, is there a better way to do this? How do modals usually get loaded so that they don't encounter this issue?
Here's a jsfiddle of the problem: http://jsfiddle.net/kraxF/
Here's the HTML, as you can see, the modal is pretty low in the DOM tree, and may be covered up by elements in the header or footer or main, if they have a higher z-index than "loaded-by-backend".
<div id="container">
<div id="header">
Header
</div>
<div id="main">
Main
<div id="loaded-by-backend">
<div id="modal">
Modal
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
If you can change CSS, just remove position:relative from #main.
http://jsfiddle.net/kraxF/3/