Posted a question yesterday regarding BootStrap and panel collapsables being very dodgy in the fact graph sizes were messing up. It got locked due to there being no code. I have created a code snippet for you guys which demonstrates the exact problem I'm having: http://jsfiddle.net/oeq980ts/1/
<p>the code is on jfiddle :) </p>
For reference this is my post from yesterday https://stackoverflow.com/questions/36109483/collapse-in-bootstrap-issue
put the problem is pretty clear form running the jsfiddle: compare collapse 2 to collapse 1.
Yesterdays post:
http://www.w3schools.com/bootstrap/bootstrap_ref_js_collapse.asp
I was playing around with collapse via Bootstrap and came across a strange interaction with .collapse(Hides the content) and .collapse-in (Shows the content).
By default I set collapse1 as .collapse-in meaning the contents inside it would show: the insides contained a graph (min-width:310px; height: 400px). Fit perfectly, I opened up the collapse2 and to my dismay the same graph was shown very undersized with the width being almost half the size. After playing around with it - the graphs will only show in its proper size when the class collapse is used, otherwise if the class is just panel-collapse collapse, and you click on the collapse to show the contents it will show a completely disproportionate size.
Oh and I should add if .collapse-in is set then the user can collapse/uncollapse and the graph set with collapse in will still display. Bit unfortunate for those who don't want the contents being showed by default.
Probably not going to use this anyway, however I was just really interested in the reasoning behind it.
You can do something like this:
Steps:
Make them all shown up at first load (I mean add in class in collapse div) - This will make them fix by their own, Fitted to it's container as you wish. So collapses will be something like this:
<div id="collapse2" class="panel-collapse collapse in">
Then hide them using jQuery( remove class in to all div that you want to be hidden )
$(document).ready(function(){
$('.collapse').not(':eq(0)').removeClass('in');
});
In here, I just imitate what you did in your fiddle, I hid the first collapse.
Check your jsFiddle again.
Related
I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.
1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.
2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.
Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/
You need to use the js detection that the example uses.
Add class="no-js" to your body element.
Then on load, set document.body.className = "js" (or equivalent).
This will enable the menu.
For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).
Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).
Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.
I have a strange problem it seems to be a simple one but I am unable to find the solution.
I have 3 divs that are generated by the drupal->views and every div contains a button on the bottom and I need to flip the div on button click. Basically, if div #1 is currently displayed and button is pressed the second div is shown with flip effect and same with the third div.
Here is the arrangement:
<div class="views-row views-row-1 views-row-odd views-row-first">
<div id="careers_excerpt_88" class="careers_excerpt">
<div id="careers_description_88" class="careers_description">
<div id="careers_form_88" class="careers_form">
</div>
And the content is within the above three divs.
Now the problem is that I can show and hide these divs but the flip is not working. I have tried many JavaScript plug-ins, some work for two divs.
I just need help on this issue (or perhaps suggest me some good plug-ins).
Check out this tutorial.
No need of a JS lib.
Simply use CSS, and don't forget to properly set these properties on the right elements: transform-style, transition, perspective, backface-visibility and transform.
Beware of the vendor prefixes!
And also of Internet Explorer. [You can find some hacks for it.][3]
I do not know what exactly is your functionality/Intention of the flip divs you are looking for, but here is a plugin which can be moderated to achieve what you want.
Here is the: Demo and Plugin
And Github Link
Hope this helps.
Dear Elders of The Internet -
I have created a headache for myself, and I hope you can help :-)
This is a two-part questions. I have a page with three panels, and want a horisontal slide. For this I have created buttons, see live demo here.
1. Horizontal slide, responsive
When clicking top right button "two right panes" I want the page to show just that: the two right panes only. This is not a problem on large screens, but I cannot get it to work on slightly smaller (media queries and further responsiveness, I think I will be able to figure out).
Similarly; when clicking "single left pane" I would like it to stretch the third (far right) panel, and hide the two others.
Clearly, I want it to respond to a 100% viewport.
2. Highchart
I cannot get the Highchart chart to act accordingly depending on the top left buttons sliding. The highchart will adjust if I resize the whole window, but I cannot get it to adjust when sliding panels. For a demo of a chart that works, scroll down in third panel (this is "homemade" graphs).
I have attempted to illustrate the problem in the screenshots below.
(I have posted another question relating to the same page, if you should be so inclined to take a look).
I suspect it is pretty simple, but I cannot for the life of me see where I went wrong. Any hints would be much appreciated. All the best.
Highcharts will resize only when window is resized, if you want to resize chart use chart.setSize(w,h), see reference.
Well, good people, I kinda figured it out myself... for the possible benefit of others; my solution was to set the width of the two first columns fixed (or rather; max-width), and thereby using calc to calculate the size of the third columns with minus the two fixed width divs.
width: -webkit-calc(98% - 520px);
width: calc(98% - 520px);
For the Highchart part of the question, much thanks to #Pawel for prompt answer. I haven´t entirely worked it out, as we are currently discussing whether using Highcharts or not is the way to go. If so, I guess I might be back with more questions later.
We are currently using Dojo to create a mobile map application. We're using Esri for the map service. Everything was working before changing from 3.2 to 3.3. The map works fine but I'm having issues implementing a base map gallery. I've done research for days trying to figure out why my gallery wasn't appearing but I've narrowed down my issue to it actually being the layout of my div tags. On my index.html page I have many div tags for different menu's and what not. I've followed all the div tags to make sure they've all been closed and they have.
So this is what I currently have implemented:
<div id="displayView" data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props='fixed:"top", label:"Display Options", back:"Menu",
moveTo:"menuView"'>
<div id="galleryDiv"> </div>
</div>
</div>
With this code, the gallery doesn't show up, but if I move the closing div tags above the div id="galleryDiv" then it the gallery will show up, but it shows up on every page of the application because there is no ending div tag. Also, we were trying to implement buttons that would move the base map images in the gallery from left to right but they only work in google chrome. I wasn't sure why it would only work in Chrome and not any other browser.
I originally had a scrollable view in it but it wouldn't show up at all so I changed it to just mobile.view and it worked. Throughout the application it interchanges view and scrollable views, but from what I've researched, it should all work regardless.
After all the research I've done, I'm pretty sure it has to do with the parent/child relationship with the div tags but I'm not sure why it would keep my gallery from showing up on one page and why when I closed the div tags it shows up. However, if I close the div tag then the gallery shows up on EVERY page.
I appreciate any and all help, ideas, and comments! So... Any ideas?...
So what actually ended up being the problem is that the div tag inherited it's own height at 0px. Once we gave it a height, everything showed up just fine. Now why did it give it's own height 0? No idea. Either way, it works now!
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)