I'm just not sure why these transitions are so laggy.I've never had this happen to me before.
My code is:
<section class='containgrid'>
<div class="grid">
<div class="unit one-third">
<div class="eventbox">
<img class='imgfit' src='images/choice1.jpg'/>
<h2 class='contactheading'>Questions?</h2>
<h3 id='subheading'>subheading</h3>
</div>
</div>
</div>
</section>
Not shown is 2 more "unit one-third"s, I took them out for clarity but the other two are the exact same as the first one. As you can tell I'm using gridism for a simple grid layout, my relevant css code is so:
.imgfit{
width:98%;
margin:.2em;
height:375px;
}
.eventbox{
background-color:#F1EFEF;
margin-top:15%;
width:100%;
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
-webkit-transition: border 0.3s;
-moz-transition: border 0.3s;
transition: border 0.3s;
border:solid #F1EFEF .2em;
}
.eventbox:hover{
background-color:#DBDBDB;
border:solid #7D7D7D .2em;
}
This seems really straightforward to me, but when I open it up in browser it becomes really laggy and is not smooth at all.Why?
Related
I was wondering it it is possible to use a nested ":target" directive to modify elements on the page with pure CSS. I am bringing in a form text area which is absolutely positioned inside a div element (.container). When the text area appears, I want 3 things:
1) The open link to dissapear
2) The close link to appear
3) The contaner div to expand with the form element
I have been trying this by nesting the :target element inside my .container but it is not working. Is this possible?
<div class="container" id="container">
<h4>Show close</h4>
<div id="comments">
<form name="myForm">
<p>Write your comment:<br />
<textarea name="myTextarea"></textarea></p>
</form>
</div>
</div>
CSS
.container{
position:relative;
background:pink;
&:target {
transition: all 1s ease;
a#open { display: none; }
a#close {display: block;}
}
a#close { display: none; }
}
#comments {
position:absolute;
height:200px;
width:400px;
background:yellow;
left:-300%;
top:30px;
transition: all 1s ease;
}
#comments:target {
transition: all 1s ease;
left:20px;
}
JSFiddle here
I know this question has been asked before but I can't get mine working. I have a javascript array in the head of my html document which makes the images change to the next one in the array, but I can't make transitions work. I've tried using css properties and I've very briefly tried jquery but as I haven't used jquery before I don't know how to do anything with it.
I have this for javascript:
<script type="text/javascript">
image2 =new Array("images/product1_thumb.png", "images/product2_thumb.png", "images/product3_thumb.png"
, "images/product4_thumb.png")
num =0;
imgNum =image2.length;
function rotate()
{
if(document.images)
{
if(num ==imgNum)
{
num = 0;
}
}
document.getElementById('image2').src = image2[num];
num++;
setTimeout("rotate()",4000);
}
</script>
This is the html:
<section id="right">
<img src="images/product1_thumb.png" ID="image2" alt="" title="" />
</section>
And this css is what I've used to try to make the transitions:
#image2{
margin-left:100px;
position:inherit;
-moz-transition: all 2s ease-in-out 2s;
-webkit-transition: all 2s ease-in-out 2s;
transition: all 2s ease-in-out 2s; /* opacity 5s ease-in-out; */
}
#right{
padding-top:10%;
margin-left:70%;
width:30%;
background-image:url('images/watermark50.png');
background-repeat:no-repeat;
background-position:center;
height:100%;
}
#right img{
margin-left: 30%;
}
I'd be grateful for any help but if it uses jquery you'd have to start at the beginning as I have no idea how it works.
what I would like is to make my site menu switching between panel and classic horizontal menu.My goal is to change the site menu depending on the screen size (desktop/mobile)... but it is another story!
I have the following working solution (http://jsfiddle.net/998HD/2/):
HTML
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
Panel
</div>
<div id="pnl" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div data-role="content">Lorem ipsum</div>
</div>
CSS
.menu.ui-panel {
position: relative;
width: 100%;
min-height: 0
}
.menu.ui-panel .ui-li {
display: inline-block;
margin: 0;
border: 0
}
JS
$('#lnkpnl').click(function() {
var menu = 1; // 0 = panel, 1 = horizontal
if (menu) $('#pnl').addClass('menu').insertAfter('.ui-header');
$('#pnl').panel('open')
})
JQuery Mobile moves #pnl panel after the header and content and this prevents me from simply apply:
.menu.ui-panel {
position: static
/*... other props ...*/
}
and avoid line 1 and 2 in javascript code.
So, I ask you. Is my solution the best? Is there a pure css solution?
Many thanks.
You are right on point. There is a way to do this with transition CSS. I included a Fiddle to show you, but it is jquery assisted. Then again, this is a very light JS call so it shouldn't toruble your application. Then again, neither is yours. So you are good either way.
-webkit-transition:all 1.0s ease-in-out;
-moz-transition:all 1.0s ease-in-out;
-o-transition:all 1.0s ease-in-out;
transition:all 1.0s ease-in-out;
Hope it helps
FIDDLE
this is probably easier to see at the fiddle. I have social icons with their link displaying next to them. The problem is, the social icons are 40x40. The text displays at the foot of the icon. I want the text in the center of the icons. How do i pull that off? Can't seem to figure it out. Any help is greatly appreciated!
http://jsfiddle.net/grem28/meY8K/1/
<footer>
<ul>
<li><div class="footer_icon facebook"></div><div class="iconText">Facebook.com</div></li>
<li><a class="inst" href="http://instagram.com" target="_blank" title="Follow on Instagram"><div class="footer_icon instagram"></div><div class="iconText">We're on Instagram</div></a></li>
<li><a class="twt" href="https://twitter.com" target="_blank" title="Follow us # Twitter.com"><div class="footer_icon twitter"></div><div class="iconText">Twitter.com</div></a></li>
<li class="right"><a class="pin" href="http://www.pinterest.com" target="_blank" title="Visit Pinterest.com"><div class="footer_icon pinterest"></div><div class="iconText">Pinterest.com</div></a></li>
</ul>
</footer>
The following seems to work:
.footer_icon {
height: 40px;
width: 40px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
display:inline-block;
vertical-align: middle;
}
add vertical-align: middle to your CSS rule for .footer-icon.
See demo at: http://jsfiddle.net/audetwebdesign/g3Jk6/
I am using bootstrap 3 to create my nav bar. I also needed to place a search bar on the navbar. So my code looks like this
<div class="navbar navbar-default">
<a class="navbar-brand">Logo Image</a>
<ul class="nav navbar-nav">
<li class="active">Calendar</li>
<li>Customerr</li>
<li>Providers</li>
</ul>
<form class="navbar-form navbar-right" action="">
<div class="form-group">
<input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
</div>
<input type="submit" name="search" value="Search" class="btn btn-default" >
</form>
</div>
I want the input box to get bigger when the usere focuses to search but to the left like stack's search bar. I tried the following css at first
.mac-style:focus{
width: 500px;
}
and the input box grows to the left but the transition is very rough. So i tried to add the transition property(webkit moz o an default) like this
.mac-style:focus{
width: 500px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
but the input changes width to the right going behind the search button and off the nav-bar. Ho can i make it act like the css without the transition(grow to the left). The way my nav bar is created, is there a way to make it stop when it reaches the last li so it is more dynamic?
If i correctly understand you - take a this fiddle . I don't know yours other css styles, but you can a create your fiddle and show it to us.
The reason is, you should give width to normal state also.
JSFIDDLE : http://jsfiddle.net/surjithctly/mdXqr/
.mac-style {
width: 100px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.mac-style:focus{
width: 260px;
}