i am testing this table and i wanted to know if is possible to move the
<div id="tablepress-9_paginate">...</div> outside the parent element.
I am asking this because on mobile, when you scroll the table horizontally that div is fixed and is not visible anymore.
Is possible to move it at the bottom of the table div?
PS: i am using Wordpress
i think it will be easier with JQuery.remove().
pure js will be hard time to achieve this.
also sounds like you should just render the div outside the table and use CSS position:fixed
Related
I need your help, i want to create a dynamic fixed DIV
That means it a fixed div but it cant override header (or other div's above it) and footer (or other div's below it). Example when scroll on top it below other div but when scroll down enough it will be in top, and when scroll to bottom of pages it stand above other div. I don't know the key for this div is, so i call it "dynamic fixed div".
An example here: http://www.1stwebdesigner.com/wp-content/uploads/2010/07/index.html. I want to create a div like as "Select category" div.
Thanks!
You can use the css property "position: fixed;" to do it, and with Jquery you can do some effects interesting.
So, look this tutorial, I believe it'll help you.
http://www.sutanaryan.com/jquery/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
I have multiple images within a div, I change thier positions using JQuery
$("#"+carElem).css({"left": pos.left+50 +"px"});
Im using absolute positioning (relative positioning gives the same result), is it possible to cut off anything that is displayed outside of the parent div .i.e make sure its not shown?
Give the parent div the style overflow: hidden and go back to relative positioning (it won't work with absolute positioning).
There's probably a better way to solve the actual underlying issue, though, if we had a bit more context. But overflow: hidden will probably be part of it regardless.
Add overflow:hidden to the parent div.
best way to do that
<div style="overflow:hidden">
// place images here...
</div>
I have a jQuery conundrum that I'm not sure can be resolved. Inside a content slider I have absolutely positioned divs creating a tool-tip style pop-up on hover. Because the containing content slider overflow must be set to hidden, the tool-tip pop-up gets cut off where it overflows. I would like the pop-up to display in full when overlapping the slider it is contained within. If anyone has a workaround for this I'd be very appreciative!
Here's a link to my working file from which you can see the problem and the code.
Many thanks for any advice.
Your animation inside 'slidesContainer' relies on overflow:hidden so the large image doesn't stick out of the div and the only way for you to get the balloons pop out is to remove that overflow:hidden and make it visible
I don't think you can have the two at the same time
Right, so I don't think there was a straight forward solution so what I did was change the script to refer to div IDs instead of referring to the 'next' div. I moved the pop-up div's outside the slide element and absolutely positioned them relative to the page rather than the link. It's more long winded but works fine! Just means you need to refer individually to each pop-up div in the script. Thanks for you help anyway!
I have a simple Javascript drag function. You can see it here:
http://jsfiddle.net/XpAyA/12/
The red #dragger div is draggable. It is nested in an overflow scroll div but it doesn't trigger a "scroll" when it gets over the limit. Probably due to the fact that it is positioned absolute.
Is there a way yo fix this? Make the scroll happen when it exceeds the limits?
Thank you
First of all you have to give the containing div a position:relative. That way the absolutely positioned dragger stays inside of it and can't go over it's borders.
I'm not sure why the scrolling doesn't work, but is there a reason you scripted your dragging function yourself while you do have access to jQuery? There's a powerful function in jQuery called draggable that does exactly what you want.
Here's a version that scrolls http://jsfiddle.net/vcJuF/1/
I removed the inner div, which seemed to help. The scrollbars update now, I think you just need to update your javascript to actually scroll the div as you drag.