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.
Related
I am trying to build a toolbar with search functions in angular.
For example :
and this divisions are like:
<div class="toolbar">
<div class="search">search field</div>
<div class="otherElements">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
</div>
Here the .search will remain hidden. If i click on search-btn then .search will show up which will cover the whole toolbar. I can hide the div on button click by using [hidden] but the problem is .search doesn't cover the whole place.
Now it is something like :
if I click the search button :
what I want is :
I want the search bar cover the whole .toolbar if search button is pressed.
I have less knowledge of css
Here is a minimal example
Try using Angular ngIf instead of using css classes when trying to show or hide elements depending on some condition, like this:
<div class="toolbar">
<div class="search" *ngIf="!searchItem">search field</div>
<div class="otherElements" *ngIf="searchItem">
<div class="search-btn"><button>search</button></div>
<div class="bookmark">bookmark_icon</div>
<div class="otherIcons">other icons</div>
</div>
In your example, you would also have to put a width 100% on the .input element to make it cover the whole site, like this:
input: { width: 100% }
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.
I have a simple page with 15 elements in the Nav bar (only 4 in the jsfiddle example to keep the code short).
I have a javascript that moves the border-bottom display on click on the nav bar elements but I would also like the content of the div underneath to change based on which nabber item is clicks.
This is the jsfiddle.
Ive tried getElementByID but I somehow cant seem to change the class under my #tabs-content div...
I would like a javascript loop that changes the content of each section element's class from hide to show or show to hide depending on what the content is.
This is the o'clock event in my
<li class="tab-current"><span>Dashboard</span></li>
and I would like it to change the class from hide to show for id=section2 and from show to hide for section2:
<div id="tabs-content">
<section id="section1" class="show">
<p>1</p>
</section>
<section id="section2" class="hide">
<p>2</p>
</section>
</div>
Any ideas please?
Cheers,
M.
Is this what you are looking for? Since you have the id of each section in the href you can pull that to load the appropriate one:
JS
var currentTab = $(this).find("a").attr("href");
$(currentTab).show().siblings("section").hide();
Change CSS (unless you want the elements to take up space on the page its better to set to display: none):
#tabs-content section.show {
display: block
}
#tabs-content section.hide {
display: none;
}
JSFIDDLE
I have 2 types of divs
<div class="target_div" id="t1"> </div>
<div class="target_div" id="t2"> </div>
<div class="target_div" id="t3"> </div>
<div class="target_div" id="t4"> </div>
<div class="child_div" id="c1"> </div>
<div class="child_div" id="c2"> </div>
<div class="child_div" id="c3"> </div>
<div class="child_div" id="c4"> </div>
Using Jquery , say I want to position c1 over t1 , so that their top left corners match always , how do I go about doing this ? I want c1 to stick to t1 no matter what ... page resizing , scrolling.. in all cases .
I am creating a card game , and I want to drag drop and place the cards from the footer and place in the divs numbered 1-13 . Hence the question.
In the picture , t1,t2... etc are the divs with numbers 1-13 . c1,c2 etc are the cards lying on the footer.
Just set your card to position absolute with CSS and then use this script :
var offset = $('#t1').offset() //example
$('#c1').css({
'top' : offset.top,
'left' : offset.left
})
add position:relative; to the target_div class.
when you'r droping a child_div in target_div, move the child_div element to be a direct child of target_div (DOM manipulation is very easy using JavaScript & JQuery like this), then add position:absolute; top:0; left:0; to the specific child_div being moved.
I have a div that has CSS as following,
<div style="overflow-y:scroll; height:100px;"> long Text....</div>
The issue is long text is shown and vertical scroll bars shown but when browsing the page div is scrolled to bottom and end of the of the long text is shown instead from beginning portion of long text.
Any way to fix this ?
Thanks
Do something like this :
<div style="overflow-y:scroll; height:100px;">
<div style=" height:500px;">
long Text....
</div>
</div>