html chrome on pc
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow: hidden; z-index: 6; border-radius: 50% " ondrop="drag_drop_drop(event, this)" ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="left: 0px; top: 0px; position: relative;" class="ui-draggable">
</div>
html default browser on html tablet
<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow:hidden; z-index: 6; border-radius: 50%" ondrop="drag_drop_drop(event, this)", ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
<img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" style="left:0px; top:0px; position: relative;" width="341" height="256" class="ui-draggable">
</div>
EDIT: I had a typo for the second overflow tag (I had to type the source code in manually from the tablet to here). When I fixed that, both jsfiddle's showed the image as expected, however, the android tablet still is not.
This is what it looks like on the tablet:
There is a typo in the second code snippet(html tablet)
Overflow property is set to hiden.
<div id="opening_0" style="position: absolute; left: 56.25px; top: 63.75px; z-index: 6;" ondrop="drag_drop_drop(event, this);" ondragover="drag_drop_allow_drop(event);" onclick="photos_add_selected_fid(this);">
<div id="2_opening_0" style="overflow: hidden; border-radius: 50% ">
<div id="3_opening_0" style="background-color: #bfbfbf; height: 97.5px; width: 67.5px; ">
<img src="/system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="position: static; margin-left: 0px; margin-top: 0px;" class="ui-draggable">
</div>
</div>
</div>
I basically had to create 2 more divs inside the opening_0 div. The tablet didn't like positioning other than static in the image tag.
Related
I have created a switchable list of "single image with text" and I only want the active to be visible. All works ok at PC browsers (tried Firefox, IE) but on mobile ANDROID browser (Chrome) I can only see the first "visible" image, while the rest keeps only displaying text.
html:
<ul class="tabs clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul><!-- tabs -->
<div class="box visible">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic1.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic2.png" width="437" height="545" alt="">
</div><!-- box -->
<div class="box">
<div class="box-text">
<h3>Title</h3>
<p>Text.</p>
</div>
<img src="images/pic3.png" width="437" height="545" alt="">
</div><!-- box -->
css:
.tabs li {
width: 20px;
height: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: left;
background-color: #cbcfd1;
margin: 0 13px 13px 0;
-moz-transition: background-color 0.15s linear;
-o-transition: background-color 0.15s linear;
-webkit-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
cursor: pointer;
}
.tabs li:hover {
background-color: #8bcb9d;
}
.tab li.active {
cursor: default;
background-color: #35a654;
}
.box {
display: none;
line-height: 30px;
}
.box.visible {
display: block;
line-height: 30px;
}
I understand from what I found here that there is some kind of problem with mobile Chrome but since I'm a beginner I can't make heads or tails of what I'm supposed to to with it to make it work. Can anyone help please? When I remove display: none; and put block in there, all images can be seen stacked below each other but that is not desired.
I found out that the problem only occures on a mobile phone size device. Galaxy Tab 2 tablet I tried displays everything ok.
This is my first question, sorry if I made something wrong.
Well I'm trying to create a rounded button that dynamically "fills" according to a parameter. I've created an inner div inside the button, absolute positioned in the bottom. It works perfect on chrome webview, but I cant make it work on android 4.1.
here is how it should look:
right
and this is how it looks on android 4.1:
wrong
This is my code:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) " ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="-webkit-transition: all 0.9s ease-in; height:{{(thread.get('ratio'))*100}}%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a> </div>
The "button" class is position:relative and the other classes just add a different border color.
I've tryed everything I could find with no success...
Thanks!
You need to change the block formating context of <a> and set it to relative position too:
<div class="col" style="padding:0px; margin: 0px; text-align:center; height:100%">
<a style="display:inline-block;position:relative;overflow:hidden; padding: 0px; height:125px; width:125px; border-radius: 50%; border-width:2px;border:solid; background-color:rgba(255,255,255,0.0001); z-index: 2" class="button likebuttons" ng-click="voteClick(1, vote.id, thread.id) "
ng-class="{'button-dislike':var==1}">
<img style="margin:27px ; vertical-align:middle; position:relative; z-index: 1 ; width:60%; height:60%" src="img/thumbs-down.png" align="middle"></img>
<div style="transition: all 0.9s ease-in; height:62.5%; position:absolute; bottom:0; width: 100%;background-color:#db0000"></div>
</a>
</div>
added :
a {
display:inline-block;
position:relative;
}
Do not mind the webkit prefixe not needed anymore or use last the non prefixed rules (transition)
I have a page with the following simple markup:
<!DOCTYPE html>
<html>
<head>
<title>embed example</title>
<style>
.wrapper {
width: 50%;
}
.container {
height: 0;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.container iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/238498461&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true">
</iframe>
</div>
</div>
</body>
</html>
It looks great on my pc:
http://i.imgur.com/ZQSYBSD.png
However, when I try loading it in Chrome on my Android phone, the content inside the iframe fails to resize to the iframe dimensions:
http://i.imgur.com/u6FQW88.png
How can I get it to look the same way on my phone as it does on my pc?
I am testing a page with a sticky footer. On the GS4 stock browser ONLY (not visible on android chrom), I get the sticky footer floating up and down the page as I scroll up and down. The footer also seems to have a stutter-looking effect. I've tested the same page on iphone 5 and gs3. This is my CSS flow:
.bar {
background-color: #F7F7F7;
overflow: hidden;
position: relative;
font-size: 13px;
}
.bar .footer-icon-holder {
padding: 5px;
display: inline-block;
width: 5em;
}
.bar .footer-holder {
width: 100%;
text-align: center;
margin: 0 auto;
height: 54px;
background-color: #FFF;
bottom:0;
-webkit-backface-visibility: hidden;
position: fixed;
}
and the footer html:
<div class="footer" ng-controller='footerController'>
<div id = "footer" class="bar">
<div style="margin:0 auto;">
<div class="footer-holder">
<div class="footer-icon-holder" ng-click="clickPic('home')" >
<div ng-show="homeSelected">
<img ng-src={{imageOnHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
<div ng-hide="homeSelected">
<img ng-src={{imageOffHome}} class="footerimg">
<div class="toolbar-img-text">home</div>
</div>
</div>
</div>
</div>
</div>
I've built a website for a friend and it works great on computer browsers, but on mobile it doesn't display for ONE image (The other images work fine).. This is at least on the iPhone browser and Samsung Galaxy 4 browser. On a Nokia phone the image displays fine.
I actually built this website on top of another designers work, but as far as I can tell there is no specific javascript embedded anywhere for mobile browsers.
The following HTML and CSS correspond to the image that doesn't show:
<div id="main-content-left-container">
<ul id="left-bullets">
#Some bullets
</ul>
<img id="ups-map" src="./images/ups-map.jpg"> #Problem here
</div>
#ups-map {
display: block;
margin: 20px auto;
height: 200px;
width: 280px;
}
#ups-map:hover {
height: 300px;
width: 400px;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
}
Does anyone have any ideas as to what this could be caused by?
Try this: http://jsfiddle.net/rvf9R/
<div id="main-content-left-container">
<ul id="left-bullets">
<li>bullet</li>
<li>bullet</li>
<li>bullet</li>
<li>bullet</li>
</ul>
<div id="ups-map">
<img src="http://pittsburghjedi.com/wp-content/uploads/2012/09/LOG-ren-and-stimpy-1552749-1280-1024.jpg" />
</div>
</div>
<style>
img { max-width: 100%; }
#ups-map {
display: block;
margin: 20px auto;
height: 200px;
width: 280px;
}
#ups-map:hover {
height: 300px;
width: 400px;
}
</style>