I've coded this website: https://feetup.com/
All works fine, except that in safari the fixed header at the top hides under the content when scrolling. This happens only the homepage. I tried everything I could find online to fix it, without success.
Any suggestions are welcome!
I tried two ways and it works for me, you can try and pick the most suitable way for your site:
Disable overflow: hidden on .hero-index, the header still remains when it is outside of the hero element.
Bring the <header> outside and put it above the <div class="... feetup-hero hero-index">
Related
I'm using Do Hyeon font and all browsers render fine except for Safari. It seems if text is too short or not upper case, safari ignores spaces. However, if I click or hover the text, it re-renders with space.
Does anyone know why this is happening and how can I solve this?
I already tried adding these css property but did not work.
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: 'kern' 1;
(Second picture) When I selected text
I believe it was Safari issue but unfortunately, I could not find the reason why this is happening.
However, after testing some css properties, the one I am using for displaying ellipsis worked for this issue as well, so I will leave the code here in case someone is having the same issue.
display: -webkit-box;
-webkit-line-clamp: 10;
-webkit-box-orient: vertical;
max-height: 10rem;
Again, these properties are originally for ellipsis especially for safari:
https://stackoverflow.com/a/61515590/12332180 but propbably, this is related to modifing the text that is why it is working for my situation as well.
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
I was trying to disable the loading spinner, as it hangs on some browsers.
I found an existing solution, which definitely works. This line:
data-setup="{"children": {"loadingSpinner": false}}"
Problem is this code addition changes the skin of my player.
Spinner disabled, new skin: http://thinkmad.com/s/projects/little-racer-dancing/
Old skin:http://thinkmad.com/s/projects/parachute-youth-count-to-ten/
Both still have:
class="video-js vjs-default-skin"
Anyone know how to fix this so all my skins are consistent?
Alex
In your video tag you have data-setup="{"children": {"loadingSpinner": false}}" change this to use single quotes ' around your data-setup attribute like so
data-setup='{"children": {"loadingSpinner": false}}'
your code is closing the attribute with just {
When I use single quotes instead of double quotes, the progress spinner returns and the original problem persists:
http://thinkmad.com/s/projects/little-racer-dancing/
I'll also mention this is a video that is 720p but on the page I've resized it to 640x360. Not sure if that matters.
I think the title of my question accurately describes what I think I want to know.
I would like to be able to emulate/reproduce the exact scrolling functionality of this site https://dotvita.com/.
It seems the background is fixed but only scrolls to a point. Or, more clearly, it scrolls simultaneously with the rest of the content but only to a point. When I looked at the html source, here is what I saw:
<body>
<div id="background"></div>
<body>
and the CSS for the background is:
#background {
position: fixed;
top: -458px;
}
Can you guys tell me what is going on here? Does the above code produce what we see on that site or is there something else going on?
Thanks!
There is indeed something else going on in the background. It looks like they are using Jquery and perhaps a custom script to produce this effect.
For many browsers, you can inspect individual elements or the entire site and see what files are being used. In Google Chrome, you can do this by pressing CTRL+SHIFT+I and clicking the "Resources" tab. Here you can use the file tree on the left to go into Frames > [website name] > Scripts and see the various script files loaded up.
Here is the file that appears to be causing this cool effect:
https://dotvita.com/php/min/?f=js/core/jquery.retina.js,js/core/jquery.resize.js,js/core/jquery.equalHeights.js,libs/qtip/js/jquery.qtip.js,libs/colorbox/js/jquery.colorbox.js,js/plugins.js,js/script.js
In order for this to work, the site needs to have Jquery installed, which is this file:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
This has been an effect I've been meaning to recreate myself for a while now. Good luck!
I'm looking for a JavaScript/jQuery plugin which allows to use a fixed header on mobile browser.
iScroll seems to be the most popular solution but I was interested in a plugin that isn't constantly calculating the position of the header while scrolling.
The idea is the same used by jQueryMobile fixed toolbars, while the user is scrolling the header disappears and only reappears after finishing scrolling.
It's more simple than what you think.
I use this code:
<div data-role="header" data-position="fixed">
<h1>Fixed Header!</h1>
</div>
See more info:
http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html