I am almost finished building a responsive navigation for my website, but I can't seem to get the Navigation to hide under a "Menu" button until clicked. Right now, when the window is small enough to meet the css queries, I just get a navigation that is stacked and all visible. Here is my javascript that I'm using. I hope someone can help me out here.
<script>
$(document).ready(function() {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
</script>
<script>
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(".nav").toggle();
});
if (ww < 800) {
$(".toggleMenu").css("display", "inline-block");
$(".nav").hide();
} else {
$(".toggleMenu").css("display", "none");
$(".nav li").hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}
</script>
Related
I'm trying to expand Kendo treeview all nodes on initialization.
But is not working. Here are solutions I have referenced:
1.http://dojo.telerik.com/UqOxa/2
2.http://www.telerik.com/forums/how-do-you-default-a-treeview-to-expanded-on-initialization
My source code:
html:
<div id="kendoTreeViewSelector"
kendo-tree-view="tree"
k-data-source="treeData"
k-on-change="selectedItem = dataItem"
k-on-data-bound="onDataBound"
ng-click="kendoTreeViewToggle($event)">
<span k-template>
{{dataItem.text}}
</span>
</div>
Angular controller:
ServiceMenusRepository.getMenus(data.EmployeeNO, 2, selectType, SystemSN,
function (data) {
if (data.data) {
$scope.treeData = new kendo.data.HierarchicalDataSource({
data: data.data,
});
$scope.subMenuItems = data.data;
$scope.onDataBound = function (e) {
setTimeout(function () {
$scope.tree.expand(".k-item");;
});
}
$scope.kendoTreeViewToggle = function (e) {
var target = $(e.target);
var toggleIcon = target.closest(".k-icon");
if (!toggleIcon.length) {
this.tree.toggle(target.closest(".k-item"));
}
};
$timeout(function () {
initMenu();
menu2q.resolve();
}, 0);
} else {
menu2q.resolve();
}
}, menuq.reject);
By the way, I'm using Kendo UI v2015.1.429.
Is there any suggestion for this problem?
Many thanks!!
In the dataBound event of the TreeView, try:
e.sender.expand(".k-item");
It's from the demo at http://demos.telerik.com/kendo-ui/dialog/treeview-integration. I just used it yesterday and my tree is all expanded.
You can also try adding an expanded: true field to the items in data.data as this demo does when it sets the data for its HierarchicalDataSource: http://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog
I have HTML code for YouTube player. If I open the .html file in IE, YouTube player loads successfully, but if I use WebBrowser control to load HTML text. Nothing happens in Webbrowser, it just blanks, I have no idea why WebBrowser can't load.
var html = File.ReadAllText(#"Lala.html");
webBrowser1.ScriptErrorsSuppressed = true;
webBrowser1.Navigate("about:blank");
if (webBrowser1.Document != null)
{
webBrowser1.Document.OpenNew(false);
webBrowser1.Document.Write(html);
}
webBrowser1.Refresh();
and the HTML code is
<html>
<body>
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'wUypYRJVA90',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: {
autoplay: 1
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>
</body>
</html>
http://codepen.io/leongaban/pen/PPLVNY?editors=101
I'm trying to have a flag var change when the left panel is open in an ionic app.
I found this and tried implementing it, but the variable doesn't change and I don't see the console.log statement.
Markup
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="padding">
<h1>{{changeMe}}</h1>
<p>Swipe to the right to reveal the left menu.</p>
<p>(On desktop click and drag from left to right)</p>
</ion-content>
</ion-view>
</script>
Controller
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicPlatform) {
$scope.changeMe = "This should change if left panel is open"
$scope.attendees = [
{ firstname: 'Nicolas', lastname: 'Cage' },
{ firstname: 'Jean-Claude', lastname: 'Van Damme' },
{ firstname: 'Keanu', lastname: 'Reeves' },
{ firstname: 'Steven', lastname: 'Seagal' }
];
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$ionicPlatform.registerBackButtonAction(function (event) {
$ionicSideMenuDelegate.toggleLeft();
$ionicSideMenuDelegate.$getByHandle('sideMenu').toggleLeft();
$timeout ( function() {
$scope.changeMe = "CHANGED! Left panel is open!";
console.log ("Status of SIDE MENU IS : " + $ionicSideMenuDelegate.$getByHandle('sideMenu').isOpen());
},1000);
}, 100);
})
Also tried this:
.run(function($ionicPlatform, $ionicSideMenuDelegate) {
$ionicPlatform.registerBackButtonAction(function(e) {
e.preventDefault();
if (!$ionicSideMenuDelegate.isOpen()) {
console.log('isOPEN!');
}
if (!$ionicSideMenuDelegate.isOpenLeft()) {
console.log('OPEN!');
$ionicSideMenuDelegate.toggleLeft();
} else {
console.log('Closed!');
}
}, 1000);
})
isOpenLeft() is working with me. :)
I'm using the below code to detect open or close slide menu.
$scope.$watch(function () {
return $ionicSideMenuDelegate.isOpenLeft();
},
function (isOpen) {
if (isOpen){
console.log("open");
} else{
console.log("close");
}
});
getOpenRatio worked! isOpen didn't work and isOpenLeft did not work for me.
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio === 1){
console.log('ratio is true');
$scope.isActive= true;
} else{
$scope.isActive = false;
console.log('ratio is false');
}
});
UPDATE: Just fixed it in my actual app as well! I had 2 ion-side-menus instead of just 1.
<ion-side-menus class="ion-home">
<!-- <ion-side-menus enable-menu-with-back-views="false"> -->
I'm developing an app (in my local machine) which displays various locations (an array that varies in size) in an accordion. I'm using the accordion and pagination directives from Angular UI Bootstrap with the Google Maps JS API-based directives from Angular Google Maps.
I have an issue where sometimes the map loads in the first item I clicked, then I click on another item in the accordion and the map doesn't load. Then a few minutes later, I'll refresh my browser and I click on the same item and the map will load. Then if I go to another page in the pagination, the maps aren't displayed there. As you can see in my code, I'm only calling the maps when I click on an item in the accordion, not when the items are loaded. I don't want a lot of maps to be loaded right away if the size of the locations array is large.
Here is a plunker demonstrating the problem, and here is a fiddle.
Here is some code from the example linked above which I think is important to the problem:
HTML body
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open" ng-repeat="location in locations | startFrom: (currentPage-1)*5| limitTo: 5">
<accordion-heading >
<strong get-map-dir location-index={{$index}}>Location</strong> - {{location.address1}}
</accordion-heading>
<div id="branch_map" class="" ng-show="showMap ">
<ui-gmap-google-map center='location.mapInfo.map.center' zoom='location.mapInfo.map.zoom'>
<ui-gmap-marker coords="location.mapInfo.marker.coords" options="location.mapInfo.marker.options" idkey="location.mapInfo.marker.id">
<ui-gmap-window ng-cloak closeClick="closeClick()">
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</accordion-group>
<pagination total-items="locations.length" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()" ng-hide="locations.length < itemsPerPage"></pagination>
</accordion>
JS (partial)
.factory('anotherService', function() {
//getMap using google-maps directive from angularjs-ui
var getMap = function(locationObj, outerCallBack) {
console.info('get map');
var mapInfo = {};
var address = locationObj.address1;
var zoom = 16;
var geocoder = new google.maps.Geocoder();
console.log(locationObj);
geocoder.geocode({
"address": address, //required
"region": 'CA' //CA for canada
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
var location = results[0].geometry.location,
lat = location.lat(),
lng = location.lng();
mapInfo.map = {
center: {
latitude: lat,
longitude: lng
},
zoom: zoom
};
mapInfo.marker = {
id: 0,
coords: {
latitude: lat,
longitude: lng
},
options: {
title: address
}
};
outerCallBack({
success: true,
mapInfo: mapInfo
});
} else if (status === google.maps.GeocoderStatus.ZERO_RESULTS) {
console.info("Geocoder was sucessful but has no results");
console.info("address =" + address);
return;
} else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
console.error("You are over your query limit");
console.info("address =" + address);
return;
} else if (status === google.maps.GeocoderStatus.REQUEST_DENIED) {
console.error("Your request has been denied by Geocoder");
return;
} else if (status === google.maps.GeocoderStatus.INVALID_REQUEST) {
console.error("Invalid Geocoder request");
return;
} else {
console.error("Google Maps in Ctrl failed");
console.error("address =" + address);
return;
}
});
};
var anotherService = {
getMap: getMap
};
return anotherService;
})
.directive('fetchMap', function($timeout, anotherService) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
console.log("get map dir");
console.log(scope);
console.log(elem);
console.log(attrs);
elem.bind('click', function(event) {
// console.clear();
console.log("You clicked on me");
console.log(scope.locations[attrs.locationIndex].mapInfo);
if (angular.isUndefined(scope.locations[attrs.locationIndex].mapInfo)) {
anotherService.getMap(scope.locations[attrs.locationIndex], function(callBackfunc) {
console.info("Getting maps");
// scope.showPreloader = false;
scope.locations[attrs.locationIndex].mapInfo = callBackfunc.mapInfo;
$timeout(function() {
scope.showMap = true;
}, 2000);
});
}
});
}
};
})
I have a windows application in c# in which i am getting the Html of the page opened in chrome through a chrome extension
this is how i wrote a chrome extension
background.js
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status === 'complete') {
chrome.tabs.executeScript(tabId, { file: "jquery.min.js" }, function () {
chrome.tabs.executeScript(tabId, { file: "content.js" }, function () {
chrome.tabs.sendMessage(tabId, { text: tab }, function (data) {
alert("hi");
chrome.tabs.getAllInWindow(data.WindowId, function (response) {
for (var i = 0; i < response.length; i++) {
if ((response[i].index + 1) == data.Tab) {
chrome.tabs.update(response[i].id, { selected: true });
}
}
});
});
});
});
}
});
Content.js
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
$.post(listener, { dom: document.all[0].outerHTML }, function (data) {
});
});
Now I need to have a button in by winform to send some data to chrome. Please help.
Got It, We can use native messaging app to interact with chrome through native app messaging
https://developer.chrome.com/extensions/messaging#native-messaging