Hi i have used four div's in this page. if i click one div then it will shows its content by shrinking other divs into 10%.
click here
My problem is, when i click about div then technology and protection divs breaks down to the page and come back.
i want to animate without breaking of that div.
here is my code following for about div click,
//ABOUT CLICK STARTS HERE
$("#about").click(function()
{
$('#about-con').css({'display': 'block', 'width': '45%', 'right': '30%'});
$('#technology-con').css({'display': 'none', 'width': '', 'right': ''});
$('#protection-con').css({'display': 'none', 'width': '', 'right': ''});
$('#distribution-con').css({'display': 'none', 'width': '', 'right': ''});
$("#distribution").animate({'width': '10%', 'float': 'left', 'margin-left': '45%'}, 800);
$('#technology').animate({'width': '10%', 'float': 'left','margin-left': ''}, 800);
$('#protection').animate({'width': '10%', 'float': 'left','margin-left': '-17px'}, 800);
$("#about").css({'width': '25%','float': 'left','margin-left': ''},800);
}); //END OF ABOUT CLICK
css:
#about{
height: 500px;
background-color: red;
cursor: pointer;
width: 25%;
z-index: 5;
}
Related
I have a touchable opacity element which is inside a view. In this touchable opacity I placed a text element. The problem which I am facing is that the touchable opacity width is the same as the text width without any margin between the text and the button. (see the attached photo). Here is my code:
<View style={styles.buttonWrapper}>
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={() => someMethod()}>
<Text style={styles.buttonTextStyle}>Blah blah</Text>
</TouchableOpacity>
</View>
and my styles:
buttonStyle: {
backgroundColor: '#5CB3FF',
height: 40,
justifyContent: 'center',
borderRadius: 20,
alignItems: 'center',
},
buttonTextStyle: {
fontSize: 24,
fontWeight: 'bold',
},
buttonWrapper: {
justifyContent: 'flex-end',
margin: 15,
flexDirection: 'row',
},
I would like to have some space between the text and the button border
EDIT: I tried with the following style
buttonTextStyle: {
fontSize: 24,
margin: 10
},
but it still doesnt leave any space
what about ??
padding-left: 10px;
padding-right: 10px;
Use Margin to add space outside of the element
Use Padding to add space inside the element by the border
I have this piece of code that displays a tooltip when a user hovers over the question circle icon. The tooltip content can have a maximum character count of 1000. How do I set the overflow-y to scroll by modifying the tooltip in data-toggle mode?
<i class="fa fa-question-circle" data-toggle="tooltip" title="#participant.DeclineReason" data-placement="bottom"></i>
I have the code for the data toggle in the JS script but how do I modify the tooltip properties:
#this.ScriptBlock(#<script>
$(function (){
$('.pie-chart').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('.pie-chart-notparticipating').each(function () {
$(this).pieChart({
type: 'pie',
barColor: getContrastColor($(this).attr('data-percent')),
trackColor: '#eee',
lineCap: 'round',
lineWidth: 5,
rotate: 0,
size: 145,
});
$(this).find('.pie-chart__percentage').text($(this).data('percent') + '%');
});
$('[data-toggle="tooltip"]').tooltip(); <-------------//this line here
});
Give max-height and height to a class
.tooltip{
max-height:50px;
height:100px;
overflow-y:scroll;
}
Can’t add a comment as I as I don’t have the rep, but a better solution would be to use auto rather than scroll.
.tooltip {
max-height: 80px;
overflow-y: auto; }
auto doesn’t show a scrollbar when the content doesn't need to scroll.
I have a lot of legends in one of my high charts. I found a way to render this is using the navigation option inside legends.
http://api.highcharts.com/highstock#legend.navigation
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
But the navigation has very minimal options in it.
Can i position the legend according to my need, like at the bottom of the div?
Can i have a horizontal paging scroll instead of a vertical one?
To position legend at the bottom, I added maxHeight and changed layout to horizontal (as this suits my needs best), etc:
legend: {
layout: 'horizontal',//change to horizontal
//align: 'right',//removed alignment
verticalAlign: 'bottom',
maxHeight: 50,//this was the key property to make my legend paginated
//y: 40,//remove position
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 12,
inactiveColor: '#CCC',
style: {
fontWeight: 'bold',
color: '#333',
fontSize: '12px'
}
}
},
I have:
Single Page App
CSS mega menu that opens on hover
When the user clicks a link, the menu doesn't go away in IE 10/9/8 when I click on the text of the link. If I click on the spacing around the text it goes away.
Pulling my hair out trying to figure this out... it works fine in Chrome/IE11
here is the code that makes it work for Chrome/IE11:
var $a = _i.$(jqEvent.target);
var $menu = $a.closest('.areaNav');
var $tempBlockOut = _i.$('<div class="tempBlockOut"></div>');
$tempBlockOut.appendTo($menu.parent());
var z = $a.closest('.megamenu').css('z-index');
$tempBlockOut.css({ width: '50px', height: '50px', background: 'transparent', position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
setTimeout(function () {
$tempBlockOut.remove();
}, 100);
I'm placing a transparent div where the cursor is so that hover gets reset and the CSS menu disappears when the user selects a link.
the following code fixes this issue for IE10/9/8
$tempBlockOut.css({ width: '50px', height: '50px', background: '#fff', opacity: 0, position: 'absolute', 'z-index': z }).position({
of: jqEvent
});
changed the background to #fff, and set opacity to zero. apparently IE10/9/8 does not register hover on transparent elements.
I set up a fiddle with the following code:
html:
<div id="content">
<input id="splash_button" type="button" value="Splash!" />
<p>OSEIFNSEOFN SOE:NF:SOERNG :SOJld;kkng d;ljrng so;ern gsejng ;seorjse;ongsod;jng;s jdg;ske\ ;sej se gdsrgn sd;orjngsd;oj go;ser o;s en;o jnse;orng;sekorg ;ksjdr ;kgsjurd; gjnsdrgj; s ;hg;kuhg k;sgksdgblsregilsebnvsfdnv sa;kljg ;khg ;zkljdng ;kjsgr; unbzsd;kjgb zk;j xcnbv;kjzb ;kjgrb snbz;gkljznbs;d,jbnzs;dkjvbz;sljbd ;zksjn ;kzjsbng ;kjsbk;zejr ;kgsjg ;kzsjbr ;kjszrb ;zkojg ;oszkrg ;ozsrb;ouszb </p>
</div>
css:
#content{
z-index: 0;
}
javascript(jquery):
$('#splash_button').click(function(){
$('#content').append($('<div id="splash"><a id="hideSplash">hide</a></div'));
// display splash window
var splash_width = 200;
var splash_height = 200;
$('#splash').css({
'z-index': 1,
'width': splash_width + 'px',
'height': splash_height + 'px',
'position': 'absolute',
'left': Math.floor(($(window).width() - splash_width)/2) + 'px',
'top': Math.floor(($(window).height() - splash_height)/2) + 'px',
'z-index': 1,
'border': '1px solid',
'background-color': '#99ccff',
'opacity': '1.0'
});
// set the content's opacity and disabled the input button
$('#content')
.css({
'opacity': '0.4'
})
.children()
.attr('disabled', 'disabled');
// when everything's over, reset properties
$('#hideSplash').click(function(){
$('#splash').remove();
$('#content')
.css({
'opacity': '1.0'
})
.children()
.removeAttr('disabled');
});
});
I expected the splash div to have an opacity of 1, and the content div to have an opacity of 0.4, however, after clicking the button, both divs have an opacity of 0.4.
Any help is much appreciated.
You should append the #splash to the body or another div outside the #content.
When you set an opacity to an element in css, all of his children have the same.
In your exemple the #splash has an opacity of .4 just like the #content.
Try $('body').append instead of $('#content').append