I've been trying a few things but cannot get it to work. I have a div in the right column and I want it to float down to a certain point with the page while scrolling.
<div class="stickyDiv">
<div class="section mod-sticky" style="position: fixed; top: 70px;">
<p>Always float with page</p>
</div>
</div>
Is there any easy way to do this with jQuery? Or just css?
made a quick jsfiddle what I want is that as soon as it reaches class contentb it will scroll with the page
https://jsfiddle.net/agwrbjh8/1/
thanks
I am not sure I understood you. Do you mean something like this:
.mod-sticky {
position: fixed;
top: 70px;
border: 1px solid green;
right: 0;
}
<div class="stickyDiv">
<div class="section mod-sticky">
<p>floater</p>
</div>
dasf asd asdf asdf
<p style="height:800px">Lorem... long text</p>
</div>
I would look at the sticky-kit jQuery plugin.
And you would use it as so:
$('.stickyDiv').stick_in_parent({
parent: $('.content'),
offset_top: 70
});
JSFIDDLE DEMO
Had to restructure your HTML so that .stickyDiv is a child of the content div you intend to stick within, and then also added a margin-left to get it to the right of the content area. Might not work for your situation but I don't see how you can get it to stick how you want with your original markup.
Related
As you can see above, I cannot select the overflowed events on the calendar date. It looks like it's because I have the overflow:hidden/visible toggle triggering on the class of the calendar date: '#cell-shell'.
Here is the HTML code for that specific date:
<td>
<div id="09" class="cell-shell>
<div class="date-num">9</div>
<div class="event-wrap>
<span></span> <!--these hold edit buttons when editor is logged in-->
<span></span>
<div id="e1" class="cell-data">Event 1</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e2" class="cell-data">Event 2</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e3" class="cell-data">Event 3</div>
</div>
<div class="event-wrap>
<span></span>
<span></span>
<div id="e4" class="cell-data">Event 4</div>
</div>
... <!-- pattern repeats-->
</div>
</td>
Here is my current relevant CSS:
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
}
.cell-shell:hover {
overflow:visible;
}
.event-wrap {
position: relative;
display: inline-block;
font-size: 0;
}
.event-wrap:hover {
opacity: .5;
}
Is there any way through CSS or JS that I can prioritize the '#cell-data' elements? I need to be able to click on those events 6 & 7 and beyond, but once my mouse wanders out of the '9' '.cell-shell' box into the '16' '.cell-shell' box, '16' seems to take over.
EDIT: I added more information as requested by david. I thought it was irrelevant but perhaps not. I added the elements as well as the children below them. I also added in the event-wrap CSS
It looks like it's not because you mouse over 16, but because your mouse went between the event divs, thereby touching the 16 div between the event divs.
See the frame below where you're over an event on top of 16 just before you cross the gap:
The way that hover works is that if the mouse is over any sub-element of the element with hover, that hover CSS will continue to be used. But the moment the mouse leaves the border-box of the sub-element AND is outside of the element with over, the hover CSS will stop working.
I bet that if you're fast and accurate enough, you can get the mouse to clip over the gap between frames and keep it open. But your users might not find that useful. ;P
One method that might fix this would be making sure that the event divs have no space between them. That means no margins separating them.
In order to keep your current visual without having to add too much code, you can do something like the following:
...
<div class="event-wrapper"><div id="e1" class="cell-data">Event 1</div></div>
<div class="event-wrapper"><div id="e2" class="cell-data">Event 2</div></div>
...
...where the event-wrapper class looks like:
.event-wrapper {
margin: 0px;
padding: 0px;
}
Another method might be having the whole date box expand its size, but that might require some changes to how the layout works in order to keep it from messing things up.
Anyway, I hope that helps.
Use z-index to give priority to your cell-data elements over '16'.
Find a sample demo of it's usage below:
https://www.w3schools.com/cssref/pr_pos_z-index.asp
Add CSS property z-index: -1 into your css.
.cell-shell {
height: 152px;
width: 152px;
overflow: hidden;
z-index: -1 // Here
}
.cell-shell:hover {
overflow:visible;
z-index: -1 //Here
}
Hope it will work for you.
This is my code jsfiddle. I have three text fields. headline1Txt, headline2Txt and headline3Txt. Right now it is working fine but if i change my headline1Txt to Vintage Lace Turquoise Dress. headline2Txt to SAle Price $135 and headline3Txt to Reg:$50 then my text allignment is overlapping each other and i want my text to appear like this
.
Can anyone tell me what i am doing wrong here?
<div id="mainContainer">
<div id="logo">
<img id="Img1" src="http://i.share.pho.to/cc9794da_o.png" width="50px" height="50px"/>
</div>
<div id="images">
<img id="introImg" src="http://i.share.pho.to/ebe3afc7_o.png"/>
</div>
<div id="headlineText">
<p id="headline1Txt" >Striped Bag</p><br />
<p id="headline2Txt" >$14</p><br />
<p id="headline3Txt" >Sale $25</p><br />
</div>
<div id="ctaBtn">
<button class="btn btn-primary" type="button">SHOP NOW</button>
</div>
</div>
Thanks
The css can certainly be cleaned up. I would try to avoid using absolute positioning as much as possible because it is not as easy to maintain or make changes. In your example increasing the text length of the headlines does not shift the other headlines down, because they are absolutely positioned to stay where they are.
I tried to leave as much of your code as intact as possible and I only made changes to the css:
http://jsfiddle.net/fAsNt/
The main thing I changed was the positioning of the headlines and added a width so they wouldn't overlap with the image:
#headline1Txt, #headline2Txt, #headline3Txt
{
position: relative;
margin: 0px 2px;
left: -150px;
width: 170px;
line-height: 1;
}
In each of your 3 headline text boxes, you specify "position: absolute;" but do not specify the "top:" property. Specify "top" where they should be and you'll be fixed right up.
Here's the js fiddle- note I added "top" at the end of your CSS:
http://jsfiddle.net/rttmY/7/
#headline1Txt { top: 0; }
#headline2Txt { top: 25px; }
#headline3Txt { top: 50px; }
Also, get rid of those <br />. Since you are positioning absolute, I would also recommend using <div> tags rather than <p> tags because you're technically not making paragraphs, you are positioning blocks. The result would actually be the same, but it's a best practice to use for absolutely positioned blocks.
I'm trying to achieve an effect on a webpage whereby I have a semi-transparent overlay over all elements on a page, except for one specific div.
This is an example of my page structure:
<div id="d1">
<div id="d2"></div>
<div id="left"></div>
<div id="d3"></div>
<div id="right"></div>
<div id="d4"></div>
</div>
<div id="overlay"></div>
And here is a fiddle of the above in action. I would like the green div (#d3) to be visible on top of the overlay.
Is there any way of achieving this without adding position:absolute to #d3 or modifying the DOM? I am targeting the latest version of Chrome here and am open to Javascript/jQuery solutions if there is no pure-CSS3 solution available
use position: relative for #d3 for the z-index to work
#d3 {
background: green;
z-index: 9999999;
position: relative;
}
Demo: Fiddle
See this answer
For me, the outline property is the simplest way to add an overlay around any element in CSS.
No need of z-index, just add the following code:
.myElement {
outline: 99999px solid rgba(0, 0, 0, 0.5)
}
I created a demo on jsFiddle.
Have a nice day,
Thomas.
This is the explanation of why this works: "The z-index will only work if the position property is set as well."
see http://webdesign.about.com/od/styleproperties/p/blspzindex.htm et.al.
I have content in a div that I am trying to scale according to a user's preferences. I am using Louis Remi's transform.js to do this.
However, when I do, it pushes the content either way above the top of the div (cutting off content on scale in) or way far down the container (leaving a lot of white space on scale out).
I was wondering if there was anyway that I can push content so that it would affix itself to the top of the div?
Here is a jsfiddle example. Right now it is at a .50 scale which shows content being in the middle of the screen leaving a lot of space on top of and bottom of div.
HTML
<div id="reportContainer">
<div id="zoomMe">
<div id="content1" class="fillerBox"> </div>
<div id="content2" class="fillerBox"> </div>
<div id="content3" class="fillerBox"> </div>
<div id="content4" class="fillerBox"> </div>
<div id="content5" class="fillerBox"> </div>
</div>
</div>
CSS
#reportContainer { margin: 0;padding:15px;overflow-y:scroll;overflow-x:hidden; border:2px solid black;}
.fillerBox { background-color:#ccc;border:1px dashed #000;height:1500px;width:910px;margin:0 auto;margin-bottom:30px; }
JS
$(document).ready(function() {
$("#reportContainer").height($(window).height()-50);
$("#zoomMe").css('transform', 'scale(.50)' );
});
A nice person on one of my other questions actually answered this, but since someone up-voted my question I guess I will put it here as well.
There is a great CSS option to append a transformed element. This is what I ended up doing thanks to the help of a fellow stackoverflow'r.
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
transform-origin: top center;
Working in a hackathon and we are having an issue with our phone mockup. We want to anchor the text stream to the bottom: seems like a great opportunity for position: absolute...right? Well that makes it so that our scrolling doesn't work. Right now it is anchored to the top, positioned relative, and scrolling does work.
Try clicking the "I said..." button a few times. Ideally those buttons should be anchored (along with the text boxes that appear) to the bottom.
This is the temporary URL:
http://gotinto.com/text/
AND a PERMANENT JS Fiddle URL:
http://jsfiddle.net/Qyn7V/
Here is the simple HTML:
<div class="convoPhone">
<div class="phoneDisplay">
<div class="convoCont">
<div class="actualConvo">...(the actual text convo goes here)...</div></div></div></div>
Any solutions? We would be open to javascript, CSS, any combination. Thanks in advance!
Have you tried position: fixed? Observing your link, as a proof of concept, something like this should do:
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
Edit:
Put three place holder conversations as place holders with visibility: hidden (this ensures they occupy space).
<div class="convoCont">
<div class="actualConvo" style="">
<div class="invisibleFirst">
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
<div style="visibility: hidden;" class="textInputCont isaid"><div class="author">Me:</div><textarea class="isaid"></textarea><div class="delete">Remove</div></div>
</div>
</div>
<div class="addLine" style="position: fixed; bottom: 60px; width: 290px;">
<div class="isaid textLine">I said...</div>
<div class="tsaid textLine">They said...</div>
</div>
<br class="clear">
</div>
Then for each of the first 3 real entries, remove one of the place holders. If you want more precision, you can replicate the same place holder effect with padding-top on actualConvo. Just reduce the padding-top by a fixed value until it bottoms out at 0. If you want to make the buttons scrollable, just removed the styling and apply the padding-top at a higher DOM level.
I ended up positioning the buttons absolute, then using a bit of jquery/javascript to make a minimum height. Thanks for your help everyone!
var contH = $('.phoneDisplay').css('height');
if($('.convoCont').css('height') < contH) {
$('.convoCont').css('height',contH);
}