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";
Related
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.
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 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/
I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser.
How can I get work this with the fixed positioning?
Javascript to show/hide goes like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").show();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
HTML Goes like:
<div id="stick_footer_title"><a class="show_hide" href="#">Toggle Menu
▼</a></div>
<div class="slidingDiv">
<div id="stickyfooter">
<ul id="footer_menu">
<li class="imgmenu"></li>
<li>Intro</li>
<li>Photos</li>
</ul>
</div>
</div>
FYI: The position:fix; css applies to the STICKYFOOTER div
what if you hide the "stickyfooter" div, instead of the container?That way, the container will always be fixed (and shown), but when you hide the content, it will have nothing shown in it.
Can you try giving a duration parameter?
Like this:
$(".slidingDiv").slideToggle("slow");
Move position fixed from #stickyfooter to .slidingDiv if you can, or create a new element inside #stickyfooter that you'll hide/show.
I am trying to get the height of a JQuery UI's dialog's div once opened, so that I can set the parent's iframe height dynamically.
However it seems to be returning me the height of the div before the footer button panel and title panel are added. The height for the dialog is set to "auto";
$(this).height($('#dialogdiv').height());
I have tried, outerHeight and offset Height aswell, but get similar results.
Any ideas?
The div you call .dialog() on is actually embedded into another framework of divs that make up the actual jQuery UI Dialog that displays. What you will want to call is this:
$(this).height( $('#dialogdiv').closest('.ui-dialog').height());
You also may still need to play with outerHeight but the important part is the closest which will get the outer dialog wrapper for the Dialog.
If your code looked like this to start:
<div id="dialogdiv"> Contents....</div>
After calling .dialog({ options }) it will look like this (Very simplified):
<div class="ui-dialog ...">
<div class="ui-dialog-titlebar ..."> ... </div>
<div id="dialogdiv" class="ui-dialog-content ..."> Contents....</div>
<div class="ui-dialog-buttonpane ..."> ... </div>
</div>