gmail – stick the email subject on top when scrolling down email with long body content?

Is there a way or at-least an extension that can make the gmail mail subject stick on top?

while we scroll down while reading the email long body content !

sometimes we have to follow up what the subject of mail is some information like a ticket number is always in the subject.

usability – Mobile side scrolling: On some screen sizes, the gap between elements land right at the right edge, so it looks like there isn’t any scrolling

I have the elements going off the right edge of the screen to show it’s horizontal scrolling.

enter image description here

Issue is at some screen sizes, the gap between elements lands right at the right edge, so it looks like there isn’t any scrolling.

enter image description here

We’ve thought of the following solutions:

  1. animation on page load (issue with this is it can slow down page load, look glitchy, and add extra level of effort to the project)
  2. gradient on the right edge (not a fan of how this looks)

My question is, are there other design solutions? Are there code solutions – like forcing the padding to change so the last element is always peeking in? I feel like there has to be, because how do apps solve this?

Would prefer a simple solution that would work well on a website, not an app.

Thanks!

Flipping Vs. Scrolling – User Experience Stack Exchange

Flipping is discrete while scrolling is continuous, the user decides when to start and stop scrolling. The user may decide to scroll just a few lines or half a page. You don’t get that with flipping.

As opposed to flipping, scrolling allows for various speeds, depending on the speed of the hand gesture, and has inertia-like behavior, it can slow down towards the end. You can begin a quick scrolling motion (to scroll a lot of content) and stop it halfway if you see something interesting.

Flipping is safer in the sense that you can’t flip too far by mistake.

If they usually advance one or two pages at a time, flipping may be a good solution, and it’s great if they usually go page by page. But if they need to go to a distant page quickly, scrolling is probably better.

I’m not sure I agree that flipping requires less movement, you can set a scroll in motion with a very quick gesture, but you need many gestures to flip through many pages, as opposed to one long flick.

You can get a preview of the next page also if you just drag it into view and back without lifting your finger. It’s not much more work than previewing by partial flipping, if at all.

scrolling – Youtube Webapp UI design

I’m learning user design and user experience subject and part of learning I look-up to the top websites for analysis and understanding the subject matter.

I was recently watching a random video on Youtube on a web browser.
I notice the content of the video is not interesting then I start looking for much better suggested videos on the right side of the video player, then I notice as I scroll down the currently paying video also scrolling.

I was wondering why didn’t Youtube consider keeping the video continue to visible yet I can scroll through the suggested videos?

Here is the screen clip as example

Personally I like to see video continue to be visible even when scrolling through video suggestions or comment section.

Thanks in advance!

Scrolling Stars not not showing

Can you please help me where I went wrong with getting the Stars to scroll right to left on the game area?

function GetRandInt(from, range) {
    return Math.floor(Math.random() * range) + from;
}

function removeStars() {
    $('.star').remove();
}

function pauseStars() {
    $('.star').css({
        "animation-play-state": "paused"
    });
}

function addStar(starClass) {
    let div = document.createElement("div");
    div.classList.add("star", starClass);
    div.style.left = GetRandInt(576, 0) + "px";
    $(GameSettings.playAreaDiv).append(div);
}

function createStars() {
    for(let i = 0; i < 10; ++i) {
        let delay = i * 333;
        GameManager.timeouts.push(window.setTimeout(addStar, delay, "starSmall"));
        GameManager.timeouts.push(window.setTimeout(addStar, delay + 333, "starMedium"));
        GameManager.timeouts.push(window.setTimeout(addStar, delay + 666, "starBig"));
    }
}
.starSmall {
  top: 10px;
  width: 3px;
  height: 3px;
  background-color: gray;
  animation-duration: 5s;
}

.starMedium {
  top: 50px;
  width: 4px;
  height: 4px;
  animation-duration: 4s;  
}

.starBig {
  left: 0px;
  top: 100px;
  width: 5px;
  height: 5px;
  animation-duration: 3s;  
}

@keyframes starX {
  from {
    transform: translateX(600px);
  }
  to {
    transform: translateX(-30px);
  }
}

P.S. Body background is black

Thank you

windows 10 – Google Chrome unloads discrete GPU memory – causes initial lag (around 1-2 seconds) when start scrolling

Ever since I switched chrome graphics settings to gtx1060 from Intel HD 630 on my laptop (in nvidia control panel) I had this lag when trying to scroll page after around 30 seconds of idling.

Win10 task manager shows that lag happens after gpu unloads memory (only chrome is running on discrete gpu). When I start scrolling gpu takes a couple of seconds to start using vram (around 0.1~0.2GB) and only then unfreezes.

Disabling everything in chrome://flags didn’t help.

Turning on high-performance in windows settings didn’t help either.

Running on integrated graphics helps, but it’s a worse option (for a laptop that always works on AC plug).

NVidia driver: 445.87

Here’s my chrome://gpu features:

Graphics Feature Status
Canvas: Hardware accelerated
Flash: Hardware accelerated
Flash Stage3D: Hardware accelerated
Flash Stage3D Baseline profile: Hardware accelerated
Compositing: Hardware accelerated
Multiple Raster Threads: Enabled
Out-of-process Rasterization: Hardware accelerated
OpenGL: Enabled
Hardware Protected Video Decode: Unavailable
Rasterization: Hardware accelerated
Skia Renderer: Enabled
Video Decode: Hardware accelerated
Vulkan: Disabled
WebGL: Hardware accelerated
WebGL2: Hardware accelerated

python – When Player Image Scrolling Left, Enemy Mob Scrolls To How Do I fix This?? Pygame

I have a problem with my enemy where when my player scrolls left the enemy scrolls with the player is there anyway to fix this even Video my full code is below its to long to fit here though

what I was trying to do is make my enemy not to change its position when my window is scrolling its doing the same for right and left keeps following the player


while runninggame:
    clock.tick(FPS)
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            runninggame = False
  (...)
# I did the same for my players key movement  this part suppose to not make my player scroll
if playerman.y < 250:
        playerman.y += 1
        for platform in platforms:
            platform.y += playerman.speed
        for enemys in enemying:
            enemys.y += playerman.speed

my enemy class

class enemy:
    def __init__(self,x,y,height,width,end):
        self.x = x
        self.y =y
        self.esright = (pygame.image.load("esright1.png"),
        pygame.image.load("esright1.png"),
        pygame.image.load("esright2.png"),
        pygame.image.load("esright3.png"),
        pygame.image.load("esright4.png"),
        pygame.image.load("esright5.png"),
        pygame.image.load("esright6.png"),
        pygame.image.load("esright7.png"),
        pygame.image.load("esright8.png"),
        pygame.image.load("esright9.png"),
        pygame.image.load("esright10.png"),
        pygame.image.load("esright11.png"),
        pygame.image.load("esright12.png"),
        pygame.image.load("esright13.png"),
        pygame.image.load("esright14.png"),
        pygame.image.load("esright15.png"),
        pygame.image.load("esright16.png"),
        pygame.image.load("esright17.png"),
                          )
        self.esleft = (pygame.image.load("esleft1.png"),
        pygame.image.load("esleft1.png"),
        pygame.image.load("esleft2.png"),
        pygame.image.load("esleft3.png"),
        pygame.image.load("esleft4.png"),
        pygame.image.load("esleft5.png"),
        pygame.image.load("esleft6.png"),
        pygame.image.load("esleft7.png"),
        pygame.image.load("esleft8.png"),
        pygame.image.load("esleft9.png"),
        pygame.image.load("esleft10.png"),
        pygame.image.load("esleft11.png"),
        pygame.image.load("esleft12.png"),
        pygame.image.load("esleft13.png"),
        pygame.image.load("esleft14.png"),
        pygame.image.load("esleft15.png"),
        pygame.image.load("esleft16.png"),
        pygame.image.load("esleft17.png"),
                          )
        self.esright = (pygame.transform.scale(image,(image.get_width()//3,image.get_height()//3)) for image in self.esright)
        self.esleft = (pygame.transform.scale(image,(image.get_width()//3,image.get_height()//3)) for image in self.esleft)
        self.height = height
        self.width = width
        self.anim_index = 0
        self.distance = 80
        self.speed = 8
        self.vel = 3
        self.path = (x,end)
        self.walking_index = 0
        self.rect = pygame.Rect(x,y,height,width)
       def draw(self,window):
       self.move()
       if self.Walking_index + 1 >= 33:
           self.Walking_index = 0
       if self.vel > 0:
           window.blit(self.esright(self.Walking_index//3), (self.x,self.y))
           self.Walking_index += 1
       else:
           window.blit(self.esleft(self.Walking_index//3), (self.x,self.y))
           self.Walking_index += 1
       def move(self):
       if self.vel > 0:
           if self.x + self.vel < self.path(1):
               self.x += self.vel
           else:
               self.vel = self.vel * -1
               self.Walking_index = 0
       else:
           if self.x - self.vel >  self.path(0):
               self.x += self.vel
           else:
               self.vel = self.vel * -1
               self.Walking_index = 0


where I defined the enemy class

black = (0,0,0)
enemys1 = enemy(550,436,50,50,300)
enemys = (enemys1)

heres my full code script

web hosting – How do I stop a user from scrolling too far on an iFrame?

This may be more of a stack overflow questiob but nobody responded to my post there, so…

 

I currently own a website. I have an issue where I need to crop off the top 50 pixels of the iframe. I am currently doing this by using a DIV that is 50 pixels high at the top of my site.

However, when I access the page on some web browsers (Safari on iOS) the user can still scroll up on the iframe and see the part of the iframe that is normally hidden.

I already tried the following:

  • Use margin-top: -50px
  • Hide it with a DIV

This is my code:


<html>




<head>

<title>Cool Kids Minecraft and Discord Server</title>

<link rel="shortcut icon" type="image/x-icon" href="https://webmasters.stackexchange.com/favicon.jpg"/>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
html, body {
  height: 100%;
  width: 100%
  margin: 0;
  overflow: hidden;
  background-color: black;
  background: black;
}
.adverthider {
    z-index: 5;
    width: 100%;
    height: 155px;
    background: black;
    background-color: black;
    position: absolute;
    top: -100px;
}
.maincode {
    width: 1px;
    min-width: 100%;
    height: 1px;
    min-height: 100%;
    position: absolute;
    top: 0px;
    z-index: 2;
    border: 0px;
    frameBorder: 0px;
}
.toptext {
    z-index: 100;
    font-size: 100%;
    position: absolute;
    top: 90px;
    font-family: verdana;
    color: white;
    text-align: center;
}
</style>

</head>





<body>


<script>
const userAgent = navigator.userAgent.toLowerCase();
const isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);

if isTablet = true {
}
else {
    if(/(bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|Android|iemobile|ip(hone|od)|ipad|iris|kindle|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50(1-6)i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez((4-7)0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-(a-w))|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10(0-2)|n20(2-3)|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-((1-8)|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-(2-7)|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5(0-3)|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(navigator.userAgent.substr(0,4))) {
    var url= "https://wixhtml.wixsite.com/coolkids"; 
    window.location = url; 
    }
}   
</script>


<div class="adverthider">
    <div style="text-align: center;">
        <h3 class="toptext">This website is still in development. There may be some bugs.</h3>
    </div>
</div>

<iframe class="maincode" src="https://wixhtml.wixsite.com/coolkids" frameBorder="0" border="0"></iframe>


</body>






</html>

How do I fix this in CSS/JS/HTML?

malware – Browser threw me on same ad-site some seconds after scrolling on completely separate webpages

I was scrolling on two completely separate web pages, pages I have visited many times before. However they do both have ads. My browser is Opera, and I use an adblocker (on the other site it doesn’t always block all ads). After opening the page and scrolling on it for a while, I’m not sure but after maybe 5-30 seconds on the page, the browser redirected me to a different page (in the same tab), which was a page advertising an ISP/phone company, but it was a false ad, which would surely give viruses/etc if clicked on. These incidents happened within 10 hours of each other, and when the second one happened, I had many tabs open, including one from the page where it happened first.

In the past I’ve encountered many kinds of popups and ads, but this one seems strange because 1) it directed me to the same malware-ad page from two totally separate pages (the topic of these pages is nothing similar, one is blog about music lyrics and the other a game wiki), and 2) I did not click anything at the moment when it redirected me to that page. Also my Opera settings says “popups and redirecting” is disabled. A whois-service said the IP had been registered yesterday.

Quick virus scan didn’t find anything, I am now running full scan. I want to know how this kind of thing works, and what should I do to prevent it / does it mean I have malware?

interaction design – Element that becomes sticky when scrolling on a Figma prototype

I was wondering if it was possible that a fixed positioned element would become sticky to the window when you scroll it on a Figma prototype.

I tried to search for it but I can't find it.

If this is not possible with Figma, can you please let me know which tool I should use to prepare a quick prototype with this functionality?

Thanks in advance!