We Keep Coding

how to give fadeout effect to a page in javascript without using jQuery

.. i tried using the code in which the loading will keep on increasing till 100 until a new page will open..
if(loading==90){
preload.style.animation = "fadeOut 2s ease";
}
but its not working

Use css opacity, 1 is full visible, 0 is hidden and 0.5 is half visible.
document.getElementById("yourId").style.opacity = "0.5";

You can append class to preload element
if (window.addEventListener) {
window.addEventListener('load', cool, false);
}
function cool() {
var preload = document.getElementById("preload");
var loading = 0;
var id = setInterval(frame,64);
function frame() {
if(loading == 100) {
clearInterval(id);
// window.open("test1.html","_self");
}
if(++loading == 90){
preload.className = "ld";
}
}
};
#preload {
position: absolute;
display: block;
left: 0;
top: 0;
background: tomato;
width: 100%;
height: 200px;
transition: all 2s ease;
}
.ld {
opacity: 0;
}
<div id="preload"></div>
test string

How to animate endless loop using jquery?

I have been trying using jquery animate to do a running text. But I can't seems to get it run in an endless loop. It always runs one time only..
/* js: */
$(document).ready(function(){
function scroll() {
$('.scroll').animate({
right: $(document).width()
}, 8000, scroll);
}
scroll();
});
/* css： */
.scroll {
position: absolute;
right: -200px;
width: 200px;
}
<!-- html: -->
<div class="scroll">This text be scrollin'!</div>
This is the demo:
https://jsfiddle.net/y9hvr9fa/1/
Do you guys know how to fix it?

So this is what I did:
Precalculate $(document).width() as if a horizontal scroll appears, the width will change in the next iteration
Remove the width you have set for scroll so that the width is only as long as the content - and you would have to give white-space:nowrap to keep the text in a line.
In the animate use the width of the scroll text using $('.scroll').outerWidth()
See demo below and update fiddle here
$(document).ready(function() {
// initialize
var $width = $(document).width();
var $scrollWidth = $('.scroll').outerWidth();
$('.scroll').css({'right': -$scrollWidth + 'px'});
// animate
function scroll() {
$('.scroll').animate({
right: $width
}, 8000, 'linear', function() {
$('.scroll').css({'right': -$scrollWidth + 'px'});
scroll();
});
}
scroll();
});
body {
overflow: hidden;
}
.scroll {
position: absolute;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll">This text be scrollin'!</div>
Let me know your feedback on this, thanks!

CSS Alternative:
Alternatively you could use a CSS transition like in this CodePen:
https://codepen.io/jamesbarnett/pen/kfmKa
More advanced:
$(document).ready(function(){
var scroller = $('#scroller'); // scroller $(Element)
var scrollerWidth = scroller.width(); // get its width
var scrollerXPos = window.innerWidth; // init position from window width
var speed = 1.5;
scroller.css('left', scrollerXPos); // set initial position
function moveLeft() {
if(scrollerXPos <= 0 - scrollerWidth) scrollerXPos = window.innerWidth;
scrollerXPos -= speed;
scroller.css('left', scrollerXPos);
window.requestAnimationFrame(moveLeft);
}
window.requestAnimationFrame(moveLeft);
});
.scroll {
display: block;
position: absolute;
overflow: visible;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller" class="scroll">This text be scrollin'!</div>
Dirty solution (my original answer):
In this example this would be a quick fix:
The text is running to the left without ever stopping. Here you will tell the text to always start at that position. (After the time has run up - meaning not necessarily just when it has left the screen)
$(document).ready(function(){
function scroll() {
$('.scroll').css('right', '-200px').animate({
right: $(document).width()
}, 8000, scroll);
}
scroll();
});

I have been trying using jquery animate to do a running text.
You know that the <marquee> HTML element works, right?
Which means you don't need CSS, Javascript or jQuery.
Pure HTML Solution:
<marquee>This text be scrollin'!</marquee>
The <marquee> element includes a large number of optional declarative attributes which control the behaviour of the scrolling text:
behavior
bgcolor
direction
height
hspace
loop
scrollamount
scrolldelay
truespeed
vspace
width
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
Note 1:
The resource above correctly notes that:
This feature is no longer recommended. Though some browsers might
still support it, it may have already been removed from the relevant
web standards, may be in the process of being dropped, or may only be
kept for compatibility purposes.
Note 2
The same resource also recommends:
see the compatibility table at the bottom of this page to guide your decision
And... a cursory look at that compatibility table shows that the <marquee> element is as browser-compatible as the most established, most browser-compatible elements which exist today.

I hope it is useful :)
function start() {
new mq('latest-news');
mqRotate(mqr);
}
window.onload = start;
function objWidth(obj) {
if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) return obj.clip.width;
return 0;
}
var mqr = [];
function mq(id) {
this.mqo = document.getElementById(id);
var wid = objWidth(this.mqo.getElementsByTagName("span")[0]) + 5;
var fulwid = objWidth(this.mqo);
var txt = this.mqo.getElementsByTagName("span")[0].innerHTML;
this.mqo.innerHTML = "";
var heit = this.mqo.style.height;
this.mqo.onmouseout = function () {
mqRotate(mqr);
};
this.mqo.onmouseover = function () {
clearTimeout(mqr[0].TO);
};
this.mqo.ary = [];
var maxw = Math.ceil(fulwid / wid) + 1;
for (var i = 0; i < maxw; i++) {
this.mqo.ary[i] = document.createElement("div");
this.mqo.ary[i].innerHTML = txt;
this.mqo.ary[i].style.position = "absolute";
this.mqo.ary[i].style.left = wid * i + "px";
this.mqo.ary[i].style.width = wid + "px";
this.mqo.ary[i].style.height = heit;
this.mqo.appendChild(this.mqo.ary[i]);
}
mqr.push(this.mqo);
}
function mqRotate(mqr) {
if (!mqr) return;
for (var j = mqr.length - 1; j > -1; j--) {
maxa = mqr[j].ary.length;
for (var i = 0; i < maxa; i++) {
var x = mqr[j].ary[i].style;
x.left = parseInt(x.left, 10) - 1 + "px";
}
var y = mqr[j].ary[0].style;
if (parseInt(y.left, 10) + parseInt(y.width, 10) < 0) {
var z = mqr[j].ary.shift();
z.style.left = parseInt(z.style.left) + parseInt(z.style.width) * maxa + "px";
mqr[j].ary.push(z);
}
}
mqr[0].TO = setTimeout("mqRotate(mqr)", 20);
}
.marquee {
position: relative;
overflow: hidden;
text-align: center;
margin: 0 auto;
width: 100%;
height: 30px;
display: flex;
align-items: center;
white-space: nowrap;
}
#latest-news {
line-height: 32px;
a {
color: #555555;
font-size: 13px;
font-weight: 300;
&:hover {
color: #000000;
}
}
span {
font-size: 18px;
position: relative;
top: 4px;
color: #999999;
}
}
<div id="latest-news" class="marquee">
<span style="white-space:nowrap;">
<span> •</span>
one Lorem ipsum dolor sit amet
<span> •</span>
two In publishing and graphic design
<span> •</span>
three Lorem ipsum is a placeholder text commonly
</span>
</div>

How is this?
.scroll {
height: 50px;
overflow: hidden;
position: relative;
}
.scroll p{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
-moz-animation: scroll 8s linear infinite;
-webkit-animation: scroll 8s linear infinite;
animation: scroll 8s linear infinite;
}
#-moz-keyframes scroll {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
#-webkit-keyframes scroll {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
#keyframes scroll {
0% {
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
<div class="scroll"><p>This text be scrollin'!</p></div>

style conflict between javascript and css

I have built a little element 3d rotator for infinite rotating in either direction on the X or Y axis. However I am running into what I think is a css style conflict. #face2 has a css property that rotates it -180deg . however its not being implemented by the browser.
is this a css conflict perhaps?
you can see the code and the effect in this code pen :
//declaring global variables
window.RotXFrontVal = 0; // by how much to rotate the X value of the front face
window.RotXBackVal = -180; // by how much to rotate the X value of the back face
window.RotYFrontVal = 0; // by how much to rotate the Y value of the front face
window.RotYBackVal = 180; // by how much to rotate the Y value of the back face
$(document).ready(function() {
//$('#face2').css({'transform': 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform', 'rotateX(-180deg)'}, 0);
//$('#face2').animate({'transform': 'rotateX(-180deg)'}, 0);
var MyDivSlider = function() { // Here will come the Div Slider by Scroll
var scl = $.now(); // Take a time stamp to prevent function from triggering too often
$(document).on('DOMMouseScroll mousewheel', function MyScroll(event) {
if (($.now() - scl) > 500) {
if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) {
//Scroll Down
window.RotXFrontVal = window.RotXFrontVal - 180;
window.RotXBackVal = window.RotXBackVal - 180;
console.log("Down. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
//Up Scroll
else {
window.RotXFrontVal = window.RotXFrontVal + 180;
window.RotXBackVal = window.RotXBackVal + 180;
console.log("Up. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back");
}
$('#face2').css('transform', 'rotateX(' + RotXBackVal + 'deg)');
$('#face1').css('transform', 'rotateX(' + RotXFrontVal + 'deg)');
console.log('rotateX(' + RotXFrontVal + ')')
console.log('rotateX(' + RotXBackVal + ')')
scl = $.now();
}
});
}();
});
body { height:100%; overflow:hidden;}
#card {
height:300px;
width: 300px;
display: block;
position: relative;
transform-style: preserve-3d;
transition: all 1.5s linear;
perspective: 1000px;
}
#face1 {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: red;
backface-visibility: hidden;
transition: transform 1.5s;
z-index: 2;
}
#face2 {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: blue;
backface-visibility: hidden;
transition: transform 1.5s;
z-index: 1;
transform: rotateX ( -180deg );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="card">
<div id = "face1">Use the mouse scroll button to rotate me</div>
<div id = "face2">Use the mouse scroll button to rotate me</div>
</div>
</body>

It's because of the whitespace inbetween rotateX and (
try: transform: rotateX( -180deg );

how to implement slideshow transition effects?

I think in transition effects in slideshows,just two animation methods of fade in and fade out are ready to use,others have to be implemented by css,am I right?if not,please give examples,if yes,guide me how can I implement some of them,or have anyone done it before?

The fadeIn() and fadeOut() are the easiest to use but they are just shortcuts to jquery's animate function. These use css, just like all the other animations including custom one's, you just don't have to deal with it directly.
In jQuery you can use the animation function to transition any css value that has a numeric value (height,width,top,left,etc.) For more complex built-in methods you can try the jQuery UI library.
An example:
$('#myDiv').animate({height:30,width:300,top:400,left:300});
See the jQuery animate documentation for more details.
I have also built my own jQuery slider which you can find here. Going into the source code may give you more information as it deals heavily with animating the position and size of images.
Hope this helps.

I had done it two weeks ago. I use css3 transition for fadeIn/fadeOut animation.
demo: http://www-stage.moztw.org/index2.shtml
Stylus (stylus)
.slider
position: relative
.slider-section
position: absolute
left: 0
top: 0
height: 100%
width: 100%
opacity: 0
z-index: 0
transition: opacity 2s ease
&.show
opacity: 1
z-index: 1
.slider-section-title
color: #FFF
position: absolute
left: 10px
top: 10px
.slider-section-description
position: absolute
bottom: 0
left: 0
width: 100%
padding: 5px 10px
background: rgba(0, 0, 0, .7)
color: #FFF
.slider-btn-group
position: absolute
z-index: 2
width: 100%
height: 10px
bottom: 45px
left: 0
text-align: center
.slider-btn
display: inline-block
margin: 0 5px
a
display: inline-block
width: 25px
height: 10px
background: rgba(0, 0, 0, .5)
color: #FFF
text-indent: 100%
overflow: hidden
&.current a
background: rgba(0, 0, 0, .8)
HTML
<div class="slider key-point-slider">
<section class="slider-section show" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-beta.jpg">
<h3 class="slider-section-title">Title 1</h3>
<div class="slider-section-description">
<p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
</div>
</section>
<section class="slider-section" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-affiliates.jpg">
<h3 class="slider-section-title">Title 2</h3>
<div class="slider-section-description">
<p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
</div>
</section>
</div>
JavaScript
// load images
$('.slider-section').each(function () {
var $this = $(this);
$this.css('background-image', 'url("' + $this.data('background') + '")');
});
// init all sliders
$('.slider').each(function () {
var $this = $(this);
var $sections = $this.find('.slider-section');
var len = $sections.length;
var timer;
var curr = 0;
var btnGroup = $('<div class="slider-btn-group"></div>');
// append crontral btns
(function () {
var i = len;
var tmp = '<ul class="slider-btn-group-ul">';
while (i) {
i -= 1;
tmp += '<li class="slider-btn">' + i + '</li>';
}
tmp += '</ul>';
btnGroup.append(tmp);
})();
var $btns = btnGroup.find('.slider-btn a').on('click', function () {
moveTo($(this).parent().index());
return false;
});
$this.append(btnGroup);
function moveTo(i) {
curr = i;
$sections
.eq(i)
.addClass('show')
.siblings('.show')
.removeClass('show');
$btns
.parent()
.eq(i)
.addClass('current')
.siblings('.current')
.removeClass('current');
}
moveTo(0);
var next = (function next(i) {
timer = setTimeout(function () {
moveTo(i);
next(i + 1 >= len ? 0 : i + 1);
}, 5000);
return next;
})(1);
$this.on('mouseenter', function () {
timer && clearTimeout(timer);
});
$this.on('mouseleave', function () {
next(curr);
});
});

Simple way to show a message bar at the top of a page

I would like to implement something like stackoverflow does, the bar at top of the page that shows some message.
I came across this pretty nice effect with a page bounce too:
http://www.slidedeck.com/features/ (look at the purple top bar coming down)
Is there a simple way to do this? Maybe with only jQuery or other framework?

How about this? :)
Just add some fancy graphics and it should be good to go!

I just found a great and simple solution From blog.grio.com
jsFiddle Demo
function showNotificationBar(message, duration, bgColor, txtColor, height) {
/*set default values*/
duration = typeof duration !== 'undefined' ? duration : 1500;
bgColor = typeof bgColor !== 'undefined' ? bgColor : "#F4E0E1";
txtColor = typeof txtColor !== 'undefined' ? txtColor : "#A42732";
height = typeof height !== 'undefined' ? height : 40;
/*create the notification bar div if it doesn't exist*/
if ($('#notification-bar').size() == 0) {
var HTMLmessage = "<div class='notification-message' style='text-align:center; line-height: " + height + "px;'> " + message + " </div>";
$('body').prepend("<div id='notification-bar' style='display:none; width:100%; height:" + height + "px; background-color: " + bgColor + "; position: fixed; z-index: 100; color: " + txtColor + ";border-bottom: 1px solid " + txtColor + ";'>" + HTMLmessage + "</div>");
}
/*animate the bar*/
$('#notification-bar').slideDown(function() {
setTimeout(function() {
$('#notification-bar').slideUp(function() {});
}, duration);
});
}

var _show = true;
$(document).ready(function() {
$('button#showHide')
.bind('click', function() {
if (_show) {
$('div#hideMe')
.animate({
'height': '25px'
}, 750);
_show = false;
} else {
$('div#hideMe')
.animate({
'height': '0px'
}, 750);
_show = true;
}
});
});
body {
background-color: #003366;
padding: 0px;
margin: 0px;
text-align: center;
}
button {
cursor: pointer;
right: 5px;
float: right;
position: relative;
top: 5px;
}
div#hideMe {
background-color: #FF3399;
height: 0px;
overflow: hidden;
position: relative;
}
div#container {
background-color: #FFFFFF;
border: #FFFF00 1px solid;
height: 600px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
position: relative;
}
div#contents {
height: 600px;
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="hideMe">Congratulations, you just won a punch in the neck!</div>
<div id="container">
<div id="contents">
<button id="showHide">clicker</button>
</div>
</div>
Was just playing around with this. Does about what your example did. :)
you could do this about 17,334,259 different ways. But this'll work. Just make sure your boxes are positioned relatively, so the expansion of #hideMe pushes #container down too. Or absolutely position it and fix it to 0px,0px. or whatever...

You'll need to fetch the message to display, possibly via Ajax, but:
http://jsfiddle.net/ZpBa8/4/
shows how to show a bar across the top in jQuery and is a start

The same people who make the plugin whose page you love make a plugin to do what you love about it: http://www.hellobar.com/

The Meerkat jQuery plugin does this very nicely.

This can easily be done without jquery even. Just use the DOM to append a div element to the body and set its top position to zero. Set its width as the screen.width and height to be lets say 50px. And just initiate an opacity fade in/fade out. Like the following sample. This sample is for IE. Read this for reference. Call initFade to being the Fade In and Fade out process.
var OP = 90;
function processFade() {
var t = "";
OP = OP - 3;
if (OP < 0) {
clearTimeout(t);
OP = 90;
return;
}
$("YOUR_DIV_ELEMENT_HERE").style.filter = "alpha(opacity=" + OP + ")";
if (OP == 0) {
$("YOUR_DIV_ELEMENT_HERE").style.display = "none";
clearTimeout(t);
OP = 90;
return;
}
t = setTimeout("processFade();", 100);
}
function initFade() {
processFade();
}