Let's take the following div for example. The div is this small because I intend to add a scrollbar to it.
<div id='main' style='height:300px; overflow-y: auto;'>
<!-- Content that is long enough to require a scrollbar... -->
</div>
Let's say I initialize a custom scrollbar on this div (malihu or jscrollpane) for example, with the following command:
jQuery("#main").jScrollPane(); // for jscrollpane
jQuery("#main").mCustomScrollbar(); // for malihu
This works just fine for the moment being, but when I add data to the div dynamically, it doesn't appear in the div, and the scrollbar is not adjusted:
jQuery("#main").append("Add this data to the div...");
What could be the problem?
Found out the solution. When creating any of the above scrollbars, they add two containers to the div which is attached to. You must append the content to these containers, and not to the basic div.
For example, to add content to jscrollpane scrollbar, you use:
jQuery("#main").find(".jspPane").html("Data to be added...");
For malihu you would use:
jQuery("#main").find(".mCSB_container").html("Data to be added...");
Related
I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad
well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.
Trying to replicate the pre-loader page on load the SVG and a background image appears and as soon as the user scrolls the page scrolls to the content and the page-loader is not visible or can be reached again unless you refresh the page, not sure how to tackle this, any help to point me in the right direction would be great- I have tried diseminating the said page.
there are a few ways to accomplish this, a simple starting point could be something like this:
basic html outline:
<div id="loader">
LOADING Image/content
</div>
<div id="body">
website body
</div>
CSS
#body{display:none;}
jQuery
$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});
noscript fallback
<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>
Basically, this code has two divs the loader and the body, the body is set as display none in the CSS. When the page is ready, jquery is triggered to hide the loader and show the body.
The noscript fall back will set body to visible when javascript is disabled.
There are multiple ways to accomplish, this is just one idea.
Out of one of a hundred different ways, my initial thoughts were along these lines:
Wrap your main content in a wrapper with position relative and give it an offset from the top by 100% of the window width
Make the page-loader 100% height and width and position fixed
Offset the wrapper before the page is fully loaded, and then just transition it to 0 offset once the page had loaded
See a working jsfiddle here
Create an element (Div) that covers the whole screen.
Behind it (smaller z-index) add a Div container that holds all the images.
Add in JavaScript a load event function to all images:
image.onload = function() {
//image was loaded
}
Hide the cover Div when all images was loaded.
How to know when all images were loaded? add a counter or use a Promise.
Add overflow: none to disable scrolling, and add click event or scroll event (using jQuery) and set overflow to auto.
There are a lot of ways to implement each of these sections.
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.