I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>
Related
I have images in a slideshow on this page. I would like the square images to become circluar using css.
I am having a hard time using inspect element b/c the images are in a slideshow. Which class can I use to add border-radius to make the square image eg of the pasta salad/potatoes into a circle shape?
<div id="rev_slider_22_3_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;background-color:#E9E9E9;padding:0px;margin-top:0px;margin-bottom:0px;max-height:400px;">
<div id="rev_slider_22_3" class="rev_slider fullwidthabanner" style="display:none;max-height:400px;height:400px;">
<ul> <!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx.image.jpg" alt="challah-1" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
<li data-transition="fade,boxfade,slotfade-horizontal,slotfade-vertical,fadetoleftfadefromright,fadetorightfadefromleft,fadetotopfadefrombottom,fadetobottomfadefromtop" data-slotamount="7" data-masterspeed="300" data-saveperformance="off" >
<!-- MAIN IMAGE -->
<img src="http://xxx/meatballs.jpg" alt="matza-balls" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
<!-- LAYERS -->
</li>
<!-- SLIDE -->
Use this:
.tp-simpleresponsive >ul li {
border-radius: 50%;
}
.rev_slider_wrapper {
background-color: transparent !important;
}
You can apply border radius 50% to your square image to make it circular.
.circular-image {
border-radius: 50%;
}
While the best way to accomplish this is to use:
.circular-image {
border-radius: 50%;
}
You need to be aware that in most cases, you need to apply a min-width, and min-height or else your result may not be as expected in some brosers/uses.
I have a section in my rails web application's view page which is nothing but a code that's displaying the facebook like, twitter tweet and other sharing options. The code goes like this:-
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50effbad1fc26ade"></script>
<!-- AddThis Button END -->
I wanted to move this div to center. So my css code for this is like:
.center {
text-align: center;
}
And I then added the <div class="center"> to my code...
But it's node moving everything center. What could be the reason??
Thanks in advance...
try puting a value to the width of your .center! For your convenience you can use a background color to keep your eyes on different div s what difference it makes.
.center {
text-align: center;
width: 70%
/*For the sake of understanding divs sometimes background color helps*/
background-color:#b0e0e6;
}
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;
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I am pretty new to CSS, I have a simple case like the above. I would like to make the "title" and "some url" clickable but want to make description as non-clickable. Is there any way to do that by applying some CSS on the span so that whatever inside that span, it is not clickable.
My constraint is that, I do not want to change the structure of the div, instead just applying css can we make a span which is inside an anchor tag, not clickable ?
Actually, you can achieve this via CSS. There's an almost unknown css rule named pointer-events. The a element will still be clickable but your description span won't.
a span.description {
pointer-events: none;
}
there are other values like: all, stroke, painted, etc.
ref: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/
UPDATE: As of 2016, all browsers now accept it: http://caniuse.com/#search=pointer-events
UPDATE: As of 2022, browsers behavior may have changed, another option can be:
a {
pointer-events: none;
}
a span:not(.description) {
pointer-events: initial;
}
Not with CSS. You could do it with JavaScript easily, though, by canceling the default event handling for those elements. In jQuery:
$('a span:nth-child(2)').click(function(event) { event.preventDefault(); });
CSS is used for applying styling i.e. the visual aspects of an interface.
That clicking an anchor element causes an action to be performed is a behavioural aspect of an interface, not a stylistic aspect.
You cannot achieve what you want using only CSS.
JavaScript is used for applying behaviours to an interface. You can use JavaScript to modify the behaviour of a link.
In response to piemesons rant against jQuery, a Vanilla JavaScript(TM) solution (tested on FF and IE):
Put this in a script tag after your markup is loaded (right before the close of the body tag) and you'll get a similar effect to the jQuery example.
a = document.getElementsByTagName('a');
for (var i = 0; i < a.length;i++) {
a[i].getElementsByTagName('span')[1].onclick = function() { return false;};
}
This will disable the click on every 2nd span inside of an a tag.
You could also check the innerHTML of each span for "description", or set an attribute or class and check that.
This is the simplest way I would have done it. Without bordering about CSS or javascript :
<html>
<head>
</head>
<body>
<div>
<p>
<a href="http://www.google.com">
<span>title<br></span>
</a>
<span>description<br></span>
<a href="http://www.google.com">
<span>some url</span>
</a>
</p>
</div>
</body>
</html>
You can replace the tag with anything you want.
Yes you can....
you can place something on top of the link element.
<!DOCTYPE html>
<html>
<head>
<title>Yes you CAN</title>
<style type="text/css">
ul{
width: 500px;
border: 5px solid black;
}
.product-type-simple {
position: relative;
height: 150px;
width: 150px;
}
.product-type-simple:before{
position: absolute;
height: 100% ;
width: 100% ;
content: '';
background: green;//for debugging purposes , remove this if you want to see whats behind
z-index: 999999999999;
}
</style>
</head>
<body>
<ul>
<li class='product-type-simple'>
<a href="/link1">
<img src="http://placehold.it/150x150">
</a>
</li>
<li class='product-type-simple'>
<a href="/link2">
<img src="http://placehold.it/150x150">
</a>
</li>
</ul>
</body>
</html>
the magic sauce happens at product-type-simple:before class
Whats happening here is that for each element that has class of product-type-simple you create something that has the width and height equal to that of the product-type-simple , then you increase its z-index to make sure it will place it self on top of the content of product-type-simple. You can toggle the background color if you want to see whats going on.
here is an example of the code
https://jsfiddle.net/92qky63j/
CSS relates to visual styling and not behaviour, so the answer is no really.
You could however either use javascript to modify the behaviour or change the styling of the span in question so that it doesn't have the pointy finger, underline, etc. Styling it like that will still leave it clickable.
Even better, change your markup so that it reflects what you want it to do.
Using CSS you cannot, CSS will only change the appearance of the span. However you can do it without changing the structure of the div by adding an onclick handler to the span:
<html>
<head>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
You can then style it so that it looks un-clickable too:
<html>
<head>
<style type='text/css'>
a span.unclickable { text-decoration: none; }
a span.unclickable:hover { cursor: default; }
</style>
</head>
<body>
<div>
<a href="http://www.google.com">
<span>title<br></span>
<span class='unclickable' onclick='return false;'>description<br></span>
<span>some url</span>
</a>
</div>
</body>
</html>
I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.
I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code
<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>
HTML
<div id="images-container">
<img src="image-big.png" alt="Big Image" id="big-image">
<img src="image-small.png" alt="Small Image" id="small-image">
</div>
(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >
CSS
#images-container {
position:relative;
}
#big-image {
position:absolute; /* position:absolute aligns to the parent container
which in the HTML above is the <div> element */
bottom:0;
left:0;
z-index:0;
}
#small-image {
position:absolute;
bottom:0;
left:0;
z-index:1;
}
The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.
You'll want to use the CSS z-index property to set which image will display on top of the other:
http://www.w3schools.com/Css/pr_pos_z-index.asp
You'll probably want to use relative or absolute positioning to position the small image:
http://www.w3schools.com/Css/css_positioning.asp
I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were.
If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).
Well.. good luck!
Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:
<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>