Let's say I have two sibling divs that shouldn't be showed at the same time. Inside both divs there are about 50 images.
Div 1 is showed by default with the class "active". But when the user clicks a certain button, it triggers an event that remove class "active" from Div 1 and append it to Div 2.
This toggle of divs works fine on a pc, but on some mobile devices, the response is TOO slow.
This is what I've tried so far:
First attempt:
div {
display: none;
&.active {
display: block;
}
img { display: block; /* always */ }
}
Second attempt:
div {
position: absolute;
left: 9999px; // in a viewport far far away
&.active {
position: relative;
left: 0;
}
img { display: block; /* always */ }
}
Regardless the device specifications, I'm sure there must be a way to get the better performance on ALL devices. Any ideas?
Thanks :)
Related
I'm a bit confused about this but I think I've found the issue.
I have in my html:
<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
</div>
</div>
In my css I have:
.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}
So this basically means if I hover over the dropdownz class, the dropdownz-content display converts from none to block and the menu items show.
When I run this on an android touchscreen mobile device, I have to CLICK the dropdownz item in order for it to effect the hover and show the list, if I click it again, it effectively removes the hover.
This is desirable behaviour, it means I don't have to do any extra stuff for touch-screens. A "hover" becomes a click and the 2nd click removes the "hover". Great!
Apparently this doesn't work the same in SAFARI on an iPhone. I can't test it myself, I'm going via a friend who says it's not working, so I basically want to know:
Is this a known issue and what's the best way to remedy it? (Without JavaScript, surely!)
I'm thinking along the lines of :focus ?
try this :
.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}
I'm working on making a Squarespace page with custom CSS to be mobile responsive. In a mobile screen, my page has a drop down menu with the different links for the page. My problem is that in certain pages (such as Music or Watch) when you click on the menu button, the drop down menu hides behind the content of the page. I know this has to do with using position: absolute, but i have not found a way to have the placement of the menu button and drop down list as I want it by using position: relative. This is my CSS for the menu:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
}
#mobileNav .wrapper {
border-bottom-style: none;
border-bottom-color: none;
}
You can view the page at richiequake.com using the password Help123. Is there another way I can have the placement of the menu button and the drop down list and have the list "push" the content of the page down so the link list is visible?
Basically, are you are missing is the z-index property. Which will place the container #mobileNav in a higher layer.
By making this change (adding z-index property to your CSS selector):
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
I can now see the menu links in all pages. You can read more about the z-index spec here.
UPDATE - To also push the content down while using absolute positioning:
As you are already using a custom class to toggle the menu links, you can use that to also toggle the content section.
Add a selector rule as following to your stylesheet:
.menu-open~section#page {
transform: translateY(355px);
}
What this will do is, when the menu-open class is in the document, the sibling section with id of page, will be pushed down 355px.
You can also add a some kind of animation if you want a smoother effect on pushing the content down, like so:
#page {
margin-top: 100px;
margin-bottom: 100px;
opacity: 1;
position: relative;
transition: transform .3s linear;
}
I just added the transition, where the .3s is the time that the transition will take.
One problem with using absolute positioning, even if you use transforms to compensate for it, is that on some devices and browser widths, the logo will overlap the navigation. Observe what the current solution renders:
Another problem is the delay between when the navigation collapses and when the text is no longer visible:
Because this is Squarespace and you don't have access to edit the underlying DOM, I would use flexbox to solve this. To do that, first get rid of this:
#mobileNav {
background: none;
position: absolute;
top: 20%;
left: 0;
right: 0;
z-index: 1;
}
And add this:
#media only screen and (max-width: 640px) {
#canvas {
display: flex;
flex-direction: column;
}
#mobileMenuLink {
order: 1;
}
#mobileNav {
order: 2;
}
#header {
order: 3;
}
#header ~ * {
order: 4;
}
}
Note that the above is not vendor-prefixed, so if you want to support older browsers, you'd correspondingly want to add vendor prefixing.
I was wondering if it is possible to change the position of the search box but only on mobiles.. I tried to put id="search" on the box that contains the input with:
#media only screen and (max-width: 767px) {
#search
{
position:absolute;
top: 0;
width:90%;
background: none repeat scroll 0 0 #ffffff;
}
}
But doesn't seem to work. I want the search box just at the bottom of the header, but only on mobiles. Is this possible?
At work we use JavaScript & jQuery to move an element on different screen sizes like so:
function moveMenu(){
if($(window).width() < 767){
// If the screen is less than 767, move the menu to mobile position
$('#menu-header').prependTo('#mobile-menu-wrapper');
}
else {
// Otherwise, put it in the normal location
$('#menu-header').prependTo('#header-menu-wrapper');
}
}
Its important that if someone loads the page on a small screen, then resizes it to large that this function runs. So we also add these two bits to trigger it on page load and on page resize:
$(window).resize(function(){
moveMenu();
});
$(window).load(function(){
moveMenu();
});
This method means you don't have to duplicate menus to 'reflow' the page.
Add another search box in the Center-block
Hide this on desktop and show it on the
UPDATE: Position fixed will work but will not allow to use other elements
the code is something like this
#search1 {
display: block;
}
#search2 {
display: none;
}
#media only [....] {
#search1 {
display: none;
}
#search2 {
display: block;
}
}
This is my first time posting to the forum and I'm by no means a web developer but I have been learning as I go.
The problem I'm having with is http://www.audiofactory.co.uk.
On some pages there are music players. Created using a Wordpress plugin.
See pages below for examples.
-services/audio-books/
-services/voiceovers/
-services/voicereels/
-/services/radiocontent/
-/our-team/voice-talent/
I have edited some CSS styles for each player to give it a specific width for a given page.
/* ===== "voicetalent" ===== */
.voicetalent div.playlist-colour { position:absolute; height:115px }
.voicetalent div.playlist-wrap-MI ul { position:static; height:115px }
/* ===== "voicereels" ===== */
.voicereels div.playlist-colour { position:absolute; height:207px }
.voicereels div.playlist-wrap-MI ul { position:static; height:207px }
/* ===== "audiobooks" ===== */
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
If you take a look at http://www.audiofactory.co.uk/services/audio-books/
you can see that when you resize the browser window the player does not resize as you would expect and overlaps the image on the left. I'd like the player to auto adjust its width when changing the width of the browser so everything stays relative.
I have spoken to the developer of the music player plugin and he suggested this
It looks like it's just a markup issue, it would probably work if you float the player as well as the image, either using the 'pos' parameter in the shortcode or by wrapping the shortcode in another floated div of a given width.
As the instructions were not very specific I was a bit unsure of how to implement these suggestions.
I tried wrapping my short code in a <div> like so but its probably completely wrong.
/* ===== "audiobooks" ===== */
<div position:float;>
.audiobooks div.playlist-colour { position:absolute; height:251px }
.audiobooks div.playlist-wrap-MI ul { position:static; height:251px }
</div>
Any help you could offer would be really appreciated.
Floating would be easiest. You'll have to add a clearfix for this to work properly so you can force the floated elements to behave as desired when they stack.
First include this into your main style sheet at a top level (top of the file).
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
In the html for the audiobook you'll have to add the clearfix class as below.
<div id="wrapperMI_0" class="clearfix wrap-MI audiobooks nolistbutton nopn">
On the div.wrap-MI class in css add:
float: left;
width: 48%;
I'm looking to show a div on click. The goal is to use pure CSS only, no jQuery.
Working FIDDLE Demo
Consider that you want something like this:
We write our markup as simple as possible. One element for container, one element for our link and one another element for popup:
<!-- [container] -->
<div class="link-with-popup">
<!-- link -->
<div class="link">CSS</div>
<!-- [popup] -->
<div class="popup">
<div class="box">CSS Description</div>
</div>
<!-- [/popup] -->
</div>
<!-- [/container] -->
Here is our layer structure in picture:
CONTAINER
Let's write CSS for our container.
.link-with-popup {
/* for visualizing */
background: yellow;
/* we need relative, because childs are absolute */
position: relative;
margin-bottom: 10px;
height: 30px;
width: 400px;
}
[!] Note that we make our container relative. Because the children will be in absolute mode.
LINK
We create our link as an absolute element from left, just as shown in the figure above.
.link {
background: blue;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 10;
}
POPUP
The dimention of popup element is same as the container, so we set all top, left, right, bottom properties to 0.
.popup {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: green;
z-index: 20;
}
[!] Note that z-index of popup element must be greater than link element.
.popup {
/* we won't show the popup yet */
display: none;
}
By now, we'll get this result (check it on jsFiddle):
Now we want the click for our link. This must be done with :active pseudo selector in CSS. But how we must show the poup? We have to get the next sibling element by the link. We use the + selector in CSS:
.link:active + .popup {
display: block;
}
See the result on jsFiddle. But the problem is that when user realize the mouse, the popup will disappear (as it display is set to none).
So we set the :hover rule for the popup and make it block.
.popup:hover {
display: block;
}
Check the jsFiddle demo. Now we get close enough. The only issue that the popup element, hide our link.
But it doesn't matter, because we won't set background for our popup (it will be transparent).
TEXT
For wanted text in popup element, we set this rules:
.popup .box {
position: absolute;
/* note that we make a gap from left to don't hide the link */
left: 130px;
top: 0;
right: 0;
bottom: 0;
background: #505050;
}
Check the jsFiddle demo. Now we have all things that we need.
Now it's time to make our popup element transparent (by setting the background as transparent or simply remove the background: green; rule):
.popup {
background: transparent;
}
And here is the final jsFiddle result. And if you add some extra CSS to it, it can be more stylish. Something like this that I've created.
Some important note to memorize:
In the final result, there is a gap between the link (blue one) and the popup (gray one). But the fact is that the gray element is not our popup. It's a child of popup and our popup is an 100% width and height element on the container.
Working FIDDLE Demo
Another way is to use the :target property (only works in moderns browsers).
Here's a qucik DEMO where I've hidden the div by applying opacity: 0; and the when you click the link the div changes to opacity: 1; The link and the div are matched using a hash in the url.
Here's the code from my example.
HTML
Click me
<br />
<div id="pop"></div>
CSS
#pop {
width: 100px;
height: 100px;
background: #000;
opacity: 0;
}
#pop:target {
opacity: 1;
}
There are some side effects though. The browser will jump/scroll down (not sure if it's possible to prevent this?) to the matched div and since we are using a hash in the url it will effect the browser history and, as mentioned above, it only works in modern browsers.
EDIT If you want to look into other hack/tricks for pure CSS click events, this is a good post - http://tympanus.net/codrops/2012/12/17/css-click-events/