AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


     The following example is shown how to create the news headlines one by one, like flash news. This code is fully created in javascript/jQuery.

     Decide which content should be come with role effect, and put the head lines inside the <div> tag like below

<div class="wrapper">
  <div class="roles">
      <div>
          Google Mobile
      </div>
      <div>
          Micromax Mobile
      </div>
      <div>
          Nokia Mobile
      </div>
      <div>
          I am an aspiring individual.
      </div>
      <div>
          Android OS
      </div>
  </div>
</div>

     We are using the following CSS for given style.

body {
  background: #f1f1f1;
  color: #222;
  font-family: 'Open Sans', sans-serif;
}
.wrapper {
  padding: 100px;
  width: 500px;
  display: block;
  text-align: center;
  margin: 0 auto;
}
.roles {
    font-size: 30px;
    height: 50px;
    vertical-align: middle;
    overflow: hidden;
}
.roles div {
    height: 50px;
    transition: margin-top 1s ease-in-out;
}

The Javascript Code is shown below

var current = 1; //keeps track of the current div
var height = $('.roles').height(); //the height of the roles div
var numberDivs = $('.roles').children().length; //the number of children of the roles div
var first = $('.roles div:nth-child(1)'); //the first div nested in roles div
setInterval(function() {
    var number = current * -height;
    first.css('margin-top', number + 'px');
    if (current === numberDivs) {
        first.css('margin-top', '0px');
        current = 1;
    } else current++;
}, 2000);


Example Program:- (Editor)


Editor is Loading...

Advertisement

0 comments:

Post a Comment

Total Pageviews