http://stadskoll.nu/restaurang.php
If you press the string of text called Visa/dölj mer information which is in a grey font, you will see that the effect occurring is shaking. This is not intentional and I cant figure out what's wrong.
To clarify, I want to know what's causing this "shaky" effect and be able to remove it.
HTML :
<!--VAL1-->
<div id="val1">
<div id="information">
<namn>
</namn>
<br>
<a id="funktion" onclick="toggle('val1');toggleoff_val1('val1');">visa/dölj mer information</a>
<br>
<div id="star2" style="background-position:0 -0px">
<div id="stars1">
<div class="first" onmouseover="starmove('-32px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','1');succes()"></div>
<div class="first" onmouseover="starmove('-64px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','2');succes()"></div>
<div class="first" onmouseover="starmove('-96px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','3');succes()"></div>
<div class="first" onmouseover="starmove('-128px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','4');succes()"></div>
<div class="first" onmouseover="starmove('-160px','stars1')" onmouseout="starnormal('stars1')" onclick="rate('','5');succes()"></div>
</div>
</div>
<div id="txt"></div>
<br>
<br>
<information></information>
</div>
<div id="bilder">
<img src="" />
<br/>
<img src="http://stadskoll.nu/bilder/karta.jpg" />
</div>
</div>
CSS :
#val1 {
width:83%;
height:75px;
border-top:1px;
border-top-style:groove;
margin-left:40px;
overflow:hidden;
padding-top:10px;
padding-left:20px;
-webkit-transition: all 0.5s ease-in-out;
transition: height 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out; /* Firefox 4 */
-o-transition: all 0.5s ease-in-out; /* Opera */
}
JavaScript :
<script>
function toggle(id) {
var e = document.getElementById(id);
if(e.style.height == '175px')
e.style.height = '75px';
else
e.style.height = '175px';
}
</script>
The issue appears to be with the display:inline on the maincontentbox.
If you add vertical-align:top it will disappear.
What I believe is happening is that, since by default it is aligned to the baseline, the browser is making the div taller. Since the div is taller it has to resize the parent container and then move the div to the bottom of the line.
Related
I am using this code to change from one image to another:
<img title="Hello" src="selfie.jpg" onmouseover="this.src='hero_image.png'" onmouseout="this.src='selfie.jpg'" />
I need help with the code so I can slow the transition from one image to the next.
The ideal solution to this would be rendering the two images and changing their opacity instead of changing src for the same tag. Something like :
<div id="container">
<img class="bottom" src="hero_image.png" />
<img class="top" src="selfie.svg" />
</div>
Once you are playing with the opacity, the transition effect can be applied using the following CSS :
#container img {
position:absolute;
left:0;
transition: opacity 1s ease-in-out;
}
#container img.top:hover {
opacity:0;
}
Here is my code. http://jsfiddle.net/anastsiacrs/Lt7aP/1639/
[Please, run example in jsfiddle, stackoverflow's code does not run]
function XController($scope) {
$scope.model={isHidden:true};
}
.open-div{
background-color:red;
//height:260px;
}
.hidden-div{
background-color:green;
//height:60px;
}
.transformable {
-webkit-transition: 3000ms linear;
-moz-transition: 3000ms linear;
-o-transition: 3000ms linear;
-ms-transition: 3000ms linear;
transition: 3000ms linear;
}
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<div ng-app ng-controller="XController">
<div ng-class="{'hidden-div' : model.isHidden, 'open-div' : !model.isHidden}" class="transformable">
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-show="model.isHidden" value="Open"/>
<input type="button" ng-click="model.isHidden=!model.isHidden" ng-hide="model.isHidden" value="Close"/>
<p>{{isHidden}} </p>
<div ng-hide="model.isHidden" >
<div>Hello XXX</div>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
<p> Some content will be here </p>
</div>
</div>
</div>
As you can see, without explicit height animation doesn't apply for this property. What is the possible way to solve this issue. May be there are some library or link, that will help me.
If height is directly setted to element, there is another one issue wiht div content. It is apper before div is fully expanded.
some tips will be very pleased
Have you tried changing the CSSheight to min-height? If the hidden div is bigger than the minimum height it will still expand. Should solve your issue.
Bootstrap collapse.js can be used here.
http://v4-alpha.getbootstrap.com/components/collapse/
Hi I am currently working on a jQuery mobile project. In the header I have an icon for panel on left, center is a title and right is a search icon.
The search icon currently reveals a search input, which works great. The Input is revealed above header and everything else is pushed down.
My question is how can I adjust this so the search input reveals within the header (like an overlay) as opposed to above the header.
Along with a close button (X) to return to default header?
<body>
<div data-role="page" data-theme='d'>
<div data-display="push" data-role="panel" data-theme="c" id=
"sidebar">
<ul data-icon="false" data-inset="false" data-role="listview">
<li>
<a data-ajax="false" href="index.html"><i class=
'fa fa-home fa-fw'></i>Home</a>
</li>
</ul>
</div>
<div >
<form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">
<input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id=
"" name="q" placeholder="Search..." type=
"text">
</form>
</div>
<div data-role="header" data-tap-toggle="true" data-theme='b'>
<a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png"></a>
<h1 class="header-title">Hvac Techpedia</h1>
<a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png"></a>
Here is a fiddle of the CSS, HTML and JS. Click the search bar on the top right.
http://jsfiddle.net/xstrikax/cj6nc8xa/4/
Been tinkering around but cant seem to figure it out. Adding data-positon="fixed" to header makes the bar (search input) appear below header.
This is somewhat of an example of what I am looking to do:
http://www.style.com/magazine
Using JQM 1.4.5 & Jquery 1.11.1.
Any help or suggestions would be great! Thanks!!!!
You can do this by putting the search form within the header and setting its position to 'absolute'. Then use the top-margin to animate it into view.
<div data-role="header" data-tap-toggle="true" data-theme='b'>
<form data-ajax="false" action="search.html" data-theme="b" id="searchform" name="searchform">
<input data-clear-btn="true" autocomplete="off" autocorrect="off" autocapitalize="off" data-role="none" id="" name="q" placeholder="Search..." type="text" /> <a id="closeSearch" href="#" class="ui-btn"><i class="fa fa-times"></i></a>
</form>
<a data-role="none" href='#sidebar'><img alt="sidebar" id="header-menu-icon" src="images/menu-icon.png" /></a>
<h1 class="header-title">test</h1>
<a data-role="none" href='#' id="a-search"><img alt="search" id="header-search-icon" src="images/search-icon.png" /></a>
</div>
#searchform {
position: absolute;
-webkit-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-moz-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-ms-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-o-transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
transition: all 350ms cubic-bezier(0.665, 0.165, 0.130, 0.715);
-webkit-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-moz-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-ms-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
-o-transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
transition-timing-function: cubic-bezier(0.665, 0.165, 0.130, 0.715);
z-index: 1000;
height: 44px;
width: 100%;
border: none;
margin-top: -44px;
text-align: center;
}
#searchform.moved {
margin-top: 0px;
}
Updated FIDDLE
You can also simplify your code quite a bit. jQuery mobile provides and event called vclick that handles both clicks and touches. Instead of jQuery's document.ready, use the jQM pagecreate event, and rather than saving the state of the search bar, you can use the toggleClass() method:
$(document).on("pagecreate", "#page1", function(){
$('#a-search, #closeSearch').on('vclick', function (event) {
$('#searchform').toggleClass('moved');
});
});
Note: I have bound the same handler to both the search button and the close button.
Updated FIDDLE-2
Had some mobile issue's. Added return false; to the code. Works much better on mobile devices. stopPropagation(); and prevent default; work good too.
Hello folks at Stack Overflow from all over the world! hope you´re all doing great! I just have one inquiry today. I just found out about an awesome css3 library called animate.css http://daneden.github.io/animate.css/ which I am trying to implement with jquery mobile to custome my apps page transitions. I'm trying to go from one page to another with an animate.css class applied to the page div but after the fancy transition occured the page remains on same page and does not reach the targeted page. If anyone out there has any clue on how to achieve this, please let me know. Thanks Here the code:
CSS:
<link href="./css/animate.css" rel="stylesheet" />
Javascript:
<script language="javascript">
$(function() {
$("a#home").click(function() {
animate(".box-a", 'rotateOutDownRight');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>
HTML:
<!------- HOME PAGE ---------------------------------------->
<div data-role="page" id="home" data-theme="c" class="box-a animated"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p><a id="home" href="#pagina2">Box A will flash, click here!</a></p>
<a id="home" href="#pagina2" data-role="button">PAGE 2 W/ANIMATION.CSS</a>
PAGE 2 W/O ANIMATION.CSS
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
<!----- PAGE 2 ----------------------->
<div data-role="page" id="pagina2" data-theme="c"> <!--Inicia pagina home -->
<div data-role="header"><h1>Animate</h1></div>
<div data-role="content">
<p>PAGE 2</p>
</div> <!-- End of div content -->
<div data-role="footer" data-position="fixed"><h3>Animate</h3></div>
</div>
URL: see an example here: http://apps.alfonsopolanco.com
jQM allows you to define custom transition ( http://demos.jquerymobile.com/1.2.0/docs/pages/page-customtransitions.html ). Using animate.css for this is no problem.
Add 2 css rules that reference the desired transition from animate.css:
.customRotate.in {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateInUpRight;
-moz-animation-name: rotateInUpRight;
}
.customRotate.out {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-animation-name: rotateOutDownRight;
-moz-animation-name: rotateOutDownRight;
}
Then simply set the data-transition attribute on the anchor tag to the name of your new transition:
<a id="home" href="#pagina2" data-role="button" data-transition="customRotate">PAGE 2 W/ANIMATION.CSS</a>
Here is a DEMO
UPDATE: To control the speed of the transition:
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 750ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 750ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 555ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 555;
}
$('#demo').on('hidden', function () {
$('#divbody').removeClass('span4').addClass('span8');
});
When the button is clicked: the demo div collapses vertically (i.e. width = 0) which works fine. But I want to then increase the divbody div to fill the page i.e. span8. The JS code is there but I want to do it animation like when the demo div collapses.
Hopefully this should help you get an idea, I did not have a whole lot to go off of on your fiddle. But this should get you started.
jQuery
$('#hideBtn').click(function(){
$('#divbody').toggleClass('span4');
$('#divbody').toggleClass('span8');
$(this).parent().toggleClass('span2');
$(this).parent().toggleClass('span1');
});
CSS
#divbody {
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
HTML
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<button role="button" id="hideBtn" class="btn-danger" data-toggle="collapse" data-target="#demo"> Hide </button>
<div id="demo" class="collapse in width">
<div style="width: 400px;">
<p> This should collapse vertical (by width)</p>
</div>
</div>
</div>
<div id="divbody" class="span4">
Table comes here. This is the main body. Span should increase from 4 to 8 when div demo is collapsed. test test test test test test test test test test
</div>
</div>
</div>
Example
http://www.bootply.com/90126
Another example with the button below instead of to the side..
http://www.bootply.com/90128