In-line Vertical Ticker Display

I attempted to use vTicker, but I found that it does not function properly when used as an inline element.

<h1>
    <div id="vticker"><ul>...</ul></div>
    Some other headline text
</h1>

My goal is to have the vertically scrolling text inside the vTicker object aligned with the other content in the h1 tag. However, whenever I try to set it as inline or inline-block, it disappears.

Even after attempting to create my own solution, I am unable to reposition elements within an inline or inline-block object using absolute, relative, or margin positioning.

Answer №1

To make the vTicker element work properly, simply setting it to display: inline won't suffice. This is because vTicker uses absolute positioning and overflow: hidden for its functionality.

One approach is to use display: inline-block, but this may cause issues as the vTicker container lacks a width. As a result, nothing will be displayed.

To resolve this, we need to set the width of the vTicker container to match the widest element within it or the width of the ul in the vTicker container. See the demo below:

/*! vTicker 1.21 http://richhollis.github.com/vticker/ | http://richhollis.github.com/vticker/license/ | based on Jubgits vTicker http://www.jugbit.com/jquery-vticker-vertical-news-ticker/ */
(function(d){var g,c,f;g={speed:700,pause:4E3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1,autoAppend:!0};c={moveUp:function(a,b){return c.showNextItem(a,b,"up")},moveDown:function(a,b){return c.showNextItem(a,b,"down")},nextItemState:function(a,b){var e,c;c=a.element.children("ul");e=a.itemHeight;0<a.options.height&&(e=c.children("li:first").height());e+=a.options.margin+2*a.options.padding;return{height:e,options:a.options,el:a.element,obj:c,selector:"up"===b?
"li:first":"li:last",dir:b}},showNextItem:function(a,b,e){var d;d=c.nextItemState(a,e);d.el.trigger("vticker.beforeTick");e=d.obj.children(d.selector).clone(!0);"down"===d.dir&&d.obj.css("top","-"+d.height+"px").prepend(e);b&&b.animate?a.animating||c.animateNextItem(d,a):c.nonAnimatedNextItem(d);"up"===d.dir&&a.options.autoAppend&&e.appendTo(d.obj);return d.el.trigger("vticker.afterTick")},animateNextItem:function(a,b){b.animating=!0;return a.obj.animate("up"===a.dir?{top:"-="+a.height+"px"}:{top:0},
b.options.speed,function(){d(a.obj).children(a.selector).remove();d(a.obj).css("top","0px");return b.animating=!1})},nonAnimatedNextItem:function(a){a.obj.children(a.selector).remove();return a.obj.css("top","0px")},nextUsePause:function(){var a,b;b=d(this).data("state");a=b.options;if(!b.isPaused&&!c.hasSingleItem(b))return f.next.call(this,{animate:a.animate})},startInterval:function(){var a,b;b=d(this).data("state");a=b.options;return b.intervalId=setInterval(function(a){return function(){return c.nextUsePause.call(a)}}(this),
a.pause)},stopInterval:function(){var a;if(a=d(this).data("state"))return a.intervalId&&clearInterval(a.intervalId),a.intervalId=void 0},restartInterval:function(){c.stopInterval.call(this);return c.startInterval.call(this)},getState:function(a,b){var c;if(!(c=d(b).data("state")))throw Error("vTicker: No state available from "+a);return c},isAnimatingOrSingleItem:function(a){return a.animating||this.hasSingleItem(a)},hasMultipleItems:function(a){return 1<a.itemCount},hasSingleItem:function(a){return!c.hasMultipleItems(a)},
bindMousePausing:function(a){return function(a,e){return a.bind("mouseenter",function(){if(!e.isPaused)return e.pausedByCode=!0,c.stopInterval.call(this),f.pause.call(this,!0)}).bind("mouseleave",function(){if(!e.isPaused||e.pausedByCode)return e.pausedByCode=!1,f.pause.call(this,!1),c.startInterval.call(this)})}}(this),setItemLayout:function(a,b,c){var f;a.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:c.margin,
padding:c.padding});return isNaN(c.height)||0===c.height?(a.children("ul").children("li").each(function(){if(d(this).height()>b.itemHeight)return b.itemHeight=d(this).height()}),a.children("ul").children("li").each(function(){return d(this).height(b.itemHeight)}),f=c.margin+2*c.padding,a.height((b.itemHeight+f)*c.showItems+c.margin)):a.height(c.height)},defaultStateAttribs:function(a,b){return{itemCount:a.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:a,animating:!1,options:b,
isPaused:b.startPaused,pausedByCode:!1}}};f={init:function(a){var b,e;d(this).data("state")&&f.stop.call(this);b=jQuery.extend({},g);a=d.extend(b,a);b=d(this);e=c.defaultStateAttribs(b,a);d(this).data("state",e);c.setItemLayout(b,e,a);a.startPaused||c.startInterval.call(this);if(a.mousePause)return c.bindMousePausing(b,e)},pause:function(a){var b;b=c.getState("pause",this);if(!c.hasMultipleItems(b))return!1;b.isPaused=a;b=b.element;if(a)return d(this).addClass("paused"),b.trigger("vticker.pause");
d(this).removeClass("paused");return b.trigger("vticker.resume")},next:function(a){var b;b=c.getState("next",this);if(c.isAnimatingOrSingleItem(b))return!1;c.restartInterval.call(this);return c.moveUp(b,a)},prev:function(a){var b;b=c.getState("prev",this);if(c.isAnimatingOrSingleItem(b))return!1;c.restartInterval.call(this);return c.moveDown(b,a)},stop:function(){c.getState("stop",this);return c.stopInterval.call(this)},remove:function(){var a;a=c.getState("remove",this);c.stopInterval.call(this);
a=a.element;a.unbind();return a.remove()}};return d.fn.vTicker=function(a){return f[a]?f[a].apply(this,Array.prototype.slice.call(arguments,1)):"object"!==typeof a&&a?d.error("Method "+a+" does not exist on jQuery.vTicker"):f.init.apply(this,arguments)}})(jQuery);

{
  let vticker = $('#vticker');
  vticker.vTicker();
  let width = vticker.find('ul').width();
  vticker.css({
    'display': 'inline-block',
    'vertical-align': 'bottom',
    'width': width
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>
  <div id="vticker">
    <ul>
      <li>Cool</li>
      <li>Nice</li>
      <li>Awesome</li>
    </ul>
  </div>
  headline
</h1>

Answer №2

I recommend utilizing the Flexbox method.

h1{
    display:flex;
    align-items:center;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When I click the confirm button on Sweet Alert, I would like to update the database status from the default (pending) to confirmed

When I click on the confirm button in this sweetalert, I need assistance with updating the STATUS column in my database. Thank you for your help. swal({ title: 'Are you sure?', text: "You won't be able to revert this!", type: &a ...

The battle between jQuery Ajax and browser URL manipulation

I'm attempting to utilize the YouTube API to retrieve a list of a user's videos. The request URL looks like this: with 'username' representing the correct username. This displays the proper URL in the browser. However, when I t ...

Using the HTTP DELETE method in Node.js

Is there a specific configuration required before sending DELETE requests to a node.js application? I am able to send GET, POST, and PUT requests successfully, but for some reason DELETE requests are not functioning. When I try DELETE http://localhost:80 ...

Sharing data between ejs and javascript files

When using Express, I have encountered an issue with passing a variable to an EJS file called "index.ejs". res.render("index",{passedUser:req.user.alias}) Although I am able to successfully print it using <%=passedUser%> in the EJS file, I require ...

The website shifts as you navigate to a new page

Could use some insight on an issue with my website . Whenever I navigate to a different page, like the "Rules" page from the main site, the container seems to shift down slightly. Any ideas on what could be causing this? I've been struggling to pinpoi ...

Fixed positioning in child element while synchronizing the parent's horizontal scroll with the child element's left position

I have a div with relative positioning that scrolls horizontally. Within this div, I want to include a fixed element that also scrolls along with the parent div but remains at the top because the parent div is a child of a vertically scrolling div. To be ...

Utilize the onChangeText function in React Native to filter out each individual value within a nested array

I currently have an array with nested children in it, where the children can range from one to multiple values. I am working on implementing a local filter within my component. Whenever a user types anything into the textInput, the application will display ...

Locate the data attribute and store it in the database using an ajax request

I am in need of a proper script to insert a data attribute into the database upon clicking using ajax. HTML: <li><a data-cat="random name">Button</a></li> jQuery: $('li a').click(function() { $(this).data('cat&a ...

Limit the size of images with CSS properties like max-height or max-width

What is the preferred method for restricting the size of an image and why? While max-width can be used to restrict the size of an element, this article recommends using it specifically for images within containers. If you have a web application with a ve ...

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

Designing webpages by superimposing text onto images with customizable positioning

My current project involves developing an HTML document with a floor plan image as the main layer. On top of this image, I need to display employee names extracted from a database and positioned on the map based on a location variable within the database ...

AngularJS and Gulp: Enhancing Static Assets with Revisioning

I have implemented the gulp-rev module to re-vision static assets in my source files. It generates new file names for CSS, JS, and HTML files by appending a hash code to it. Before : app.js After : app-2cba45c.js The issue I am facing is that in my An ...

Why does app.post function while router.post does not seem to work?

I have encountered an issue while logging in with React on the front end. The process goes to my node/Express/Passport backend and I am able to successfully log in when it reaches the backend. However, I am facing difficulties in communicating that informa ...

Retrieve an item from a table in VUE upon clicking

I am currently using Vue Bootstrap and I want to be able to access the item when a row in the table is clicked. I have set up a table and a clickmeRow method to handle the action on the clicked item. <b-table-lite hover :items="it ...

Button with CSS Sprite

These Sprite buttons are making me lose my mind. I'm so close to getting them to work, but not quite there yet. I've been playing around with this really simple sprite image: If you want to see the jsfiddle project, it's available here, bu ...

Using services in Angular 6 CLI with dynamically added components

One of my recent projects involved creating a directive in Angular 6 called 'DeleteDirective' and integrating it with a service called 'DeleteService' to enable the deletion of items from the application. Once an item is deleted (handle ...

Discover and eliminate the style attribute through a click action

I've been struggling to find a solution to remove the style attribute from a specific tr tag within a table when it is clicked. I've tried several lines of code but none seem to work. Here's the link to the fiddle for reference: http://jsfi ...

Sending data back and forth across 2 tabs within one page

I noticed a strange behavior when using multiple tabs on the same page in different modes. When I clicked a button that was supposed to fill in some inputs, the data filled in the last tab opened instead of the one I actually clicked on. The angular input: ...

What is the best method for eliminating the gap between div elements in CSS?

I am in the process of creating a simple website to brush up on my basic HTML and CSS skills. Utilizing Dreamweaver CS6, I aim to master every aspect of web design the correct way. While exploring how to position div elements, specifically using margins fo ...

Building a custom HTML and JavaScript player to showcase multiple videos on a webpage

UPDATE: The solution has been discovered, shared, and marked as the top answer below. In the process of creating my portfolio website using HTML, CSS, and JS, I encountered a challenge regarding the addition of multiple videos on various pages. While fol ...