Member Avatar for vboopathicse

i need a script that data's fetch from mysql and display in text scroller using javascript.
i' uses it is a news update. please somebody helpp me.

  • 4 Contributors
  • 5 Replies
  • 188 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A compact, practical plan: have the server return the latest news rows as JSON and let the page build a single-line “strip” that is animated with CSS for a smooth ticker. This avoids the deprecated <marquee>, keeps markup simple, and lets you refresh items with AJAX. Following and , use a server endpoint for the DB query and a client fetch for updates. is right — post your current code if something below still fails.

Server (example: PHP + PDO, return JSON). Use prepared statements and LIMIT to avoid injection and huge payloads:

<?php
// news.php
header('Content-Type: application/json; charset=utf-8');
$pdo = new PDO('mysql:host=localhost;dbname=mydb;charset=utf8mb4','user','pass',[PDO::ATTR_ERRMODE=>PDO::ERRMODE_EXCEPTION]);
$stmt = $pdo->prepare('SELECT id, title FROM news ORDER BY published_at DESC LIMIT 10');
$stmt->execute();
echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));

Client: build a single-line strip, duplicate its contents for a continuous loop, and animate with CSS. Pause on hover/focus for accessibility.

<div id="news-scroller" aria-live="polite" tabindex="0"><div id="strip"></div></div>
#news-scroller{overflow:hidden;white-space:nowrap}
#strip{display:inline-block;animation:scroll-left 18s linear infinite}
#strip:hover,#news-scroller:focus{animation-play-state:paused}
@keyframes scroll-left{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
fetch('news.php').then(r=>r.json()).then(data=>{
  const strip=document.getElementById('strip');
  const txt=data.map(i=>`<span class="item">${escapeHtml(i.title)}</span>`).join(' • ');
  strip.innerHTML = txt + ' • ' + txt; // duplicate for loop
});
function escapeHtml(s){const d=document.createElement('div');d.textContent=s;return d.innerHTML;}

Troubleshooting & tips: check browser console for JSON/CORS errors, ensure the container width is fixed, adjust animation duration for content length (or compute it dynamically), always insert text via textContent/escaped HTML to prevent XSS, and refresh data with a timed poll or push (SSE/WebSocket) if you need live updates. If posting code, include both the server script and the HTML/JS so others can reproduce the problem.

Recommended Answers

All 5 Replies

Member Avatar for jkon

What is the problem to fetch data or to make them scrolling in screen (do you meen something like the old marquee? )

Member Avatar for vboopathicse

What is the problem to fetch data or to make them scrolling in screen (do you meen something like the old marquee? )

Not problem in data fetching but unable to take into scrolling in javascript. if u have any idea or solution means please share it.

Member Avatar for jkon

If you want to present the database query’s result as grid you could make a div with width and height in style and overflow: auto and then a table insight. You don’t really JavaScript to make a grid like table.
E.g.

<div id="gridExample" style="width:400px;height:100px;z-index: 2;overflow-y:auto;overflow-x:auto;">
Member Avatar for cossay

You should try using ajax.

Member Avatar for Member #120589

It would help if you posted your code. Help those that help themselves. This sounds like a gimme post. What have you got?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.