10 Replies - 206 Views - Last Post: 08 November 2017 - 06:10 AM

#1 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

how to add scroll bar?

Posted 07 November 2017 - 06:13 AM

I am a new in HTML, CSS, Javascript, trying to build a small user interface which supports many words without compromising the responsiveness of the application. I want to add scrollbar to the content of the homepage. But it gets added outside of the container. I want to show the result as well as homepage data within scrollbar. But unable to do so. Please help me. Thanks in advance...!!! Here is the code: My link

Is This A Good Question/Topic? 0
  • +

Replies To: how to add scroll bar?

#2 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: how to add scroll bar?

Posted 07 November 2017 - 06:32 AM

Are you talking about a CSS scrollbar or a jQuery feature named jscroll? You don't have any elements with class-name infinite-scroll, so presumably it is the former.

It also looks like you don't have elements with class-name scroll-pane so it would help to specify which element you want the scrollbar attached to.
Was This Post Helpful? 0
  • +
  • -

#3 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to add scroll bar?

Posted 07 November 2017 - 06:33 AM

sorry the link is My link
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: how to add scroll bar?

Posted 07 November 2017 - 06:33 AM

(It is also preferable that you post relevant code directly here in the forum, between code tags, rather than as just an external resource.)
Was This Post Helpful? 0
  • +
  • -

#5 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to add scroll bar?

Posted 07 November 2017 - 06:37 AM

View Postandrewsw, on 07 November 2017 - 06:32 AM, said:

Are you talking about a CSS scrollbar or a jQuery feature named jscroll? You don't have any elements with class-name infinite-scroll, so presumably it is the former.

It also looks like you don't have elements with class-name scroll-pane so it would help to specify which element you want the scrollbar attached to.


I tryed in two ways i.e. CSS scrollbar and JQuery too. But I want to do it using CSS now
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: how to add scroll bar?

Posted 07 November 2017 - 07:07 AM

You have two elements with the same id of 'demo', fix this first. Id's must be unique on the page.

You are then applying a scrollbar (overflow: scroll) to #demo2, which has no visible content, so it is behaving as I would expect. Probably this is related to the duplicate id issue.



If you are pursuing CSS scrollbars then I would make a separate, smaller and specific, test page without any jQuery scroll attempt.
Was This Post Helpful? 0
  • +
  • -

#7 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to add scroll bar?

Posted 08 November 2017 - 12:31 AM

Yes, I would like to continue with CSS scrollbar
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: how to add scroll bar?

Posted 08 November 2017 - 12:47 AM

Without the distraction of jQuery, what is the problem with applying CSS scrollbars?

A simple page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Title</title>
<style type="text/css">
#container {
    width: 300px;
    height: 150px;
    border: 1px solid green;
    overflow: scroll;
}
</style>
</head>
<body>
<div id="container">
    <ul>
        <li>Apples</li>
        <li>Pears</li>
        <li>Bananas</li>
        <li>Grapes</li>
        <li>Melons</li>
        <li>Lemons</li>
        <li>Pineapples</li>
        <li>More Grapes</li>
    </ul>
</div>
</body>
</html>

If you are continuing with your current code have you taken on board the advice already given?
Was This Post Helpful? 0
  • +
  • -

#9 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to add scroll bar?

Posted 08 November 2017 - 12:59 AM

Thank you so much, sir..!!Even I tried the basic program of a scrollbar using w3school's tutorial. But I am having a problem with my current code. My link I make each id as a unique. But after making these changes, myfunction3 is not working though I applied this function to demo itself. I am not getting my mistake
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: how to add scroll bar?

Posted 08 November 2017 - 06:03 AM

From what I can see, it is working initially, as the scrollbars appear for the demo element. Filtering breaks it, though, as you are adding the filtered items to the demo2 element.

Your myFunction3 is running, and writing to the console, but you shouldn't do this:

document.getElementById("demo").innerHTML = x += 1;

You could use .innerHTML = ++x; (although this will wipe out the current text), just avoid attempting to merge statements together as you are.
Was This Post Helpful? 0
  • +
  • -

#11 rupali7  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 07-November 17

Re: how to add scroll bar?

Posted 08 November 2017 - 06:10 AM

ok... thanks a lot
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1