I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}
Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle
Related
I am using bootstrap tooltip to display a tooltip with an image in it. I am so far this much successful
How ever my requirement looks like this
I need to move the arrow upward so it matches the design, Is there a way we can customize the position of the arrow ?
The below function works on mouseoverevent
function showToolTip(elem) {
var ttContent = '<img class=\'ttImage\' src=\'http:\/\/getbootstrap.com\/apple-touch-icon.png\' \/>';
$(elem).addClass("filter-text-highlight");
if (!$(elem).parent('a.ttTooltip').length) {
$(elem).wrap('<a data-toggle=\"tooltip\" class=\"ttTooltip\" style=\"text-decoration:none\" title=\"' + ttContent + ' \">');
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'right',
html: true,
});
$(elem).tooltip().mouseover();
}
}
You can create your own tooltip that gives you more freedom. and it's pretty easy.
here is sample snippet. you just have to change opacity on hover a div.
.parent{
position:relative;
display:inline;
}
.tooltip{
opacity:0;
position:absolute;
right:-180px;
top:0;
background-color:#cccccc;
height:40px;
width:150px;
text-align:center;
padding-top:5px;
}
.tooltip::before{
content:"";
width: 0;
height: 0;
border-style: solid;
position:absolute;
left:-20px;
border-width: 10px 20px 10px 0;
border-color: transparent #cccccc transparent transparent;
}
.hover:hover + .tooltip{
opacity:1;
}
<div class="parent">
<button class="hover">Hover Me</button>
<div class="tooltip">hello World</div>
</div>
Here's the JSFiddle. When run on Chrome, the two vertical elements #sidebar and #postbar don't have any bounce effect at the end of the scroll view unlike what I can see on Safari (gif). How can I let a user over-scroll across all browsers for this bounce effect?
Here's css code that is relevant to the topic.
body {
overflow:hidden;
height: 100%;
}
#sidebar {
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
width : 190px;
padding : 10px;
}
#postbar {
height:95%;
position:fixed;
display:inline-block;
overflow:scroll;
margin-left:190px;
padding : 10px 10px 10px 0px;
}
edit : added code
I have two buttons, Edit_1 and Edit_2. By clicking on each one of them, an "expansion" div should appear right below the button which has been clicked.
In the function that I have written, if the display property of the "expansion" div is 'block' under edit_1 and one clicks edit_2, the widow will be displaced under edit_2. But if I click on edit_1 itself, the 'expansion' window will not disappear.
I could easily solve the problem by adding another "expansion" window, but as the 'edit' tags will increase, I need to move this 'one' expansion window among them correctly. I would be grateful if you kindly help me with this;
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
<div id="expansion"></div>
</div>
CSS:
*{
margin:0px;
padding:0px;}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background:url(../images/edit.fw.png) no-repeat;}
#expansion{
width:200px;
height:120px;
background-color:#FFFFFF;
position:absolute;
z-index:3;
margin-left:600px;
top:0px;
padding-top: 40px;
padding-left:10px;
padding-right:10px;
border-top:solid 2px #D24726;
display:none;}
javascript:
function edit(clicked_edit){
var click=document.getElementById('expansion').style.display;
if (click=='block'){ /* in any case, if the display property is block, it turns it to none*/
document.getElementById('expansion').style.display='none';
}
var tp=document.getElementById('section_'+clicked_edit).offsetTop;
document.getElementById('expansion').style.top=tp+'px';
document.getElementById('expansion').style.display='block';
}
JSFiddle
JQuery Approach
you may find great use looking at this JSFiddle that uses a nice toggle effect.
the JQuery is:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
I'm pretty sure you could make use of this in your project :)
Javascript Approach
Have a look at this one - it's not using JQuery and should be suitable for you :)
It was found here:
Another Approach
this demo is also another way of showing/hiding the div on press., so there's pleanty of options to choose from! :)
<script>
function showhide()
{
var div = document.getElementById("newpost");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
</script>
I'm wondering how to enable the clicking on a :before pseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
Link: http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div:before { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){
var $me = $(this),
width = $me.outerWidth(),
height = $me.outerHeight(),
top = $me.position().top,
left = $me.position().left;
var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2));
if (len < 10)
alert('ding');
});
A workaround for this would be to dynamically append a <span> to the item and assigning a click method to it. Like this fiddle.
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
div { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
div span { content:""; display:block;
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
Something like this might work:
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
.parentDivToOrangeCircle { position:relative; background-color:#333;
padding:20px; margin:20px; float:left;
}
.orangeCircle {
padding:5px; background-color:#f60; border:2px solid white;
position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px;
}
Do simply like using jquery
$(document).on("click", "span", function(e){
if (e.offsetX > $(this)[0].offsetWidth) {
alert('clicked on after');
}
else
{
alert('clicked on main span');
}
})
div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>
My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
My working sample as same as the problem statement: See Fiddle
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :before in the HTML, just showing to understand.
CSS:
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; }
div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer}
div.childDiv{padding:20px; margin:0}
jQuery:
jQuery(document).ready(function($){
$('div.parentDiv').click(function(e){
if( $(e.target).closest('.childDiv').length==0 ){
//so clicked on psudo :before element!
//do your work here ;)
alert('Psudo :before element is clicked!');
}
});
});
I'm looking to recreate the effect here on images 2 and 3: http://www.jessicahische.is/illustrating/penguinsinbathingsuits
These images obviously have "padding" filled in already by the image itself, but I was wondering if this effect is possible with just jQuery and CSS?
Any help or insight would be great, thanks!
A simple method for centering items. Try something like this:
.box {
display: block;
height: 500px;
width: 500px;
background-color: #eee;
margin:0;
padding:0;
vertical-align:center;
}
.center_item {
display: block;
height: 100px;
width: 100px;
background-color: #aaa;
margin:0 auto;
padding:0;
}
And the corresponding HTML.
<div class="box">
<div class="center_item">Put your image here.</div>
</div>
What this does is simply puts a container around whatever you need to be centered. By using margin:0 auto; you can center any item within it's parent. I hope this is what you were looking for.
jsBin demo
In this example, we use text-align:center; for our element #gallery
and force the image to be 100% height.
Than with jQuery we check that image on .load() to see if the image width exceeds the gallery width. In that case we'll change the width and vertical-center-alignment with jQuery. E.g:
CSS:
#gallery{
position:relative;
margin:0 auto;
width:600px;
height:500px;
border:1px solid #aaa;
text-align:center;
}
#gallery img{
height:100%;
}
jQuery:
$('#gallery img').load(function(){
img = $(this);
imgW = img.width();
if(imgW > $('#gallery').width()){
img.css({width:'100%', height:'auto'});
img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 });
}
});
Play with the images widths/heights to see how they respond.