Develop Reference

How to create a div with fixed section in the left and scrollable section in the right using Tailwind CSS?

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.

Angular-Scroll: same as example, but not working (Plunker)

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.

Fading Images with links

I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.

First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});

Isotope: Change thumbnails to Variable Size

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">
...

nanoScroller.js doesn't initialize

I have a strange problem with a website where I try to embed nanoScroller.js
I've implemented the HTML structure and loaded the necessary js and css but it doesn't load the scroller. Has anyone an idea?
Website is: http://www.ehmesevents.de/portfolio If browser Window is wider than 980px

The updated docs of nanoscroller showed, that not the id of the content is needed. the class "nano-scroller" is needed. so it would look like:
<div id="about" class="nano">
<div class="nano-content">
content....
</div>
</div>