I am using toggleClass and slideToggle to accomplish the following:
when the user selects a link, it will slide down the div, then it will set the link as open, displaying the appropriate background image, this is just a simple, (+) and (-) to open and close the div.
What I am having trouble with, is displaying the background-image to the right of the link, giving it about 5-10px of margin-left, to give it some spacing.
Here is a screen shot of what it is doing: Closed (displaying (+) sign): http://cl.ly/4634afa1e7aa4fe10072
Open (displaying (-) sign): http://cl.ly/8bc59ab07da46a173d62
HTML for link: Mapping Our Future: Strategic Plan 2010-2015
CSS for when it displays the link untouched, and after it is selected:
// link is not open
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat 120% 0%;
}
// link is open
.our-future-intro-slide-open {
background: url('/images/uploads/images/plus-icon.png') no-repeat 120% 0%;
}
Here is the jQuery, I figure I'll throw that in, it works, just the css for making the background-image show up to the right of the text.
$(document).ready(function() {
$('.our-future-intro-slide').click(function() {
$(this).toggleClass("our-future-intro-slide-open");
$(".our-future-intro").slideToggle(100);
});
});
Try this:
.our-future-intro-slide {
background: url('/images/uploads/images/plus_sign.png') no-repeat top right;
padding-right: 30px; /* or whatever the width of the background image is */
}
And, of course, the same modifications for the other rule.
I don't know if I understand totally, but have you tried using :after? Something like
.link:after{background:#FFF;}
I think you will be interested in this post - Pure CSS "Popups".
UPDATE: that's another way to align images on links hover.
Related
I would like to replace this image when I scroll down on another image.
Firstly, the menu looks like:
And when I scroll little bit down menu looks like:
Is it possible to replace using custom.css this item in menu? I just want to replace this picture on another picture. Is it possible to do by using only custom.css or do I need to have acces to files and use here java script?
When it's possible can somene just tell how?
Link to my site : http://test.projekt-tenis.pl/wordpress/
Give this a whirl:
.is-sticky img.menu-image-title-hide {
background: url(http://www.spiritvoyage.com/blog/wp-content/uploads/Screen-shot-2011-12-06-at-2.56.08-PM-150x150.png) no-repeat;
width: 150px;
height: 150px;
padding-left: 150px;
}
Should do the trick. It moves the original src image out of the way and adds a background image. As far as your user is concerned it'll just look like it flips from one image to the other.
It works because the class .is-sticky is added to the header on scroll by js.
I have this piece of code in my style sheet to change the cursor to a pointer on one page, and it works well except on firefox, where it doesn't give you a "pointer" finger to let you know the page is clickable.
html {
cursor:pointer;
}
The thing is, the normal method of putting an onclick event in the body tag isn't working. (shown below not working)
<body onclick="window.href.location=filename">
body text
</body>
How do I get a pointer finger on the whole page instead of the normal mouse cursor in firefox?
Add a hover rule to the body element.
body:hover {
cursor:pointer;
}
You'll have to fill your whole screen with the element.
html {
cursor:pointer;
width: 100%;
height: 100%;
}
Check this JSFiddle that I put together for you.
I guess you need to fill the entire page with some element like:
<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px">
</div>
and use this inside the body. There you probaly need to care about the bodies margins.
Or you append a click handler to the entire window via JavaScrip:
window.addEventListener("click", doSomething, false);
Make life easy:
CSS
#page{display:block;position:absolute;top:0;bottom:0:left:0;right:0;}
I implemented a simple tab navigation by using <ul><li><a> , the problem is that there are several "layers" on each tab still needed. what I mean is, In my current implementation I have:
-tab text which is <a>text</a>
-on each tab I have a tab icon image, which I put on <li> as background-image of <li>,
But I still need:
-tab seperator image (A vertical bar image) which I intend to put on <a>,and position it on the left side background-position: left , it is working but this implementation is not in my code which I showed below on jsfiddle site because I did not find a suitable image on internet
-tab background image which occupy the whole tab, I have no idea where I should put this image?
Please check & run my implementation here on jsfiddle, in the css code, I used background-color instead of background-image just to express what I want to achieve, but I need to use background-image as the tab background.
What I tried:
I tried to put the tab background image on <li> but it will hide the
icon image which has already on <li>,
I tried to put the tab background image on <a> but it will also hide the tab seperator image when mouse hover
How to get rid of this layer probelm on tab implementation then? (Please do not suggest me to use less image, since it is one requirement of this app to use those images.)
(By the way, all images I mentioned have mouse "hover" counterpart)
If you don't want to change the HTML, you can use pseudo-elements:
Fiddle: http://jsfiddle.net/Pq7LC/39/
li:before{
content: "";
background: pink;
width: 20px;
height: 61px;
display: block;
position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
content:none;
}
You can do it with css, no need of images.
http://jsfiddle.net/Pq7LC/40/
Hope it helped you :)
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.
When I have an <a> tag set to a specific image background like this:
HTML:
Click Here
CSS:
a {
background: transparent url(button.png);
}
and I want the background to change whenever a user hovers over the spot, like this:
CSS:
a {
background: transparent url(button_HOVER.png);
}
The hover background image flickers (takes about 1-2 seconds until it fully loads) when a user hovers over the link.
I could save the file as GIF and minify its size and loading time, but that would harm my specific image tremendously (it's big and highly graphical).
That's why I was looking for a better solution, such as perhaps counting on the browsers ability to cache images. Hence would I apply a style to a button like this:
CSS:
a {
background: transparent url(button_HOVER.png);
background: transparent url(button.png);
}
So that the image button_HOVER is first cached. It has seemingly affected the "flickering", but not completely. I thought of maybe creating a hidden tag with the HOVER image, so that maybe the result would be different.
Do you think there's a better way to solve it? (I emphasize I want to keep the file as PNG, it weighs 6-7k). Is my method efficient?
Your solution would be to put both images (hover and active) in the same image file. Positioned on top of each other. Also known as Image Sprites. The browser will load the entire image file. On hover, you just change the background position.
Assuming the active image is at the top, and the hover image is positioned directly below that..your css code would be something like:
a.link {
width:70px;
height:24px;
background: url(image.png) top no-repeat;
}
a.link:hover {
background-position: bottom;
}
Notice background-position. Here I use top and bottom. You can specific exactly in pixels too. The entire image in this example would have a width of 70pixels and height of 48pixels. Some sites put all their small icons into one image. Loads altogether, save on requests too. :)
No need for preload scripts in this case.
The basic options available are to use an html element that's hidden from the viewer, or use javascript.
The html approach is probably the simplest, though:
<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>
with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }
or, with javascript:
(function($) {
var cache = [];
// Arguments are image paths relative to the current page.
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i--;) {
var cacheImage = document.createElement('img');
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)
the jQuery approach was lifted in its entirety from this page: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript.
Though the best approach would probably be, as Lyon suggests, css image sprites.
You should search about this topic "preload images" You will find ways to preload images using css and javascript.
I believe that if you put a hidden image with source equal the src of png images you will use in the css files, this will make the images loaded when the page loads, and CSS work will be just switch preloaded images.