javascript - How can I put element in the middle of vertical align? -

-

i made demo jsfiddle please check.

this show comment slides right side left.
it's shown little bit above middle of vertical align.

how can show right in middle?
please fix , update jsfiddle

javascript

function transition() {          $('.newsticker p').animate({"marginleft":"400px","opacity":".0"}, 600).fadeout(100);         $('.newsticker').append("<p style='margin-left:400px;opacity:0'>hello! test</p>");         $('.newsticker p').animate({"marginleft":"0px","opacity":"1"}, 600);  }  setinterval(transition, 2000);

css

div.newsticker{     border:1px solid #666666;     width:100%;     height:100px; }  .newsticker p{     padding-left:10px;     padding-right:10px;     float:left;     position:absolute; }

html

<div class="newsticker">  </div>

first reset browsers default stylesheet margin or padding by:

* {     padding: 0;     margin: 0; }

then add line-height: 100px; css declaration .newsticker element:

div.newsticker{     border:1px solid #666666;     width:100%;     height:100px; /* --------  */     line-height: 100px; /*  |  */              /*   ^----------  */ }

jsfiddle demo

update

by using css, impossible achieve goal. create jquery version, calculates height of dynamic paragraph , set top property middle of parent. in case little change needed in css:

css:

div.newsticker {     position: relative; /* add relative position parent */     overflow: hidden;   /* hide overflow */ }  .newsticker p {     width: 100%;       /* set width of paragraph '100%' or 'inherit' */ }

javascript/jquery:

var newsticker = $('.newsticker'),     maxheight = newsticker.height();  function transition() {     newsticker.find('p').animate({         marginleft : "400px",         opacity : ".0"     }, 600).fadeout(100);      newsticker.append(         $('<p>').css({             'margin-left' : '400px',             'opacity'     : '0'         // put text in .text() method:         }).text('lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsam suscipit nihil voluptatibus maxime sit quam delectus eaque officiis cumque accusamus velit nesciunt deserunt veniam molestias alias? eaque iste quia non.')     ).find('p').each(function() {         if ($(this).css('top') == 'auto')         $(this).css('top',             (maxheight - $(this).height()) / 2         );     });      newsticker.find('p').animate({"marginleft":"0px","opacity":"1"}, 600); } setinterval(transition, 2000);

here jsfiddle demo.


Comments

Post a Comment

Popular posts from this blog

c++ - Linked List error when inserting for the last time -

-
so have part of code here this loop 5 times (max = 5) insert word link list. for ( int = 0 ; < max ; i++ ) { string alphabet = g->returnalphabets(); l[i]->addwords(alphabet[i]); } and have insert word part here string line; fstream myfile ("words.txt"); while (!myfile.eof()) { getline(myfile,line); if ( alphabet == line[0] ) { listnode *newnode = new listnode; if ( head == null ) { newnode->item = alphabet; newnode->next = null; head = newnode; } else { newnode->item = line; prev = cur; prev->next = newnode; } cur = newnode; } } myfile.close(); my problem gives me error on last loop. meaning on max = 4, insert node. rest of loop fine. when decrease max 4 meaning loop 4 times, program error-free when program loops 5 times gives error. anyone can poin...
Read more

java - activate/deactivate sonar maven plugin by profile? -

-
i use sonar plugin executes if activated in maven profile. sonar runs on every compile. the problem build fail other team members not have sonar application installed locally. pom.xml checked in team members same copy including sonar configuration, don't want them modify purpose of disabling sonar (they might inadvertently check modified copy in). please advise how configure maven (.m2/settings.xml) and/or pom.xml sonar feature can enabled/disabled local profile. here sonar configuration in each project's pom.xml: <plugin> <groupid>org.codehaus.mojo</groupid> <artifactid>sonar-maven-plugin</artifactid> <version>1.0</version> <executions> <execution> <id>make-sonar</id> <phase>compile</phase> <goals> <goal>sonar</goal> </goals> </execution> </executions> ...
Read more

tsql - Pivot with Temp Table (definition for column must include data type) -- SQL Server 2008 -

-
the following returning 2 errors: 'the definition column '0.63' must include data type.' 'the select list insert statement contains fewer items insert list. number of select values must match number of insert columns.' i understand need assign data type columns being inserted temp table don't quite understand how dynamic code however. if explanation on how @cols variable code working , specific issue. fldpk data type int , pivot fields i.e. @cols, float data type. declare @cols nvarchar(max), @query nvarchar(max); select @cols = stuff((select distinct ',' + quotename(fldci) fn_qryt_1() xml path(''), type ).value('.', 'nvarchar(max)') ,1,1,'') set @query = 'select fldpk, ' + @cols + ' ( select fldpk ,fldni ...
Read more