how to hide the panel inside the accordion created using JQuery?
js files:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>
code:
jQuery(document).ready(function() {
$(document).ready(function() {
$("#accordion").accordion();
});
Needs:
According to the user login type the panel should hide(including the heading).
Example:
In my example there are three panels inside the accordion. Only i want to show two of them to the user. How to achieve this?
Not sure if this is what you mean, but to allow an accordion panel to be collapsed, you need to set the accordion collapsible property to true. If you want all the panels to be collapsed initially then you need to set the active property to false initially as well.
The jQuery Accordion documentation has a full example on how to do this.
eg
$(document).ready(function(){
$("#accordion").accordion( { active: false, collapsible: true });
});
Find your DOM element and call hide function.
$("#myElementInsideAccordian").hide();
Your error is caused because your files are in the wrong order. core has to come before the accordion file:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>
As far as hiding a Panel goes, first see if the aforementioned fix gets rid of your error, then edit your question to provide more detail into what you want.
Related
I am trying to learn to create non modal popup using angularjs that will allow to navigate to other webpage when it is still open and it should not blur the window. I found http://yong2579.github.io/ link.
But window is getting blur
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<title>Tabindex</title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
$(function () {
var dialog = new BootstrapDialog({
message: 'Custom tabindex.',
tabindex: 10,
modal: false,
title: 'Modeless draggable dialog',
draggable: true,
animate: false
});
dialog.open();
});
</script>
</body>
</html>
In the context of angular if you are making DOM manipulations (adding or removing elements from the view or modifying their properties) then you should use directives. For bootstrap modals and other interactive bootstrap elements check out the ui-bootstrap module with lots of directives including modal:
https://angular-ui.github.io/bootstrap/#!#modal
Modal's are sort of a special case in angular where it makes the most sense to have a service handle opening/closing modals but the docs there should make it pretty clear how to use if not search here or post a new question with issues.
When using ui-bootstrap you just include the bootstrap.css and ui-bootstrap-tpls.js file (not the bootstrap.js or jquery.js). If you don't include jQuery before angular, angular will load jQuery lite (see docs on angular.element() for details).
I am using HighCharts version 6.0.1. Have set up the Highcharts with angularjs server locally for exporting the charts. When download as png/jpeg/pdf is selected from the top right corner of the chart ,
the Highcharts demo page is displayed and i am redirect to other link "https://export.highcharts.com/".
Please let me know what could be the reason for this.
i have add this 2 js link.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
Try to use offline-exporting.js instead of exporting.js
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
Full exemple
i hope that help you
relevant code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"
And,
$mdDialog.show(
$mdDialog.alert()
.clickOutsideToClose(true)
.title('Please Login')
.textContent('Please use facebook to login to Afsheen before making a purchase.')
.ok('Got it!')
.targetEvent(event)
);
Any idea whats going on ?
You are using both bootstrap and material css together, which is causing the issue, Check the material versions are same,
Here is the working App
I'm implementing a site that is using Videogular to play the videos as it integrates nicely with the rest of the AngularJS within the site. Every file that is needed appears to be in the correct location in the path but the end result is only the total time, the elapsed time, and the elapsed time bar are shown.
Now I now the controls are there as if I hover over where the volume control should be the volume appears.
I'm testing in Chrome Version 32.0.1700.107. I think I followed the demo to the letter.
This is how I"m referencing the specific style sheets
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/offcanvas.css">
<link rel="stylesheet" href="css/videogular/videogular.css">
<link rel="stylesheet" href="css/app2.css"/>
This is how I'm pulling in the js files. Not shown are inclusion of jquery, bootstrap, and offcanvas js files.
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="js/videogular/videogular.js" type="text/javascript"></script>
<script src="js/videogular/plugins/controls.js" type="text/javascript"></script>
<script src="js/videogular/plugins/overlay-play.js" type="text/javascript"></script>
<script src="js/videogular/plugins/buffering.js" type="text/javascript"></script>
<script src="js/videogular/plugins/poster.js" type="text/javascript"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
I even used the same config as the demo
$scope.config = {
width: 640,
height: 360,
autoHide: false,
autoPlay: true,
responsive: true,
theme: {
url: "css/videogular/videogular.css",
playIcon: "",
pauseIcon: "",
volumeLevel3Icon: "",
volumeLevel2Icon: "",
volumeLevel1Icon: "",
volumeLevel0Icon: "",
muteIcon: "",
enterFullScreenIcon: "",
exitFullScreenIcon: ""
}
Finally my directory structure is this:
app
css
videogular
fonts
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff
videogular.css
img
js
videogular
plugins
buffering.js
controls.js
overlay-play.js
poster.js
videogular.js
lib
partials
videos
views
videogular
plugins
buffering
buffering.html
controls
controls.html
full-screen-button.html
mute-button.html
play-pause-button.html
volume-bar.html
overlay-play
overlay-play.html
index.html
Now I'm certain I'm missing something but I can't see it. Any help?
So I figured it out. Based on the comment from elecash to the question that everything looked correct I compared everything to the demo. As it turns out my mistake was getting the icomoon font from the icomoon website and not the demo. Without the unicode definitions defined in the icomoon.svg it had no means of knowing the correct glyphy to display eventhough it was correctly defined in the config correctly. A quick download of the font files and restarting of the server and everything rendered correctly.
I am attempting to get jGestures working with a Backbone.js application without much luck.
I am including my scripts at the bottom of the page body.
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jgestures.min.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script type="text/javascript" src="backbone.localStorage.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="src/app_root.js"></script>
<script type="text/javascript" src="src/app_beverage.js"></script>
<script type="text/javascript" src="src/app_order.js"></script>
<script type="text/javascript" src="src/app_people.js"></script>
<script type="text/javascript" src="src/app_router.js"></script>
And attaching the gesture handler like so.
events: {
"tapone .test": "something"
}
I know the event handler is attached correctly because I can trigger it manually via the console (on desktop, not a mobile device).
$(".test").trigger("tapone");
But running the code in iOS 5 it looks like the jGestures code is not generating the touch events. Is there someone else I need to do to trigger these touch events? I am using the Backbone router so maybe I need to init the library again after updating the DOM?
Backbone.View.events delegates directly over jQuery.bind and jQuery.delegate, look in the Backbone.View.delegateEvents' code.
So if your event binding definition can work like this:
$(<your View.el DOM element>).delegate(selector, eventName, method);
Then it should work with Backbone.
For example in your case you can try:
$(<your View.el DOM element>).delegate( ".test", "tapone", function(){ console.log( "hi! tapone" ); } );
Try to define the event binding directly in jQuery and see if doing it this way the event is triggered when expected, if it doesn't then the problem is out of Backbone, if it does then the problem should be in your implementation. I think in neither case the problem will be in Backbone itself.