Showing posts with label scroll. Show all posts

Saturday, November 19, 2022

[FIXED] How to make sidebar scroll Bootstrap 4

November 19, 2022 bootstrap-4, css, scroll No comments

Issue

Today i learn about CSS Bootstrap 4 and i create my template with sidebar, but when many menu, i want sidebar show the scrollbar.

how to make scrollbar on my sidebar template, this is my HTML and my CSS code, please help me for this my issue. i will make sidebar with scroll and fixed

thanks very much

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Simple Sidebar - Start Bootstrap Template</title>

  <!-- Bootstrap core CSS -->
  <link href="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}
  </style>

</head>

<body>

  <div class="d-flex" id="wrapper">

    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
      <div class="sidebar-heading">Start Bootstrap </div>
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 1</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 2</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 3</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 4</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 5</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 6</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 7</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 8</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 9</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 10</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 11</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 12</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 13</a>
        <a href="#" class="list-group-item list-group-item-action bg-light">Menu 14</a>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
        <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </nav>

      <div class="container-fluid">
        <h1 class="mt-4">Simple Sidebar</h1>
        <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/jquery/jquery.min.js"></script>
  <script src="https://blackrockdigital.github.io/startbootstrap-simple-sidebar/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
  </script>

</body>

</html>

preview template

Solution

You can do it by simply adding Bootstrap classes...

    <div class="bg-light border-right min-vh-100" id="sidebar-wrapper">
        <div class="sidebar-heading">Start Bootstrap </div>
        <div class="list-group list-group-flush overflow-auto vh-100">
            <a href="#" class="list-group-item list-group-item-action bg-light">Dashboard</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 1</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 2</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 3</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 4</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 5</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 6</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 7</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 8</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 9</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 10</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 11</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 12</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 13</a>
            <a href="#" class="list-group-item list-group-item-action bg-light">Menu 14</a>
        </div>
    </div>

Demo: https://codeply.com/p/VVByb17KWb

Answered By - Zim

Answer Checked By - Clifford M. (PHPFixing Volunteer)

[FIXED] How do I fix scrolling when flexbox content is vertically centered?

November 16, 2022 css, scroll, vertical-alignment No comments

Issue

What I want to achieve is when the viewport is taller then the content, the content should be vertically centered. When the viewport is not tall enough and content overflows, parent should provide vertical scrollbar.

When I align flexbox content to the middle and I set the content to scroll it not only ignores content margins but also truncates at the top (given the viewport shorter than the content). Is there a way to fix this?

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

Solution

align-items: safe center should avoid children to go off the box .

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

safe

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: safe center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

If your browser doesn't support safe/unsafe keywords on alignment , then you can use auto margin :

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row; 
    padding:10px 0;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin:auto 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

Answered By - G-Cyrillus

Answer Checked By - Pedro (PHPFixing Volunteer)

[FIXED] How to make p:menu scrollable in primefaces?

November 07, 2022 menu, primefaces, scroll, scrollable No comments

Issue

I have a menu which I fill programmatically with a model. But I want it to become scrollable when its items become too many to be displayed in the page.

Here is my menu:

<p:menu overlay="true" trigger="imgNotif" my="left top"
at="bottom left" model="#{notifController.model}" />

Is there a way to make it scrollable (programmatically or using its style/attributes)?

Thank you

Solution

Use the following CSS:

.ui-menu {
  overflow-y: scroll;      
  height: 200px;      
}

Answered By - Hatem Alimam

Answer Checked By - Marilyn (PHPFixing Volunteer)

[FIXED] How to create horizontal swipeable menu without scrollbar?

November 07, 2022 css, html, menu, scroll, touch No comments

Issue

I want to have a swipeable horizontal menu on my mobile website, just like Google uses on it's results page. I created one with basic html/css, which works fine but I cannot get rid of the scroll bar...

Here's the code:

<div style=" -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-user-select: none; display: block; height: 50px; overflow-y: hidden; padding: 0px; position: relative; -webkit-overflow-scrolling: touch; overflow-x: scroll;">
          <div style="display: inline-block; position: relative; white-space: nowrap; overflow: hidden;">
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
               <div style="display: inline-block; height: 40px; text-align: center; padding: 0 16px;">ITEM</div>
          </div>
     </div>

Any idea?

See my menu here

See Google example here

Solution

You can make a container <div> element that holds the scrolling <div>.
This parent <div> style can be set to: oveflow:hidden and its size smaller than its child <div> -of which the style is set to overflow:scroll.
This way the scrollbar is hidden and you need not worry about doing this with JavaScript; however:

It is recommended that you create your CSS classes in either a <style> element, or a separate CSS file in which you can define these classes, and use these classes in your HTML like: <div class="menu">...

Using inline CSS as per the example above renders unmanageable code, especially in larger projects

Update

Here's a full example:

div
{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.scrollHider
{
    display:inline-block;
    width:302px;
    height:162px;
    overflow:hidden;
    border:1px solid #AAA;
}

.menuBox
{
    width:315px;
    height:175px;
    overflow:scroll;
    white-space:nowrap;
}

.menuSection
{
    width:300px;
    height:160px;
    display:table-cell;
    overflow:hidden;
}

.menuItem
{
    width:300px;
    height:40px;
    text-align:center;
    padding:10px;
    border:1px solid #AAA;
}

<div class="scrollHider">
    <div class="menuBox">
        <div class="menuSection">
            <div class="menuItem">ITEM 1</div>
            <div class="menuItem">ITEM 2</div>
            <div class="menuItem">ITEM 3</div>
            <div class="menuItem">ITEM 4</div>
        </div>
        <div class="menuSection">
            <div class="menuItem">ITEM 5</div>
            <div class="menuItem">ITEM 6</div>
            <div class="menuItem">ITEM 7</div>
            <div class="menuItem">ITEM 8</div>
        </div>
    </div>
</div>

Preview: (partial screenshot)

The preview (above) shows where it is scrolled to the right. Copy & paste the code above in an empty HTML file, save & open in web browser. You can also click it and use keyboard arrows to scroll if you're not using a phone/touch-screen.

Answered By - user4244405

Answer Checked By - Marie Seifert (PHPFixing Admin)

[FIXED] Why won't my navbar change color with js scroll function?

October 27, 2022 css, html, jquery, navbar, scroll No comments

Issue

My navbar doesn't seem to be changing color when scrolled. There's a bit of js I'm trying to implement (at the bottom of the following code block), but it doesn't seem to render and I have no idea why. I've made sure the bootstrap cdn is up-to-date. I've made sure my class references are accurate. Nothing seems to work.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,600;0,800;1,300&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="app.css">

    <title> Museum of Candy </title>
</head>
 
<body>
    <nav id="#mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 ps-2 fixed-top">
        <a href="#" class="navbar-brand">CANDY</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"> </span>
        </button>
        <div class="collapse navbar-collapse" id="navLinks">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="" class="nav-link">HOME</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a href="" class="nav-link">TICKETS</a>
                </li>
            </ul>
        </div>
    </nav>
    
    <section class="container-fluid px-0">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div id="headingGroup" class="text-white text-center d-none d-lg-block">
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>    
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>    
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>    
                    <h1 class="">MUSEUM<span>/</span>OF<span>/</span>CANDY</h2>   
                </div>
            </div>
            <div class="col-lg-6">
                <img class="img-fluid" src="hand2.png" alt="">
            </div>
        </div>
    </section>

    <section class="container-fluid px-0 content">
        <div class="row align-items-center">
            <div class="col-md-6 order-2 order-md-1">
                <img class="img-fluid" src="milk.png" alt="">
            </div>
            <div class="col-md-6 text-center order-1">
                <div class="row justify-content-center">
                    <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
                        <h2>MUSEUM OF CANDY</h2>
                        <img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
                        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="container-fluid px-0 content">
        <div class="row align-items-center">
            <div class="col-md-6 text-center">
                <div class="row justify-content-center">
                    <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
                        <h2>MUSEUM OF CANDY</h2>
                        <img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
                        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, iste molestiae... </p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <img class="img-fluid" src="gumball.png" alt="">
            </div>
        </div>
    </section>
    <section class="container-fluid px-0 content">
        <div class="row align-items-center">
            <div class="col-md-6 order-2 order-md-1">
                <img class="img-fluid" src="sprinkles.png" alt="">
            </div>
            <div class="col-md-6 text-center order-1">
                <div class="row justify-content-center">
                    <div class="col-10 col-lg-8 blurb mb-5 mb-md-0">
                        <h2>MUSEUM OF CANDY</h2>
                        <img src="lolli_icon.png" alt="" class="d-none d-lg-inline">
                        <p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, ist...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    
<!-- This is the JS section that's not working: -->

    <script>
        $(function () {
            $(document).scroll(function () {
                var $nav = $("#mainNavbar");
                $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
            });
        });
    </script>
</body>

</html>

And, for what it's worth, here is my css:

.navbar.scrolled {
    background: rgb(222,192,222);
    transition: background 500ms;
}

I want the navbar background color to change when I scroll, but that doesn't seem to be happening.

Solution

Notice, you have a little mistake, you declared id and wrote #mainNavbar, just delete that # id="mainNavbar"

Answered By - Ashot Zaqoyan

Answer Checked By - Senaida (PHPFixing Volunteer)

[FIXED] How to show an element on scroll down with javascript?

October 24, 2022 css, javascript, jquery, scroll, wordpress No comments

Issue

I want to show a button on my website when a user scrolls down on their mobile by 200px. But, I don't want the button to disappear when they scroll back to the top...it stays there until they refresh or navigate another webpage.

I have the following at the moment which makes the button disappear when the user scrolls back up. How do I amend the code so the button does not disappear on scrolling up?

Note - I am using WordPress. The below Javascript is in an HTML block and the CSS is within the Custom CSS for the button.

        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    var offset = 200
    $(window).on('load scroll', function(){
        
        if( $(window).scrollTop() > offset ){
            $('body').addClass('show')
        }else{
            $('body').removeClass('show')
        }
    })
    </script>

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}

Solution

You are adding the .show class whenever the scroll is past the offset and then you are removing it when it isn't. It should be enough just to remove the else clause.

var offset = 200;
$(window).on("load scroll", function () {
  if ($(window).scrollTop() > offset) {
    $("body").addClass("show");
  }
});

Answered By - Fralle

Answer Checked By - Pedro (PHPFixing Volunteer)

[FIXED] How to make a SwiftUI list scrollable in tvOS

September 29, 2022 listview, scroll, scrollview, swiftui, tvos No comments

Issue

I have a List with content and when I build to an Apple Tv I cannot scroll to the bottom of the List.

I tried the focusable on the List rows but I cannot seem to get the list to scroll. I also replaced the List with a ScrollView to no avail.

List(self.someData) { data in
     SomeListRow(data: data)
}
.shadow(radius: 5)
.focusable(true)

List(self.someData) { data in
     SomeListRow(data: data)
      .focusable(true)

}
.shadow(radius: 5)

Solution

SwiftUI on tvOS has a bug where if you set a shadow on something none of the components in it receive user input events such as focus. There's an easy workaround though, just set your shadow on the background layer.

.background(
    Color.white
        .shadow(radius: 5)
)

Answered By - Jeff

Answer Checked By - Cary Denson (PHPFixing Admin)

[FIXED] How to scroll among images viewed via intent in android

July 28, 2022 android, android-intent, image, photo, scroll No comments

Issue

I have created a function to view images in a single view using following Intent.

Intent intent = new Intent();
                        intent.setAction(android.content.Intent.ACTION_VIEW);
                        intent.setDataAndType(Uri.fromFile(new File(temp.getPath())), "image/*");
                        startActivity(intent);

It opens a default gallery app to view the images. However I cannot go to next image by sliding the screen as it normally happens in simple gallery app. How could I do it? The scenario is I have a grid view displaying thumbnails of pics. Now when somebody click on it, it is opened via intent and displayed in full screen but to see next image, user has to go back and then click the next image. What would be the procedure to switch images when a person slide the screen horizontally.

Solution

I got the answer. Actually, I was not able to swipe the images to see next one because the default gallery app doesn't knew that more image exists in that path. So I notified the media resolver using broadcast intent and then I was able to swipe images.

Answered By - waterbyte

Answer Checked By - Mary Flores (PHPFixing Volunteer)

[FIXED] How to make a text disapper under an image, after scrolling it up?

July 18, 2022 background-image, css, document-body, html, scroll No comments

Issue

Is it possible to gradually hide the text from the website, after scrolling it up, under an image? Only by using HTML and CSS?

This is my body example:

<img src="./image.gif">
<p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Solution

img{
  position:fixed;
  top:0;
  left:0;
}
/* or like this */
#grad{
  position:fixed;
  left:300px;
  top:0px;
  height:150px;
  width:300px;
  z-index:10;
  background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}

body{
margin-top:170px;
}

<img src="https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2020/01/default.svg">
<div id="grad"></div>

<p> some text to scroll up... some text to scroll up... some text to scroll up... some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p><p> some text to scroll up... </p>
<p> more text to scroll up... </p>
<p> even more text to scroll up... </p>

Answered By - Rmaxx

Answer Checked By - Mary Flores (PHPFixing Volunteer)

[FIXED] How to keep animated gifs animated while scrolling on iOS devices?

July 18, 2022 css, gif, image-processing, ios, scroll No comments

Issue

I know this has been asked before but I'm still not convinced there's not a workaround. The reason I'm not convinced is because I managed to keep those gifs animated on a website of mine by accident. I posted this in the chat here and with help from @CarrieKendall came up with this fiddle.

This is obviously not a proper solution so I wanted to post it here for you geniuses to pick apart and try to help me figure out how I can fix this problem (in a way that preferably is not too resource heavy)?

UPDATE:

Ok, so I tinkered a bit more with the jsfiddle and came up with this:

HTML

<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">
<img class="link" src="http://i.imgur.com/jsm0x2c.gif">

CSS

@-webkit-keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

keyframes WIGGLE {
  0%   { -webkit-transform: translate(0px, 0px); }
  100%   { -webkit-transform: translate(0px, 0px); }
}

.link{
  -webkit-animation: WIGGLE 1ms; 
          animation: WIGGLE 1ms;
}

It's strange, but it works. An animation that does absolutely nothing. Oh and I tried replacing translate with something like scale but that didn't do the trick. This is the "purest" form of this weird bug/solution.

That said though, I'm not quite satisfied yet. I'd love it if someone more knowledgeable than me could have a look at this and try to figure what is REALLY going on that makes this workaround... work. Hopefully there's something in here that can be used, albeit in a more elegant way.

Also, I have no idea how resource intensive something like the above workaround would be, so if someone could help me measure that that'd be awesome.

Solution

The same restrictions don't occur on a desktop browser. This is specific to the implementation of scrolling that Apple has on their mobile device. It's a hold-over from their older mobile devices to make sure scrolling stays smooth, as earlier iPhones made judicious use of accelerated rendering throughout their OS.

Triggering hardware acceleration changes the render path of the page. In a non-accelerated page, the browser renders directly to the onscreen texture. When scrolling, all other execution is stopped, because the smooth scroll renderer takes control of rendering. This is not limited to just GIFs. If javascript would have changed the page content, it would also not show until the page finished scrolling.
In an accelerated page, the accelerated objects are actually sent to the compositor. The compositor puts all the layers of objects in the right place, and then creates a composite texture to put on the screen. Scrolling is actually part of the compositor's job, and since the compositor is in charge of rendering from end-to-end, animations will continue.

Unfortunately, due to the design of Apple's system compositor, there is really no 'right' way. In fact, as Apple has been making updates to iOS, there have been changes to what is hardware accelerated, and what isn't. For example, in iOS6, preserve3d no longer triggered acceleration. Supposedly,
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
should still work. In your case, I believe it works because you are using keyframes.

In terms of performance/resource impact, your page won't use any more resources than any other accelerated page.

Answered By - joe

Answer Checked By - Terry (PHPFixing Volunteer)

[FIXED] How to make GIF animate on scroll only?

July 18, 2022 animated-gif, gif, jquery, scroll No comments

Issue

I am building a Wordpress site that incorporates an animated GIF and I am trying to get the GIF to animate only when the user is scrolling.

The page is basically ready – http://www.fi1000.com/wp/ – but the GIF would work a lot better if it's only animating on window scroll.

I am just wondering if anyone out there might have an idea for a jQuery or CSS3 fix to achieve this? Not looking for the GIF to do anything except to not animate unless the user is scrolling.

The plugin I'm using to make the GIF move positions on scroll is called Skrollr https://github.com/Prinzhorn/skrollr

Thanks for reading!

Solution

You could use javascript and display a static image when stationary, then switch to the animated image during the onScroll event.

Answered By - Lance

Answer Checked By - Senaida (PHPFixing Volunteer)

[FIXED] How to scroll to post link in Wordpress

July 08, 2022 hyperlink, posts, scroll, wordpress No comments

Issue

My 'hero' element is taking most of the top page, and an user would have to manually scroll past it to get to the content.

I want to change it so that clicking the links will scroll past the image and down to the posts title. At the minute, clicking the post reloads the page and the hero element is on top. But if you click 'more' tag, it scrolls nicely.

How do I make it so that clicking the link will scroll the page down in Wordpress? I don't mean 'more' tag. Maybe there is a way to update the link functions in WP so the links will create anchor like 'more' tag?

I haven`t got a code that creates a link, as they are created by WP (they are post links).

<div class="big">

</div>

<article><div class="post">
if (have_posts()) :
    while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
</div></article>

.big {
  height: 1200px;
  width: 900px;
  background-color: grey;
}

JS Fiddle: https://jsfiddle.net/tvue1mwo/

single.php code:

<?php
if (is_single()) {
    // Currently using get_header('posts'), so I can hide hero element by css and unhide it with js

    get_header('posts');

    // If I understand right, here should go the ANCHOR link?
}
else {
    // Loads normal hero withou extra css class
    get_header();
}
?>
<div class="main-section wrapper">
<?php
    if (have_posts()) :
        while (have_posts()) : the_post(); ?>
    <div class="post-content u-cf">
        <h2 class="post"><a href="<?php the_permalink(); ?>">
            <?php the_title(); ?></a></h2>
            <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
                <?php 
                $categories = get_the_category(); 
                $separator = ", ";
                $output = '';
                if ($categories) {
                    foreach ($categories as $category) {
                        $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                    }
                    echo trim($output, $separator);
                }
                ?>
                |
                <i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
            </p>
            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>
            <?php the_content(); ?>
        <?php endwhile; ?>
    </div>
    <?php
    else :
        echo '<p> No Content found</p>';
    endif; ?>
</div>
<?php get_footer(); ?>

index.php:

<?php 
if (have_posts()) :?>
<?php $count = 1; 
while (have_posts()) : the_post(); ?>

<div class="post-content u-cf">

    <?php if (has_post_thumbnail()) {
        ?>
        <div class="post-thumbnail u-cf"><a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('small-thumbnail')  ?></a>
        </div>
        <?php } ?>

        <h2 class="post">
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
        </h2>

        <p class="post-info"><i class="fa fa-folder-open" aria-hidden="true"></i>  
            <?php 
            $categories = get_the_category(); 
            $separator = ", ";
            $output = '';

            if ($categories) {

                foreach ($categories as $category) {
                    $output .= '<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator;
                }

                echo trim ($output, $separator);
            }
            ?>
            |<i class="fa fa-clock-o" aria-hidden="true"></i> <?php the_time('j/m/Y'); ?>
        </p>

        <?php the_content(); ?>
        <hr>

        <?php   if ( 2 === $count ) { ?>

        <div class="main-content-advert">
            <p>Lorem ipsum</p><p>Lorem impsum</p>
        </div>
        <hr>

        <?php }

        $count++; ?>  
    <?php endwhile; ?>

</div>
<?php
else :
    echo '<p> No Content found</p>';

endif; ?>

Solution

If you are using index.php to display the homepage & archives, you can do the following:

<?php 
/* 1. define the name of the anchor to jump to */
$anchorname = "skipheroimage"; 
$count = 0;

if (have_posts()) :
    while (have_posts()) : the_post(); 
    ?>
        <?php 
        $count++; /* increment the count so that each anchor is unique on the page */
        /* 2. add the anchor to the permalink so it will jump directly to the anchor  */
        $linkwithanchor = get_permalink()."#".$anchorname.$count; 
        ?>

        <div class="post-content u-cf">
            /* 3. use our $linkwithanchor variable to create the link */
            <h2 class="post"><a href="<?php echo $linkwithanchor; ?>"> 
            <?php the_title(); ?></a></h2>


            /* no change to the code that was here, so keep it as it was...
               ... I just removed it to make my changes easier to find */


            <div class="banner-image"><?php the_post_thumbnail('banner-image'); ?></div>

             /* 4. add our anchor - this is where the link will jump to */
            <a id="<?php echo $anchorname.$count; ?>" name="<?php echo $anchorname.$count; ?>"></a>
            <?php the_content(); ?>
        </div> /* NOTE  - you had this in the wrong place. */
   <?php endwhile; ?>
<?php
else :
    echo '<p> No Content found</p>';
endif; ?>

This will create an anchor directly after the banner image, and add the anchor name to the link so that it will jump directly to it.

I have commented and numbered each step directly in the code.

You will need to do this for any templates you have that displays the links (e.g. archive.php)

Answered By - FluffyKitten

Answer Checked By - Cary Denson (PHPFixing Admin)

Saturday, November 19, 2022

Issue

Solution

Wednesday, November 16, 2022

Issue

Solution

Monday, November 7, 2022

Issue

Solution

Issue

Solution

Update

Thursday, October 27, 2022

Issue

Solution

Monday, October 24, 2022

Issue

Solution

Thursday, September 29, 2022

Issue

Solution

Thursday, July 28, 2022

Issue

Solution

Monday, July 18, 2022

Issue

Solution

Issue

UPDATE:

Solution

Issue

Solution

Friday, July 8, 2022

Issue

Solution

Total Pageviews

Featured Post

Subscribe To