I am new at jQuery, and I am trying to do an effect.
The effect consist on a slide in to a visible div. I need the children to be visible when it enters the div, but just the words that are IN the div zone.
Is this possible?
I've been searching for a long time and I have not found anything.
I attached an example image.
You should use overflow: hidden; in your CSS.
Here's a guide to the overflow property:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
It has examples at the bottom if you're not that used to using CSS
Related
I have 2 divs on a page and the first div has text content only.
Currently, when the content of the first div overflows it gets truncated since the CSS for the first div is:
.one {
overflow: hidden
width: 100%;
white-space: nowrap;
}
But on an overflow, could I make the overflow text appear in a 2nd div?
For example, let's say the text content in the first div is "Hello there" and it displays "Hello" but "there" is cut off because of overflow hidden, can I make "there" appear in a 2nd div?
I'm sure this is not out the box behaviour but I wondered if its possible or if anyone knows a lib to do this. Thanks.
The native capacities of CSS do not allow for this kind of behaviour, since it is quite special.
If you want to manipulate the text so that it gets displayed in different parts of your DOM, depending on a determinate critera, you will have to use Javascript to do so.
Use Javascript to create a kind of parser that detects if the text matches the criteria needed to separate them, and if it does so, manipulate the content so that it is displayed in the correct element.
EDIT:
If what you are trying to do, though, is basically format differently the first line from the rest of the text, what you might need is simple the ::fist-line pseudoselector.
This way you can set the first line to have a determinate size, color, etc.Notice though that only a certain amount of properties can be applied to this selector.
I had this exact problem tonight. I have 2 divs side by side, I want the text of the first div to spill over into the 2nd div if needed. I solved it with z-index, make the div with the text that spills out have a higher z-index than the adjacent one that you want to spill over.
I'm writing in angularJS and I couldn't find a comfortable solution for this issue-
I have a div element with overflow: hidden property (since i'm using internal scrollbar) and inside that div I have a dropdown menu, triggered by a button click.
unfortunately, the dropdown in partially hidden (since it is exceeding the borders of its div parent.
The best solution i've found so far is to add the popover dynamically to the body and calculate its position for every button click, but it is a bit complicated since i'm also using a scroller...
Any help would be appreciated.
Thanks!
Tammy
Normally you shouldn't be able to do it without either removing overflow: hidden; property, or use absolute positions for your div and dropdown menu, which can be a bit tricky (make some search, there is a lot of topics on Stackoverflow).
But you can achieve it with position: fixed;, knowing that it will depend on the browser ; see a working example : http://jsfiddle.net/Nf7u4/
I have a div inside of Fancybox that I want to overflow over the edge of the fancybox window.
The structure of the page looks like this:
<div class="fanybox">
<div class="overflow">
Test
</div>
</div>
I want .overflow to flow over the edge of the window. Trying to change the z-index of .overflow to something higher than 8030 (the default Fancybox value) does not work, and yes, the div is positioned absolutely.
Is there anyway to fix this? I can provide an image of what I'm trying to accomplish.
I haven't used fancybox, myself, but playing around with the chrome console on their demo page I think I got the effect you are looking for.
-Drop out the overflow:hidden; on #fancybox-content.
#fancybox-image (or whatever your container is){
.
.
.
position:relative;
right:50px;
z-index:9000;
}
That's all it took for what's on their demo page. Should absolutely be doable as long as your content's parent isn't positioned statically, and the overflow isn't hidden. I'd probably position it relatively (not absolutely) if I understand what you are trying for. Hope that helps.
EDIT
Alright, I downloaded and got a bare bones page up using fancybox2 from the link provided (because apparently I have too much time on my hands :-). Using all their default values, all I had to change was the jquery.fancybox.css
.fancybox-inner {
position:relative;
right:50px;
}
and the image floated outside the container div. If you are trying to move a separate div or something you added, principles are the same. But it DOES work... Goodluck.
If the overflow element is inside the fancybox, you won't need any z-index at all. Every non-static-positioned element generates its own stack, and relative-positioned content inside a fancybox will easily overflow its outer elements [Demo].
I have code working on all desktop brosers, but in mobile it has a bug.
The lines are hr elements and the square in the middle is a div. The div has position: relative and fixed width and height. I don't use z order.
On mobile all I can do for now is display the background of the div element with certain color, and I can see its indeed occupying the space. I also see in this case, where I use background color, that the hr appears behind it.
Additional information which could be useful: The div in the middle is part of an horizontal ul element, which contains list images with items and also text. Also called content slider ;)
When I initialize the slider with some image slides in it, on mobile, the layout is always displayed correctly. Also when I'm viewing only content slides. But when I put only content slides from the beginning, this error appears.
I don't know what it is... tried getting this behaviour with desktop browser, to find the cause, but didn't success. I don't know why the hr goes there. There's no relation with the content in the slide. The position where the hr appears is somewhere in the middle, between the text...
Thanks in advance.
Without seeing any of your code, a "best guess" based on past experience is:
It looks like you might have floated content inside of your slider, and the slider itself is not "cleared".
If you have any floated content inside of the slider, make sure the outer slider div is cleared.
I want to write a jQuery plugin with some visual effect for selected divs.
Integrating a plugin would look like so:
$('.myclass').mypluginfunction();
Visually it would be a transparent div over the whole element, with moving background.
Is it possible to dynamically add divs without destroying e.g floated divs?
I know that the solution would be adding an absolute position to div with bigger z-index.
You don't even need to tinker with the z-index. An element lower in the source will overlay content before it. Set your elements to position: relative and append an absolutely positioned div with width and height set to 100% - this will effectively overlay it.
Get yourself Chrome (or Firebug) and play with $.append() in the console:
$('*').css('position', 'relative').append('<div style="position:absolute; width:100%; height:100%; background: #F00; opacity:0.5;"></div>');
This will position every element on your site relatively, then append an absolutely positioned div with a red background. You should see every single element on your site being overlayed by it.
Of course this is going to explode, a little, but it gives you an idea of how easy to use this technique is.