http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}
Related
I have a webpage that I am now making work on an ipod touch. The webpage container is 480 pixels wide (450+30 padding) and then it has two divs, each with a single line of text.
When I have just one div of text, then the text appears on a single line, just like on my computer. However, when I add the second div, the iPod touch decides to make the text much bigger (for both divs), such that the text goes onto the next line.
How do I ensure that the text remains the same (smaller) size, no matter how many divs I add? I would like it to the same as on my computer. The user must be able to zoom.
css:
body{
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:15px;
margin:0px;
}
.container{
padding:15px 15px 1px 15px;
width:450px;
background:white;
overflow:hidden;
}
.quote{
padding-bottom:3px;
font-style:italic;
text-align:center;
width:450px;
overflow:hidden;
}
html:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0" />
<body >
<div class= "container">
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
<div class = "quote">"I want to be on one line and so does the other line. Even if two."</div>
</div>
</body>
I added the following to class container and now it works. Is there any reason NOT to do this? I didn't add it to body because I don't really know what other affects it might have.
-webkit-text-size-adjust: 100%;
I am writing a simple program for iPhone using jQuery mobile, I have created a div with number of images but the scroller that is coming is vertical which I don't want. I want vertical space to be fixed and overflow of images horizontally. I know there a re scrolling plugin like iScroll but in my case I cant use them because those scrolling plugins uses <li> with fixed number of elements to be showed on that page but I want to keep this dynamic, if user rotates his device horizontally then more images can fit in the screen so I want that adjustment that if user keep his device vertical then horizontally there is less space so images should scroll horizontally but if he rotates device horizontally then he gets more space horizontally and more images can fit in and leftover images will again scroll horizontally.
I fixed the height of div and tried overflow property to let images flow horizontally but I guess jQuery is preventing that behavior.
can you please put me on correct path.
I think you could still use iScroll for horizontal scrolling, but you need to call refresh method whenever the content dimensions change. In your case, you could listen to the orientationchange event and perform in that case refresh of your iScroll object.
Check the section "Mastering the refresh() method" in iScroll documentation.
Hope it helps!
EDIT. You can start testing with a quick example like this:
<div data-role="page" id="loadPage">
<div data-role="content">
Add text
<div id="scroller" style="border: 1px solid green; white-space: nowrap; width: 300px;">
<div id="text" style="border: 1px solid red; height: 20px; width: 0px;"></div>
</div>
</div>
<script type="text/javascript">
var iscrollPage = null;
$('#loadPage').bind('pagebeforeshow', function () {
iscrollPage = new iScroll($('#scroller').get(0), { vScroll: false, hScroll: true });
});
function addText() {
$('#text').append((new Date()).getTime()).css('width', '+=140');
iscrollPage.refresh();
}
</script>
</div>
im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.
I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none).
In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers.
In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears.
In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background.
html code of hidden mouseover div:
<div id="hoverPopup">
<div class="fbLikeWrapper">
<div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
</div>
<a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button1</div>
<div class="btn_small_suffix"></div>
</a>
<a href="##">
<div class="btn_small_prefix"></div>
<div class="btn_gift_center">button2</div>
<div class="btn_small_suffix"></div>
</a>
</div>
css code:
.fbLikeWrapper
{
/*width : 50px;
margin-left : auto;
margin-right: auto;*/
}
.fbLikeWrapper div
{
display : block;
line-height: normal;
}
screen captures:
IE9
IE7
Try this:
#hoverPopup .fb-like {
width: 47px;
}
.fbLikeWrapper
{
display : inline-block;
width : 51px;
text-align : center !important;
margin : 30px auto 10px;
box-sizing : border-box;
-moz-box-sizing : border-box;
-webkit-box-sizing : border-box;
overflow : hidden;
}
If this not helps, may the javascript causing the problem, not the css and you have to share more information (javascript, html, etc.)...
I found the answer through one of my colleagues who's had a similar problem.
When the page was loaded, the popup needed to be hidden, so I gave them a class that said display:none;. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.
I don't exactly know why yet, but I did find out that if I use the jquery .hide() and .show() functions to toggle and initially set the hidden div and not use a class, it works like a charm.
Case closed. IE continues to suck.
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)