Skip to content

Instantly share code, notes, and snippets.

@devlifealways

devlifealways/index.html

Last active August 7, 2017 20:10
Show Gist options
  • Save devlifealways/d703952e6b969d5c4ae2e53b2fb0adc1 to your computer and use it in GitHub Desktop.
Save devlifealways/d703952e6b969d5c4ae2e53b2fb0adc1 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/fugiyinuli
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<title>JS Bin</title>
<style id="jsbin-css">
.target {
background-color : gray;
color: white;
font-size : 2em;
}
</style>
</head>
<body>
<div class="target">
<p class="inside">
This is just an example !
</p>
</div>
<script id="jsbin-javascript">
'use strict';
(function ($) {
var out = false;
$(window).resize(function () {
//let target = $('.inside');
//target.remove();
out = true;
$('.target').marquee({ leftToRight: true });
out = false;
});
$.fn.textWidth = function () {
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
$.fn.marquee = function (args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent': that.css('text-indent'),
'overflow': that.css('overflow'),
'white-space': that.css('white-space')
},
marqueeCss = {
'text-indent': width,
'overflow': 'hidden',
'white-space': 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth * -1,
dfd = $.Deferred();
function go() {
if (!that.length || out) return dfd.reject();
if (width == stop) {
i++;
if (i == args.count) {
that.css(css);
return dfd.resolve();
}
if (args.leftToRight) {
width = textWidth * -1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if (args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if (args.leftToRight) {
width = textWidth * -1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);
$('.target').marquee({ leftToRight: true });
</script>
<script id="jsbin-source-css" type="text/css">.target {
background-color : gray;
color: white;
font-size : 2em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> (function($) {
let out = false;
$(window).resize(()=>{
//let target = $('.inside');
//target.remove();
out = true;
$('.target').marquee({ leftToRight: true });
out = false;
});
$.fn.textWidth = function(){
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
$.fn.marquee = function(args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent' : that.css('text-indent'),
'overflow' : that.css('overflow'),
'white-space' : that.css('white-space')
},
marqueeCss = {
'text-indent' : width,
'overflow' : 'hidden',
'white-space' : 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth*-1,
dfd = $.Deferred();
function go() {
if(!that.length || out) return dfd.reject();
if(width == stop) {
i++;
if(i == args.count) {
that.css(css);
return dfd.resolve();
}
if(args.leftToRight) {
width = textWidth*-1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if(args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if(args.leftToRight) {
width = textWidth*-1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);
$('.target').marquee({ leftToRight: true });</script></body>
</html>
Raw
jsbin.fugiyinuli.css
.target {
background-color : gray;
color: white;
font-size : 2em;
}
Raw
jsbin.fugiyinuli.js
'use strict';
(function ($) {
var out = false;
$(window).resize(function () {
//let target = $('.inside');
//target.remove();
out = true;
$('.target').marquee({ leftToRight: true });
out = false;
});
$.fn.textWidth = function () {
var calc = '<span style="display:none">' + $(this).text() + '</span>';
$('body').append(calc);
var width = $('body').find('span:last').width();
$('body').find('span:last').remove();
return width;
};
$.fn.marquee = function (args) {
var that = $(this);
var textWidth = that.textWidth(),
offset = that.width(),
width = offset,
css = {
'text-indent': that.css('text-indent'),
'overflow': that.css('overflow'),
'white-space': that.css('white-space')
},
marqueeCss = {
'text-indent': width,
'overflow': 'hidden',
'white-space': 'nowrap'
},
args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
i = 0,
stop = textWidth * -1,
dfd = $.Deferred();
function go() {
if (!that.length || out) return dfd.reject();
if (width == stop) {
i++;
if (i == args.count) {
that.css(css);
return dfd.resolve();
}
if (args.leftToRight) {
width = textWidth * -1;
} else {
width = offset;
}
}
that.css('text-indent', width + 'px');
if (args.leftToRight) {
width++;
} else {
width--;
}
setTimeout(go, args.speed);
};
if (args.leftToRight) {
width = textWidth * -1;
width++;
stop = offset;
} else {
width--;
}
that.css(marqueeCss);
go();
return dfd.promise();
};
})(jQuery);
$('.target').marquee({ leftToRight: true });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment