So I have 2 wrappers one that has a highchart and the other one has a leaflet map. Im using buttons to toggle the divs in and out. The chart div works fine but the map one I have to click the the button twice to get it to render. I tried to put a setTimer() to see if would help with the transition but nothing. I have a fiddle that illustrates what Im trying to do but its having an issue with the map here. My question is why it wont render right away? and What can I do to make it render right away? Thanks
You are rendering the chart in container and the container has both the map and chart so after rendering the chart your map div removed from container so it creates problem.
Note: you have given container id to div twice
Replace your HTML like
<div id="maincontainer">
<div id="chart-wrapper" style="display:block; overflow: auto;">
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
</div>
<div id="map-wrapper" style="overflow: auto; display: none;">
<div id="map-container" style="height: 400px; "></div>
</div>
</div>
<button id="toggle-btn">Map</button>
<button id="run-btn">run</button>
Fiddle http://jsfiddle.net/QBYPH/2/
Related
So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.
You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.
Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>
I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks
I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>
Hi I'm looking for some help.
I'm using FlatLab to build a "draggable and sortable" dashboard. In the panels I'm adding in charts using Highcharts. I have this working well with the option to drag the portlets around the screen into the order I wish.
The Issue:
The charts uses a zoom function, so when the mouse is dragged across the chart it moves the panel instead of allowing the zoom function!
Here is the HTML code:
<div class="row-fluid" id="draggable_portlets">
<div class="sortable">
<div class="panel inline-block span-4">
<header class="panel-heading">Utilisation from October 1st
<span class="tools pull-right">
</span>
</header>
<div class="panel-body">
<div id="chart1" style="min-width: 180px; height: '100%'; margin: 0 auto"></div>
</div>
</div>
</div>
</div>
In the javascript I've added in the following along side another similar line of code:
$(".panel-body").disableSelection();
similar code in the same js file - $(".column").disableSelection();
It feels like I've don the right thing but its not disabling selection on panel-body
Any help is as always appreciated.
Thanks
Rob
I don't know if it will reactivate the zoom functionality, but I suspect it will. You should be able to copy and paste this into console to see if it works. It sets the cancel option of sortable on the chart.
$("#draggable_portlets").sortable("option", "cancel", "#chart1");
I'm using Foundation 4.3.0 for a project, and am trying to set up Orbit in the most basic way. The javascript and CSS seem to be loading correctly, the images are loading, all the extra elements are inserted, etc. But the main <ul> always has a height of 0px. Here's my HTML:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<ul data-orbit="">
<li><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
</ul>
</div>
</section>
</div>
Here's the HTML once foundation.orbit.js does its thing:
<div class="row">
<section class="large-12 columns">
<div class="slideshow-wrapper">
<div class="preloader"></div>
<div class="orbit-container orbit-stack-on-small">
<ul data-orbit="" class="orbit-slides-container" style="margin-left: -100%; width: 400%; height: 0px;">
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li class="active" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
<li style="width: 25%;"><img src="/media/cache/20/88/208812a64eee2e7e9b8efe4b5f73c990.jpg"></li>
<li data-orbit-slide="" style="width: 25%;"><img src="/media/cache/8a/ec/8aec9d6a99dea3db235f24712e8f3f88.jpg"></li>
</ul>
Prev <span></span>
Next <span></span>
<div class="orbit-slide-number">
<span>1</span> of <span>2</span>
</div>
<div class="orbit-timer">
<span></span>
<div class="orbit-progress" style="overflow: hidden; width: 54.15%;"></div>
</div>
</div>
<ol class="orbit-bullets">
<li data-orbit-slide-number="1" class="active"></li>
<li data-orbit-slide-number="2" class=""></li>
</ol>
</div>
</section>
</div>
I have tried to put explicit width + height on the images, put class="active" on one slide when generating the HTML, change various Foundation settings, etc, and nothing seems to work.
When I compare the HTML to the live example in the Foundation docs, I notice that in the working version, a z-index is always set dynamically on the slides. On my site, no z-index is ever set. And of course, the ul in the working version has an inline CSS height which equals the height of the slides.
If I manually set the ul height to 300px, everything looks right, except I see no images. If I set div.orbit-container to overflow: visible, I will see the edge of one of the slides to the left of the container.
Any ideas would be much appreciated.
I'm going to try to avoid being overly verbose here.. but this is what I've found and while I wouldn't call this a complete fix, because i'm not sure what started the differences in css the following code solved the problem.
I found this because I have a local environment as well as a dev environment for the site. The local environment was working great, but the production environment had all the issues you mentioned above.
The first issue of course is the generated container div setting the height to 0px. This is strange enough. I manually added the height to the container in the css. The reason all the images are hiding is they're set to margin-left: 100% or some large left margin and they're all positioned absolutely. I wish I could be more help as to why the code differences are present, maybe I'll find more time to investigate further but for now its working.
Anyway, the following was the fix:
.orbit-container { height:250px; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
.orbit-container { height:auto; }
.orbit-container .orbit-slides-container > * {
position: relative;
margin-left: 0;
float: left;
height: 100%;
}
A little upgrade from a previous solution. With this modification, it will be more easy to show the slideshow on a phone and a desktop.
Are you sure the url to the images are ok?
I had the same problem but with 2 of my 3 images and the problem was in the url
I was having the same problem and I've just found that using individual modules (I'm using compass) instead of using foundation.min.css solves the problem, have you tried to use foundation.css (not minyfied)?