I try to use the spin.js
I want it to pop up in the middle of the div element. So I did set:
position: 'relative'
top:'50%'
left:'50%'
but the top option doesn't work. After analyzing the problem I could break it down to a html/css problem:
<div style="background-color: red">
<div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
1st div line<br>br line<br>br line 2
<div>div line 1</div>
<div>div line 2</div>
</div>
In this example the blue element should be in the middle of the red, but it isn't. and here is the fillde for it:
http://jsfiddle.net/exu77/obcg3cxv/
This is the plunker to the original version with spin.js
http://plnkr.co/edit/qwjArDtnqGZQgbkQiRYt?p=preview
The position:relative must be applied to the parent element, i.e. the div that contains the spinner. The spinner itself needs position:absolute (which is the default). Here is is an updated version of your plunker where the spinner is centered inside the red box: http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview
I was able to get it to work by adding a height to the jsSpinner div.
<div id="jsSpinner" style="background-color:red; height: 100px;">spin in the red part
<br>br line
<br>br line 2
<div>div line</div>
<div>div line 2 </div>
As for why this works? That part I don't know.
Related
I have script which detects two h4 elements and by position absolute it puts lines on them.
how lines look like
if you scroll they start to fill with orange color. But since they are put as position absolute on entire body, the problem is when those elements are going into an DIV with background-color:orange because the lines that are filling are also orange and I would like to make them blue, by adding something like filter: Invert
problem with orange line on orange background
So here is a question, if it's possible to make the line blue only if the lines are placed on that DIV with BG orange?
Maybe somehow it's possible to do it with JS viewport?
I will not add codes here of what I done because it's too long and too complicated.
But here is a short code of what I mean to help visualize the problem:
<div style="height:400px; width:100%;">
</div>
<div style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
So the smaller orange div have border grey to help you see the whole orange div which is placed partialy on other div with background orange. So I want to achieve that the part of smaller orange block become different color for example blue if it's visible on that bigger orange div.
And ofcourse I cannot just put the smaller div inside of big one, because everything is placed with scripts that are complicated so I do not want to rewrite whole code. But if ofcourse if what I want to achieve is not possible then I will need to change whole block to different color and that's it.
SOLUTION!
Ahhh managed to do it with the trick of adding another DIV that detect position top of orange DIV and height of it, and places transaprent div on it with backdrop-filter.
orange line changes to blue when entering orange div
The code without complicated JS that check top position of element.
<div style="position:relative;">
<div style="height:400px; width:100%;">
</div>
<div class="backdrop-reverse" style="height:400px; width:100%; background-color:orange;">
</div>
<div style="height:500px; width:100px; position: absolute; top:100px; left:50%; background-color:orange; border:solid grey 1px;">
</div>
<!-- additional invisible block that changes color of everything on orange div -->
<div style="backdrop-filter: hue-rotate(200deg); width:100%; height:400px; position: absolute; left:0; top:400px; content: ''; z-index:100; pointer-events: none;"></div>
<style>
.backdrop-reverse{
overflow: hidden;
filter: hue-rotate(160deg); /*Just a bit if luck with hue rotation, it creates very similar orange color, but it's not the same, might be problem with different hue rotations*/
</style>
</div>
I follow this tutorial to make Carousel slide .
When I define each item contain image and paragraph as -
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it's work fine (here its jsFiddle) .
But when I reduce it to paragraph only as -
<div class="item">
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
it stop working (here its jsFiddle) .
How could I make it work with only paragraph such that is slide the text each switch ?
The position property of the .carousel-caption was causing the problem, without the image it goes haywire, so set it to static:
.carousel-caption{
position:static;
}
Here's the demo of it working both with and without image:
DEMO
The easiest way will simply to make images that are a background colour. If you want a cleaner way to do it, you can probably achieve the same effect using CSS.
See after removing image and leaving only paragraph
i gave the item container class the width and height of image with a background colour to div to indicate the presence just copy and paste this code in fiddle css section and run to see the change
.item{
height:480px;
width:1200px;
background-color:orange;
}
I'm trying to make a tab menu that sits on the bottom of a div and when a tab link is clicked it slideup with it's content.
Here is what I've got so far. I really can't see why it's behaving they way it is
http://jsfiddle.net/5mVt8/11/
The key bits:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Full code here: http://jsfiddle.net/5mVt8/11/
Is these a bug with having a absolute positioned div inside a relative div with overflow? Can anyone tell me why this doesn't work or how I should approval this?
Remove the #one #two #three from your html.
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Now simply write your animate correctly.
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
http://jsfiddle.net/5mVt8/18/
EDIT: I am sure you could find a cleaner way to write your CSS. All those absolutes and positioning and z-indexes. I would find a better way to accomplish what you want, but that's me.
You have #content fixed height with overflow:hidden and pages on the bottom partially hidden with this overflow. Now on link click anchor works and #content scrolls down to the hidden block top. You should add return false at the end of click event function to prevent default behavior.
Also you have missed the animate method syntax. It should be like this
$(this).parent().animate({'top': '0px'}, 300, "swing");
http://jsfiddle.net/5mVt8/27/
How can I do this with css and jquery ?
As shown on jsfiddle there is a button in the left column. Clicking on this button slide toggles a div in the right column and 2 other pictures appear (picture number 2, picture number 3)
There are 2 things I would like to do :
1st : Position the button exactly at the bottom left of picture number 1. I can't actually do it because I don't know how much text I have in the left column and I don't know the height of the picture 1.
2nd : When the div is displayed or hidden, I would like the button to move with the div. At the end, the button should be at the bottom left of the picture number 3
Can you help me do that?
The html structure is basic :
<div id="col_1">
<p>Lorem ipsum<br />...<br /></p>
<p><span id="button">see more pic</span></p>
</div>
<div id="col_2">
<div id="pic_1">picture number 1</div>
<div id="pic" class="hidden">
<div id="pic_2">picture number 2</div>
<div id="pic_3">picture number 3</div>
</div>
</div>
The jquery is basic :
$("#button").click(function () {
$("#pic").slideToggle("slow");
});
The css is also really simple. You can see it on jsfiddle.
You can do position relative. Here is the demo: jsfiddle.net/ar9UB/5/
Added this CSS:
#button { position:relative; left: -90px; top:-20px; }
and moved the button in col 2.
Hope this helps.
I have a page that static data in it will push a div down to make it longer. But when I use ajax loaded content then the div will stay as big it originally was and it looks like my new content will just overlap it...
I have a setup like this
<div id="wrap">
<div id="main-content">
<div id="content-fill">
<div id="files_left_pane">static content</div>
<div id="files_right_pane">ajax content</div>
</div>
</div>
</div>
#content-fill {border:1px solid #BDBDBD; width:919px;}
#files_left_pane {float:left; border-right:1px solid #BDBDBD; width:100px;}
#files_right_pane {float:right; widht:819px}
the height of the right pane is controlled by the height of the left pane since there is static content in there, mainly my navigation menu.
any advice?
as far as I test it when you add content then the div start from the left side. This happens because you didn't set width. for example add width:200px for #files_right_pane and check the results.
live example: http://jsbin.com/udori5
Set Your div position as relative
<div id="files_right_pane" style="position: relative;">ajax content</div>
Easiest fix is add float:left to content-fill