I'm building a seating application using jQuery. I have tables with chairs around them, which may have guests seated at the chairs. Each table has a wrapper div which is draggable. Inside the table are any number of chair div's. Inside any chair div a guest may be seated. Guest are also a div which is nested inside the chair div. Here is a sample for the markup of one such table. This table has 8 chiars with two guests seated at the first two chairs.
<div id="table-wrapper-1" class="table-wrapper table-type-0 ui-draggable">
<div id="table-1" class="seating-table">
<div class="seating-table-name">Table 1</div>
</div>
<div id="chair-1-0" class="chair chair-pos-0 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-1" class="chair chair-pos-1 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-2" class="chair chair-pos-2 table-chair-1"></div>
<div id="chair-1-3" class="chair chair-pos-3 table-chair-1"></div>
<div id="chair-1-4" class="chair chair-pos-4 table-chair-1"></div>
<div id="chair-1-5" class="chair chair-pos-5 table-chair-1"></div>
<div id="chair-1-6" class="chair chair-pos-6 table-chair-1"></div>
<div id="chair-1-7" class="chair chair-pos-7 table-chair-1"></div>
</div>
The div.table-wrapper is a draggable and so are the div.guest's. The idea is that you can drag a guest from one chair to another, or drag the entire table to a different location. The problem I am having is in IE, where if you click and drag a guest, both the guest and the table drag at the same time. Does anyone know how I can fix that?
Thanks,
~Matt
After a lot of digging, I seem to have found a solution for now. It involves hacking ui.draggable.js, but currently it doesn't look like there is any other way.
To see my full answer, have a look at my post on the jQuery forum:
http://forum.jquery.com/topic/draggable-nested-inside-draggable-drags-both-when-dragging-child-in-ie
Hope this helps someone with a similar issue.
Thanks,
~Matt
Related
As I am displaying the notes on my note taking app, which is a grid, if I have a short note then there is empty space left. How can fill it up by pushing the cards below to go up and stick to card on the top. I am using bootstrap's grid layout for displaying the cards:- See here
I also have the screenshot of how the cards are looking currently.
You can see that there is a gap between the cards and I want to fill it up
Also here is the template of a single card
let cardTemplate = `<div class="col-sm-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">${title.value}</h5>
<p class="card-text">
${content.value}
</p>
Show More
Delete
Edit
</div>
</div>
</div>`;
and i am putting this card in a div whenever a button is clicked
<!--displaying notes-->
<div class="row"></div>
I have not done any css on the div since I like the looks as it is.
Thanks for reading my query!
I think what you're looking for is masonry. It's a grid property that allows that exact behavior that you are looking for. It can be done with grid-template-rows:masonry;. Here is a link that would tell you exactly how you can do it.
Try adding class h-100 inside<div class="card h-100">** or h-50 or h-25,which makes an element or div as tall with height utilities. it is readily available in bootstrap.
refer this link for getting more information about pre-defined sizes classes in bootstrap
I am new to cytoscape.js and I have encountered a strange behavior when I have a div with my network (cy) and a canvasXpress element in the same div. The body structure is like so:
<div class="col-sm-12">
<div class="col-sm-6 result box" id="divHeatmap">
<!-- This div is replaced by a canvasXpress element-->
<div><canvas id="canvas1"></canvas></div>
</div>
<div class="col-sm-6 result row" style="padding-left:30px;" id="divNetwork">
<div class="col-sm-12 row result box" style="padding-left:30px; ">
<div class="result row">
<div id="cy"></div>
</div>
</div>
</div>
</div>
cy is created correctly (it works in every other case tested) as is the canvasXpress element. The trouble starts when my pointer hovers over the canvasXpress element and then returns over the cy network. When this happens the layers of the network seem to be broken. I can click the nodes but they either disappear or get stuck on the pointer (unless I right click). Moreover, the edges point to random points when i click at anything. My suspicion is that the canvasXpress element messes with the z-index of the cy layers. Do you have any idea what might be happening? Thank you for your time!
Don't share the same div for multiple lib containers. That's not a good idea in general.
Do this
some div
viz A div
viz B div
And just stack the A and B div on top of each other with CSS.
Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.
<div class="OverLay">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<div class="OverLayTwo">
</div>
<button class="randomButton">Hello</button>
</div>
So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --
The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.
Hope that made sense. The land of CSS is a true maze o.o ...Also, it should be noted I am using javascript and jQuery functionality.
Any tips and/or suggestions would be truly appreciated!
Thank you!
would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..
<div class="OverLay" style="z-index:100">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<button class="randomButton">Hello</button>
</div>
<div class="OverLayTwo" style="z-index:90">
</div>
I am trying to create a general widget (component) which maybe a one item component, a list component (like tabs) or anything else.
Exp:
<div class="widget-component">
<div class="item">
<div class="widget-component-title">Title 1</div>
<div class="widget-component-description">Description 1</div>
</div>
<div class="item">
<div class="widget-component-title">Title 2</div>
<div class="widget-component-description">Description 2</div>
</div>
</div>
Components are defined outside the widget script and they only need to respect the defined selectors (widget selector, editables selectors).
On a list widget case a title or description editable occurs more than once.
I have been digging a lot for a solution this is what i came across.
http://ckeditor.com/comment/135051#comment-135051
this solution works but it breaks the generality principle and also i have to keep track of index classes on repeated items.
I even tried to extend the "initEditable" function inside widget/plugin.js but because i did not want to modify the file (preventing my self from future updates) and i could'nt extend it by external script ("initEditable" not accessable) i let it go.
The best suggested solution i came across is this here but it does'nt seem to have been implemented yet.
Any bright idea is appreciated
Thanks
I have a specific goal in mind.
Please reference this page: http://cubancomplex.kodingen.com/test/MM/dashboard1.html
On the very bottom right, there is a <div> with two buttons on each side. The <div> currently has one google chart contained inside.
The goal is for a user to be able to use those two buttons to switch between charts for approximately eight cities.
I am not familiar with javascript or jQuery so I would appreciate any assistance! How should I go about achieving this?
Here is the code for that section:
<div id="footer">
<div class="markerNavLeft" title="Prev" id="prevMarker">‹</div>
<div id="markers">
<div id="chart">
<div id="auckland_chart_div"></div>
</div>
</div>
<div class="markerNavRight" title="Next" id="nextMarker">›</div>
</div>
Based on my experience, there's 2 option that you can use..
you can place your charts in your div id="chart". The first one add a class to mark it as a selected one (e.g. selected), of course the other is hidden… Please add a same class for all of the chart(e.g. chart-detail). Then, you can use
var temp = $(".selected").next(".chart-detail"); $(".selected").removeClass("selected"); temp.addClass("selected");
for the previous button, you can use .previous function.
You can use ajax ( .ajax function or .load function). Mark each chart with an ID so, you know what's the next or previous chart (within php).