Prevent jQuery slidedown menu from pushing down elements in other columns? - javascript

My current responsive site has slide down menus. I intend to make it so that as the window gets wider the items organize into columns (1,2, and 3). This much is working but when I slidetoggle an element in the first column, the elements in the first column goes down as well. Sometimes the elements hop from one column to the other.
I just need a general idea of what to do?
the menu items are floated
the menus themselves are not

Give your columns a position of relative with some padding and your menus a position of absolute. Then you can position your menu's above the text in the columns, and they won't push the text down when you use slideToggle()
.col{
padding:20px;
position:relative;
}
.menu{
position:absolute;
top:0;
}
Here's a jsFiddle to show it in action

Related

Scrolling with javascript and 'position: sticky' div

I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r
I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.

Make Menu have a slideToggle Effect and push below elements down

I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...
You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

Create a row of cells (DIVs) using Javascript/Jquery

I'm trying to create a row of multiple divs using Javascript or jquery; say 32 tiny DIVs. Since the size is not fixed, I can simply use HTML. Table cells could also be an alternative, but since I need the click ID, and their color should change later, it is better to go for DIV.
I did it, but the divs are getting vertical instead of horizontal. What I want to do is exactly the notion of Sliding window in TCP. Look at the row of ack'ed packets on top of this simulation: http://histrory.visualland.net/tcp_swnd.html
I want for instance after a button click, the sliding window move to the right one step.
This is my project, simulating the above link for TCP: http://jsfiddle.net/j26Qc/47/
partial code for row of DIVs:
for(var i=1;i<=16;i++){
$('#table').append("<div id='"+i+"'>"+i+"</div>");
}
You need to change the display style of the divs, they default to display:block, so what you are wanting to do is give them inline-block style.
JS
for(var i=1;i<=16;i++){
$('#table').append('<div class="inline" id="'+i+'">'+i+'</div>');
}
CSS
.inline {
display:inline-block;
}
To get them to look like the little blocks in your link, you would need to add additional styling
CSS
.inline {
display:inline-block;
width:20px;
height:20px;
border:1px solid;
text-align:center;
}
note that in your fiddle your .table class is only 150px so this would make some of them wrap around, either make the text and size of the divs smaller or make your .table class longer.

jquery sortables in a responsive layout

I have a 3 column layout that folds down to one column. I want to be able to move div's between the columns. The problem I have is a soon as a column is empty there is no way to move a div back into it.
see here (move all divs into one column): http://jsfiddle.net/65ENw/17/
Putting a fixed width on the columns solves this, but then my layout stops being responsive.
You can set a min-height and min-width on the columns and they will still occupy space when they have no widgets in them.
.widgetCol{ margin:0 1% 0 1%; width:98.0%; min-width:20px; min-height: 20px}
I have updated your fiddle to demonstrate: http://jsfiddle.net/65ENw/18/

Display list item over a div

I have a menu bar, whose menu li stretch down on mouse hover. It pushes sidewards a div below this menu bar div. But I want those stretch down lis to display over the mentioned div, without pushing it sidewards.
You can have a look at what I am trying to tell here.
Anybody got a solution?
http://jsfiddle.net/bpu2r/
I've simply added float: left; to the menu and clear: both; to the container.

Categories