Develop Reference

Cut margin-left of element in half under certain window width

I want to cut the margin-left of a div container in half under a certain window width (mobile).
I've tried this with parseInt, .css and store it temporarly in a variable. Then cut it in half and use .replace.
if ($(window).width() <= 590) {
let oldmargin = parseInt($("#div").css("marginLeft"));
let newmargin = oldmargin/2;
$("#div").css("marginLeft").replace('rem', newmargin);
}
Unfortunately the code is not working.

To set a new value of margin-left, try with $("#div").css("margin-left",newmargin);
To GET a value using .css() = $("#div").css("margin-left")
To SET a value using .css() = $("#div").css("margin-left",newmargin)
$('.div').each(function() {
var oldmargin = parseInt($(this).css("marginLeft"));
var newmargin = oldmargin / 2;
$(this).css("marginLeft", newmargin);
});
Demo
$('.div').each(function() {
var oldmargin = parseInt($(this).css("marginLeft"));
var newmargin = oldmargin / 2;
$(this).css("marginLeft", newmargin);
});
.div {
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div">#div</div>
<div class="div">#div</div>

foldable div between a max-height its original text height

Is there an easy way (in pure javascript) to fold a div between a setted max-height and the height of its text?
In detail, I want to load a div with a preset height (40 pixels for example), and show a "show more" button, so when you click on it the div sets to the height of the text inside it (80px for example). And when you click again you set the div's height to its initial height (40 pixels).
A visual example would be something like this:
Initial state (40 pixels)
The text of the div
would be something like
this, so when the button
show more info...
if you click on "show more info" you get to this state (80 pixels)
The text of the div
would be something like
this, so when te button
is pressed..
it shows the remaining text
;)
show less info...
if you click on "show less info" you get to the previos state (40 pixels)
I've tried with height / max-height and clientHeight, but when you set the height property value you override the clientHeight one.
Thanks in advance. If the solution is too complex, don't hesitate to answer.

You might want to take a look to this tutorial: http://papermashup.com/simple-jquery-showhide-div/

An easy solution to solve this is just using the max-height property.
You can set:
div.style.maxHeight = 40; //initial state
if the button is pressed:
div.style.maxHeight = 80; //final state (set a value bigger than the text is going to be)
if pressed again:
div.style.maxHeight = 40; //initial state again
The problem of this solution is that you don't really know the real text-size, so if you set a max-height smaller than the text size, it would'n work properly. But for me solves the issue.
Thanks, and hope this helps to somebody else.

One possibly overly-complicated solution:
$('p').each(
function() {
var that = $(this);
that.attr('data-fullheight', that.height());
that.height(that.height() / 2);
that.closest('div').append('<a src="#" class="readmore">Read more</a>');
});
$('div').on('click', 'a.readmore', function(e) {
var p = $(this)
.closest('div')
.find('p[data-fullheight]'),
full = p.attr('data-fullheight');
p.animate({
'height' : full == p.height() ? full/2 : full
},200)
});​
Which assumes the following HTML (albeit the div id isn't necessary):
<div id="text">
<p>...text...</p>
</div>
​JS Fiddle demo.
Just because I thought that last one wasn't over-complicated enough, I thought I'd post this (plain-JavaScript!) solution as well:
var readmores = [];
function heights(el) {
if (!el) {
return false;
}
else {
var h = parseInt(window.getComputedStyle(el, null).height, 10),
moreLess = document.createElement('a'),
text = document.createTextNode('Read more'),
parent = el.parentNode;
readmores.push(moreLess);
moreLess.src = '#';
moreLess.className = 'readmore';
moreLess.appendChild(text);
parent.insertBefore(moreLess, el.nextSibling);
el.setAttribute('data-fullheight', h);
el.style.height = Math.floor(h / 2) + 'px';
}
}
function toggleHeight(el) {
if (!el) {
return false;
}
else {
var full = el.getAttribute('data-fullheight'),
curHeight = parseInt(el.style.height, 10);
el.style.height = full == curHeight ? Math.floor(full / 2) + 'px' : full + 'px';
}
}
function toggleText(el) {
if (!el) {
return false;
}
else {
var text = el.firstChild.nodeValue;
el.firstChild.nodeValue = text == 'Read more' ? 'Read less' : 'Read more';
}
}
var paras = document.getElementsByTagName('p');
for (var i = 0, len = paras.length; i < len; i++) {
var cur = paras[i];
heights(cur);
}
for (var i=0, len=readmores.length; i<len; i++){
readmores[i].onclick = function(){
toggleHeight(this.previousElementSibling);
toggleText(this);
}
}
​JS Fiddle demo.
This works (in Chrome 21), but makes absolutely no allowance for IE for which it will need to be amended some.

Displaying images like Google Image Search

Does anybody know of a script that will let me diplay image results in the way that Google Image Search does (image grid view) with hover to enlarge and details? Something that I can just "plug-and-play" so to speak.

Have a look at Masonry http://masonry.desandro.com/

First, you need to put all images inside a container element:
<div class="parent">
<img src="">
<img src="">
<img src="">
</div>
Then you need to make sure that the images are displayed in one line. This can be done by e.g. float: left. You should also set vertical-align to remove the small gap underneath each image:
img {
float: left;
vertical-align: top;
}
Finally you need some JavaScript to loop through all images and calculate the ideal rowHeight based on their dimensions. The only thing you need to tell this algorithm is the maximum row height that you want (rowMaxHeight)
// Since we need to get the image width and height, this code should run after the images are loaded
var elContainer = document.querySelector('.parent');
var elItems = document.querySelector('.parent img');
var rowMaxHeight = 250; // maximum row height
var rowMaxWidth = elContainer.clientWidth;
var rowWidth = 0;
var rowRatio = 0;
var rowHeight = 0;
var rowFirstItem = 0;
var rowIsLast = false;
var itemWidth = 0;
var itemHeight = 0;
// Make grid
for (var i = 0; i < elItems.length; i++) {
itemWidth = elItems[i].clientWidth;
itemHeight = elItems[i].clientHeight;
rowWidth += itemWidth;
rowIsLast = i === elItems.length - 1;
// Check if current item is last item in row
if (rowWidth + rowGutterWidth >= gridWidth || rowIsLast) {
rowRatio = Math.min(rowMaxWidth / rowWidth, 1);
rowHeight = Math.floor(rowRatio * rowMaxHeight);
// Now that we know the perfect row height, we just
// have to loop through all items in the row and set
// width and height
for (var x = rowFirstItem; x <= i; x++) {
elItems[i].style.width = Math.floor(rowRatio * itemWidth * (rowMaxHeight/itemHeight)) + 'px';
elItems[i].style.height = rowHeight + 'px';
}
// Reset row variables for next row
rowWidth = 0;
rowFirstItem = i + 1;
}
}
Note that this code is not tested and a very simplified version of what this vanilla JavaScript plugin does: https://fld-grd.js.org

Two solutions that I have found so far.
tutorial blog
jsfiddle
$(function() {
$(window).on('resize', function() {
$('.openEntry').remove();
$('.entry').hide();
var startPosX = $('.preview:first').position().left;
console.log(startPosX);
$('.entry, .preview').removeClass("first last");
$('.entry').each(function() {
if ($(this).prev('.preview').position().left == startPosX) {
$(this).prev('.preview').addClass("first");
$(this).prevAll('.entry:first').addClass("last");
}
});
$('.entry:last').addClass("last");
});
$(window).trigger('resize');
$('.trigger').click(function() {
$('.openEntry').slideUp(800);
var preview = $(this).closest('.preview');
preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});
$('body').on('click', '.close', function() {
$('.openEntry').slideUp(800).remove();
});
})

codrops actually puts the photo enlargement/details inline instead of as a modal overlay:
http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/

This might be what you are looking for... http://www.gethifi.com/demos/jphotogrid

Have a look at the gPop plugin
DEMO
Download in Github

Check out this jQuery Plugin: https://github.com/brunjo/rowGrid.js
It places images like on the Google image search.

Simply just repeat your images like this:
<img style="float: left; height: 12em; margin-right: 1%; margin-bottom: 0.5em;border:1px solid lightgray" src="ImgSrc " />

Javascript: Let user select an HTML element like Firebug?

I want to write a browser (Chrome/FF) extension that needs to select an element on a web page. I would like it to behave like Firebug's element inspector does. You click the inspect arrow and you can then hover/highlight elements. When you click on the element you want, the element is inspected. I'm just interested in the code to allow a user to select an element - not in actually inspecting it or anything similar.
Because I'm writing an extension, it might be nice if you could provide non-jQuery/Prototype/etc.. code so I don't have to distribute that.

I have recently required such a feature for a project I was working on, turned out that I had to use for sides to create a box because otherwise the event.target when you move the mouse would end up being the selector, and if I were to use z-index: -1 it would be a bit fishy when you have a lot of elements that overlap...etc.
Here is a version that I have converted from my project for your benefit, it involves jQuery but it is extremely simple to convert to vanilla as only the mousemove & css methods from jQuery are used.
Step by step instructions.
First create the 5 HTMLElements that are required.
<div id="selector">
<div id="selector-top"></div>
<div id="selector-left"></div>
<div id="selector-right"></div>
<div id="selector-bottom"></div>
</div>
Secondly create a mousemove event on the document (or your container)
$(document).mousemove(function(event) { ... });
Then inside the mousemove we will do some basic checking to prevent selecting the HTML, BODY, selector
var id = event.target.id, tagName = event.target.tagName;
if(id.indexOf('selector') !== -1 || tagName === 'BODY' || tagName === 'HTML') {
return;
}
Then we need to create a object to store our elements like so.
var elements = {
top: $('#selector-top'),
left: $('#selector-left'),
right: $('#selector-right'),
bottom: $('#selector-bottom')
};
After that we store some variables that hold some information about the target element like so.
var $target = event.target;
targetOffset = $target.getBoundingClientRect(),
targetHeight = targetOffset.height,
targetWidth = targetOffset.width;
Then all we do is calculate the position & height for all 4 sides of the selector like so.
elements.top.css({
left: (targetOffset.left - 4),
top: (targetOffset.top - 4),
width: (targetWidth + 5)
});
elements.bottom.css({
top: (targetOffset.top + targetHeight + 1),
left: (targetOffset.left - 3),
width: (targetWidth + 4)
});
elements.left.css({
left: (targetOffset.left - 5),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
elements.right.css({
left: (targetOffset.left + targetWidth + 1),
top: (targetOffset.top - 4),
height: (targetHeight + 8)
});
All of the +aFewPixels is just a little optimization so that there is like 2px gap in between the selector and the target.
For the CSS this is what I have come up with.
#selector-top, #selector-bottom {
background: blue;
height:3px;
position: fixed;
transition:all 300ms ease;
}
#selector-left, #selector-right {
background: blue;
width:3px;
position: fixed;
transition:all 300ms ease;
}
The transition gives the selector a very nice sliding effect.
Try out a demo http://jsfiddle.net/rFc8E/9/
Note: This also works for transform: scale(2); eg. when a element is scaled in size.
Edit: I've just updated this, I noticed that the elements object was inside the event handler, I've moved it outside in the demo, this is quite an important performance improvement because now, the elements object is only created once instead of Hundreds of Thousands if not millions of times inside the mousemove event.

I wrote an implementation of this using jQuery as a component of another project. The source and documentation are available here: https://github.com/andrewchilds/jQuery.DomOutline

One simple way to do it is to use an outline instead of a border:
.highlight { outline: 4px solid #07C; }
Just add and remove that class to any element you want to select/deselect (code below is not properly tested):
document.body.addEventListener("mouseover", function(e) {
e.stopPropagation();
e.target.addEventListener("mouseout", function (e) {
e.target.className = e.target.className.replace(new RegExp(" highlight\\b", "g"), "");
});
e.target.className += " highlight";
});
Since you are using an outline, (which is supported by Chrome) instead of a border, elements will not jump around. I'm using something similar in my EasyReader Extension.

HTML Element Picker (Vanilla JS)
Pick and highlight any HTML element on a page with only Vanilla JS! Tested in Chrome, FF, and Opera, doesn't work in IE.
How it works:
What you need is actually very simple. You can just create an empty div box with a background in JS and move it around to highlight on top of hovered elements.
Here's the JS code:
const hoverBox = document.createElement("div");
console.log("hoverBox: ", hoverBox);
hoverBox.style.position = "absolute";
// change to whatever highlight color you want
hoverBox.style.background = "rgba(153, 235, 255, 0.5)";
// avoid blocking the hovered element and its surroundings
hoverBox.style.zIndex = "0";
document.body.appendChild(hoverBox);
let previousTarget;
document.addEventListener("mousemove", (e) => {
let target = e.target;
if (target === hoverBox) {
// the truely hovered element behind the added hover box
const hoveredElement = document.elementsFromPoint(e.clientX, e.clientY)[1];
if (previousTarget === hoveredElement){
// avoid repeated calculation and rendering
return;
} else{
target = hoveredElement;
}
} else{
previousTarget = target;
}
const targetOffset = target.getBoundingClientRect();
const targetHeight = targetOffset.height;
const targetWidth = targetOffset.width;
// add a border around hover box
const boxBorder = 5;
hoverBox.style.width = targetWidth + boxBorder * 2 + "px";
hoverBox.style.height = targetHeight + boxBorder * 2 + "px";
// need scrollX and scrollY to account for scrolling
hoverBox.style.top = targetOffset.top + window.scrollY - boxBorder + "px";
hoverBox.style.left = targetOffset.left + window.scrollX - boxBorder + "px";
});
See Demo
I also made an npm package for the element picker with many more user configurations like background color, border width, transition, etc.
Here's the GitHub page.

I ended up asking in the Firebug group and got some great help:
http://groups.google.com/group/firebug/browse_thread/thread/7d4bd89537cd24e7/2c9483d699efe257?hl=en#2c9483d699efe257

Here is a library that written in pure javascript as an alternative.
TheRoom JS: https://github.com/hsynlms/theroomjs
// theroom information template for target element
var template="";
template += "<div id=\"theroom-info\">";
template += " <span id=\"theroom-tag\"><\/span>";
template += " <span id=\"theroom-id\"><\/span>";
template += " <span id=\"theroom-class\"><\/span>";
template += "<\/div>";
template += "";
template += "<style>";
template += " #theroom-info {";
template += " position: fixed;";
template += " bottom: 0;";
template += " width: 100%;";
template += " left: 0;";
template += " font-family: \"Courier\";";
template += " background-color: #ffffff;";
template += " padding: 10px;";
template += " color: #333333;";
template += " text-align: center;";
template += " box-shadow: 0px 4px 20px rgba(0,0,0,0.3);";
template += " }";
template += "";
template += " #theroom-tag {";
template += " color: #C2185B;";
template += " }";
template += "";
template += " #theroom-id {";
template += " color: #5D4037;";
template += " }";
template += "";
template += " #theroom-class {";
template += " color: #607D8B;";
template += " }";
template += "<\/style>";
var options = {
template: template,
showInfo: true
};
// initialize
theRoom.start(options);
codepen demo

There was a similar question asked on Stackoverflow and it had lots of good answers:
Does anyone know a DOM inspector javascript library or plugin?
For those who are looking for a quick and dirty solution:
http://userscripts.org/scripts/review/3006 is the easiest. Just put the code within <script></script> tags and you are good to go.
https://github.com/josscrowcroft/Simple-JavaScript-DOM-Inspector/blob/master/inspector.js is slightly better and still very easy to integrate in.
For a more sophisticated element inspector, you might want to check out the SelectorGadget as pointed by Udi. The inspector selection code is in http://www.selectorgadget.com/stable/lib/interface.js

Also check this one out:
http://rockingcode.com/tutorial/element-dom-tree-jquery-plugin-firebug-like-functionality/
I found it pretty insightful.. and there's a demo here:
http://rockingcode.com/demos/elemtree/
Hope this helps.

A very basic implementation can be done very easily without jQuery using .onmouseover and e.target:
var last,
bgc;
document.onmouseover = function(e) {
var elem = e.target;
if (last != elem) {
if (last != null) {
last.classList.remove("hovered");
}
last = elem;
elem.classList.add("hovered");
}
}
With the CSS below if you want the children to change background as well:
.hovered,
.hovered * {
cursor: pointer;
color: black;
background-color: red;
}
Demo
If you want to select elements only near the edges (or select the parent near the edges and the element itself everywhere else) you could use .getBoundingClientRect.
var last;
window.addEventListener("mousemove", function(e) {
if(last) {
last.style.background = ''; // empty is enough to restore previous value
}
var elem = e.target;
if(elem === document.body || elem === document.documentElement) {
return;
}
var bb = elem.getBoundingClientRect();
var xr = e.pageX - bb.left; // x relative to elem
var yr = e.pageY - bb.top; // y relative to elem
var ew = 10; // edge width
if(
xr <= ew
|| xr >= bb.width - ew
|| yr <= ew
|| yr >= bb.height - ew
){
elem.style.background = 'red';
last = elem;
}
});
Paired with some borders, this can be pretty usable for selection. Demo

What you need to do is to create 4 elements for the highlighting. They will form an empty square, and so your mouse events are free to fire. This is similar to this overlay example I've made.
The difference is that you only need the four elements (no resize markers), and that the size and position of the 4 boxes are a bit different (to mimick the red border). Then you can use event.target in your event handler, because it gets the real topmost element by default.
Another approach is to hide the exra element, get elementFromPoint, calculate then put it back.
They're faster than light, I can tell you. Even Einstein would agree :)
1.) elementFromPoint overlay/borders - [Demo1] FF needs v3.0+
var box = $("<div class='outer' />").css({
display: "none", position: "absolute",
zIndex: 65000, background:"rgba(255, 0, 0, .3)"
}).appendTo("body");
var mouseX, mouseY, target, lastTarget;
// in case you need to support older browsers use a requestAnimationFrame polyfill
// e.g: https://gist.github.com/paulirish/1579671
window.requestAnimationFrame(function frame() {
window.requestAnimationFrame(frame);
if (target && target.className === "outer") {
box.hide();
target = document.elementFromPoint(mouseX, mouseY);
}
box.show();
if (target === lastTarget) return;
lastTarget = target;
var $target = $(target);
var offset = $target.offset();
box.css({
width: $target.outerWidth() - 1,
height: $target.outerHeight() - 1,
left: offset.left,
top: offset.top
});
});
$("body").mousemove(function (e) {
mouseX = e.clientX;
mouseY = e.clientY;
target = e.target;
});
2.) mouseover borders - [Demo2]
var box = new Overlay();
$("body").mouseover(function(e){
var el = $(e.target);
var offset = el.offset();
box.render(el.outerWidth(), el.outerHeight(), offset.left, offset.top);
});​
/**
* This object encapsulates the elements and actions of the overlay.
*/
function Overlay(width, height, left, top) {
this.width = this.height = this.left = this.top = 0;
// outer parent
var outer = $("<div class='outer' />").appendTo("body");
// red lines (boxes)
var topbox = $("<div />").css("height", 1).appendTo(outer);
var bottombox = $("<div />").css("height", 1).appendTo(outer);
var leftbox = $("<div />").css("width", 1).appendTo(outer);
var rightbox = $("<div />").css("width", 1).appendTo(outer);
// don't count it as a real element
outer.mouseover(function(){
outer.hide();
});
/**
* Public interface
*/
this.resize = function resize(width, height, left, top) {
if (width != null)
this.width = width;
if (height != null)
this.height = height;
if (left != null)
this.left = left;
if (top != null)
this.top = top;
};
this.show = function show() {
outer.show();
};
this.hide = function hide() {
outer.hide();
};
this.render = function render(width, height, left, top) {
this.resize(width, height, left, top);
topbox.css({
top: this.top,
left: this.left,
width: this.width
});
bottombox.css({
top: this.top + this.height - 1,
left: this.left,
width: this.width
});
leftbox.css({
top: this.top,
left: this.left,
height: this.height
});
rightbox.css({
top: this.top,
left: this.left + this.width - 1,
height: this.height
});
this.show();
};
// initial rendering [optional]
// this.render(width, height, left, top);
}

Javascript Marquee to replace <marquee> tags

I'm hopeless at Javascript. This is what I have:
<script type="text/javascript">
function beginrefresh(){
//set the id of the target object
var marquee = document.getElementById("marquee_text");
if(marquee.scrollLeft >= marquee.scrollWidth - parseInt(marquee.style.width)) {
marquee.scrollLeft = 0;
}
marquee.scrollLeft += 1;
// set the delay (ms), bigger delay, slower movement
setTimeout("beginrefresh()", 10);
}
</script>
It scrolls to the left but I need it to repeat relatively seamlessly. At the moment it just jumps back to the beginning. It might not be possible the way I've done it, if not, anyone have a better method?

Here is a jQuery plugin with a lot of features:
http://jscroller2.markusbordihn.de/example/image-scroller-windiv/
And this one is "silky smooth"
http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Simple javascript solution:
window.addEventListener('load', function () {
function go() {
i = i < width ? i + step : 1;
m.style.marginLeft = -i + 'px';
}
var i = 0,
step = 3,
space = ' ';
var m = document.getElementById('marquee');
var t = m.innerHTML; //text
m.innerHTML = t + space;
m.style.position = 'absolute'; // http://stackoverflow.com/questions/2057682/determine-pixel-length-of-string-in-javascript-jquery/2057789#2057789
var width = (m.clientWidth + 1);
m.style.position = '';
m.innerHTML = t + space + t + space + t + space + t + space + t + space + t + space + t + space;
m.addEventListener('mouseenter', function () {
step = 0;
}, true);
m.addEventListener('mouseleave', function () {
step = 3;
}, true);
var x = setInterval(go, 50);
}, true);
#marquee {
background:#eee;
overflow:hidden;
white-space: nowrap;
}
<div id="marquee">
1 Hello world! 2 Hello world! 3 Hello world!
</div>
JSFiddle

I recently implemented a marquee in HTML using Cycle 2 Jquery plugin :
http://jquery.malsup.com/cycle2/demo/non-image.php
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-speed="9000" data-cycle-timeout="1" data-cycle-easing="linear" data-cycle-pause-on-hover="true" data-cycle-slides="> div" >
<div> Text 1 </div>
<div> Text 2 </div>
</div>

HTML5 does not support the tag, however a lot of browsers will still display the text "properly" but your code will not validate. If this isn't an issue for you, that may be an option.
CSS3 has the ability, supposedly, to have marquee text, however because anyone that knows how to do it believes it's a "bad idea" for CSS, there is very limited information that I have found online. Even the W3 documents do not go into enough detail for the hobbyist or self-teaching person to implement it.
PHP and Perl can duplicate the effect as well. The script needed for this would be insanely complicated and take up much more resources than any other options. There is also the possibility that the script would run too quickly on some browsers, causing the effect to be completely negated.
So back to JavaScript - Your code (OP) seems to be about the cleanest, simplest, most effective I've found. I will be trying this. For the seamless thing, I will be looking into a way to limit the white space between end and beginning, possibly with doing a while loop (or similar) and actually run two of the script, letting one rest while the other is processing.
There may also be a way with a single function change to eliminate the white space. I'm new to JS, so don't know off the top of my head. - I know this isn't a full-on answer, but sometimes ideas can cause results, if only for someone else.

This script used to replace the marquee tag
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.scrollingtext').bind('marquee', function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, 'linear', function() {
ob.trigger('marquee');
});
}).trigger('marquee');
});
</script>
<div class="scroll">
<div class="scrollingtext"> Flash message without marquee tag using javascript! </div>
</div>

Working with #Stano code and some jQuery I have created a script that will replace the old marquee tag with standard div. The code will also parse the marquee attributes like direction, scrolldelay and scrollamount.
Here is the code:
jQuery(function ($) {
if ($('marquee').length == 0) {
return;
}
$('marquee').each(function () {
let direction = $(this).attr('direction');
let scrollamount = $(this).attr('scrollamount');
let scrolldelay = $(this).attr('scrolldelay');
let newMarquee = $('<div class="new-marquee"></div>');
$(newMarquee).html($(this).html());
$(newMarquee).attr('direction',direction);
$(newMarquee).attr('scrollamount',scrollamount);
$(newMarquee).attr('scrolldelay',scrolldelay);
$(newMarquee).css('white-space', 'nowrap');
let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
$(this).replaceWith(wrapper);
});
function start_marquee() {
let marqueeElements = document.getElementsByClassName('new-marquee');
let marqueLen = marqueeElements.length
for (let k = 0; k < marqueLen; k++) {
let space = ' ';
let marqueeEl = marqueeElements[k];
let direction = marqueeEl.getAttribute('direction');
let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
let scrollamount = marqueeEl.getAttribute('scrollamount');
let marqueeText = marqueeEl.innerHTML;
marqueeEl.innerHTML = marqueeText + space;
marqueeEl.style.position = 'absolute';
let width = (marqueeEl.clientWidth + 1);
let i = (direction == 'rigth') ? width : 0;
let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;
marqueeEl.style.position = '';
marqueeEl.innerHTML = marqueeText + space + marqueeText + space;
let x = setInterval( function () {
if ( direction.toLowerCase() == 'left') {
i = i < width ? i + step : 1;
marqueeEl.style.marginLeft = -i + 'px';
} else {
i = i > -width ? i - step : width;
marqueeEl.style.marginLeft = -i + 'px';
}
}, scrolldelay);
}
}
start_marquee ();
});
And here is a working codepen

I was recently working on a site that needed a marquee and had initially used the dynamic marquee, which worked well but I couldn't have the text begin off the screen. Took a look around but couldn't find anything quite as simple as I wanted so I made my own:
<div id="marquee">
<script type="text/javascript">
let marquee = $('#marquee p');
const appendToMarquee = (content) => {
marquee.append(content);
}
const fillMarquee = (itemsToAppend, content) => {
for (let i = 0; i < itemsToAppend; i++) {
appendToMarquee(content);
}
}
const animateMarquee = (itemsToAppend, content, width) => {
fillMarquee(itemsToAppend, content);
marquee.animate({left: `-=${width}`,}, width*10, 'linear', function() {
animateMarquee(itemsToAppend, content, width);
})
}
const initMarquee = () => {
let width = $(window).width(),
marqueeContent = "YOUR TEXT",
itemsToAppend = width / marqueeContent.split("").length / 2;
animateMarquee(itemsToAppend, marqueeContent, width);
}
initMarquee();
</script>
And the CSS:
#marquee {
overflow: hidden;
margin: 0;
padding: 0.5em 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
color: #fff;
}
#marquee p {
white-space: nowrap;
margin: 0;
overflow: visible;
position: relative;
left: 0;
}