Position
Description
SuperMarquee supports most common position settings as shown in this example.
Javascript Example
Below is the equivalent javascript code using the pure vanilla js version of SuperScroll.
const mySuperMarquee = newSuperMarquee( document.getElementById( "supermarquee" ) );
document.querySelector( ".demo-button-container" ).addEventListener( "click", e => {
const { target } = e;
if ( target.classList.contains( "btn-primary" ) ) {
const oldBtn = document.querySelector( ".btn-light" );
oldBtn.classList.remove( "btn-light" );
oldBtn.classList.add( "btn-primary" );
target.classList.remove( "btn-primary" );
target.classList.add( "btn-light" );
switch( target.innerHTML.toLowerCase() ) {
case "default":
mySuperMarquee.setPosition( "custom" );
break;
case "top":
mySuperMarquee.setPosition( "fixedTop" );
break;
case "bottom":
mySuperMarquee.setPosition( "fixedBottom" );
break;
}
}
});
<div id="supermarquee"></div>
<div class="demo-button-container">
<button class="btn btn-primary">TOP</button>
<button class="btn btn-light">DEFAULT</button>
<button class="btn btn-primary">BOTTOM</button>
</div>
#supermarquee {
background-color: white;
color: #8089ff;
font-size: 48px;
}
.demo-button-container {
margin-top: 24px;
}
jQuery Example
The demo above is constructed with the jQuery version of this library. See the code below to find out more.
$( "#supermarquee" ).supermarquee();
$( ".demo-button-container" ).on( "click", ".btn-primary", function() {
$( ".btn-light" ).removeClass( "btn-light" ).addClass( "btn-primary" );
$( this ).removeClass( "btn-primary" ).addClass( "btn-light" );
switch( $( this ).html().toLowerCase() ) {
case "default":
$( "#supermarquee" ).supermarquee( "setPosition", "custom" );
break;
case "top":
$( "#supermarquee" ).supermarquee( "setPosition", "fixedTop" );
break;
case "bottom":
$( "#supermarquee" ).supermarquee( "setPosition", "fixedBottom" );
break;
}
});
<div id="supermarquee"></div>
<div class="demo-button-container">
<button class="btn btn-primary">TOP</button>
<button class="btn btn-light">DEFAULT</button>
<button class="btn btn-primary">BOTTOM</button>
</div>
#supermarquee {
background-color: white;
color: #8089ff;
font-size: 48px;
}
.demo-button-container {
margin-top: 24px;
}