I have a mobile page, js-library only for DOM and events (zepto), no fancy ui-library.
Now I want to add some kind of "modal" feature. Thinking of scroll-right "push",
where the the loaded content pans out to the left. On finish, pop the original page back.
Since the first page is width=100% I can't find any solid solution to work this out. Thankful for any solid css-tricks on this one.
regards,
//t
Use CSS transforms to move the content out of the way.
Without seeing your code, it's hard to say, but if I were doing this I'd make a div wide enough to hold the page content + the modal bit, put them both in the div and float them both right.
I'd then absolutely position the big div so you could only see the content. When I needed a modal I'd put it's content into the off screen div, then transform the big div to slide it into view.
Of course, without seeing any of your code, that might be impossible, but it's hardware accelerated, and can only involve adding and removing classes to get the animation.
Related
I recently imported CSS Bootstrap into my website, so that I could add a toolbar to it. All went well, except that the text of my website now cuts off at the bottom. I set the overflow of the body to scroll, to no avail. The website scrolls a little bit, but then the scroll bar stops before the end of the content. If you zoom out on the browser, you can see all of the content.
The home page is a fairly long chunk of code, especially if I include the bootstrap, so I am not inclined to copy it here. Have any of you encountered this, and do you remember / can you suggest how to rectify it?
Some of you suggested a link, and you're right. Here is the page in question: http://www.zipcodeconquest.com/home.php
In your CSS, try changing your body height to "auto". Just a guess without seeing your code or a screenshot...
look for a white-space:nowrap or white-space:pre property. Your container might have one of these styles and forces your text content to be displayed in a way that overlap it.
I'm trying to develop a horizontally scrolling website in which clicking a link in the navigation scrolls the page to the right to the linked div.
The problem is I want the elements that it scrolls to to be horizontally centered within the browser window. I assume that this can be done using javascript, but I have no idea how to go about it.
Here is a pastebin link to my HTML: http://pastebin.com/YxajLvtW
And here is the CSS: http://pastebin.com/JpaJC2Yg
I know how to implement javascript, but not necessarily read/write it.
This should be helpful: http://www.arvindandrion.com/jquery/horizontal-scroll-using-jquery-scrollto/
General advice: Use a Javascript framework like jQuery to code Javascript functionality. It makes life a loooooot easier :)
Maybe take a look at this, too: http://api.jquery.com/scrollLeft/
Everyone knows that there are problems with the float CSS property: there are text jogs in some browsers, you have to clear them to pull parent elements around a floated div, etc.
Let's assume I build a layout and float everything, and I'm careful to control for the browser-specific bugs. Are there disadvantage to using float for everything? Will the page take longer to render, or is there a better practice?
I'm trying to improve my CSS layout building technique.
#kevin; float is not a bad practice; it depends on how you are using it & what the needs of the design are. There is no need to use it on everything when there is no need & it comes from experience.
Every browser renders float correctly.
yes if you use clear:both in your markup like this
<div style="clear:both"></div>
it's increase your markup which increase your page loading time.
. SO, use overflow:hidden in your css to clear it.
Floating everything can make for a great deal of inconsistency; depending on how wide a screen is and how tall certain elements are rendered, you can end up with a hodgepodge of screen jag.
For example, widening the screen would cause more elements to fit on the top line, so they would jump up. Items not in the top line will slide down, and then catch on the corner of an element slightly taller than everything before it.
Float is a handy tool, but it's no panacea; use with caution. Make yourself a sandbox site, and use something like Chrome's developer tools, or Firefox w/ Firebug to see what results you get when floating it all.
I dislike using floats because of these clearing issues. I generally use display:inline-block, and for my IE6/7 stylesheet for the same rules, I put zoom:1; display:inline
With inline-block, block elements flow like inline elements, while behaving like blocks. This I feel is more intuitive than breaking out of the flow like floats do.
I use this kind of layout on my twitter client: https://timshomepage.net/twitter
And here's the uncompressed stylesheet: https://static.timshomepage.net/css/twitter.css
I am working on this philippedecor.com site and I am having a difficulty in figuring out this css issue.
When I on mouse over on "Main categories" that appears on the right side, it shows a drop down with links in it.
Two things happens,
1) in IE(7) - the drop down hides behind another div
2) in both ie and ff, it pushes other div below that to go down and on mouse out, it looks fine.
I am not sure which css property can fix this.
please help me out
Next time, please make your URL clickable: http://philippedecor.com/
In Firefox, I also see a tiny bit of the background showing through the menu, as you can see. Mousing over this thing triggers a mouseout event, closing the menu. In IE 7, I don't see the push-down effect, only the hiding of the menu under the Flash panel and everything below it.
To prevent the menu pushing down other elements on your page, you should use position: absolute on #downmenu and probably incorporate it into the div containing "Main Categories" to position it in the right place. Use an appropiate z-index will likely prevent the drop down menu from popping under another div in IE (untested, as I don't have a debugging tool for IE at the university where I'm typing this message now).
Furthermore, I think you shouldn't use two menus containing exactly the same content, that can be confusing to visitors of your site (actually, I didn't read your post well enough and moused over the left instance). Also, you shouldn't put text in images without providing alternate texts, screen readers and the like can't "see" it this way (preferably use a suitable image replacement technique). And all those s in the lis are totally unnecessary and not according to rules for semantic HTML; just use padding on them or something. By the way, you should make the rounded cursors of 'Main categories' transparent (now two little white corners are shown). Just my $ 0.02...
I have a site with a fixed footer at the bottom of every page. The content area above the footer has a appropriate margin to ensure that content does not hide behind the footer when scrolling down.
However, when a simple text search if performed in the browser (firefox) the search term is usually hidden behind the footer as the page normally (without the footer that is) scrolls to just bring the search term into view.
How can I work around this issue?
I have one idea in mind: Make the content area of a fixed height (browser viewport height - footer height) and give it a scroll instead of the browser. Not the best solution but that is an option. What would be the drawbacks to this option?
I've noticed this before with one of my own projects but, is this minor inconvenience really important enough for you to alter the layout of your page? I would not suggest the fix you are considering simply because it is unnecessarily adding complexity to your code and the user experience will likely suffer (much more so than the problem you're describing).
I would just let it be.