OK, I added a universal style to my main.css that says:
a:active {
top:1px;
position:relative;
}
This gives me a nice little "nudge" effect when anything is clicked. Consequently, I had to go around to all of my absolutely positioned <a> elements and fix them from jumping up to top:1px and manually give them the proper nudge.
Although I have run into this one case that has thrown me for a loop on a couple levels. I think I got the positioning all sorted out, but what's happening when I click the anchor is that the <span> element that comes next in the containing <li> disappears while the anchor is being clicked.
I did try setting the <span> to float:left but instead of disappearing it just began lining up beside the anchor and hanging outside the containing <li>.
Here's the page: http://beta.helpcurenow.org/media/videos/
What I'm referring to on this page are the thumbnails that sit below the main video window. There are thumbnail feeds from vimeo with a video screenshot and the meta data. The video screen shot has a hidden span in the anchor so that when you hover over the thumbnail it appears. This is what is causing the meta data to disappear when clicked.
And if you'd like to just see the markup here, it is below:
<ul id="video-gallery">
<li>
<a class="video-thumbnail" href="#">
<img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/>
<span class="play-arrow"></span>
</a>
<span class="video-metadata" id="video-13466402">
<span class="video-title">Amy Fann Interview</span>
<span class="video-likes meta">Likes <span class="value">0</span></span>
<span class="video-views meta">Views <span class="value">2</span></span>
<span class="video-duration meta">Duration <span class="value">01:48</span></span>
<span class="video-post-date meta">Posted 1 day and 7 hours ago</span>
<span class="video-url hidden-data">http://vimeo.com/13466402</span>
<span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span>
</span>
</li>
</ul>
And the CSS...(obviously there are several other style rules for this section, but I'm going to try to include only the relevant ones)
li a.video-thumbnail span.play-arrow {
display:none;
}
li:hover a.video-thumbnail span.play-arrow {
display:block;
width:122px;
height:86px;
background:url(/img/media/play-arrow.png) no-repeat center top;
position:absolute;
top:40px;
left:50px;
}
li:hover a.video-thumbnail:active span.play-arrow {
position:absolute;
top:30px;
left:40px
}
li a.video-thumbnail:active {
position:absolute;
top:auto;
}
li.added-video {
display: none;
}
This CSS should fix your problem (at least it did for me in firebug):
li a.video-thumbnail:active {
position: static;
}
li:hover a.video-thumbnail:active span.play-arrow {
top: 40px;
left: 50px;
}
I don't know exactly why your meta was being hidden on :active, but the above prevents the position type of the thumbnail link from changing and keeps everything in place.
Related
I have a list of products with icons for contents. When hovering an icon a text explains the meaning of the image.
Because on touchscreens hover doesn't exist, I use :active, too.
My solution works perfect
- on desktop (hovering shows text, moving mouse away: text disappears)
- and on normal phones (touch shows text, touching somewhere else: text disappears
but not on Iphones: touch shows text, but it stays even when touching somewhere else (except when touching another "hoverable" image)
HTML:
<span class="canhover">
<img class="icon24" src="img/allergens/gluten.jpg">
<span class="hovertxt">
contains gluten
</span>
</span>
<span class="canhover">
<img class="icon24" src="img/allergens/milk.jpg">
<span class="hovertxt">
conains milk
</span>
</span>
...
CSS:
.canhover {
position: relative;
}
.canhover:hover .hovertxt, .canhover:active .hovertxt {
display: block;
}
.hovertxt {
display: none;
position: absolute; bottom: 2em; left: 0;
}
How can I achieve that the text also disappears on I phones when toching somewhere else?
Try to add :focus with :hover & :active like this :
.canhover:hover .hovertxt,
.canhover:focus .hovertxt,
.canhover:active .hovertxt{
display: block;
}
and in safari browser use safari prefix
I'm using Bootstrap 3. I have this menu which works ok only when is not a touch (mobile) device:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Ayuda</li>
<li>Metodología<span></span>
<div class="nav-sub-menu">
<ul class="text-submenu">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</div>
</li>
<li>Glosario</li>
<!--<li>Link de Interés</li>-->
<li>Contacto</li>
</ul>
</div>
In the css, the hover that give the style to the elements have this code:
.nav li > a {
display: table-cell;
}
.nav>li>a:hover {
background: none;
color: #ff7113;
}
.nav > li > ul {
display:none;
list-style:none;
position:relative;
}
.nav > li:hover > ul {
display:block;
}
I've read some posts about making menus for both desktop and touch without hover, with javascript or even using external libraries. Is there are more simple way to use this menu in mobiles devices?
I made a Jsfiddle with the menú working:
https://jsfiddle.net/esqkx349/
You have to open it in a wide screen to see it, like this:
in case, anyone still finding solution to this problem,
Add onclick="void(0)" in <div class="navbar-collapse collapse"> to make mobile device recognise an element as an element with a hover.
like <div class="navbar-collapse collapse" onclick="void(0)">
Well, I made it:
https://jsfiddle.net/pmiranda/bwkyocpa/1/
I had to put some javascript and css:
function isTouchDevice(){
return typeof window.ontouchstart !== 'undefined';
}
$(document).ready(function(){
/* If mobile browser, prevent click on parent nav item from redirecting to URL */
if(isTouchDevice()) {
// 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
$(".navbar-nav > li > a").click(function(event) {
// Perform a reset - Remove the "clicked" class on all other menu items
$(".navbar-nav > li > a").not(this).removeClass("clicked");
$(this).toggleClass("clicked");
if ($(this).hasClass("clicked")) {
event.preventDefault();
}
});
}
});
CSS:
.hover-hack {
position: fixed !important;
background-color: rgba(0, 0, 0, 0.7) !important;
}
#media only screen and (max-width:1024px) {
.hover-hack {
background: rgba(0, 0, 0, 1) !important;
z-index: 10;
}
}
And the html:
<li>Metodología<span></span>
<ul class="text-submenu hover-hack">
<li style="padding-left=0px">Guía Metodológica</li>
<li style="padding-left=0px">Modelos y Resultados</li>
</ul>
</li>
<li>Glosario</li>
It's possible to make a clickable dropdown without Js.
The hover method is sketchy because some touch devices will treat the first click like a hover action.
It can be done using a checkbox html element. Then, css can detect wether or not the checkbox is current checked.
I created a component that does the job using this link. It works fairly well on mobile because click events work just fine.
Pure CSS clickable dropdown?
Problem is, this solution is slightly hacky and pure HTML, CSS implementations can't work outside of the HTML heirarchy.(so if your button and your dropdown menu exist in different branches of the html heirarchy it won't work.)
I think the most appropriate solution is to use a little bit of JS and handle the element on click.
I want to add an anchor symbol to my url when mouse hover in angular. Here is my code,
<a ng-click="download(File)"><img src="images/filePic.png"/>{{filename}}</a>
Like this maybe
⚓ {{filename}}
<a ng-click="download(File)">⚓ <img src="images/filePic.png"/>{{filename}}</a>
Update using CSS hover
a:hover:after {
content: ' \2693'
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
Update 2 using CSS hover cursor
a:hover {
cursor: url('https://onedrive.live.com/download?resid=EC849DFEDB797EB9!1066&authkey=!AEmDTZM6b8_Ies0&ithint=file%2ccur'),auto;
}
<a ng-click="download(File)"><img src="http://placehold.it/15x15"/> some filename</a>
<br><br>
Note there is a small delay (first time hovering) from OneDrive before the anchor shows
I'm having a bit of trouble getting the various products to line up properly on my site. Some of the items have a name long enough to create a second line of text, and when it does so, the items still align with the top of the text rather than aligning the top of each image. Basically I want it to use up some of the empty space above each div to fit a second line of text, rather than pushing my picture down and just aligning at the top. This is the code I'm using to create the divs in a loop within my PHP:
<div class="new_prod_box">
<a href="details.html">
'.$title.'
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Here's a picture explaining what I mean: my website
Here's the rules in my CSS:
.new_prod_box{
float:left;
text-align:center;
padding:10px;
width:132px;
height:180px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;
}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(images/new_prod_box.gif) no-repeat center;
position:relative;
}
Hmmm, if I understand your issue correctly, giving .new_prod_box > a:first-child (selects only the first, top-level <a> element inside .new_prod_box) a defined height should give you what you want. As long as the height is great enough to fit two lines of text in it, it'll keep the elements below in the same position, but still leaves space for the title to break to two lines.
If that isn't what you're looking for, let me know and I'll be happy to help further!
(Edit:) To align single-line titles to the top of the image (rather than having whitespace between them), you could try this method, which I think will work.
First, modify your HTML structure a bit, to add a <span> inside of the first <a> element:
<div class="new_prod_box">
<a href="details.html">
<span>
'.$title.'
</span>
</a>
<div class="new_prod_bg">
<a href="details.html">
<img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
</a>
</div>
<a href="cart.php?action=add&id='.$id.'">
<u>Add to cart</u>
</a>
</div>
Then, add/modify these styles in your CSS:
.new_prod_box > a:first-child{
height: [tall enough for two lines];
position:relative;
}
.new_prod_box > a:first-child span{
display:block;
position:absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
Which I believe should give you what you want. Try it out though, and let me know what happens.
I'm trying to align the share, like and tweet button horizontally but I can't get the share button right. I tried adding vertical align top, changing the height and display:inline but it always remains more or less 10px belowe the others. What should I do to get them all aligned?
<div style='vertical-align: top;'>
<a expr:share_url='data:post.url' name='fb_share'/>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related=':' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/>
<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:20px;'/>
</div>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'>
</script>
Thanks
An easier method than styling these elements individually, is to sandwich them inside <li> tags--allowing you to position the parent <ul> easily, and also float the <li> tags (creating the 'inline' effect you're after.)
jsFiddle didn't like the facebook APIs, so I used 3 twitter buttons instead; the code looks like:
<ul class="social_network">
<li>
Tweet
</li>
<li>
Tweet
</li>
<li>
Tweet
</li>
</ul>
With some very simple CSS (including a subtle outline so you can see the boundaries of the <li> elements:
.social_network {
position : relative;
list-style-type : none;
}
.social_network li {
float : left;
border : 1px solid rgba(0,0,0,.1);
padding : 6px;
margin : 2px;
}
You can find an example of the above here: http://jsfiddle.net/kgFaW/
This should put you in the right direction. Let me know if you run into any issues with the Facebook APIs.
to do display:inline you can wrap each control into list like this:
<ul><li>
<a class=....../>
</li> <li> <a expr....../> </li></ul>
Also, add: list-style-type:none;
To make your controls stick to the right side of the screen,
do:
position:absolute;
right:0;