I have been attempting to have a tab in my cordova app in which a map is shown. I want users to be able to pinch to zoom in and out of the image and pan. I used the latest iScroll build and I wasn't able to get anything to work correctly. I have recently come across this demo
http://lab.cubiq.org/iscroll/examples/zoom/
Which does exactly what I want my app to do and works in my phone's browser. However, when I copied the iscroll.js and source of this demo and pasted it into my app to test it through cordova, I was not able to zoom on my android phone or ios emulator, only pan around. I have achieved the same on the page I actually want to apply this to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
zoom:true,
onBeforeScrollStart:null,
zoomMin:0.25,
zoomStart:0.5,
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css">
html {
-ms-touch-action: none;
}
body {
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
background: #ccc;
overflow: auto;
}
#scroller {
position:relative;
background: #ccc;
/*-webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:725px;
padding:0;
}
img {
-webkit-transform:translate3d(0,0,0);
}
</style>
</head>
<body Onload="loaded()">
<ons-screen>
<ons-navigator title="Map">
<div id="wrapper">
<div id="scroller">
<!--<iframe src="thing.html" style="width:100%; height:100%"></iframe>-->
<img src="img/map.png"></img>
</ons-page>
</div>
</ons-navigator>
</ons-screen>
</body>
<!--<script src="js/hammer.min.js"></script>
<script src="js/myLogic.js"></script>-->
</html>
If anyone can help me figure out why this works in browser, but not when translated to native code, or how to make it work, I will be forever in your debt.
Related
I asked this question to answer it because there is no clear info or question about this. I found the solution in a comment, not in an answer. so I hope this will help others.
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
btn
<div class="box" id="box"></div>
</body>
</html>
CSS
.btn{
width: 150px;
height: 50px;
cursor: pointer;
margin: 10px;
background: black;
color: white;
}
.box{
width: 200px;
height: 200px;
background: orange;
margin: 5px;
}
javascript
var box = document.getElementById("box");
function clickBtn() {
if (box.style.background = "orange"){
box.style.background = "blue";
} else {
box.style.background = "green";
}
}
use href="javascript:void(0)" in a tag. The javascript:void(0) can be used when we don't want to refresh or load a new page in the browser on clicking a hyperlink.
1- If you use <a> as a button, it will refresh the page as long as it has href="". so remove href and it will work without refreshing the page.
2- if you want to keep the href, then change the <a> to button. it worked for me.
I want to make responsive page using react JS. I have some problems making it. I don't really know how media query CSS works, but for #media(max-width:1024) and #media(max-width:768px) sizes it works as I expected.
I guess for size #media (max-width:425px) will also work as where #media(max-width:768px) works. But apparently starting from #media(max-width:425px) it follows the previous breakpoint(#media(max-width:768px)) and #media(max-width:375px) following the #media(max-width:425px) style. At breakpoint 320px back to my expectations.
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
This is content
</div>
</body>
</html>
And this is my CSS code:
.container{
background-color: red;
height: 100vh;
}
#media(max-width:1024px){
.container{
background-color: yellow;
}
}
#media(max-width:768px){
.container{
background-color: green;
}
}
#media(max-width:425px){
.container{
background-color: blue;
}
}
#media(max-width:375px){
.container{
background-color: rosybrown;
}
}
#media(max-width:320px){
.container{
background-color: rosybrown;
}
}
Is there a way for each breakpoint to take its own style. As in max-width:1024px which takes a yellow background and max-width:768px takes a green background. Is it possible if I want if at max-width:425px it takes a blue background and at max-width:375 it takes a rosybrown color. Thank you in advance.
Try adding the only screen
#media(only screen and max-width:768px){
.container{
background-color: green;
}
}
I'm experimenting with some touch integration with my web app and i'm noticing that with the code posted below the block that moves on touch has a costant offset and I can temporarly remove it by going in f11 mode. How do i remove it such that the block is always under the finger?
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<title>A title</title>
</head>
<style>
body {
width: 100vw;
height: 100vh;
position: absolute;
top: -8px;
left: -8px;
overflow: hidden;
}
</style>
<body>
<div id="bup" style="position:absolute; background-color:blue;width:100px;height:100px;"></div>
<script>
var touch = [];
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
touch = event.touches;
document.getElementById('bup').style.top= (touch[0].screenY-50) + 'px';
document.getElementById('bup').style.left= (touch[0].screenX-50) + 'px';
}, false);
</script>
</body>
</html>
(the -50 is there just to center the block on my finger considering that the block it self is 100x100px)
ty
Alright i solved it my self.
the issue was the touch[0].screenX. I shoud have used touch[0].clientX, same for the Y.
Hope this helps someone, see ya
This is my code:
<!doctype html>
<html lang="en-US">
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
</head>
<body class="menu">
<header>
Toggle
<nav class="menu-side">
This is a side menu
</nav>
</header>
<p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
<p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>
The css:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu{
overflow-x:hidden;
position: relative;
left: 0px;
}
.menu-open {
left: 231px;
}
And the jquery:
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
return false;
});
})();
I'm using the Brackets program to write my code, but when I go to the live view after I saved everything and i press "toggle" the page wont move and I looked over everything and Im 98% sure its correct.
Put <script src="Home.js"></script> before the </body> tag.
I made another class
.menu-side-open{
left:0px;
}
and JQuery
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
$('.menu-side').toggleClass('menu-side-open');
return false;
});
})();
Also added
.menu, .menu-side{
transition: 300ms;
}
for a nice slide :)
JSFiddle demo
You need to include jQuery if you want to use it.
Add this line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
In your html's head or before you use jQuery!
e.g.
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
Change this:
body.toggleClass('menu-open');
to this:
$('.menu-side').toggleClass('menu-open');
And change the .menu-open css class to this:
.menu-open {
top:10%;
left: 0px;
}
Here is the JSFiddle demo
Its the .menu-side that is hidden on the left. Therefore you should be applying the menu-open class to .menu-side and not the body tag.
Your CSS was setting the left of .menu-side to 231px, setting it back to 0px is enough to make the menu appear back into view. And when the menu appeared, it covered the 'Toggle' link, therefore I also added top:10% to the .menu-open class CSS.
I think it is related to a missing file from the computer. I have the same issue with my computer and it does not really matter wether you put the CSS and JS into the HTML page. The result will be the same. When you open the page in the browser, you won`t see any changes, and if I press F12 it says: Failed to load resource: net::ERR_FILE_NOT_FOUND or dll file not found or something like that
I have am image on my page and i am changing its image source with java script.
All I need is to change this image with some beautiful sliding effect.
What I want is when i click on a button to change the image, the first image should disappear and another one should show in some some decent way (not like a jerk or blink)
You can put second image behind the first one, and then make fadeout() efect on the first image.
use this code
$(".firstimage_classname").fadeout();
$(".secondimage_classname").fadeIn();
you can give time interval as well.
otherwise try
$(".firstimage_classname").slideUp();
$(".secondimage_classname").fadeIn();
Try This Code
$(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
var $next = $(this).attr('src','http://abc.com/logo.png');
});
Hope it would helps you.
Enjoy
Here you go example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.front{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 10;
}
.back{
width: 300px;
height: 300px;
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
<!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
</head>
<body>
<div id="content">
<img src="1.jpg" class="front" />
</div>
<script type="text/javascript">
$(function(){
$('.front').click(function(){
$('#content').append('<img src="2.jpg" class="back" />');
$(this).fadeOut(500, function(){
$('.front').remove();
$('.back').addClass('front').removeClass('back');
});
});
});
</script>
</body>
</html>