I´m using jQuery Mobile and my navigation and search panel will slide from the left into the page. So the problem is, that something and I really don´t know what kind of element, is changing the position of the toggle so that it´s not fixed. I´ve defined already data-position:fixed; but that didn´t help.
How can I change the position of the jQuery Mobile toggles to position:fixed; so that they are over the div.ui-panel-dismiss ?
I know that jquery mobile uses translate3d to animate the panel. So if I put this out it will have the position:fixed; but the page will also stay behind the panel, so that is not a solution for me. But I think this question is like:
css3 transform reverts position: fixed
Related
I got a problem of images and header and a lightbox effect. Actually in my website I needed the header as a constant so I made it constant by adding css property position:fixed and it worked out also but I got another problem as this messed up with lightbox effect. It got underlayed by header. I want that when I open lightbox the header should be overlayed by lightbox effect. And again a problem of images that I put in the slider when scrolls are also giving problems.
Please check this site http://www.sultanindustries.in and scroll to our portfolio and open one of image and scroll to top you will clearly understand my problem.
Don't use this much of z-index
z-index:15; //for lightbox popup for other
Z-index:10; //less than lightbox popup z-index
if you will use that much of z-index it may affect other lightbox effects.
This may be the problem of z-index.
Please check the value of z-index on page and please update the code in question so that you can have better answer.
thank you
hey guys i found the answer. Thank u kayee. That problem caused due to Z-index. I have changed Z-index property.
Things that i had to keep on top, i have increased their z-index.
z-index:999; //for lightbox popup
for other
Z-index:900; //less than lightbox popup z-index
and the problem is solved.
I'm developing a website and on its home page I have some sliders.
When I use these sliders I used to get horizontal scroll. I managed to fix that using overflow-x:hidden; at the css for the body element.
My problem is that When I click and drag the page to the right the scrollbar doesn't appear, but the user have the same effect as if he was using the scrollbar.
I received the html/css from a third part front-end developer and I'd prefer not to have to modify his css much.
Would you have any tips to fix this behavior without having to do further changes in the html/css structure?
Thanks in advance for any help.
I was wondering if there is a way to achieve an effect similar to Chris Coyier's: Scroll/Follow Sidebar using CSS3 animations?
I have a sidebar that scrolls down with the page as the user scrolls (simply using a fixed position div), but I would like to animate that sidebar to sort of bounce down and/or play catch up with the page as the user scrolls down.
Take a look at Chris' jQuery technique to see what I'm talking about.
The main thing I would like to know is if it is possible to achieve this effect using only CSS3 and no javascript.
Thanks in advance for any help!
No its not possible to get that effect without JavaScript unless you have some other sort of mechanism that allows you to check how far the user has scrolled, and change CSS properties of elements accordingly.
I currently using jquery mobile and want to achieve the top navigation as youtube mobile with 2 icons at the right side (picture below)
So i try using this code below, but only one icon appeared.
<h1>Youtube Mobile</h1>
Menu
Search
Anyone can help me solve this problem? Thanks
Both buttons are there. They are just being absolutely positioned one on top of another. Add the class 'grid' to your grid button. Then use .grid.ui-btn-right{right:30px;} to position your grid just left of search button. Here is a fiddle demonstrating this http://jsfiddle.net/codaniel/JMKss/1/
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.