I've seen this question asked several times but haven't seen any answers.
I have a ul that I'm expanding and collapsing using slideToggle() with jquery.
The code is simple:
$('#leftMenu li a.moreLess').click(function() {
$(this).next().slideToggle('normal');
});
With markup of:
<a class="moreLess">Click here to see more</a>
<ul>
<li>something</li>
<li>something else</li>
...
</ul>
I have a button with a class of .moreLess and when it is clicked the list below it should expand or collapse. For some reason in IE 7 all of the content is disappearing once the list is fully expanding. When it collapses, the content appears again until the list is fully closed.
I'm not sure if this is something CSS related, but I was hoping someone might have run into this before.
Thanks in advance for your help!
put a zoom:1 property. it works with position:relative.
FYI the problem was with CSS positioning on the elements inside the UL that is being toggled. Once I removed any relative and/or absolute positioning on those elements, the problem no longer happened.
put
overflow: hidden;
for the div in which you have the content, that gets messed up. Works for me, but still it's and IE bug...
in my case the content loaded with slideToggle was "shifted" down creating 2 empty space (only in IE7)
i solved with this css:
form {
margin: 0;
}
Related
I'm a designer, have only a slight idea about jQuery. But I love learning :) So I decided to do the below thing myself, and I can't quite get it to work.
My idea is to have a slider with actual slides as next/prev buttons. So I can go to next slide by clicking the actual next slide - the same for previous slide. I guess the picture below shows what I mean.
Desired effect
I've tried to do it this way:
assign a class .main to the main image
assign a class .prev to the partially hidden image on the left
assign a class .next to the partially hidden image on the right
And when I click .next, I change classes .main > .prev, .next > .main, .next +1 > .next.
Now I can do it one step up and it works, the classes change and it works fine. But then when I click the now-.next class, jQuery seems to not recognize it's .next now and responds to it as if it were still the .main class. The updated classes don't respond (the now- .main class still works as .next, as if jQuery was not reading the change).
Here's the HTML:
<div class="view">
<ul>
<li class="left" data-id="1"></li>
<li class="main" data-id="2"></li>
<li class="right" data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
</ul>
</div>
And the script:
$(".next").click(function(){
$(this).prev().removeClass("main").addClass("prev");
$(this).removeClass("next").addClass("main");
$(this).next().addClass("next");
$(".view ul li:first").animate({marginLeft: '-=57%'});
$(".view ul li.main").animate({marginLeft: '-=15%'});
});
I guess it's toddler talk for you, but perhaps you could help me get it to work. How would you come about the matter? Any ideas?
Big thanks up front!
Cheers!
It is not really toddler talk because there are a few pitfalls you need to be aware of.
First of all, the click handler will not work for the new .next this way.
You need to use
$('body').on('click', 'li.next', function() {
instead to make it work for dynamic content.
Another problem is that you forgot to remove the .prev class
$(".prev").removeClass("prev");
Another small mistake is: $(".view ul li:first").animate({marginLeft: '-=57%'}); which always takes the first element, but after the first slide it should take the .prev instead. (so change it to li.prev).
I guess btw that you use class="prev" instead of left (typo in question).
See the full code here:
http://jsfiddle.net/a8Lf9r68/3/
And as #Mō Iđɍɨɇƶ says, you need some additional code to handle the last and first element clicks. But that depends on what you want, and I see it as outside the scope of the question.
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 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>.
If you look at the video here: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - you will see the problem in action. Basically, I have something along the following:
<section id="sidenav">
<h1>TEXT HERE</h1>
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div id="tab"></div>
</section>
Sidenav is absolutely positioned, like this:
#sidenav {
position: absolute;
top: 200px;
left: 0px;
width: 770px;
padding: 30px 0px 20px;
background: rgba(255, 255, 255, 0.85);
-webkit-transition: left 0.75s ease-in-out;
-webkit-backface-visibility: hidden;
z-index: 10; /* This fixed it. */
}
#sidenav.hidden {
left: -768px;
}
I have the following jQuery:
$("#tab").click(function(){
$("#sidenav").toggleClass("hidden");
});
However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <li>'s.
Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.
Thanks!
Andrew
EDIT WITH FIX:
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
I would prefer to post this as a comment, but since I'm a newbie here, my only option is posting this as an answer. In the video example you posted the hover over the list elements allowed for the display of the arrows, but they did not go away on mouse out. If you are trying to do this purely with css and not have the latent images, you should use hover.
That is detailed in this post:
Using only CSS, show div on hover over <a>
That way, if you hide the arrows as the mouse leaves the list element, there will not be any arrow to stay behind when the list slides off the page to the left.
Sometimes this works: make the parent position:relative its like webkit's version of the old ie haslayout bug.
from the markup you have given it looks like the class"hidden" will also take your 'nav' div with it (it is inside sidenav ) - I imagine that would cause some quirky
As a rule of thumb
markup the content
style up
add the interactions ( click events and behaviours )
THEN add your final interaction candy ( easing etc )
( doing this you should identify which part is causing the problem in the ui )
Fixed it by removing the z-index style from the parent and giving a z-index higher than 0 to the fixed element.
Hope this works with others.
I've fiddled around with some mega menus, but I can't get them to use a fixed position for the drop down content. All of them shows the content like this:
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
But I want it to show up like this (no need for the fancy effects though):
simplifiedsafety.com/
I think I got it fixed, with the code HerrSerker posted
Working code for others:
http://jsfiddle.net/aT3nQ/embedded/result/
This doesn't use js or jQuery though.
Drop the position:relative on th li, add position:relative to the ul and give position:absolute;left:0 to the .sub