jQuery toggle() breaks floating divs - javascript

I've been searching for hours trying to fix this issue, but it doesn't seem like anyone else has had this problem.
I have two divs, one normal (and inline-block) on the left, and one floated nicely to the right of it. When I use .toggle() on them to hide/show, the floated one reappears below its original position.
Even with all my other code stripped away, this problem persists:
//Html
<div class="tableWrapper">
<div class="redDiv"></div>
<div class="greenDiv"></div>
</div>
//Css stuff here:
.tableWrapper{width:100%}
.redDiv, .greenDiv{width:49%; height:150px;}
.redDiv{
display:inline-block;
background-color:red;
}
.greenDiv{
float:right;
background-color:green;
}
//My two measly jquery calls...
$(" .redDiv").toggle();
$(" .greenDiv").toggle();
Or here on JSFiddle: http://jsfiddle.net/0hxc8rr4/
Note: I tried swapping out "style.display = stuff" calls for the jQuery, and that didn't seem to help.

jQuery will redefine the display property once you toggle. You can simply add float:left to the red block class and it should fix it. Or as mentioned, redefine it after each call. But if you're already floating one element, it'd make sense to float the other.
http://jsfiddle.net/0hxc8rr4/2/

It is simple. jQuery shows the element using display:block which then needs a row instead of a cell.
You can manually toggle it yourself to inline-block
change slideToggle() behaviour to display:inline-block instead of display:block?
(jQuery) Toggle div style "display:none" to "display:inline"
In your case you should just use float:left on the first div.
http://jsfiddle.net/v1etme23/1/
.redDiv{
display:inline-block;
background-color:red;
float:left;
}

Only get the above problem on Mac Chrome (not Safari or Firefox). The below gets it to work on Chrome too;
.redDiv{
position: relative;
background-color:red;
float: left;
}
.greenDiv{
position: relative;
background-color:green;
float: right;
}

Related

Animated CSS transition on a tabbed element

I have a jQuery tabs element with different tab heights. The outer div has dynamic height, but I want it to resize smoothly when the inner elements change tabs.
My current CSS is:
.parent{
width:500px;
background:green;
padding:20px;
transition:all 1s;
}
.tab1{
width:300px;
height:100px;
background:red;
}
.tab2{
width:300px;
height:500px;
background:blue;
display:none;
}
.parent button{
display:inline-block;
vertical-align:middle;
}
This fiddle shows the behaviour: https://jsfiddle.net/mh5b91gx/
I've tried using min-height and max-height but couldn't get it done. Can you guys help me out?
The closest thing I could come up with without changing your HTML is this: http://codepen.io/BenCodeZen/pen/rePLpP, but it's janky from a user's perspective and not something I would recommend.
$('#tab1').on('click', function(event) {
$('.tab2').slideUp(400);
$('.tab1').delay(400).slideDown();
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').slideUp(400);
$('.tab2').delay(400).slideDown(400);
/* Act on the event */
});
The main issue with your code is that you're swapping out entire divs in the process. This means that you don't have a unified container to be smoothly transitioning heights. So the first step will definitely be changing your HTML structure to have a single content div which uses JavaScript or jQuery to change the content out.
Here's an example of what it might look like:
<div class='parent'>
<button id="tab1">Tab1</button>
<button id="tab2">Tab2</button>
<div class="content">
<div id="tab1-content" class="tab-content">...</div>
<div id="tab2-content" class="tab-content">...</div>
</div>
</div>
I would definitely recommend taking a look at the Organic Tabs article that #Asta, but let me know if you have any additional questions!
You can check Organic Tabs on CSS Tricks: https://css-tricks.com/organic-tabs/ .
You can try this:
$('#tab1').on('click', function(event) {
$('.tab2').hide('slow');
$('.tab1').show('slow');
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').hide('slow');
$('.tab2').show('slow');
/* Act on the event */
});

Using JQuery to animate size of div

I am an amateur in Jquery but am so close to getting what I am looking for. I am trying to have a containing div animate to a larger height when an object is clicked. I am using the following code:
<div id="sliderone">
<div id="nav">
<div id="navone" style="text-align: center;">This is a clickable title</div>
</div>
<div id="ourteam">
<div id="title"></div>
</div>
</div>
<script type="text/javascript">
$('#navone').click(function(){
$('#title').html("<img src='http://placehold.it/350x550' alt='' />");
$('.post-8 .content-container').animate({height: '950'});
});
</script>
#navone {
padding:20px 20px;
cursor:pointer;
}
#title {
width:350px;
margin:0 auto;
}
#sliderone {
height:50px;
background-color:#777777;
position: absolute;
margin-top: -500px;
left: 50%;
margin-left: -175px;
}
#sliderone has to be absolutely positioned and so when I try to animate .post-8 .content-container it makes the top longer in comparison instead of making the bottom longer to contain the new content. Can I either animate the negative margin smaller or animate the bottom of the .post-8 .content-container?
Thank you for any help. I have worked hard on this and just can't quite figure out this last problem.
Here is the actual page to see.
http://s416809079.onlinehome.us/wp-login
login:stackoverflow
password:stackoverflow
You might want to try using some of jQuery's slideDown, slideUp or slideToggle methods. Since you are specifically looking to slide the container I imagine this might be more specific to your needs.
See this example based on what you have above: http://jsfiddle.net/82kHV/13/
Also links to jQuery methods:
http://api.jquery.com/category/effects/sliding/
You will set the element's height you want in your CSS. jQuery will interpolate and animated from 0 to this defined value in slideDown and the reverse in slideUp. slideToggle will take initial state of the element and do the opposite or toggle.
I guess you have this situation --> http://jsfiddle.net/z7M2Y/15/ . If that is the case you need to animate too the height for #sliderone:
$('#sliderone').animate({height: '225px'});/*The value you calculate*/
Check this demo http://jsfiddle.net/z7M2Y/26/

Display image left of href hover

So i've got wall of text with links, when hovering over the href it should display a image on the exact same line and always on the left of the full text, so not next to the link itself (meaning background image won't do the trick :( ). I've been tinkering around a bit, but without succes, so hoping you guys can help me out with this one :)
As seen in the second screenshot, "kalender" and "menssana#home" are hrefs and need the same image next to the text. Wether it's javascript or css, any help is appreciated!
Html-example can be found here: http://www.menssanahealth.be/diensten/particulieren/
I would nest a hidden image in the link and create a CSS rule on hover to show the image.
Basically this:
A IMG {
display:none;
}
A:hover IMG {
display:inline;
}
But here is a more fleshed out example using absolute positioning for the image so that it doesn't affect the layout of the link but instead shows up to the left of it.
http://jsfiddle.net/HLKQ3/
You can use CSS :before for this like so
.link:before{
content:'';
width:50px;
height:20px;
background:url('urlToYourFeatherThing.png') no-repeat top left;
position:absolute;
top:0;
left:-20px; // width of image
display:none;
}
.link:hover .link:before{
display:block;
}
Oh, and you may need your .link to be position:relative; so that the leaf is positioned absolutely to the parent.
This has not been tested, if you encounter any problems please let me know.
Good Luck.
#Connor
If you have an span with classname 'leaf' with in the a tag you can write code like below in jquery,
HTML should be like this,
<span class='leaf'> </span><strong>Sauna</strong>
Jquery should be like this,
$("#dienst-content a").hover(
function () {
$(this).find('span.leaf').show();
},
function () {
$(this).find('span.leaf').hide();
}
);
and the CSS,
span.leaf
{
width:50px;
height:20px;
background:url('url-to-leaf-image.png') no-repeat top left;
display: none;
}
Off topic, I have a couple of observations:
the page seems to contain a list of services so using a <ul><li> ... would seem more appropriate markup than <p>-
Some list items have links, others don't it would be more user
friendly to differentiate a list item with a link from a list item
without link -- e.g. use bold text, different color, add an arrow or underline etc
Back on topic:
Using a background image is totally feasible by using a combination of left padding and left negative margin. However if you really don't want to that direction then I would add an extra span within the <a>, and hide it unti the link is hovered.
I've found a solution with jquery :)
You can see it in action here
i've added the following script
<script>
$('<img src="<?php echo get_template_directory_uri(); ?>/images/bloemblaadje.png" class="bloemblaadje"/>').prependTo("#dienst-wrapper a");
</script>
And the css
#dienst-content{
position:relative;
}
.bloemblaadje {
display:none;
position:absolute;
left:0;
margin-left:-60px;
text-align: center;
}
#dienst-content a:hover .bloemblaadje{
display: inline;
}
It might be heavy on a page with alot of links, but this seems the best solution for this design.
Thanks for the many suggestions!

Show div on hover issue

In this fiddle you will fill when i hover on "action" a dropdown is showed.
The problem is when we see the last item it goes below the scroll and it is not seen.
in .scrollable class i have used the position:relative;
.scrollable
{
overflow: auto;
height: 300px;
position:relative;
width:100px;
}
and the child class "drop" has the position:absolute;
i dont want to change the position:relative of .scrollable class and i want the .drop element to comeout of the scrollable on hover and .drop should not be shown below the scroll;
here is the fiddle : http://jsfiddle.net/napper7/XPxsx/15/
THanks in advance!!
here is a working code,i added a bit of js to get the current cursor position
$('.navItem').each(function() {
$(this).hover(function(e) {
$(this).find(".drops").css('left',e.pageX-20);
$(this).find(".drops").css('top',e.pageY);
}, function(e) {});
});​
http://jsfiddle.net/XPxsx/43/
.scrollable
{
position:relative;
height:300px;
width:100px;
}​
I think your best bet is to drop off the overflow behavior. As far as I know, it is not possible to display nested divs outside their parent when it has an overflow value different from visible. Ever other values clip the outside box content of some sort (either by adding a scrollbar or by hiding completely the content)
I edited a jsfiddle that does what you want but without a scrollbar :
http://jsfiddle.net/XPxsx/42/
And here is some documentation on overflow behavior :
http://www.w3.org/TR/CSS21/visufx.html
Anything out of this, will be using js to display the content in a different place DOM wise.
Also, as a more general opinion : it is good to use sass (i guess from css indentation), but even better to order your selectors in a meaning order, that would be from the most general to the most specific (such as html, then body, then div.. in your case .scrollable, then .actionTools, then .navItem..)
hope that helps

implementing a div showing up partially at the bottom inside another div to show up fully on mouse hover

this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});​
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})​
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}​
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow

Categories