here it's the website: http://www.webkunst.comeze.com/test/
If you click on the left on artworks, it loads via ajax the page content (the items that appear on the right). The problem I have is that when I hover over the items, it does some kind of strange behavior, for example if I hover over the 4 to 9 items, it shows the hidden text but over the first three items, it's really strange.
This is how I do the effects:
To show the text, this is on my main js:
$(function(){
$(document).on("mouseover",".item",function(){
$(this).find(".art_title").fadeIn(200);
});
$(document).on("mouseleave",".item",function(){
$(this).find(".art_title").fadeOut(200);
});
});
To do the black transparent hover effect i'm using this tutorial :
http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
Which uses css with .item .mask
and this is my markup:
What i'm doing wrong, why is doing that behavior?
I have to add that the effects works nice when the page it's not loaded via ajax.
Give your .item elements position:relative css.
Your absolute .art_title elements are aligning to the top of the page (instead of to the top of the .item
Related
I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.
I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.
In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul>.
Is there something I can do to position two images on top of each other, within the same <li>? Or another(better) way altogether to accomplish this? Any help is appreciated.
DEMO
You can get rid of the second <ul> by putting the two images within your #menu1, and then adding this few properties to your CSS:
#menu1 {
position: relative;
}
#hovbutton1 {
position: absolute;
top: 0;
}
That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.
Here's the jsFiddle, hope it helps.
I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page.
The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video.
I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden.
overflow: hidden;
JSFiddle to further show my problem.
How could I possibly fix this / what are possible ways to get around it.
Try adding this to your css
.accordion-heading + div.accordion-body {
position: static;
}
Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/
If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static.
For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.
I used jQuery shown here (https://stackoverflow.com/a/6967175/1130782) to get the links on my page to show/hide 3 different divs, as seen here: http://ikstudio.squarespace.com/lightfield/
I needed all of the divs to be hidden initially, so I removed the #showall function and added
jQuery('.targetDiv').hide();
to hide all the divs initially. Doing this broke the javascript gallery I am using inside of .
I am assuming that this is because the page loads with that div hidden and the gallery script can not properly position everything it needs to.
Is there anyway to resolve this?
Thanks
Can you not hide them with CSS?
.targetDiv {
display: none;
}
I want an image, that when pressed, shows another image apear from the left of the screen to a point in the background image. I then want to zoom in on that image and make a modal box apear. How can I do this?
The point in the background need to stay the same. When I resize the browser it needs to appear at the same point.
See a working demo of the following code here.
The first part of your problem can be solved using position:absolute within a position:relative container that holds your background image.
#wrapper {
overflow-x:hidden;
width:100%;
position:relative;
}
#absSlide {
width:100px;
position:absolute; top:200px; right:-100px;
}
Make sure the wrapper is as wide as the window and that the overflow-x:hidden so that the slide in div isn't visible before the click. The slide in will be positioned just off stage to the right and top:XXXpx where XXX is the distance from the top of the page where your background element is. Your jQuery would look something like this to animate in the hidden div on click:
$('#showSlide').click(function(e){
e.preventDefault();
$('#absSlide').animate({'right':0},450);
});
You should be able to modify this code so that it works on the left side instead and animate the left property in the jQuery. I didn't want to make it too easy as your question was very general. You should ask a separate question for the rest of your problem after you share the working code for what you're able to implement on the first part.