I use double tap (on iPhone) on :hover elements to show extra information, without javascript, just simple css :hover pseudoclass. Now I've the problem that the div, that appears on :hover doesn't disappear anymore, only if I tap on another :hover element.
Has the :hover-functionality changed in iOS?
li.to-be-hovered {
position:relative;
}
li.to-be-hovered div.hidden {
display:none;
}
li.to-be-hovered:hover div.hidden {
display:block;
position:absolute;
}
And some more like width, top, left, margin, background, z-index and so on...
<div>
<ul>
<li class="to-be-hovered">
<div class="hidden">
lots of extra information with image, span, link elements
</div>
</li>
</ul>
</div>
On my iPhone (4S) the div.hidden appears at first tab on div.to-be-hovered, but doesn't disappear anymore when tapping somewhere else outside the element.
Does anybody know this effect? Is it possible to make it disappear again with pure CSS or do I have to use Javascript for all these elements?
simple and no javascript needed.
Here's the fix
add this to your css mediaquery
body {cursor: pointer}
JS:
var hidestuff = function() {
// Hide lots of extra information with image, span, link elements
// $(elm).hide();
}
$('html').touch(hidestuff).click(hidestuff);
CSS:
.hidestuff { position: absolute; z-index:1}
So, if user touch anywhere but the element in need to tap, the "hidestuff" will be hidden
Hope this helps :/
Related
Trying to get the "About Us" to no go to a separate page, but instead just go to the center of screen.
<div class="w3-col s4">
<h4>About</h4>
<p>About us</p>
<p>Shipping</p>
<p>Payment</p>
</div>
You need a bit different approach.
The tag defines a hyperlink, which is used to link from one page to another. So, it is a normal behaviour that click brings you to another page. But it is not what you want. To show popup, you can use javascript.
There are different approaches you can use like Bootstrap Modals, jQuery or W3C.CSS Modals. I see, that you use classes from W3C.CSS. You can read about W3C.CSS Modals here.
You can also use a pure JS. Exactly this approach I show here. Basically, the idea is the following. You have a hidden component styled so that it appears in the center of the screen (like a modal). The modal is hidden by default. There is a JS function that makes the modal visible. Clicking your link you triggers this function. Look at the code below.
function showGif() {
document.getElementById('box').classList.remove('hidden');
}
.box {
display: flex; /* defines a flex container */
align-items: center; /* aligns content vertically */
justify-content: center; /* aligns items horizontally */
height: 100vh; /* makes the block fit all the viewport's width */
width: 100vw; /* makes the block fit all the viewport's height */
position: absolute; /* needs to overlay other elements */
}
.hidden {
display: none;
}
<div class="w3-col s4">
<h4>About</h4>
<p>About us</p>
<p>Shipping</p>
<p>Payment</p>
</div>
<div id="box" class="box hidden">
<img src="https://www.linkpicture.com/q/unnamed_10.gif" />
</div>
I didn't implement the functionality of hidding the modal. And CSS is probably not perfect. It is just an example to show you the idea. So, the final implenetaion is up to you. I hope, it will help.
I have a basic HTML page with a header that is fixed. When I pinch-zoom in to the page on an iPad or iPhone the header flows off the edge of the page and I can not drag the page to see it all.
I can prevent the whole page from being zoomable, but I would like just this fixed header to not zoom and the rest of the page to be zoomed as normal.
Is there any way to do this?
EDIT:
Here's my CSS/HTML
body {
margin:0;
padding:0;
}
.nozoom {
width:100%;
position:fixed;
top:0px;
margin:0 auto;
}
.nozoom > div {
width:1008px;
margin:0 auto;
background-color:#444;
height:100px;
}
.yeszoom {
width:1008px;
margin:100px auto 0;
background-color:#096;
}
and...
<div class="nozoom"><div>This must not zoom and if you look carefully you'll see that you can never see the content of this which is completely over to the left - one two three four five six seven eight nine ten eleven twelve thirteen... dfgkjhdfsklhj dsfkjghl sdflghsdfklg sdfklg dsfkgh skdlfgh ksdlf ghskdlfgh jklsdfhg jklsdfg hsdfghj sdflkg hlsdf sdfg kljsdf jksdf sdfkjg sdfg ksdjfl gjkldsfg klsdfhgljksdf gsd kjlsdfh glskjdfhg jsdf hsdflk gsdf</div></div>
<div class="yeszoom">
<p>sdfgdsfgdsfgdfsga gsdf gsdf </p>
<p>fhgdfgh dffhgdfghdfgh dfg......</p>
<!-- Loads more content here-->
</div>
I'm using jQuery UI "sortable" plugin to be able to select and sort items.
I set up the plugin to have two lists, one for "available" items, the second for "selected" items.
The plugin works as expected, I can move items from one list to the other.
However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?
In fact, i'd like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)
This picture describe what I want to do:
The red lines are what I'd like. I want both lists to have this size, fixed.
Here is my code (generated from an asp.net webpage actually) :
<script type="text/javascript">
$(function () {
$("#sourceItems").sortable({
connectWith: "#targetItems",
update: function (event, ui) {
$("#selectedUserIDs").val(
$("#targetItems").sortable('toArray')
);
},
placeholder: "ui-state-highlight"
});
$("#targetItems").sortable({
connectWith: "#sourceItems",
placeholder: "ui-state-highlight"
});
$("#sourceItems, #targetItems").disableSelection();
});
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
<p>Available :</p>
<ul id="sourceItems" class="droptrue">
<li class="ui-state-default" id='i1'>item1</li>
<li class="ui-state-default" id='i32'>item2</li>
<li class="ui-state-default" id='i47'>item3</li>
<li class="ui-state-default" id='i46'>item4</li>
</ul>
</div>
<div style="float: left; display: inline-block;">
<p>Selected :</p>
<ul id="targetItems" class="droptrue">
</ul>
</div>
<div style="display: none">
<input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>
The hidden input field is my container for storing selected items (posted with the form).
I've tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.
I came here looking for a similar, but more generalized solution to the same problem. The solution here didn't help me, but I figured it out on my own and thought it might be helpful to share it.
I didn't want the two sortable lists to be fixed, I just wanted them to stay the same height. When you are dealing with a large number of items, having two dynamically sized boxes around the list can make it hard to work with, as the one box is so much smaller than the other. Making both boxes a fixed height is also less than optimal, as then you end up with scrollbars once your number of items in one list exceeds that height. I wanted both boxes to dynamically expand using the built-in functionality of the JQuery sortable, connectWith code, but I also wanted them to both just be set to the larger of the two. To do this I found that you can modify the padding on the lists, and that area will still be an interactable area for purposes of drag-and-drop.
So, to make two connectWith, sortable lists keep the same height, you can add the following handler for the over event:
over: function(event, ui) {
var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
$("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
$("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
}
Here's a fiddler example extending the other example with this event handler: http://jsfiddle.net/TLrn7/
Edit:
$(document).ready(function(){
$("#targetItems").height($("#sourceItems").height());
$("#sourceItems").height($("#sourceItems").height());
});
http://jsfiddle.net/JEY4U/1/
Old Answer:
Use a 'helper' function, which makes sure the dragged elements have proper width and height.
Something like this:
helper: function(event, ui) {
$(ui).width($(ui).width());
$(ui).height($(ui).height());
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
You use it like this:
$(SOME_OBJECT).sortable({
connectWith: ...,
placeholder: ...,
......
helper: function....
});
Of course you can write any costume helper function you'd like.
The jQuery UI list height is set to a specific height using CSS. Example for 300px height.
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
Read the documentation here: https://jqueryui.com/autocomplete/#maxheight
My footer is perfectly positioned on every computer screen.
But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.
What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?
This is the CSS of my footer:
#footer {
position:absolute;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
Change the position to fixed, hope that can solve this question.
#footer {
position:fixed;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
First, I hope it's for a static page, as dynamic pages could give you even more troubles.
Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.
This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.
I was wondering if it's possible to create a HTML div container with some CSS magic that shows a horizontal scrollbar like the one with the screenshots on the iTunes preview on the web. I want this to work in Safari on the iPhone.
e.g. http://itunes.apple.com/app/super-monkey-ball/id281966695?mt=8
I would like to use that to display thumbnails in an UIWebView on iPhone. I experimented with the overflow css property but didn't get it to work.
Thanks for your replies.
I don't have time to test it right now, but I think something along the lines of the following should work:
ul#container
{
overflow: hidden;
overflow-x: scroll;
width: 500px; /* or whatever */
height: 200px; /* or whatever */
white-space: nowrap;
}
ul#container li
{
display: inline-block;
width: 100px; /* or whatever */
height: 200px; /* or whatever */
}
<ul id="container">
<li>Item One</li>
<li>Item Two</li>
<li>Item three</li>
<li>...<!-- you get the point --></li>
</ul>
You might need to use float: left; on the li elements, but I'm not sure. And it maybe depends on the browser you, or your users, will be using.
I'll check this out when I get home, but for now I offer you a demo at: http://jsbin.com/atuvo
Try this...
We did a nice component that works with jQuery. It's easy to use.
http://api.mutado.com/mobile/mtdtouch/js/
There's is also a demo that works on iPhone and iPad if you want to try it.
Cheers,
Lorenzo
iScroll is pretty awesome too, it does nice horizontal momentum scrolling: http://cubiq.org/iscroll
You can take it here http://appradar.ru/
<script src="http://appradar.ru/wp-content/themes/appradar/js/jquery.horizontal.scroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var w = 0, h = 0;
$('#slider div').each(function(i, index){
w += $(this).outerWidth();
h = $(this).outerHeight() > h ? $(this).outerHeight() : h;
});
$('#slider').width(w).height(h);
$('#slider-outer').height(h + 8).horizontalScroll();
});
</script>