I just make a example site because I want to make a mobile site..
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<link href="./framework/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.min.js"></script>
<script src="./framework/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Button</h1>
button
</div>
<div data-role="content">
button
button <br/>
button <br/>
button <br/>
button <br/>
button
</div>
<div data-role="footer">
<h1>Copyright</h1>
</div>
</div>
</body>
</html>
But when it is started in Mobile, a scrollbar has appeared..
When I don't use jQueryMobile, the scrollbar has gone..
I'm curious why scrollbar is made..
Because of ajax-loader? or Because of jQuery-css setting?
The scrollbar just conduct 1mm scrolling.. I want to remove it
Sample site is http://mbtistudy.cafe24.com/jstest.html
I'll appreciate your help..
Ok then you have to remove the min-height from ui-page ui-body-c ui-page-active which is causing the scrollbar. Also remove min-height where ever it's found also to .ui-mobile, .ui-mobile .ui-page if it's still showing then add overflow: hidden to this.
Add following style class into your page it will remove scroll bar.
.ui-mobile .ui-page
{
min-height: 300px;
overflow: hidden;
}
Add this in your CSS this will probability help:
.ui-content .ui-listview, .ui-panel-inner>.ui-listview { margin:0em}
Related
At the moment I am building an chatbox for my work, I got it all working fine on PC, it refreshes on a certain second, when I send/receive a message the last message is shown at the bottom.
The problem now, is that everything works too on the phone EXCEPT, auto scrolling down to the last message. So you only see the second last message, you need to scroll down with your finger on the phone to see the last message.
I tried many things as in cSS only or jQuery methods, nothing seems to work, maybe you guys can help me find the golden ticket.
Current code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/chatbox.css?v=5121">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="main">
<div class="box">
<h1>Chat</h1>
<section class="chatbox">
<section class="chat-window">
<div id="chatboxajax"></div>
</section>
<form class="chat-input" method="post">
<input type="text" name="message" autofocus autocomplete="off" placeholder="Message..." />
<input type="submit" style="position: absolute; left: -9999px"/>
<button>Send</button>
</form>
</section>
</div>
</div>
<script>
$('#chatboxajax').load("chatboxAjax.php");
setInterval(function(){
$('#chatboxajax').load("chatboxAjax.php");
}, 1000);
</script>
</body>
</html>
Here's a link to the page so you can check out what's happening when I test the responsiveness: https://flightacademykickz.netlify.app/
The HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<link href="//db.onlinewebfonts.com/c/04559eae8b7926d003f9f2e036c9e076?family=Blippo" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="title-container">
<h1 class="store-title">Flight Academy Kickz</h1>
</div>
<canvas class="webgl"></canvas>
<div class="links">
<h1 class="shop-link">Shop</h1>
</div>
</div>
</body>
</html>
After a quick look at the page's code - just removing the top: 20rem from class="title-container" solved the problem. This was causing the title element overlapping and creating the whitespace at the bottom.
For vertical aligning elements better don't use fixed values on elements. Either use:
top: 50%; transform: translateX(-50%) in a relative container or flexbox to do so. That also secures responsivness.
I am trying to implement the parallax effect in the website WRT the following link
https://github.com/richardshepherd/Parallax-Scrolling
however
in the website one image(parkview) screen short added, I need to keep stationary so that I can add menu and sub menu in that ,currently its moving like other image .
I tried setting it as a background but the whole background changes.
How can I make it fix??
This is the working code
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
<meta name="author" content="Richard Shepherd, Smashing Magazine">
<!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="log">
<img src="images/logo.png">
</div>
<div id="main" role="main">
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
<p>Words and pictures by Richard Shepherd / Twitter: #richardshepherd / Web: richardshepherd.com</p>
<p>GitHub: Fork it here!</p>
</article>
</section>
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
You can add position: fixed to it or make another element with background and background-attachment: fixed.
i have a menu which contains home,patient,reports etc. This menu should be present in each and every page and it should be present at the top right of each page. I know how to design this.Now i wanted to make it hidden and it should display only when mouse is placed at the top right side of a page.Please guys tell me how to do this.If you want the code for menu bar then here is this
<html class="no-js" lang="en-US">
<head>
<style type="css/text">
body{
overflow:hidden;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Home</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="base.css">
<script src="jquery.min.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.5.1" />
</head>
<body >
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="links">
<li>Home</li>
<li>Patient</li>
<li>Appointments</li>
<li>Reports</li>
<li>logout</li>
</ul>
</div>
</nav>
</section>
</header>
</body>
</html>
hi i have made a example for u i hope this helps the first example shows that whenu hover over the menu show but when u stop the hover on the box the menu will disapear
http://jsfiddle.net/nFwWG/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
$("#righttopbox").on('mouseleave',function(){
$("#global-nav").hide();
});
the second one show when u hover once the menu will stay
http://jsfiddle.net/nFwWG/1/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
also dont forget to put jquery script on the header you can use this hosted by google by typing in google jquery google.
or you can download it at
www.jquery.com
hope this helps
Assuming global-nav is at top right
JS:
$("#global-nav").mouseenter(function(){
$(".links", this).show();
}).mouseleave(function(){
$(".links", this).hide();
});
CSS:
#global-nav .links {
display:none;
}
If it is hidden and you want to make it appear when the mouse is at top right, then you probably have to use JavaScript with mousemove event on the body or such. Then check the mouse co-ordinates and if it's in your pre-defined range (top-right) then show up the menu. As you can see e.screenX and e.screenY will give you the mouse coords relative to screen.
I am working on creating pages for mobile devices with jQuery Mobile.
Here is the basic page template I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Page Title</h1>
</div>
<div data-role="content">
<div data-role="content" data-theme="a">
Page Content
</div>
</div>
</div>
</body>
</html>
When I try to view this on a mobile phone (Samsung Galaxy, iPhone, etc.) the page width is far too large (forcing scrolling on small resolution devices or very small text on larger resolution devices.)
Can anyone tell me what I am doing wrong?
Thank-you!
try adding this in the head
<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
also one <div data-role="content"> ... </div> is enough
You need to add a meta viewport tag to your head to set the page width to device width. It's covered in the blog posts at jquerymobile and updated docs:
jquerymobile.com/test/
I think the multiple data-role="content" are causing a styling issue. The Anatomy of a Page does not use multiple content data-role and the boiler plate template does not either.
It probably has something to do with your CSS. Check your <body>'s width and height.
For best results, you should use CSS media queries and check for screen resolution, thus having a different style depending on the user's screen.
For further reading:
http://www.w3.org/TR/css3-mediaqueries/
This might have something to do with <div data-role="content">.
Not sure you can have two of those on a page.
<div data-role="content">
<div data-role="content" data-theme="a">
Page Content
</div>
</div>
The docs don't suggest there could be more than one: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html