Develop Reference

How to use JS to get multiple Giphy canvases to show up

https://codepen.io/amoslosky/pen/XWJjjML
var api="http://api.giphy.com/v1/gifs/search?";
//my API key//
var apiKey="api_key=MY_API_KEY&q=";
//rest of code linked above!//
I believe the error is in my js because I really don't understand js that well yet. On the left green panel, I want a 3x3 grid of Giphy gifs to show up. Each input box on the right green panel should control one row of 3 gifs.
Any help is appreciated!

Drag and Drop into Nested Grid

In my view I have grid row expander. Inside that row expander I have a nested grid. I want perform drag and drop operation in it. The main grid drag and drop working fine. But in nested grid, not working. while mouse over on the nested grid it shows not valid drop target.
I set the drop location in my nested grid after render
var featured_targetObj = new Ext.dd.DDTarget(thisObj,'CSRPT' + 'group1');
but nothing positive.. any idea for fix this..

Nested grid in slickgrid

I have created grid using slick grid. Now as per my requirement I want to open a sub-grid on click of some element in the parent grid. To implement this I thought of adding a after the current element and dynamically create. But since slick grid update data and top of current row dynamically (as per viewport) the new div inserted show absurd behavior on scrolling at viewport.
var parent=s.parent().parent();
var top=parent.css("top");
top=parseInt(top)+parseInt("30");
parent.after("<div class='add'style='position:relative;height:50px;width:100%;top:"+top+"px ;background-color:green;margin-bottom:20px;'></div>");
var next=parent.nextAll();
next.each(function(index){
if(index !=0)
{
var top=next[index].style.top;
top=parseInt(top)+parseInt("50");
next[index].style.top=top+"px";
}`
Here s is the current element pointer after which I am inserting a div.
s.parent().parent() will return the pointer to row after which you want to insert element.
Then I increased the top of all row below that element. New element will be inserted properly but after scroll everything mixed up.

Stop Dynamic Table Resizing

I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.

If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.

Javascript drop down menu widget

I have a menu consisting of an <ul> in a Web CMS.
I want several menu items to have sub-items that are displayed in a dropdown list. These sub-items are <ul>s as well.
This is basically easy to do with a few lines of CSS and Javascript, but I am looking for a ready-made Javascript solution that helps me handle the following:
Deal with screen edge situations: If any part the dropdown menu would be outside the current viewport, place it so that it is completely within the viewport.
This is a bitch to code from scratch.
"Nice to have"s would be:
Centered positioning below the drop-down button
Adding a onclick event to the body so that clicking outside the drop down menu will close it; clean removal of the onclick event afterwards
But those I can do myself if necessary.
A nice, small, unobtrusive widget that magically converts my <ul> would be lovely.
If the solution is based on a framework, it has to be Prototype as that's what I'm using in the CMS.

You can get the offsets of the UL, and check whether those are in a certain distance of the viewport.
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
It's also possible to get the exact position of the dropdown button clicked, and then you should apply basic math in order to position the menu beneath it.