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

Tips for transforming a JSON response into an array with JavaScript

I received a JSON response from an API: [ { "obj_Id": 66, "obj_Nombre": "mnu_mantenimiento_de_unidades", "obj_Descripcion": "Menu de acceso a Mantenimiento de Unidades" }, { "obj_Id": 67, "ob ...

Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code: <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;"> <ul id="myTab" class="nav nav ...

The switch switches on yet another switch

Greetings everyone, Currently, I am in the midst of my exam project and creating a mobile menu. The functionality is there, but unfortunately, when closing the menu, it also triggers the search toggle which displays an unwanted div, becoming quite botherso ...

modifying the identification value in HTML and then reverting it

Although this may seem like messy code, I'm really in need of assistance with a problem that has stumped me. Currently, I am working on an E-shop project where I have modals for displaying products. Within these modals, there is a button that allows u ...

Hide a parent div in jQuery depending on the checkbox status

I have a code snippet that I need help with. You can view the code here. $("#filters :checkbox").change(function() { $(".listing-details > div").hide(); $("#filters :checkbox:checked").each(function() { $(".listing-details ." + $(this). ...

How can I eliminate the default background of Mui tooltip and personalize it in react?

Below is an example of how to customize a nested tooltip within a default background tooltip in MUI. The challenge here is to remove the grey border in the customized tooltip and have only a white background with black text. Check out the code snippet be ...

When opting for "Not now" in Firefox, the error callback in getUserMedia is not activated

I am currently working on a script to detect when the user either allows or denies the use of a microphone using the getUserMedia API. UPDATE: To better illustrate the issue I am facing, I have created a fiddle: http://jsfiddle.net/4rgRY/ navigator.getUs ...

Form Validation using AJAX, Jquery, and PHP

Struggling with the jQuery code below. It is intended to validate form input upon submission. The password seems to be set correctly, but on the first submit, err is true. When submitting a second time (with an unchanged password), err is properly set to f ...

Observing the element with a directive

I am working with the following code: angular.module("Test", []) .directive("testDirective", function () { return { restrict: "A", scope: { model: "=" } link: function(scope, element) { scope.$watch(function () { elem ...

Updating Object Properties in Vue.js 2.0 using Methods

I am facing an issue where I have an object with blank properties in my component's data. I want to update these properties using a method that is triggered by a click event on one of the listed elements. However, when I check the click event in the c ...

Utilizing Astro Project to gather content from various directories containing Markdown files

I am embarking on a project to convert Mark Down files (MD) into HTML format. While delving into this endeavor, I have chosen to utilize Astro due to its compatibility with MD to HTML conversion, even though I am relatively new to ASTRO or JSX style coding ...

I am attempting to implement a feature that changes the color of buttons when they are clicked within an ng-repeat loop

A problem is occurring with the ng-class directive in this HTML code, which is generating seats using the ng-repeat directive. The colors are not being added properly when a seat is selected. If you'd like to view my code, it can be found in this JSf ...

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

I have a Drupal form with an AJAX submit. Additionally, I have another jQuery $.get function that sends a request every 2 minutes and inserts the response into an HTML element. The form and this JavaScript code are independent of each other, performing sep ...

Is it possible to employ a method to eliminate a specific valuable element 'this' from an array?

I am working on a task management app that allows users to create a To-Do list and remove specific items from the list. Currently, I am facing an issue with using 'localStorage' to save the list when the page is refreshed. The problem arises when ...

Determining the final value of the last handle in a jQuery UI slider with multiple sliders present

I need help retrieving the first and last handle values from a jQuery UI range slider when there are multiple sliders on the page. Currently, my code is set up to grab the last value from the last slider's last handle. I attempted to address this by u ...

Why is it that I am receiving just one object as a string when making an ajax call, even though the controller is supposed to be returning

I'm having trouble understanding why my $.get call is returning one single object with a string containing my elements, instead of the expected list of objects returned by my controller. Controller: public JsonResult GetInitialTags(int id) { Mod ...

"Employing AJAX along with jQuery in .NET often leads to the error message stating, 'The requested resource was not

Could use some guidance on setting up a simple Ajax call in .NET Any suggestions? [WebMethod] public string Greetings() { return "Hello World"; } When I try to access the webmethod through my browser using this URL: I encounter the error: "The r ...

Getting the selected item from a dropdown menu and including it in an email

While working in React, I have successfully created a contact form that includes fields for name, email, and a message box. When the form is submitted, these three items are sent as expected. However, I am facing difficulty in sending a selected item from ...

Unable to eliminate the string "C:fakepath" using JavaScript's replace function and regular expressions

I've been struggling for quite some time with this issue. Let me share a snippet of the code that's causing trouble: jQuery(':file').change(function() { var path = jQuery(this).val(); var filename = path.replace(/C:\\ ...

Sliding Toggle: Panel Revealed with Button Slide

Currently, I am working on implementing a jquery slide tab feature. The functionality is working fine on button click. However, I want the button to stick with the panel and slide along with it. At the moment, the button remains fixed while the panel slide ...