By clicking on a button I'm adding new elements to the list. Each element has its own message that is absolutely positioned against this element. This works fine until I add 'overflow:hidden' property to the parent list element. Obviously, the message is hidded. If the overflow:hiddne property must be in place, how can I show message for each new element?
Here is the jsFiddle and the code:
HTML:
<span id='click-me'>Click me</span>
<ul id='list'></ul>
CSS:
#list {
width:100px;
height:100px;
border: 1px solid blue;
overflow:hidden;
}
.option {
width:100px;
height:20px;
border: 1px solid green;
position:relative;
}
.message {
width: 79px;
height: 20px;
background: gray;
position: absolute;
right: -90px;
top: 0;
}
JS:
$('#click-me').click(function() {
$('#list').append("<li class='option'><div class='message'>I'm message</div></li>");
});
EDIT:
I tried playing with overflow-x and overflow-y properties. But somehow it's not doing what I expect it to do. Adding these properties to the #list element:
#list {
...
overflow-y:hidden;
overflow-x:visible;
}
creates bottom scrollbar. Is it expected behavior?
Change height of #list to min-height.
Check the updated Fiddle.
Related
I limited click event to :after pseudo-element using click-event:auto and created a span to bind an event inside the parent element. Why the span does not work?
function toggle(){
var button=document.querySelector('.toggle');
var bar=document.querySelector('.slide');
if(bar.className==='slide up'){
bar.className='slide down';
}else{
bar.className='slide up';
}
}
function click(){
document.body.innerHTML+='<div>Hello</div>';
}
span{
position:relative;
top:90px;
background:green;
cursor:pointer;
pointer-event:auto;
}
*{
margin:0px;
padding:0px;
height:100%;
width:100%;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
pointer-events:none;
}
.slide:before {
pointer-events:auto;
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.down{
transform:translateY(100vh);
}
.slide.up{
transform:translateY(23vh);
}
.slide.up:before{
transform:translateY(3vh) rotateX(180deg);
}
.slide{
transition:transform 0.4s ease-out;
}
<div class='box'>
<div class='slide up' onclick='toggle()'><span onclick='click()'>Hello</span></div>
</div>
The white triangle is .slide:before. I use click-event:auto; on it. I am NOT sure if I should use AUTO or ALL. Then I use click-event: none; on .slide class, which is the red rectangle below it. So now, I cannot click on the red rectangle just the white triangle to make it slide up and down. But I do still want to click on part of the red rectangle to do other things(not sliding necessarily).So I added a span(green Hello) inside the div that is the rectangle+the triangle. I then write the JS code so that if the green Hello is clicked, a div will Hello will be added to the body of the HTML. But it does NOT work.
I learned this span method here, but I dont quite understand it.
A few things:
Avoid events on pseudo-elements
Don't add elements by reassigning the entire body innerHtml - you lose all event bindings on all elements
Try to avoid putting JavaScript in your HTML
//listen for click event on toggle element
document.querySelector(".toggler").addEventListener("click", function(){
this.parentElement.classList.toggle("up");
});
//listen for click event on hello
document.querySelector(".clicker").addEventListener("click", function(){
var div = document.createElement("div");
var text = document.createTextNode("Hello");
div.appendChild(text);
document.body.appendChild(div);
});
html, body{
height:100%;
}
*{
margin:0px;
padding:0px;
}
.clicker{
position:relative;
top:90px;
background:green;
cursor:pointer;
}
.box{
overflow:hidden;
background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
background-size: cover;
background-position:center;
height:100%;
width:100%;
}
.slide{
position: relative;
left:39vw;
width: 55vw;
height: 77vh;
background: red;
transform:translateY(100vh);
transition:transform 0.4s ease-out;
}
.slide.up{
transform:translateY(23vh);
}
.toggler {
cursor:pointer;
content: '';
position:absolute;
top:-3vh;
width: 0px;
height: 0px;
border-left:27.5vw solid transparent;
border-right:27.5vw solid transparent;
border-bottom:3vh solid white;
}
.slide.up .toggler{
transform:translateY(3vh) rotateX(180deg);
}
<div class='box'>
<div class='slide up'>
<span class='toggler'></span>
<span class='clicker'>Hello</span>
</div>
</div>
Even better:
This effect can be done completely without JavaScript. Use sibling selectors, a label, and a checkbox instead. See working demo here
Let's consider there is a style sheet in an html page as shown below
#main {
display: block;
width: 500px;
}
#content {
border: 1px solid #ccc;
}
now I have a situation where I have to update the CSS rule of #main meaning I have to add some css attributes like color, background etc.
So the Style sheet in my html page should be updated like shown below:
#main {
display: block;
width: 500px;
color: #333;
background: #fff;
}
#content {
border: 1px solid #ccc;
}
I can use jQuery css to add CSS rules as shown below
$('#main').css('background','blue');
//but this is not adding #main in <style></style>
//output of above jquery code is:
//<div id='main' style="background: blue"></div>
What I need is for it to add css attributes to a rule in the style sheet (i.e., #main in <style></style>)
I am developing a code editor which is why I face such a problem.
it took me a long time but finally here we go: DEMO
if we click on the #main element the style tag will get changed using the function that we just defined, so if we get the text of the script tag before the function it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
}
#content {
border: 1px solid #ccc;
}
</style>
and then after the function is called it will be:
<style>#main {
display: block;
width: 500px;
height:200px;
background-color:#000;
color:#FFF;
}
#content {
border: 1px solid #ccc;
}
</style>
The Function:
//*styleElem* is the target style tag
//*elemToChange* is the target element that we want to change inside the style tag
//*cssRule* is the new CSS rule that we want to add to the target element
function addCSSToStyleTag(styleElem,elemToChange,cssRule){
var oldStyle=styleElem.text(),
theElement=elemToChange,
position=oldStyle.indexOf(theElement),
cssToBeAdded=cssRule,
closingBracketIndex=oldStyle.indexOf('}',position)-1,
newStyle=oldStyle.substr(0,closingBracketIndex)+cssToBeAdded+oldStyle.substr(closingBracketIndex,oldStyle.length);
styleElem.text(newStyle);
};
$('#main').one('click',function(){
addCSSToStyleTag($('style'),'#main','color:#FFF;');
});
I think you cannot explicitly catch css rules inside the current style, but as a work around you can append another style to the head with the new rules, it will override the existing rules as follows :
var newCss = "<style>#main{
display:block;
width:500px;
color: #333;
background:#fff;
}
#content{
border:1px solid #ccc;
} </style>";
$("head").append(newCss);
Try this
var style="#main{display: block;
width: 500px;
color: #333;
background: #fff;"};
$('style').append(style);
This is assumed that you have only one <style> tag in page
You can apply hardcore css to perticular div...Like this
$('#main').css("background":"blue");
I'd like to achieve a continuous scrolling html page.
I've found this continuous scrolling of a div example, but I am unable to modify the code so it works on a whole html page:
Here is a jsfiddle of my code:
http://jsfiddle.net/howderek/N9PWn/
Any help in pointing me in the right direction is greatly appreciated.
What if you set the width/height of the div to 100% of the space?
UPDATE:
#verticalScroller {
position: absolute;
width: 52px;
height: 98%;
border: 1px solid red;
overflow: hidden;
}
jsFiddle
The naive answer would be to have any content for your page to exist inside the scrolling div.
you need to adjust the width in your CSS.
#verticalScroller {
position: absolute;
width:100%; //set the width to 100% to take over the space
height: 180px;
border: 1px solid red;
overflow: hidden;
}
#verticalScroller > div{
position:absolute;
width:100%; //set the width to 100% there also
height:50px;
border: 1px solid blue;
overflow:hidden;
}
Have you looked at Infinite scrolling?
How can I make the outside div always underneath the current item div. the code works fine but if it has two lines, like the image below.
The outside div would be on the top if I click box6 or box7. If there is a way I could make outside div change the position dynamically?
<div class="container">
<div class="item" data-content="1">1
</div>
<div class="item" data-content="2">2
</div>
<div class="item" data-content="3">3
</div>
<div class="outside">
</div>
</div>
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
Sample online http://jsfiddle.net/nm3Y4/
Thanks a lot for the answers and your time. I think I didn't make it clear, so what I wanted to achieve is that, if you click box1, should looks like the image below
and when click on box6 or box7 should show like below
so which means that outside below current item div
Thanks again
You could change the value of top property of the absolutely positioned .outside element according to the height of the .item box and the top offset of the current clicked item:
$('.item').click(function(event) {
var $this = $(this);
var contentNumber = $this.data("content");
$('.active').removeClass('active');
$this.addClass("active");
$('.content').hide();
$('.content'+contentNumber).show();
$('.outside')
.css('top', $(this).offset().top + $(this).height() + 'px')
.slideDown();
});
UPDATED DEMO.
As a side-note: It's better to position the .outside element relative to the .container rather than the initial containing block.
.container {
/* Create a containing block for the absolutely positioned elements */
position: relative;
}
Also float: left; declaration is redundant for the .outside as it's positioned absolutely.
As per your update, you could relative positioning and add top property in order to position the items (which their top offset is higher than the current clicked item) when the click event is triggered:
.item {
/* other styles here... */
float:left;
position: relative; /* Position the items relatively */
}
$('.item').click(function(event) {
var $this = $(this);
// ...
$('.item').filter(function() {
return $(this).offset().top > $this.offset().top;
}).css('top', $('.outside').height() + 'px');
// ...
});
Then reset their position when the .outside is closed:
$('.close').click(function(){
$('.item').css('top', '0'); // reset the top property/value
$('.outside').slideUp();
$('.active').removeClass('active');
});
UPDATED DEMO.
remove position:absolute and top:80px and add clear:both;
.outside {
background:yellow;
background: #222222;
clear:both;
display: none;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
DEMO
since question is updated, this answer doesnt fit the need,
i leave it here just because it shows behavior of absolute element if no coordonates are given ...
you could reset white-space and not float the divs to keep them on 1 line.
http://jsfiddle.net/nm3Y4/7/
.slider {
margin: 10px 0;
width: 580px;
height: 250px;
position: relative;
overflow: hidden;
}
.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}
.item {
width: 60px;
height: 60px;
display:inline-block;
background:red;
margin:10px;
cursor: pointer;
}
.content {
display:none;
}
.active {
background:blue;
}
.outside {
background:yellow;
background: #222222;
float: left;
display: none;
position: absolute;
top:80px;
width:100%;
color:white;
font-size:20px;
height: 300px;
}
.close {
float:right;
cursor: pointer;
margin-right:10px;
}
.container {
white-space:nowrap;
}
.outside {
white-space:normal;
}
or do not let your box float, inline-block is just fine, and remove the top coordonates, see : http://jsfiddle.net/nm3Y4/9/
I have a series of square divs with text in them, and I need to draw a line across those divs, over the text. Z-Index is not an option. Neither is <strike>, because it needs to extend across the entire div, not just the text.
What I need is for it to extend across the entire div, but to be ON TOP of the text, as if on a different layer, and I am trying to determine if it is possible without Z-Index.
With the help of :after - DEMO
div {
position: relative;
}
div:after {
position: absolute;
left: 0;
top: 50%;
height: 1px;
background: #c00;
content: "";
width: 100%;
display: block;
}
Link To Fiddle
.wrapper {
position:relative;
width:110px;
}
.square {
width:20px;
height:20px;
border:2px solid #000;
display:inline-block;
text-align:center;
}
.strike {
position:absolute;
width:100%;
height:2px;
background:black;
top:11px;
left:0px;
}
what about a background image as a solution?
I mean someCSS Code like:
.DIV.squarestroke {
background: url(img_with-line.gif) repeat;
}
If you can't use text-decoration:line-through it's likely you have padding or margin on your div which is why the line doesn't go all the way across. This snippet will draw a line the width of the div and through the text preserving your padding or margins.
<div style="border:solid 2px black; padding : 100px">
<div class="strike-through" style="border-bottom : solid 1px red; margin-bottom : -12px;"></div>
<div style="text-align : center; padding-left:50px; padding-right:50px; border : solid 1px green;">Lorem Ipsum Voluptatem</div>
</div>
A good old fashion hr might do it:
<hr style="position:absolute; width:50px; top:5px; left:5px;" />