I have a fixed div to left that fills the left site (ca 20% of the total width). Its a navigation menu. To the right I have a Span with my Site content wich is scrollable.
I want to be albe to close the menu to the left, when its closed I want the width of the content span to be 100%.
I'm using Rails 4 and Bootstrap 3.
Don't know much jquery/javascript, could need a clue or a push in the right direction. Thanks!
since you have Bootstrap in picture, you can use Jquery to do the magic for you. Hide the left div using the id something like this $('.target').hide(); and than increase the width of the corresponding right div to 100% width. something like this:
if you td is
** td id="myRow" /td **
than set the width to 100% using CSS : $('#myRow').css(width,"100%");
this should work.
Related
I want to make a slider with a scrollable right-justified image and text like in the image, how can I do this? https://prnt.sc/26mtj6v
I am sending a sample site and picture, you can check it. The image I sent has a scrollable image and a box section for text. Half of the 2nd image will be visible and when you slide to the left in the slider logic, 2 images will come to the front and the text inside the box will change.
https://prnt.sc/26mtuw6
Although not exactly the same, our latest project section on this site is an example
http://paul-themes.com/html/liarch/home-default.html
If you wish to make a design like the img below :
For the images of my code below, I'm using Bootstrap 5.1.3 (the class names are mostly from the framework)
1) you will need to use some display: flex on a container in order to have elements in a row and next to each other (create it in your CSS to use that, if you're not using the Bootstrap Framework). Also, add a width:100% on that container in order for it to take the whole space (it's the w-100 class from Bootstrap, or else, add it in your personnal CSS - here 100% is 100% of body)
2) you will need to make that container scrollable with a overflow-x:scroll
3) you will need to create a block (div) for your title and paragraph that needs to be in position: absolute and give it top/bottom/right/left coordinates
5) you will need your container to be in position: relative, so the title/paragraph (step 3) is placed depending on the container
6) you will need to give your imgs a width sufficiently big enough for the scroll to actually start working (you need the elements inside your container to be larger than the container's total width so it becomes scrollable)
This is a quick example I made :
Here is the code of my example
HTML :
CSS :
Let's assume I have a tree grid with a single column, the treecolumn. The width of the panel is 200px, and when expanding, some records have a wider text than 200px. Currently, Ext will apply an ellipsis property on those cells. What I want to do is to show horizontal scrollbar in the bottom which will update at every expand/collapse event. To accomplish this I used column autoSize() function which increase the column size to fit the content and automatically show the scrollbar in the bottom. But, increasing the column width increase also the column header width, which I don't want. Is there a way to keep the header width at 200px and increase only the column content width, keeping the scrollbar in the bottom?
Thanks in advance!
Eventually I found a way, but as #Alexander suggests in his comment, I had to enter the Ext code and mess with it. In fact what I've done was to remove the horizontal scroll partner corresponding to header as follows:
var headerScroll = myTree.getDockedItems()[0].getScrollable();
mytree.getView().getScrollable().removePartner(headerScroll, "x");
removePartner() is a private function so I should not use it, but in this particular case I don't think will harass the rest of the code.
One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.
I'm looking for some help with the position of my nav. I'm using the jquery.pin.js script to make it sticked within a container. That works.
But I would like to attribute a top at 50% of the windows when scrolling on the container and not just a padding value. Something like that :
top:50%;margin-top:-40px;//half of nav height
A basic Fiddle here without top value : http://jsfiddle.net/vdqfvqh5/
An image of the nav behavior if it's helped : link (to dropbox)
Thanks a lot for helping !
I have a div (the green one) positioned in the middle of the window but I want that when I resize the window, this div ALWAYS respect a margin (the height of the logo and the footer).
I really don't get it. Could anyone have a look at it? The proyect is this one: http://sfrpsicologia.com/inicio.html
Thanks for everything
give ol & li width using %