I don't know if anyone has already asked about something like this but I've been searching and I didn't find anything about this issue.
Some div is shown first and the others appear after a transition with JS. Inside one of these divs, I have an inline SVG. When the first div loads (the one that has the SVG inline), it appears OK like in this image:
https://drive.google.com/file/d/0B-1un9u8DWH-UExQeXpQOXJBMzA/edit?usp=sharing
But, when the div that has the inline SVG appears only after some transition, it appears this way:
https://drive.google.com/file/d/0B-1un9u8DWH-U0RHMnRoV3Y4OE0/edit?usp=sharing
The divs suffering transitions are the ones that hold the entire blocks (other than the parent div's block with the svg inline). What seems to happen is that the fill of the svg that is called by url(#idofgradient) is not found, nor recognized. And the fill that only has #F7F7F7 called works fine (the line part of the SVG on the middle of the image).
I have no idea what is happening in this case.
If anyone can help me, you have my thanks.
It will be nice to see some code, but I think that the problem that you are having is related with the inline fill. Remove the inline fill and apply the fills with css (if you are making fill transitions).
.class{
fill:#aaa;
}
.class:hover{
fill:#fff;
}
Related
Why does removing the "float:left" from an element make the bounding box suddenly increase in size? Ideally, I would expect that wherever the elements are floated inside the box, the size would remain consistent.
UPDATE: I've included detailed images which show both the problem & the expected behavior. I've also pasted the CSS & HTML involved in the following paste-bin:
http://pastebin.com/bYMQR98p
In real life, you can still see the issue at the link below (which will remain online for a good time to come). Just remove the "float:left" from the element "pag pag-inner":
http://www.axonnsays.com/page/2/
Images with the issue:
Correct (with "float:left" removed)
Broken (with "float:left" present)
you can put float:left in your ul class="pag pag-inner".
In one of my projects, I am replacing the default cursor in the browser with an SVG one. I am appending this SVG cursor via jQuery. This works fine, but I want to change the cursor when it hovers over links, and right now, nothing I have tried has worked.
I think it is because even though the cursor has a position of fixed and a high z-index value, it cannot tell what it is hovering over because technically it is below the content.
Does anyone have suggestions?
EDIT: Right after I posted this question and after I included a JS Fiddle in the comments, I changed my code to make the cursor appear before the content. The issue remains, however.
Look above in the comments for #mcbex's JS Fiddle! Apparently, one does not simply add a class to an SVG, one must customize it with fill colors.
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
I'm working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I'm having two problems:
The fades on the image and div don't seem to move at the same speed even though I have them set to.
I can't figure out how to get the div's to only show for the image you hover over. If I could type ("this" div.info) as an object, it would work fine. Is there a way to do that?
I can't get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.
Result: I have found the solution. I was able to get it to work by using lthibodeaux's suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/
Edit:
I found out the image and the div animations really were moving at the same speed, just the image only had it's z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.
The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info
Check out the final version here: http://jsfiddle.net/tV9Bw/
This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.
Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I'm new to this site so I wasn't sure how to properly format my question.
and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn't know how to fix.
You've got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.
$("selectorString", scopeObject)
In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:
$(".info", $(this).closest("li")).fadeIn(1000);
Change $(".info") to $(this).find(".info") and all will be sweet.
Yes you can use something like $(this).find(".info") as mentioned by Bundy
but as The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.
You can also do something like this:
$(".info",this)
I am trying to generate a html page with css that works as an image preview kind of thing. An example of this is here:
http://www.nomorepasting.com/getpaste.php?pasteid=22463
however this approach has several drawbacks. One of which is the text must always be smaller than the images. I tried using a different attempt here:
http://www.nomorepasting.com/getpaste.php?pasteid=22464
But could not get it to work. Would someone please be able to show me how to modify the code at the second link to work as the first, or to suggest an overall better method?
The error in second one is you haven't specified the height attribute.
Try the following, it worked for me.
.class1{
color:#000;
background-image:url('images/2.jpg');height:1000px;
}
The reason you are not able to see the back ground image is, since there is nothing inside the div, and the height is not specified the height is 0.
Try putting a few elements in the div and you will see that the image is being displayed.
Ramjee