I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
Related
I cannot figure out, how to make mobile menu full-width. When I click on hamburger menu, it opens up, but it's only like regular dropdown.I tried many ways to change it, but can't figure it out.
Here is the link: https://dev.povoden.cz/
Add style position: static to class "et_pb_menu_inner_container" and "et_pb_column--with-menu"
You can use the following way.
.et_mobile_menu {
position: fixed; /* Instead of absolute */
top: 90px !important; /* Adjust it to set the top value */
}
So I am not sure which version and such you are using. Whilst divi does some great things in terms of making building easier. It means they often make it very difficult to find out why normal CSS doesn't seem to work.
I have a similar issue and I was using the theme builder to build a global header. None of the CSS I tried seemed to work.
I was unable to find where the width was being set and how to overwrite it.
The solution in the end was simple.
When in the theme builder.
New Section (fullwidth)
New Row (full width) - THIS is what actually fixes the problem
Please checkout the attached screen shot
how to adjust the menu
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
So this is an "issue" that I've been experiencing for a new website that I've been building.
It utilizes WP Bakery's Visual Composer Row widget, and occurs when the CSS/JS kicks in to expand the header row from default to stretch.
Because the header row has a background colour, the initial header looks like this. However, when the CSS/JS kicks in to expand the row, it then "flickers" and looks like this.
This obviously looks very unprofessional, and was wondering can suggest anything that I could try.
Would appreciate any assistance.
Thanks!
This is similar to other FOUCs (Flash of Unstyled Content). You have a few options.
One is to add the stretch attributes to the element in question specifically. Basically take: .stretch { width: 100%; margin: 0 auto /* … whatever */ } and apply those styles to your element, ideally by ID: #my-header { width: 100%; margin: 0 auto /* … whatever */ } and put them in your header so they're loaded right away, perhaps in your Customizer.
Another option is to find another way to add the stretch class to that element manually. I'm not familiar enough with VC to give examples (though, to be honest the few sites I've made that use it haven't seemed to have this issue?). The benefit of this would be that you don't need to duplicate CSS attributes, and don't need to wait to JS to apply the class, which probably isn't happening until the entire footer is loaded.
Another option is the all-too common (and arguably unnecessary/annoying) "full page loader". This is the option I'd avoid if I were you, but you can plop in a full screen white page with your logo and a spinner that goes away when the entire markup is loaded or when all resources are fetched. This delays users accessing your site, and most users would prefer to see a FOUC than a loading screen, based on my limited testing.
I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
First post. Preface - Recently started web developing so don't have much experience with IE7.
Created a webpage using Adobe Muse for the first time because it's supposed to be fast for the design side. Design was fast but having some weird issues displaying the page in IE7. A div always jumps to the very top of the page whether the positioning is absolute or relative. Not sure what is going on. The page is found at
http://dealer.dealers2farmers.com/dealers/cherokeegarage/
There is a horizontal div that contains the "Search Inventory" and Google map that always jumps to the top of the page in IE7.
This is the CSS of the div
#horzBannerPosition
{
z-index: 2;
width: 0.01px;
top: -3px;
margin-bottom: -3px;
position: relative;
}
I thought the width was strange, Adobe Muse wrote most of this but it seems to work just fine with newer browsers. Not sure why this jumps to the top of the page in IE7. Any ideas?
Ok with just a quick glance over, looks like you have a conflict with your z-indexing, your positioning, as well as using top. Remember for IE7, z-indexing actually starts at 0 and gets all messy from there (this may help: http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7). Also careful with using classes and id's in the same tag. I would have to dedicate more time to this to check it out in full, but check out that article for the time being.