Header Links HTML
<ul ng-controller="pageRouteCtrl">
<li ui-sref-active="active">
<a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a>
</li>
<li>
<a ng-click="getPageId('playback')">PLAYBACK</a>
</li>
</ul>
Ctrl
myApp.controller('pageRouteCtrl', function ($scope, $rootScope) {
$scope.getPageId = function(id) {
$rootScope.route = id;
}
});
Main Page HTML
//should be visible on page load and until playback link is clicked
<div id="live-view" ng-show="route == 'live-view'">
SOME CONTENT
</div>
//will be hidden initially on page load
<div id="playback" ng-show="route == 'playback'">
SOME CONTENT
</div>
The above code works and display <div> content based on link clicked. Subsequently when user clicks on either Live or Playback, div content will be shown.
How do I make live-view div show by default on page load ?
Write following code in controller:
myApp.controller('pageRouteCtrl', function ($scope, $rootScope) {
$rootScope.route = 'live-view';
$scope.getPageId = function(id) {
$rootScope.route = id;
}
});
Related
Ultimately I'm wanting the user to click on the Landing Page next to an image on either Print or Mug. Then on the Order Page have the button for Print/Mug be active and then the image that's associated be marked as well.
So I have in Landing Page the following code:
<ul class="dropdown-menu">
<li>
Print
</li>
<li>
Mug
</li>
</ul>
Then in the Order Page the following code:
<div class="img-container1 image-container" image_var="main_image.jpg">
<%= image_tag('main_image.jpg') %>
<div class="wk-after">
<div class="centered-wk">
<span class="fa fa-check-circle check-circle"></span>
</div>
<div class="centered-wk wk-select">
SELECTED
</div>
</div>
</div>
My thought process was to then grab from the Order Page the image_var attribute and make it active.
So far I've been using:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('image_var');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
This isn't working. I don't know what the best way to grab the image_var or a url parameter. What am I missing?
I've also tried:
<script>
function toggleActive() {
var activeElements = document.querySelectorAll('[image-var]');
activeElements.forEach(function (el) {
el.classList.remove('active');
});
btn.classList.add('active');
}
</script>
With an update to the div on the container to be image-var to match. Still not touching the image.
I feel like this should be working with jQuery:
<script>
$(function(){
$.url.attr('image')
$.url.attr('type')
});
</script>
Wouldn't this be pulling out the main_image.jpg and then the print from type?
I have a left nav in my one of the view of the application whiich is build using ng-repeat and ng-switch. every link's action associate to a directive in the right hand side. some time, the particular directive will include other directive when user click on the dropdown items from the current directive and page gets extended long and long , so if user want to go to the original state then he can click on the nav item from the left nav to refresh the page to the initial state of the directive. But whenever user clicks on the left nav second time when the left nav already selected, it is not get triggered.I want this get tirggered to bring my initial page of the RHS.
My highlevel code as follows
about.html
<div class="leftNav">
<ul class="nav myNav">
<li class="presentation" ng-repeat="link in links" ng-class="{link-active:currentLink=link.value==param}">
<a ng-href="#/home/{{link.value}}" ng-click="fetchLink(param)">{{link.title}}</a>
</li>
</ul>
</div>
<div ng-switch="fetchLink()">
<div ng-switch-when="About Us">
<div about-us></div>
</div>
<div ng-switch-when="Board Directors">
<div board-directors></div>
</div>
<div ng-switch-when="Our Impacts">
<div our-impacts></div>
</div>
</div>
aboutController.js
$scope.links = [{ title="About Us", value="about"},
{ title="Board Directors",value="board"},
{ title="Our Impacts", value="impact"} ];
var myParam =$root.current.params;
$scope.param = myParam.sec;
//sec has been configured in the route and get
// the values from user's input
$scope.fetchLink() = function() {
var retVal='';
var retVals = $.grep($scope.links, function(item,ind){
return item.value=$scope.param
});
if(retVals.length>0){
retVal = retVals[0].title;
}
return retVal;
};
};
On the router code of app.js
$routeProvider
.when('/about/:sec', {
templateUrl : 'app/view/about.html',
controller: 'aboutController.js'
});
}
When i click the second time, nothing get triggered and fetchLink() method is not triggered.
Im trying to create a navigation bar but i get stuck with this code.
What happens is when i click the menu it navigates to the right page. When i click again the variable is set. But is it possible to set the variable while navigating.
<div>
<nav class="{{active}}" >
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
</nav>
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
EDIT
I change the header page to this but i still can get it working.
<div>
<nav ng-controller="testController" class="{{active}}">
<!-- When a link in the menu is clicked, we set the active variable -->
<a href="#/" class="home" >Home</a>
<a href="#/second" class="second" >second</a>
<a href="#/third" class="third" >third</a>
</nav>
</div>
css
nav.home .home,
nav.second .second,
nav.third .third{
background-color:#e35885;
}
You can achieve that by listening to location changes and using the ng-class directive :
CSS :
.active, .active:focus{
color: red;
}
HTML :
<div ng-app="testApp">
<div ng-controller="testController">
<div>
<!-- When a link in the menu is clicked, we set the active variable -->
Home
second
third
</div>
</div>
</div>
Javascript :
var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $location, $rootScope, $log) {
$scope.locationsDescriptions = {
'#/': 'Home',
'#/second': 'Second',
'#/third': 'Third'
}
$scope.isPageSelected = function (pageName) {
return $scope.active == pageName ? 'active' : '';
}
$scope.$on("$locationChangeSuccess", function (event, next, current) {
var location = this.location.hash.toLowerCase();
$scope.active = $scope.locationsDescriptions[location];
});
});
OUTLINE:
I have a products page with a working jQuery filtering system based on products class names. I have provided a basic example of my code below:
// PRODUCTS PAGE FUNCTIONS
function filterAll() {
$('.download').show("slow");
$('.ourprod').show("slow");
$('.accessories').show("slow");
$('.club').show("slow");
}
function filterClubs() {
$('.download').hide("slow");
$('.ourprod').hide("slow");
$('.accessories').hide("slow");
$('.club').show("slow");
}
function filterProds() {
$('.download').hide("slow");
$('.club').hide("slow");
$('.accessories').hide("slow");
$('.ourprod').show("slow");
}
function filterAccess() {
$('.download').hide("slow");
$('.club').hide("slow");
$('.ourprod').hide("slow");
$('.accessories').show("slow");
}
function filterVideos() {
$('.accessories').hide("slow");
$('.club').hide("slow");
$('.ourprod').hide("slow");
$('.download').show("slow");
}
//HOMEPAGE FUNCTION
function loadProductsPage() {
window.location = 'products.php';
}
// PRODUCTS PAGE EVENTS
$('#filterall').click(function() {
filterAll();
});
$('#filterclubs').click(function() {
filterClubs();
});
$('#filterprods').click(function() {
filterProds();
});
$('#filteraccessories').click(function() {
filterAccess();
});
$('#filtervideos').click(function() {
filterVideos();
});
.box {
background: red;
width: 100px;
height: 100px float: left;
}
.filter a {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="shop-filter">
<section class="container">
<div class="row">
<ul class="filter nav navbar-nav">
<li><a id="filterall">All</a>
</li>
<li><a id="filterclubs">Clubs</a>
</li>
<li><a id="filterprods">Our Products</a>
</li>
<li><a id="filteraccessories">Accessories</a>
</li>
<li><a id="filtervideos">Videos</a>
</li>
</ul>
</div>
</section>
</nav>
<div class="box club">
<h4>CLUB</h4>
<span> - $89.99</span>
</div>
<div class="box ourprod">
<h4>PRODUCT</h4>
<span> - $39.99</span>
</div>
<div class="box download">
<h4>Download</h4>
<span> - $9.95</span>
</div>
<div class="box accessories">
<h4>Accessories</h4>
<span> - $XX.XX</span>
</div>
PROBLEM:
On the homepage I have links that I would like to direct to the products page BUT with the corresponding filter applied after the page loads. Here is the homepage HTML, which is linked to the above scripts:
<a id="loadclubs" href="javascript:void(0)">
<h1>Training Clubs</h1>
</a>
<a id="loadvideos" href="javascript:void(0)">
<h1>Training Videos</h1>
</a>
<a id="loadaccessories" href="javascript:void(0)">
<h1>Accessories</h1>
</a>
I am new to jQuery/Javascript so any other advice to clean up my scripts would be appreciated!
As you are linking to the next page without posting data, you will need to use some sort of method to store information and retrieve it on the next page. This will then need to be read by the javascript to modify the DOM. There are some ways to do this:
request parameters: <a href=newpage.html?from=accessories>, then in the next page, var req = get('from'); // == accesories (where req() is a function that gets request variables), then when the page loads, modify the DOM by either calling the appropriate function or by simply hiding items as required.
eg.
first page: <a id="loadclubs" href="item?id=123&filter=accessories">Training Clubs</h1></a>
second page:
<script>
var filter = .....; // get the filter param
if (filter == "accessories") { filterAccess(); }
OR
if (filter == "accessories") {
$('.download').css("display", "none");
$('.club').css("display", "none");
$('.ourprod').css("display", "none");
$('.accessories').css("display", "initial");
}
</script>
localstorage: similar to the above, but when a link is clicked, store values into localstorage, then retreieve it in the next page and once again call the display functions/hide items.
Mix of request parameters and controller methods - depending on the request parameters, initially style the links with display properties.
I wanted to view different HTML pages based on what a user clicks. For example, I have three tabs set up as so:
<div class="span7" >
<ul class="nav nav-tabs" style="margin-bottom: 5px;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="span12" style="margin-left:0;" ng-grid="gridOptions"></div>
</div>
And I merely want to view a different page based off of what the individual clicks. For example, if he clicks First, he will see First's html page where source.sourceObject in the code below denotes which html page to view. It is written like so:
<div class="span5">
<div class="edus-activity-container">
<div ng-show="sourceViewState.selected" class="edus-admin-activities-grid" />
</div>
<div ng-include="'/partials/' + source.sourceObject + '.html'"/>
</div>
where in my javascript file, source.sourceObject is defined based off of if I click the First, Second or Third tab. However, my implementation is not working. I made sure I had no typos in the spelling of my files in source.sourceObject. Any ideas on how to do so?
In your controller:
var pages = { 'one': 'partials/one.html', 'two':'partials/two.html' }
$scope.currentPage = pages['one'] ; //This is required if you want a default page
$scope.first = function(){ $scope.currentPage = pages['one']; }
$scope.two = function(){ $scope.currentPage = pages['two']; }
In your template/HTML
<div ng-include="currentPage"/>