I've been trying hard for the few past hours, but I can't make it work.
My objective is to put an animation on element1's ::before and another one on element1. I tried the simple CSS trick with the ::before and :hover thingy.. but it won't work.
HTML
<div id="fc3"><div class="f_bb">Hover this</div>
<div class="f_bloc">This should appear with an animation</div></div>
CSS
/can't put it here without bugging it, dunno why/
JS
/same/
https://jsfiddle.net/5Lf76r7h/
Any idea ?
Thanks. :)
UPDATE
Full CSS attempt : https://jsfiddle.net/5Lf76r7h/3/
UPDATE 2
https://jsfiddle.net/5Lf76r7h/4/
I have used jQuery animate with mouseenter and mouseleave to achieve the same. Please see this fiddle:
https://jsfiddle.net/rawatdeepesh/2f41k6m5/
Here is the code for your design:
<div id="fc3">
<div class="f_bb">Hover this
<div class="progress" style="border:1px blue solid;width:10px;height:5px;background-color:yellow;display:none">
</div>
<div class="f_bloc" style="display:none">This should appear with an animation</div>
</div>
</div>
In case you need more on animations: http://www.w3schools.com/jquery/jquery_animate.asp
Related
I am working on an application in Ruby. It has 8 pages and on each one of the pages the general layout is bootstrap's .container . row .col-sm-6 .col-sm-6 layout. I have a btn-group in the 2nd col-sm-6 layout that looks great on lg, xl and s devices.
When the screen falls between 992px-768px the button group breaks in an unpleasant fashion
It adjust well when the columns shift one on top of the other on small screens 544px-768px and Breaks bad again on xs devices < 544px
.
I have found a nice solution where I make the btn-group vertical on xs screens by duplicating the code adding the btn-group-vertical to duplicated code and hiding this code until it detects an xs screen (then it hides the horizontal btn-group). However, this is a lot of duplicate code that I have to replicated on 8 pages and still doesn't solve for medium screens.
I thought about keeping my code cleaner by adding scss like this:
.myClass {
#media (max-width: 760px) {
&:extend(.btn-group-vertical all);
}
#media (min-width: 761px) {
&:extend(.btn-group all);
}
}
That I found on stack overflow question 31893581. It doesn't work even with the manipulations that I thought would work. I could follow the solution stated in that same post but I am uncertain how sanitary that would be etc.
If somebody has any advice for me on how to solve for a class that pulls in bootstrap classes at specific browser widths or a completely different solution to my problem, I am all ears.
Thanks in advance.
I can think of a number of ways to do this, here are two methods that are easy to picture:
https://codepen.io/panchroma/pen/XgojBL
Add a clearfix div at the point where you want the buttons to break, then use media queries to hide or show this div.
Another method instead of using a clearfix would be to target .btn-group in your CSS, and using media queries set a max-width at viewports 768 - 992 px.
Good luck!
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">first col</div>
<div class="col-sm-6">
<div class="btn-group">
<button type="button" class="btn btn-primary">btn-1</button>
<button type="button" class="btn btn-primary">btn-2</button>
<div class="cf"></div>
<button type="button" class="btn btn-primary">btn-3</button>
<button type="button" class="btn btn-primary">btn-4</button>
</div>
</div>
</div>
</div>
CSS
.btn-group .cf{
display:none;
}
#media (min-width: 768px) and (max-width: 992px) {
.btn-group .cf{
display:block;
}
}
My issue is similar to the one here: paper-menu-button's dropdown (paper-menu) not overlaying other iron-list items, but no adequate solution is proposed there.
The problem is that I have a <paper-dropdown-menu>, which opens up correctly inside the <iron-list> item it is in, but goes underneath the following <iron-list> items:
I have a simple <paper-dropdown-menu> like this:
<paper-dropdown-menu-light class="custom" label="Languages" no-label-float>
<paper-listbox class="dropdown-content" selected="1">
<paper-item>Spanish</paper-item>
<paper-item>English</paper-item>
<paper-item>French</paper-item>
<paper-item>Sinhala</paper-item>
</paper-listbox>
</paper-dropdown-menu-light>
which is inserted into another element with an <iron-list> (which loads a JSON file with <iron-ajax>):
<iron-list id="list" items="[[bookList.books]]" as="item">
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]" style="z-index: 1;">
<div class="avatar">[[item.id]]</div>
<div class="pad">
<div class="primary">[[item.titleen]]</div>
<div class="shortText">[[item.slug]]</div>
<div class="longText">[[item.blurb]]</div>
<div class="languagedrop">
<language-drop></language-drop>
</div>
</div>
</div>
</div>
</template>
</iron-list>
I tried setting the z-index for each <iron-list> item to 1, but that did not work. I tried working with <iron-overlay>, but I did not manage to get that done. I'm very new to Polymer, so if anybody has a solution or workaround that would be great.
That's because iron-list is using transform: translate3d for each list item.
The workaround that I have found is working is to add z-indexto the current list item (<div class="item"></div>) on which you have the dropdown expanded, or to all items from top to bottom in descending order, programatically.
I am working with DC.js and I am trying to add preset date filters to this jsfiddler.
<div id="header" class='row logoSize'>
<img src="logo-main2.png" />
<div class="buttons-container"></div>
<div class="startEnd" id="start">2015-02-12</div>
<div class="startEnd" id="end">2015-02-17</div>
<div class="startEnd" id="brushYears">gggg</div>
</div>
<div class='row '>
<div class="dc-data-count">
<h2>
Card Activity Report
<span>
<span class="filter-count"></span>
selected out of
<span class="total-count"></span>
records
<span id="titleCount"></span>
<a class="btn btn-sm btn-success" href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</h2>
</div>
</div>
<div class='row'>
<div class='span12' id='dc-time-chart'>
<h4>
Activity counts per Day
<span class="muted pull-right" style="margin-right: 115px; ">From the chart below select a date range to filter by
<a class="reset btn btn-sm btn-success"
href="javascript:timeChart.filterAll();dc.redrawAll();"
style="display: none;">
reset
</a>
</span>
</h4>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div id="daily-move-chart">
<div class="clearfix"></div>
</div>
</div>
</div>
<pre id="data">
ID,Action,AuditDate,DataProvider,MachineName,UserName,PersonID,Count
I have got the brush extent to move but I can't get it to trigger the filtering.
I tried moveChart.redraw(); dc.redrawAll(); dc.renderAll();, and a few others with no luck. I have seen examples using just D3, and the logic gets hard to follow as I am trying to understand what a group object in DC would be in D3. Where I get lost is understanding the Brush Events especially with DC. I can't find any DC sample that works with the brush like this. Can someone notice what I am missing to make this work DC?
I think the main problem here is that you are mixing straight d3 code with dc.js code. You don't need to create your own brush object when using dc.js, because it already creates one, and the .filter() method is already tied to the brush that it uses.
You also don't need to filter the data yourself, because that's exactly what crossfilter is for. It looked like you were filtering the original data array, which has no effect because crossfilter has already copied it into its internal buffers.
The other trick is to use the dc.filters.RangedFilter object when filtering, so that dc.js knows that a range is intended and not two discrete dates.
So, instead of most of the body of your drawBrush function, just do
timeChart.filter(null);
timeChart.filter(dc.filters.RangedFilter(new Date(st), new Date(end)));
dc.redrawAll();
And also remove the extra, unneeded brush.
Working fork of your fiddle here: https://jsfiddle.net/gordonwoodhull/mr56bswz/1/
I'd also add that this is not really the right way to do range/focus charts, so please use other examples for that - this is mostly an example of how to apply date ranges.
The strange behavior of the range chart filtering itself, and staying filtered after it's been reset, comes from the focus chart using a different dimension form the range chart - ordinarily you want them on the same dimension so they don't observe each other. But that wasn't the focus of this question, which is already a couple of years old, so I'm not going to fix that now.
I have this view which can rotate a div element. Something like
<div class="rotatable">
<div class="front">
{{outlet front}}
</div>
<div class="back">
{{outlet back}}
<div>
</div>
Now I have this index template which contains two of these rotatable elements. Each rotatable elements has a different front and back. So it could look like this
<div id="index">
{{#rotatable}}
{{outlet front App.FrontView1}}
{{outlet back App.BackView1}}
{{/rotatable}}
{{#rotatable}}
<div>This should show up inside {{outlet front}}</div>
{{outlet back App.BackView2}}
{{/rotatable}}
</div>
This doesn't work of course, but how should this be done ?
Cheers
I guess this question was a little bit unclear. Anyway, the answer is given in this post
EmberJs: how to use connectOutlet
So, I'm putting together the framework for a web app that allows people to swipe horizontally between views. I'm looking for a layout similar to that of ubersocial, an app for android. I've tried a few different frameworks over the last couple of days (including the beginnings of a custom framework, which won't work due to poor overflow:auto support on mobile). JqMobi seems to get me closest.
Here's some code:
<script>
//jqMobi & jqUI scripts omitted for brevity
var carousel;
var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
scroller = $('newContainer').scroller();
}
window.addEventListener("load", init_carousel, false);
</script>
<div id="jQUi">
<div id="header"></div>
<div id="content">
<!--scrolling="no" because I don't want the whole carousel to move-->
<div title="Main" id="main" class="panel" data-tab="navbar_home" scrolling="no">
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="newContainer" style="width: 100%;height: 100%; overflow: auto;>
<!--Lots of Content-->
</div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
</div>
</div>
</div>
So I've got my carousel working for all devices and I was able to get perfect functionality in iOS 5. However, Android (2.2, 2.3, & 4.0) is not giving me a scrollable div for my .MainView elements, nor are older iOS devices. The best I can get is the carousel on a panel that scrolls, but the elements within the panel won't scroll together. This makes me wonder if the iOS 5 success I've had was just support for overflow:auto.
Anyway, I've looked at the following docs:
jqMobi CheatSheet = (http://www.appmobi.com/amdocs/lib/jqMobi_Cheat.pdf?r=9170)
jqMobi Kitchen Sink = (http://jqmobi.com/testdrive/#webslider)
jqMobi API Doc = (http://api.jqmobi.com/#jqUi)
But I've had trouble really getting the answer I'm looking for. Using the documented methods, I can't really seem to get anywhere. It seems like if I could get an independently scrollable div into a .MainView element without breaking the carousel, I'd be good to go. Suggestions?
/*****************FIXED*****************/
After a tangled web of confusion and frustration, I eventually got it to work by adding a second buffer to the .MainDiv elements so that the scroller doesn't affect the carousel.
I also had a bad run-in with iOS 5 (which, as you may recall, worked before) which probably could have been fixed by simply adding overflow:auto to the .MainView elements and giving them a fixed height. I tried disabling nativeTouchScroll first, and the scrolling is actually pretty good, so I'll stick with that instead of adding a browser detect conditional.
<script>
//Native touch disabled or iOS 5 breaks.
$.feat.nativeTouchScroll = false;
var carousel;
//var scroller;
function init_carousel ()
{
carousel = $("#carousel").carousel({
preventDefaults: false
});
}
$.ui.ready(init_carousel);
var scroller;
$.ui.ready(function ()
{
//Fetch the scroller from cache
scroller = $("#containerContainer").scroller();
});
</script>
<style>
.MainView
{
height: 100%;
overflow: hidden;
}
</style>
<div id="carousel" style="height:100%;width:100%;">
<div id="View1" class="MainView" style="background: yellow;">
<div id="containerContainer"><div id="newContainer"></div></div>
</div>
<div id="View2" class="MainView" style="background: green;"></div>
<div id="View3" class="MainView" style="background: blue;"></div>
<div id="View4" class="MainView" style="background: pink;"></div>
<div id="View5" class="MainView" style="background: orange;"></div>
</div>
Posted in the forums at appMobi - but we are a US based company in the Eastern Standard Time Zone - so we were asleep while you were working on this...glad you wrote the following :)
Not that anyone seems to care