Develop Reference

Draggable popup positioning

I am using Oracle Applications Framework (OAF) and incoporated a jquery popup with it. What happens is OAF auto generates the popup div like so:
<DIV role=dialog tabIndex=-1 aria-describedby=remainingTrancheTipRN class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front center-dialog ui-dialog-buttons ui-draggable ui-resizable" style="HEIGHT: auto; WIDTH: 300px; POSITION: absolute; LEFT: 0px; DISPLAY: block; TOP: 0px" aria-labelledby=ui-id-1 jQuery1111025367763936550064="14">
I need the popup to be draggable and on the center after clicking it. The problem is, the div auto generates an inline css with LEFT and TOP positions as 0px meaning it is not centered. I tried to center it using !important in css BUT by doing so it now won't be draggable since the left and top positions are now fixed at center via !important. Is there a way to delete the inline css of the div? I tried the ff but to no avail:
$(this).css('display', '');
$(this).removeAttr('style');
UPDATE:
Weird, as it is working well with chrome. Not working on IE11. When I inspected the page, the div in chrome looks like this:
<div id="remainingTrancheTipRN" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 77px; max-height: none; height: auto;">
Any ideas why they differ?

Stop Body Scrolling under a certain div

So My situation is this, I have a lot of divs... A LOT (over 300) and im using them as part of an interactive background. EDIT:(they all have the same class btw)
The Problem?
Since on mobile I need more divs to fill the page than on desktop, I have too many divs on desktop, meaning you can scroll wayyyyyy more than I want to.
How can I have it so Divs Below a certain point are deleted or (more usefully) how to stop scrolling after a certain amount of pixels.
I literally have no idea how to do this, I've tried experimenting with margins, padding, overflow, position: fixed; but I haven't found a solution so don't pester my "lack of effort"
(some of my accounts have been blocked because I had no legitimate idea what to do and you "cool kids" decided to downvote me enough to get blocked (thanks for that!))
Anyway enough blabbing. Help would be appreciated! Thanks in advance.

You can do 2 things for this:
Wrap all your content in a div and set height to it and overflow-y: hidden.
.wrapper{
height: 1000px; overflow-y: hidden
}
With CSS you can hide the elements after certain number. Like if you want to hide all div after 100
.container .className:nth-child(n+101) {
display: none;
}
This will hide all the divs after 100.

Put all your divs inside a container div and use this css
.container{
max-height:900px; // Set this value to the no of pixel you want to scroll
overflow:hidden;
}
I have set the max-height to 900px cause i want to show only 9 div each div is off height 100px.
SNIPPET
.item {
width: 100%;
height: 100px;
background-color: red;
}
.item:hover {
background-color: yellow;
}
.container {
max-height: 900px;
overflow: hidden;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<!--You cant scroll after that-->
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>

Background image on Slick Slider slide not expanding to parent element

I am trying to add a slider to an existing page that has a left and right side. The left side has a background image, some text and a clear fix that expands the image to the height of the right side.
When I use Slick Slider and make the left side element a slide, the clear fix no longer works and the height is dictated by the content of the left element.
Here are 2 jsfiddles that demonstrate the problem:
Without slider: http://jsfiddle.net/robmccart/15wrct6g/
With slider: http://jsfiddle.net/robmccart/yj9nerh1/
Here's the code with slider:
<div class="parent">
<section class="right-side"></section>
<section class="slider left-side">
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide1</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide2</div>
<div class="row" style="background-image: url(http://cpaws.org/engaging-networks/images_donation/Donation-pg-Peel-Watershed.jpg);">slide3</div>
</section>
</div>
CSS:
$c1: #3a8999;
$c2: #e84a69;
.parent {
background: #336633;
}
.right-side {
float: right;
height: 700px;
}
.left-side {
padding-right: 450px;
}
I'm not sure if I'm using the clear fix properly, but it looks like the code injected by Slick Slider is breaking something.
Thanks

Make nav div sit exactly in the middle between an image and the right side of the viewport

I'm trying to get a navigation div to sit in the middle between an image and the right page but also in a way that if the browser is resized, will still maintain the relation. I'm quite positive I know how to do it with a relative positioning but I would like to have the navigation fixed.
[img] nav |right side of viewport
#wrapperNav {
position: fixed;
top: 45%;
right: 50%;
z-index:999;
}
Code: http://jsfiddle.net/LLtnZ/3/

Flexbox has support in most newer desktop and mobile browsers and really dispenses with a lot of the hackiness involved in trying to maintain alignment and positioning with varying screen sizes; it flexes.
For the carousel you describe I would start with the below HTML, based on what you provided in your fiddle:
<div id="wrapper">
<nav class="nav nav--ready">
<div class='nav__center'>
<div class="nav__link nav__link--active">
<a class="nav__link-bullet" href="#one">1</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#two">2</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#three">3</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#four">4</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#five">5</a>
</div>
</div>
</nav>
<div class='carousel'>
<img src="" alt=""/>
</div>
</div>
#wrapper is a flexbox, .nav is too, so is .nav__center. #wrapper is set to flex-direction: row-reverse; so as to display navigation on the right, if we added another element to #wrapper it would display to the right of .nav. .nav itself is set to flex-direction: row;, though it only has one child: .nav__center, its flexbox styles of justify-content: space-around; and align-items: center; keep the nav buttons aligned at its center no matter what. Within .nav, .nav__center is set to flex-direction: column; so its contents display top to bottom, and these styles align-self: stretch; justify-content: space-around; distribute each .nav__link element evenly from top to bottom.
Here is a fiddle. Notice that navigation stays glued to the right side of the carousel. I set a minimum width on .nav so that it won't disappear even when the display is really tiny.
Here is a quick guide you can probably get through in ten minutes with a cup of coffee.

You need to add position: relative; to your container which in this case is the nav html element.
http://jsfiddle.net/LLtnZ/4/

This might help. So if your image is is 90% width and centered, that will leave 10% left of pagespace, 5% on either side of the image.
If I understand your drawing correctly, the that would mean you'd want the container your nav is in to be
width: 5%
position:fixed;
top: 50%;
right:0;
margin-top -150px; // half the height
height: 300px;
text-align:center;
The 5% width will take up the entire space to the right, but using text-align:center will get items in the middle, as per your "equal" annotation on your drawing.
If you need a jsFiddle let me know
Here's a fiddle: http://jsfiddle.net/47Q9p/

Quora styled "add content" icon in Jquery Mobile

Using Jquery Mobile, I am trying to emulate what quora has done with its "Add Question" button. The Add Question button is a simple floating '+' aligned centrally in the bottom.
To emulate the same for my app I have created a transparent footer with ui-grid-b and placed the plus icon in the block-b
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
<div class="ui-grid-b">
<div class="ui-block-a" style="text-align: left;"></div>
<div class="ui-block-b" style="text-align: center;">
</div>
<div class="ui-block-c" style="text-align: right;"></div>
</div><!-- /grid-a -->
</h3>
</div>
With the theme background-color: rgba(0, 0, 0, 0); I do have a plus mark in the bottom, but nothing close to what Quora has been able to do.
My solution does not allow the users to touch and slide anywhere in the footer - while the quora app has no such qualms. The plus button is almost an island of its own. How can I achieve something like this with JQM?

Instead of using a footer, just use an inline button and then add some CSS to center it and fix it to the bottom of the page:
Button markup (added bottomCenter class):
Add
CSS for bottomCenter class:
.bottomCenter {
position: fixed;
z-index: 9999;
bottom: 4px;
left: 50%;
margin: 0;
margin-left: -15px;
}
A high z-index keeps it floating above other content, the rest sets the position to fixed at bottom center.
Here is a DEMO