i have a onsenui sliding menu. when i click one of the menu option (electronics), it takes me to page 1. from page 1 i use the navigator push method to navigate to page 2. In page 2 i do see the sliding menu, but nothing happens when i click or swipe the sliding menu. But when i navigate back to page 1, it works.
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/onsenui.css">
<link rel="stylesheet" href="./css/onsen-css-components.css">
<script src="./js/angular/angular.js"></script>
<script src="./js/onsenui.js"></script>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<ons-navigator var="myNavigator">
<ons-page>
<ons-sliding-menu main-page="main.html" menu-page="menu.html" var="menu" swipeable=true max-slide-distance="200px">
</ons-sliding-menu>
</ons-page>
</ons-navigator>
<ons-template id="main.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Navigator - Main Page</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page1.html', {hoge: 'hoge'})">
Push Page 1
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-page>
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('main.html', {closeMenu: true})">Clothes</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">Electronics</ons-list-item>
</ons-list>
</ons-page>
</ons-template>
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 1</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 1</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Page 2</div>
</ons-toolbar>
<div style="text-align: center">
<h1>Page 2</h1>
<ons-button modifier="light"
ng-click="myNavigator.pushPage('page2.html', {title: 'Page'})">
Push Page
</ons-button>
<ons-button modifier="light"
ng-click="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
</body>
The parent element in your code is an ons-navigator and you have a sliding-menu as its direct child. You can see the navigator as a frame that change its content every time you push or pop a page. Therefore, with its default content, the sliding menu, you are able to use it normally. Actually this sliding menu is another frame that contains your main.html. The problem is that, when you push to "page 2", you are using the navigator's method to change all its content, including that sliding menu.
You can invert the order of your navigator and sliding menu, so when you change the content of the navigator, the sliding menu will remain as the outer frame.
Hope it helps.
Related
I'm obviously doing something wrong but this is my Day 2 with Bootstrap. I have a fluid container with two rows. On the first row I've got a title and an image. That image - even though I reduced the height and have it set to responsive, causes that second column in the first row to basically extend to almost the whole page. When I remove the image, the world makes sense. When I put the image back, the container blows up. Happens with any image so it isn't the image, it is my bad bootstrap.
`<!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>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col">
<img src="masterchef.png" class="img-responsive h-25" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>`
Tried using the thumbnail class, tried looking through Bootstrap docs, tried reordering to see if that helps. Did not help.
To fix these kinds of errors you need to learn how columns work in bootstrap:
You can read more about the columns here
The bootstrap columns are divided in this way, currently in your code you have entered only col which means they are columns that do not specify their size but fit the next columns;
Instead, in this example, the columns are expressed and you can command the display from mobile to desktop:
<!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>A basic website with Bootstrap #1</title>
<!-- Including Bootstrap here-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid bg-secondary">
<div class="row">
<div class="col-6 col-md-12">
<h1 class="title-text text-light">Welcome to this Bootstrap Site #1</h1>
</div>
<div class="col-6 col-md-12">
<img src="https://e7.pngegg.com/pngimages/526/683/png-clipart-take-out-chef-s-uniform-cafe-yuva-indian-cuisine-master-chef-thumbnail.png" class="img-responsive" alt="">
</div>
</div>
<div class="row">
<div class="col-12">
<!--col-12 means that on all devices it will be 100% width magnitude-->
<h2 class="subtitle-text text-light">A site to learn Bootstrap well</h2>
</div>
</div>
</div>
<!--<div class="container-fluid menu-options">
<div class="col">
<button type = "button" class="btn mx-1 btn-primary">Home</button>
<button type = "button" class="btn mx-1 btn-primary">Men's</button>
<button type = "button" class="btn mx-1 btn-primary">Women's</button>
<button type = "button" class="btn mx-1 btn-primary">Clearance</button>
</div>
</div>
-->
</body>
</html>
(Did you see that? with the simple addition of the md class, but there are many others!)
In this case I inserted two columns in the row, so that from mobile the view would be split in two and after the tablet (md) would display
read more about bootstrap breakpoints
I got help offline. The main issue isn’t with Bootstrap, but with how percentages work. I had the h-25 class on the element. The h-25 class attempts to set the height of an element to 25% of its parent. However, percentages only work properly when the parent has a well-defined/fixed height. When the parent doesn’t have a well-defined height, the browser enters a kind of feedback loop as it tries to adjust the set the height to a percentage while also adjusting the parent height to contain it.
Solutions
The easiest solution is to remove “h-25” and set a fixed height on the
Another option is to set a fixed height on the parent so that the percentage can be calculated definitively.
I went with the first option as putting a size on the image made it responsive where it doesn't overflow the container on smaller viewports.
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument
Does anyone know of a jquery plugin that has a background slide show and a gallery that changes background images every time someone opens the site or every hour or so?
There are lot of jQuery slideshow plugins. I would recommend you to look at the following:
Slide JS - http://www.slidesjs.com/
<head>
<title>Title</title>
<style type="text/css" media="screen">
.slides_container {
width:570px;
height:270px;
}
.slides_container div {
width:570px;
height:270px;
display:block;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="slides.js"></script>
<script>
$(function(){
$("#slides").slides();
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
<div>
<img src="http://placehold.it/570x270">
</div>
</div>
</div>
</body>
Also, check some good slideshow plugins here
I have been working on this for a bit and am not savvy enough to know how to correctly implement it (such that it remains a responsive design).
I am running the free "responsive" wordpress theme by ThemeID on a test site and need to have the main body content text of the single article page wrap underneath the right sidebar and adjust "dynamically" as the sidebar changes height over time. I plan on having the "Archives" widget in this right sidebar, so over time it will grow in height...so the body text should not extend to underneath the sidebar until it reaches the bottom of the sidebar. Take a look at a mockup I made real quick to demonstrate what I mean.
Before: http://www.heliossolutions.net/responsive.jpg
After 2: http://www.heliossolutions.net/responsive3.jpg
As you can see, the text currently leaves a huge white space beneath the sidebar but I would like for it to be able to flow underneath and adapt to the sidebar height. It also needs to maintain the responsive nature of the theme and work correctly on mobile devices (i.e. the sidebar widgets should properly display underneath all the content when viewed on a mobile phone, as it does out-of-the-box).
Does this make sense?
The page code currently looks like this:
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" dir="ltr" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" dir="ltr" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" dir="ltr" lang="en-US"> <!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="template" content="Responsive 1.6.9" />
</head>
<body class="single single-post postid-36 single-format-standard">
<div id="container" class="hfeed">
<div id="header">
<div id="logo">
</div><!-- end of #logo -->
<ul class="menu"><li >Home</li></ul>
</div><!-- end of #header -->
<div id="wrapper" class="clearfix">
<div id="content" class="grid col-620">
<div id="post-36" class="post-36 post type-post status-publish format-standard hentry category-web-development">
<div class="post-meta">
<span class="meta-prep meta-prep-author">Posted on </span> July 2, 2012</span>
</div><!-- end of .post-meta -->
<div class="post-entry">
<p>Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.Post content here.</p>
</div><!-- end of .post-entry -->
<div class="post-data">
</div><!-- end of .post-data -->
<div class="post-edit"></div>
</div><!-- end of #post-36 -->
<div id="respond">
<h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/parallax-slider/#respond" style="display:none;">Cancel reply</a></small></h3>
<p class="must-log-in">You must be logged in to post a comment.</p>
</div><!-- #respond -->
</div><!-- end of #content -->
<div id="widgets" class="grid col-300 fit">
<div class="widget-wrapper">
<div class="widget-title">In Archive</div>
<ul>
</ul>
</div><!-- end of .widget-wrapper -->
</div><!-- end of #widgets --> </div><!-- end of #wrapper -->
</div><!-- end of #container -->
<div id="footer" class="clearfix">
<div id="footer-wrapper">
<div class="grid col-940">
<div class="grid col-540">
</div><!-- end of col-540 -->
<div class="grid col-380 fit">
<ul class="social-icons"></ul><!-- end of .social-icons --> </div><!-- end of col-380 fit -->
</div><!-- end of col-940 -->
<div class="grid col-300 copyright">
© 2012
</div><!-- end of .copyright -->
<div class="grid col-300 scroll-top">↑</div>
<div class="grid col-300 fit powered">
</div><!-- end .powered -->
</div><!-- end #footer-wrapper -->
</div><!-- end #footer -->
</body>
</html>
And the corresponding CSS (tried to give you more than enough, since I can't pinpoint the exact issue):
#content {
margin-bottom:20px;
}
.grid {
float:left;
margin-bottom:2.127659574468%;
padding-top:0;
}
.col-60,
.col-140,
.col-220,
.col-300,
.col-380,
.col-460,
.col-540,
.col-620,
.col-700,
.col-780,
.col-860 {
display:inline;
margin-right:2.127659574468%;
}
.col-620 {
width:65.957446808511%;
}
.post-meta {
clear:both;
color:#9f9f9f;
font-size:13px;
margin-bottom:10px;
}
.post-entry {
clear:both;
}
.post-data {
clear:both;
font-size:11px;
font-weight:700;
margin-top:20px;
}
.post-edit {
clear:both;
display:block;
font-size:12px;
margin:1.5em 0;
}
#widgets {
margin-top:40px;
}
.col-300 {
width:31.914893617021%;
}
.fit {
margin-left:0!important;
margin-right:0!important;
}
.widget-wrapper {
-webkit-border-radius:6px;
-moz-border-radius:6px;
background-color:#f9f9f9;
border:1px solid #d6d6d6;
border-radius:6px;
font-size:13px;
margin:0 0 20px;
padding:20px;
}
.clearfix:after,
#container:after,
.widget-wrapper:after {
clear:both;
content:"\0020";
display:block;
height:0;
max-height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix,
#container,
.widget-wrapper {
display:inline-block;
}
.clearfix,
#container,
.widget-wrapper {
display:block;
}
Any ideas as how to do this? I know it is possible and probably a simple change, I'm just not adept enough at responsive CSS to see it!
Thanks,
D
[4/9/12 - Updated HTML code to show entire page, with extra Head info (javascript and style sheets) removed]
It's hard to tell because your HTML is not complete (most of the divs are not closed for example). However, both .widget-wrapper and .col-300 have bottom margins which if remove might do the trick.
I've run into this curious validation error in Visual Studio 2010 with HTML5 validation selected:
Is this a validation error (legitimate or a bug in Visual Studio) or am I missing something obvious and simple?
Edit: added relevant code.
View cshtml:
#model My.Web.ViewModels.ListVideos
#{
ViewBag.Title = "All Videos";
}
#foreach (var item in Model.Videos) {
<a href="#Url.Action("Play", "Player", new { videoId = item.VideoId })">
<img src="http://i2.ytimg.com/vi/#item.PublisherVideoId/default.jpg" alt="#item.Title" style="border: 0" />
</a>
}
_Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My Web</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Videos", "ListVideos", "Player")</li>
<li>#Html.ActionLink("Dev", "Index", "Dev")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
You need visual studio 2010 SP1 web standards update to have this work properly. It is a bug.
See more here: http://blogs.msdn.com/b/webdevtools/archive/2011/06/15/web-standards-update-for-visual-studio-2010-sp1.aspx?PageIndex=2
Get the web standards update here:
http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83
If you check the W3C documentation about Html5 you will find that you can have inside a a tag anything if it's not button or other links.
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).