I'm using Angular Snap module but I can't make it only use a section of my page. For example I want yo leave header and footer intact when "snaping".
The follow example code describe my issue http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview
Code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-snap.css" type="text/css" />
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script>
<script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- Header Image should here -->
<header>
<h1>Header</h1>
</header>
<!-- Menu Bar goes here -->
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li class="active"><a class="test" href="#">This is the one</a>
<ul class="submenu">
<li>Submenu item 1
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
<!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
<snap-drawer>
<button snap-toggle>Another Toggle Button</button>
</snap-drawer>
<snap-content snap-options="{tapToClose:false}">
<button snap-toggle>Toggle</button>
</snap-content>
</body>
</html>
Thanks
Plugin creator gives me answer for this on https://github.com/jtrussell/angular-snap.js/issues/75
I copy answer here for Archive purpose:
It's doable, here's an example with a fixed footer from a previous
thread, Snap still applies to the whole page we're just showing
content over it:
http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview
You can change it to a fixed header by updating the nav element like
so:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:red">
<div class="container">
Bottom container stuff!
</div>
</nav>
Just fair warning there are some issues with using fixed position
elements, just something to keep in mind.
The snap-content directive should expand to fill it's container, so
you may also be able to get something working by wrapping that element
in a non-static positioned element. Here's a rough demo.
Related
I am new to angular and attempting to get my routing to work. It is coming up with nothing.
I'm using dreamweaver, it prompts me with the error "angular is not defined" but the js file is placed after the angular ones in the header?
When I click the links it does not direct me to anything and nothing is viewed. I suspect that either the code is broken or I am not setting up the ng-view correctly.
Would anyone be able to advise on how to get it working?
<header class="hidden-sm" >
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap/dist/css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?
family=Droid+Serif|Roboto:300"
rel="stylesheet">
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</header>
<nav class="container" id="main-nav">
<ul id="navlist">
<li class="navli">Build a PC</li>-
<li class="navli">About Us</li>-
<li class="navli"><a href="#/"><img src="images/hive32color.png"
alt="bee-logo"></a></li>-
<li class="navli">Contact Us</li>-
<li class="navli">Inside our Machines</li>
</ul>
</nav>
<section class="container">
<div class="col-lg-9" ng-view>
</div>
<aside class="col-lg-3">
</aside>
</section>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</body>
angular.module('myApp', ['ngRoute','RouteControllers']);
angular.module('myApp').config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',{
templateUrl:'templates/about.html',
controller:'AboutController'
})
.when('/build',{
templateUrl:'templates/build.html',
controller:'BuildController'
})
.when('/contact',{
templateUrl:'templates/contact.html',
controller:'ContactController'
})
.when('/inside',{
templateUrl:'templates/inside.html',
controller:'InsideController'
});
});
edit: I realised i was not running a web server, i have done that now and it still is not working!
there is no need to add "/" after "#" in href. Just try href="#Contact" for your reference https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating
I am sure there are techniques to have a better SEO approach using AngularJS features, (https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/).
As an example, the source code of a project I am currently developing, returns the next:
<html lang="en" data-ng-app="ByTheWayApp" data-ng-controller="general">
<head>
<title>ByTheWay</title>
<base href="/" />
<meta charset="utf-8" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700|Courgette|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,latin-ext" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
href="/assets/css/bytheway.css">
<link
rel="stylesheet"
type="text/css"
ng-href="{{ templateCSS }}">
</head>
<body>
<app>
<div class="loading">
<span>ByTheWay</span>
</div>
<div class="app-wrapper {{ displayClass }}" load >
<header class="header h-3 fixed">
<div class="inner-wrapper">
<div class="brand wpx-7">
<a href="/">
<h1 class="title"><span>ByTheWay</span></h1>
<h2 class="slogan"><span>chasing dreams worldwide</span></h2>
</a>
</div>
<nav class="nav w-auto text-right aw-const" id="nav">
home
sign in
<strong>sign up</strong>
</nav>
</div>
</header>
<div class="page" data-ng-controller="page" data-ng-view>
<!-- Here Go Every Page Templates using $routeProvider.when('',{}); -->
</div>
</div>
</app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script type="text/javascript" src="/assets/js/bytheway.js"></script>
</body>
</html>
.
<div class="page"></div> would contain the Template .html file content, but it is not displayed when I check the source code, does the same happen when Google Spiders/Bots crawl my site ?
ps. I am not using yet meta tags, such description, tags, etc, because I am yet defining relevant content to be displayed.
Thank you and all the best
I am new to Angularjs- so have little bit of issue with understanding why my code is not working. Here is my problem:
I have 2 json data which I put in 2 factories- one listing animals and other fruits
I have 2 controllers for each factory. All I need is to pull data from these 2 factories and load the name into 2 set of buttons - Animals and Fruits
Display images on clicking these buttons.
I am having trouble is displaying both buttons in a single page. It works only one at a time i.e. either display animals or fruits- but not both.
Can anybody help me with this issue? This is my plnkr of the app.
P.S. Plunker has issue once a while with error message: Unable to
connect to any application instances. But app worked in plkr as well as locally
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="app.js"></script>
<script src="animalservices.js"></script>
<script src="fruitservices.js"></script>
<script src="animalController.js"></script>
<script src="fruitController.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Animals and Fruits</h1>
<div class="vertical-container" class="panel panel-default">
<div class="panel-body">
<div class="row">
<div ng-controller="animalController">
<div class="col-sm-7" id="img_container"><img src="{{thisanimalData.image || 'https://clcrlsconference.files.wordpress.com/2014/06/welcome.jpg'}}" id="animalImage" class="img-responsive" width="500" >
</div>
<div class="col-sm-5">
<h3>Animals</h3>
<button id="animalbutton" class="btn btn-link vleft" ng-repeat="checkanimal in animalData" data="{{checkanimal.name}}" ng-click="clickEvent($event)">{{checkanimal.name}}</button>
</div>
</div>
<div class="col-sm-7"ng-controller="fruitController">
<button id="fruitbutton" class="btn btn-link vleft" ng-repeat="checkfruit in fruitData" data="{{checkfruit.fruit}}" ng-click="clickEvent($event)">{{checkfruit.fruit}}</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
{{checkfruit.fruit}} should be {{checkfruit.name}}
fruit is not a property on an object inside the fruitData array.
I am looking for menu (vertical) which shows sub menu on mouse hover event. the sub menu should exactly come at the right side of selected main menu list.
I came up to main menu with ng repeat by following snippets.
<head>
<title>Links on Hover AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="LinksController.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="leftlinks.css">
</head>
<body>
<div id='content' ng-app='leftlinks' ng-controller='LinksController'>
<ul type='none'>
<li ng-repeat="link in links">{{link}}</li>
</ul>
</div>
</body>
</html>
app.controller("LinksController", function($scope){
$scope.links = ['link1','link2','link3','link4'];
});
Could someone please take me forward in using ng-mouseenter and leave events. TIA
Hope this helps
<ANY
ng-mouseenter="">
...
</ANY>
<button ng-mouseenter="count = count + 1" ng-init="count=0">
Increment (when mouse enters)
</button>
count: {{count}}
reference: https://docs.angularjs.org/api/ng/directive/ngMouseenter
I'd like to look through my code, and everywhere there is a class of ".inner" the width will adjust accordingly to that specific ".inner" class.
Right now, the code is detecting the first ".inner" and establishing that width for all future ".inner" divs.
I believe you have to use $(this) here.. but not sure where. Right now I'm using .each()
<html>
<head>
<link rel="stylesheet" id="iacq_main-css" href="style.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.6"></script>
</head>
<body>
<div class="outer">
<div class="inner">
<img class="hrimage left" src="hr-image.png">
<h2 class="wordwidth">The Story</h2>
<img class="hrimage right" src="hr-image.png">
</div>
</div>
<div class="outer">
<div class="inner">
<img class="hrimage left" src="hr-image.png">
<h2 class="wordwidth">wejrthwkrsfsafsdfeht</h2>
<img class="hrimage right" src="hr-image.png">
</div>
</div>
</body>
<script language="JavaScript" type="text/javascript">
$('.inner').each(function(){
var width = ('.inner .wordwidth');
var widthtotal = $(width).width() + 640;
$(this).css("width", widthtotal+"px");
});
</script>
</html>