I'm in the process of updating my old website to a responsive design. I cobble together bits of script to get the look I want, and definitely don't claim to fully understand it when it works, so I could use some simple-words advice. My original site used subcontent divs to show/hide captions. See here: http://www.nancychuang.com/projects/mtc/ for caption links below the images . For the new site, I purchased an inexpensive template and have been modifying it.
I didn't know how to apply the original caption into the new template, because the original was positioned using the extremely basic method of nested tables. It seems with this current template it's not possible to have text underneath the images, so I needed something unobtrusive on top. Was able to make figcaption script work by using the code from css-tricks SlideinCaptions. So the new site will look like this: http://nancychuang.com/test/MTC.html .
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0; }
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease; }
figure:hover
figcaption { opacity: 1; }
figure:before {
content: "?";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px; height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75; }
figure:hover:before { opacity: 0; }
.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }
This figcaption script works on touch-screen, although to be honest I don't know why! There's no reference to touch or click in the code (so I can't figure out how to make the opposite action to "click off"). On desktop computer, hovering away from the image will hide the caption, on mobile the caption is stuck once activated. Since the text is proportionately large on mobile, I definitely want the user to be able to hide it. Either if there's a way to just touch anywhere on screen to make the caption disappear, OR like the original hidediv version where I add a link for the user to click:
<DIV id="subcontent1">
<p class="caption">Mae Tao Clinic, started by Dr. Cynthia Maung in 1989, is the primary care facility for many Burmese living on the border. Helping refugees, uninsured migrant residents of Mae Sot, as well as Burmese who cross the border due to difficulties obtaining care on the other side, the clinic today offers a comprehensive range of services.
<p class="caption"><a class="caption" href="javascript:dropdowncontent.hidediv('subcontent1')">HIDE</a></p></td>
</DIV>
*related: with figcaption, can you specify the width of the hover block the way I did with my original subcontent divs? I'm not clear what 24px is referring to in the code...a minimum width, maybe? but no maximum?
Appreciate the help! Thank you!
I'll throw in an answer anyway...
In your CSS, you have:
figcaption { opacity: 0; }
which means that figcaption is not visible by default.
And you have:
figure:hover figcaption { opacity: 1; }
which means that the figcaption will be made visible when hovering the containing figure.
The above two styles are mainly what's causing the caption to appear on hovering the picture, and in the case of a mobile device - on tapping the picture.
You asked how to hide the caption on a mobile device once it appears. The simple answer is - based on the above CSS - to tap anywhere outside the picture which can be interpreted as the picture losing focus.
However, do you really want to have this effect on a mobile device? It is not very intuitive. There are ways to change the styling depending on device. For example, if viewed on mobile device, the figcaption should always appear underneath the picture, which makes more sense to me. This can be achieved by using media query CSS to target different screen sizes.
I suggest that you do some online CSS tutorials to learn all the cool things CSS can do. It's definitely worth the time especially that you're customising a website already.
As a solution you need to check is the device touch or not therefore CSS can define based on the result.
#media (-moz-touch-enabled: 0), (pointer: fine), (-ms-high-contrast: none) {
figure:hover:before {
opacity: 0;
}
.cap-bot:before {
bottom: 10px;
left: 10px;
}
.cap-bot figcaption {
left: 0;
bottom: -30%;
}
.cap-bot:hover figcaption {
bottom: 0;
}
}
Related
I using radio button in React js App.
And lately i noticed that in radio button cicrle falls outside the button.
I thought maybe there are something wrong with margins, paddings.
But when i removed all margins, styles, classNames and so on.
Issue still didn't dissapear.
When i tried to use the same ANTD component in another page, it was the same problem.
I didn't use any specific styles in index.css
Did anyone had this issue before with ANTD Radio
Sorry i didn't provide any code.
But i don't even have anything to provide.
I literelly deleted everything that was possible
Create a css file for your component and add the following css. Your issue is most probably due to the position property which is overriden by some other css
position should be position: absolute;
default antd .ant-radio-inner::after should be as follows
.ant-radio-inner::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 16px;
height: 16px;
margin-top: -8px;
margin-left: -8px;
background-color: #1890ff;
border-top: 0;
border-left: 0;
border-radius: 16px;
transform: scale(0);
opacity: 0;
transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
content: ' ';
}
When position property is removed from above class you get this issue, check the following screenshot
After removing position: absolute; property
After adding position: absolute; property:
I hope this helps you.., Thank you :)
On my site I have a container in which numerous divs containing one i elements with background-images are rendered. Those i elements all have the same background-image but with different background-positions so that only one http request has to be made, which is general best practice for smaller icons. The divs should be horizontally centered in the container.
My problem is that on Chrome and Firefox browser (latest versions) the rendering of the background images is not working as intended on certain (wide) screen sizes. Specifically on Chrome it will always not show some of the elements background-image unless the element is hovered and on Firefox it will not render background images at all.
If I add float: left to the divs inside the container the rendering issue is solved. However I want to have the elements centered in the container which does not work with the float left.
My question is what am I doing which is causing this behaviour on certain browsers and how can I try to resolve it?
You can have a look at this problem for yourself on:
http://staging.koreanbuilds.net
Here is a screenshot of the behaviour on Chrome and on Firefox
This is the css code for the container and elements:
/* Container of clickable champion icons */
#champContainer {
width: 100%;
padding-right: 10px;
padding-left: 10px;
text-align: center;
position: relative;
}
/* Champion images div container class */
.champIcon {
width: 65px;
height: 65px;
margin: 1px auto;
overflow: hidden;
}
.champIcon i {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
}
.champIcon i:hover {
zoom: 1.05;
cursor: pointer;
-moz-transform:scale(1.05);
-moz-transform-origin: 0 0;
}
Additionally the divs have one of those two classes
.nodisplay {
display: none;
}
.yesdisplay {
display: inline-block;
}
The i elements always have the following class
.chmp {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
text-align: left;
cursor: pointer;
}
as well as a class defining the background-image and position for example
.chmpashe {
background-image: url(http://statics.koreanbuilds.net/champion_65x65/sprite.png);
background-position: 0 -455px;
width: 65px;
height: 65px;
}
I don't see anything wrong with your code. It looks like this might be the same issue you are seeing here as I can't seem to load your spritesheet on it's own in Firefox
It might be worth cutting your sprite sheet down and testing if that works.
hope that helps!
edit:
Looking at your live site you have a more traditionally shaped stylesheet which doesn't go beyond 1000 pixels in ether dimension. It looks like the one you are using on staging goes beyond 80,000 pixels which looks to be where your issue is.
I have a start button in my js game. I just noticed that I can be slightly to the right of it, and the cursor is a pointer. My css:
#start{
position: absolute;
top: 130px;
left: 195px;
height: 80px;
width:320px;
background-color: red;
cursor: pointer;
border: 2px solid yellow;
border-radius: 20px;
}
The button is just a div. After setting the button to a variable named "start", I use the following js to make it change background on hover:
start.onmouseover=function(){
this.style.backgroundColor="#FF4500";
}
start.onmouseout=function(){
this.style.backgroundColor="red";
}
I am able to trigger the hover by being outside of the button. Why is that? Here is the game where the issue occurs. The button is the first thing you see. This occurs with some other buttons as well. I know that I can use css hover, but am curious to find out what's wrong with this.
The reason why it is acting this way can be found in your css for #new:
#new {
font-size: 40px;
font-weight: bold;
color: yellow;
position: relative;
left: 48px;
bottom: 24px;
You should note that this child component is inheriting the width of the parent div which you set to have a width of 320px. You can verify this by inspecting the parent and child and looking at the computed styles:
Parent:
Child:
Then in your css for #new, you MOVED the position of the element to the right by 48px:
left: 48px;
This element still has a width of 320px as shown in chrome developer tools.
I bet that little blue bit that has overflowed is exactly 48px and where you are experiencing that unwanted behavior =) So, I hope you now understand what is going on with your css!
You can even verify this by setting the width of the child to be:
width: calc(100% - 48px);
You should find now that there is no more overflow:
The browser is actually taking the hover-detection from this area here.
http://i.imgur.com/WPYi7gj.png
You can probably see that it uses the text as the start of the hover area, and that there's a lot of padding on the right of the element. You'll want to remove this padding using CSS.
I'm getting nowhere with this. I have an element, which is using a :before pseudo selector.
CSS is like this:
.initHandler:before {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
height: 110%;
z-index: 999999;
background-color: white; /*background:white url(../images/ajax-loader.gif) no-repeat center center;*/
content: "initializing...";
text-align: center;
font-color: #ccc;
line-height: 150px;
vertical-align: bottom;
}
This gives me a white background for my app, which is loading "behind the curtain". On iOS I'm using a startup image, which I'm setting in the page head before jquery and jquerymobile are loaded.
I now want to change the background of my initHaendler:before element to the determined iOS splashscreen.
However I need to this in pure javascript and I have no idea how to select a class/pseudoelement to set a css value.
Can someone help out?
Thanks!
Setting CSS pseudo-class rules from JavaScript seems to suggest that you can't and offers a workaround by appending a stylesheet to the document. I'm unsure if it'd work on iOS but it's worth a shot
If you have a look at digg.com, there is a persistent status bar (i.e. the Digg version number etc).
I have played with a few jQuery plugins, but they don't anchor fully to the bottom like that one in Digg.. I have tried to look at the CSS, but can't quite understand what bits are needed..
Any ideas/pointers very welcome?
<--- EDIT: SOLUTION --->
Thanks to the answer/comments below, I have ended up with the follow (just in case anyone else wants a basic working version to get going..):
The CSS is:
.footer-bar {
background: -webkit-gradient(linear,left top,left bottom,from(#F3F3F3),to(white));
background: -moz-linear-gradient(top,#F3F3F3,white);
background-color: white;
border-top: 1px solid #AAA;
bottom: 0;
color: #333;
font-size: .833333333333em;
font-family: Arial Narrow;
height: 12px;
padding: 5px 0;
position: fixed;
right: 0;
text-align: left;
width: 100%;
z-index: 5;
}
Obviously you can change the relevant bits, and then of course in my case I just have the following HTML:
<span class="footer-bar">Some text in the footer/status bar that stays there even when you scroll</span>
So there you are - thanks to all the others and of course the guys who originally created it.. CSS is still a bit of a mystery in some cases to me!
You want position: fixed on the element. No JavaScript.
Fixed positioning makes the element relevant to the viewport.