We Keep Coding

Can I make a link fill its parent without using display:block or display:inline-block?

See this JSFiddle
I want to make the .newslink links all the way to the borders of the .content divs.
I have a slideshow of different content that gets messed up either if I set the a tag around the div or if I apply display:block / display:inline-block to the a element.
Right now the links are only around the image and text because of the 15px padding in .content. You can check this by hovering your mouse over the div (near the border) compared to over the image and text area. I want each link to completely fill the surrounding div.
Is it in this case possible to accomplish without setting the a tag around the div or applying display:block / display:inline-block to the a element?

Working Fiddle: http://jsfiddle.net/8tqryvu5/
Firstly, let's get rid of the Table markup as you're not marking up a table.
<div id="tableNews">
<div class="cell2">
<div id="slideshow">
<div class="content">
<a href="#" id="rightLink1" class="newsLink" target="_blank">
<div class="picDiv">
<img id="rightPic1" class="pic2" src="http://static3.businessinsider.com/image/5238c9c5ecad047f12b2751a/internet-famous-grumpy-cat-just-landed-an-endorsement-deal-with-friskies.jpg"/>
</div>
<div class="text">
<h2 id="title1">title 1</h2>
<p id="rightBoxSubText1">asdasd</p>
</div>
</a>
</div>
</div>
</div>
</div>
To achieve the effect you should apply the padding to the anchor link as this wraps both the images and text (essentially forming the border). Here's the part to take note of:
.newsLink {
display: block;
padding: 15px;
}
As it's an inline element you will need to set it to display:block in order to make it wrap the elements inside it. If you correctly apply the style to the surrounding elements then setting it to display:block will not effect the layout.
Hope that helps.

I am not 100% sure that I got right the whole thing but I think you can achieve this by using
.newsLink{position:absolute;top:0;left:0;bottom:0;right:0;background:red}
It will take the wodth of the slideshow, which is the relative element. If you want it to take the size of the .content and not more you will have to add a wrap in display block around you tag
Here is a jsfiddle: http://jsfiddle.net/8c041xy7/5/

You just need to absolute position anchor tag
.newsLink {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

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/

Two div overlapping with variable height = without height on container

It is quite easy to make two div overlap when the size of the container div is known but what if the div heigh cannot ?
I tried to do it without manipulating container height:
http://jsfiddle.net/AJfAV/
But #text2 go over #text3 and do not "push" it.
How can the #container be resized automatically ?
I manage to achieve my goal using jquery ui but I feel this is not an elegant solution:
http://jsfiddle.net/AJfAV/6/

Is this what you need?
Updated fiddle:
I'm setting height to the default, auto, using jQuery, like this:
$("#container").css("height", "auto");
You can also set: height: auto; in CSS.

Do you need position:absolute? You can use absolute positioning if you don't want to do any arrangement, but a placement. The absolute positioning takes an element completely out of the flow of elements. They know nothing of its existent.
You may use floats and a technique to enclose floats. I'm using clear:
.cl-left {
clear: left;
height: .1px;
font-size: 0;
line-height: 0;
}
Don't forget to add <div class="cl-left"> </div>.
In addition, a negative margin is used. Therefore, #text2 is nailed to the right.
http://jsfiddle.net/AJfAV/7/

this can be solved if you removed absolute positioning of #text1 and #text2.
and make #text2 overlap #text1 by making both float:left and set margin-left:-30px for #text2.
now let's test it: http://jsfiddle.net/RPe4H/
the problem now is that when #text1 is toggled, #text2 will float to top left of #container, this happening because JQuery set display:none on the element when toggling is done.
now to solve this, put #text1 and #text2 inside containers with same width, so #text doesn't affect the flow when it is set to display:none, also you must set min-height:1px on the container of #text1.
now it is working as expected http://jsfiddle.net/MyyF6/1/

Disable mouse scroll when overflow-x: hidden [CSS,HTML]

PROBLEM:
The contents of my div are positioned 'absolute' and the width of the contents are larger than the div.
As required the "extra" contents are clipped using "overflow-x: hidden".
Although, if I try to horizontal scroll using the mouse-scroller, the content get visible.
How do I not let this happen ? I am fine with using a JS or/and a CSS solution
e.g code
<body width='1000px'>
<div style='background-color: blue; width: 1200px'>contents</div>
</body>
Thanks !

I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.
#wrapper {
position: absolute;
width: 100%;
overflow-x: hidden;
}

I think the default behavior for the document body is to allow scrolling of content that is too big for it. This seems like it might not be too easy to work around.
Instead of specifying a width on your BODY, you could try using one more DIV and putting the width on that instead.
<div style="width:1000px;">
<div style="width:1200px;"></div>
</div>
Is there a reason you have to put width on the BODY tag?

You must use
$("element").on('mousedown', function(e) {}
Just change live to on

Change the scroll of an hidden div

I have an hidden div with a fixed height and a scrollbar. I would like to change the scroll position, but the browser won't le me do it, as the div is hidden.
The scrollTop property will stick to 0.
Also, I don't want to show and hide the div back, which causes flickering.
If anyone knows how to do it, it'll be really helpful.
Thanks!

You can save the scroll using jQuery's data function.
function SaveScroll(val)
{
$(the_element).data("Scroll", val);
}
function Show()
{
var element = $(the_element);
// prevent from showing while scrolling
element.css
({
position: "absolute",
top: "-50000px",
left: "-50000px",
display: ""
});
// Scroll to the position set when it was hidden
element.scrollTop(element.data("Scroll"));
// show the element
element.css
({
position: "",
top: "",
left: ""
});
}
This might do the trick
You maybe can just use visibility: hidden instead of display: none. The visibility keeps the element where it is. I believe it is the exact same thing as opacity: 0, but it is a cross-browser solution.

To prevent div flickering and fix <div> unavailability for scripts you can use position hiding instead of "display: none;":
.hidden {
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}

My question was not complete. The div is not hidden on his own. It's part of a container div, which is hidden. The inner div displays with his parent.
<div class="container hidden">
<div id="some_div">Content</div>
<div id="my_div">I wanted to scroll this one</div>
<div id="other_div">Content</div>
</div>
We use jQuery came up with a custom "onShow" event.
So now we can do this:
$('#my_div').bind('show', function() {
handle_scrollTopOffset();
});
When the show event is bound, it adds the class .onShow to the div. And the jQuery.fn.show() function has been overridden to trigger the 'show' event on the childs which have the .onShow class.
Thanks everyone for their suggestions. I'm sorry I provided a uncomplete question. I'll give all the details next time.