This is my accordion menu :
<script type="text/javascript">
$(function()
{
$("dt.title").click(function()
{ $("div.info").slideUp("slow"); $(this).next("div.info:hidden").slideDown("normal" );
});
});
</script>
It is working fine, here have a look at the html:
<body>
<div id="wrapper">
<div id="container">
<ul id="nav">
<dt class="title">About</dt>
<dt class="title">Work</dt>
<div class="info">
<ul>
<li>Bol</li>
<li>Annie</li>
<li>Imran</li>
</ul>
</div>
<dt class="title">Contact</dt>
<dt class="title">Links</dt>
</ul>
</div>
<div id="content">
</div>
</div>
</body>
</html>
Very simple ! But when I put the href links, the menu stop working. For example:
<dt class="title">About</dt>
Please help me with this, I'll be really thankful !
Cheers,
Related
I am using Eonasdan Bootstrap-datetimepicker in my project ! Is there any option to change the position of close button from top to bottom ? (Not Widget Position). I searched in there documentation but I cant find it.
Thanks in advance
You must use the toolbarPlacement option for this.
Default: 'default'
Accepts: 'default', 'top', 'bottom'
$('#myDatepicker').datetimepicker({
toolbarPlacement: 'bottom',
showClose: true,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<br/>
<!--Space for the fiddle-->
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='myDatepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Could you please help on below Foundation 6 Accordion sameple code where I could not able get it worked. I am not sure what I am missing. Also, I kept all js and css files are in the same directory.
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery.js"></script>
<script src="foundation.js"></script>
<script src="foundation.accordion.js"></script>
<link rel="stylesheet" href="foundation.css" />
<script>
$(document).foundation();
</script>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
Question 1
<div id="panel11a" class="content">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Question 2
<div id="panel12a" class="content">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Question 3
<div id="panel13a" class="content">
Answer 3
</div>
</li>
</ul>
</div>
</body>
</html>
Appreciated if someone help on this at the earliest.
Okay, so for me it works perfectly, just checked. You had some missing classes and that was your main problem.
Firstly:
The container for an accordion needs the class .accordion, and the
attributes data-accordion and role="tablist". Note that in these
examples, we use a <ul>, but you can use any element you want.
In your code there is no role=tablist in ul tag.
Second thing is that you are missing a lot in your <a></a> and <div></div>
You don't have for example aria-controls or data-tab-content aria-labelledby
About <a></a>
The tab title needs role="tab", an href, a unique ID, and
aria-controls.
About <div></div>
The content pane needs an ID that matches the above href,
role="tabpanel", data-tab-content, and aria-labelledby.
Your example:
<div class="row row-padding small-12">
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-navigation">
Accordion 1
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Accordion 2
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Accordion 3
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
If you need there is also my code, I have used it to check if it all works.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="scripts/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-navigation">
Accordion 1
<div id="panel11a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel11a-heading">
Answer 1
</div>
</li>
<li class="accordion-navigation">
Accordion 1
<div id="panel12a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel12a-heading">
Answer 2
</div>
</li>
<li class="accordion-navigation">
Accordion 1
<div id="panel13a" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel13a-heading">
Answer 3
</div>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/foundation.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.1.1/js/foundation.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document).foundation();
});
</script>
</body>
</html>
In the future check this link. This should be very helpful for you.
zurb-accordion
I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>
I try to use dropdowns of bootstrap, it's work the problem is esthetic. :
http://twitter.github.io/bootstrap/javascript.html#dropdowns
I have this code :
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
foreach ($collectivite as $key => $value) {
echo '<form method="post" action="wbx.php"><li><button type="submit" class="btn" style="margin:0px;" name="cookie" value='.$value.'>'.$value.'</button> </li></form>';
}
?>
</ul>
</div>
WITHOUT PHP :
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<form method="post" action="wbx.php">
<li>
<button type="submit" class="btn" style="margin:0px;" name="cookie" value=heeloWorld.net>world.net</button>
</li>
</form>
</ul>
</div>
But the result is very basic... not really good. I use button because i submit some data with form
So if i want something like this, how can i do ?
EDIT solution
I Use this : the alert is ok, i have the good value, but the submit doesn't work.
<?php
foreach ($collectivite as $key => $value) {
$name = preg_replace('#[^0-9a-z]+#i', '', $value);
echo '<form method="post" action="wbx.php" id='.$name.'>
<input type="hidden" name="cookie" value='.$value.'>
</form>';
}
?>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
foreach ($collectivite as $key => $value) {
$name = preg_replace('#[^0-9a-z]+#i', '', $value);
echo '<li>
<input type="hidden" name="cookie" value='.$value.'>
<a class="myformlink" data-formname="#'.$name.'" >'.$value.'</a>
</li>';
}
?>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.myformlink').click(function(){
$($(this).data('formname')).submit();
});
});
</script>
You do not have to use a button tu submit your form. You can use a regular anchor to do it. please check this link : i want a anchor should act like and input type submit button
this way your dropdown will look like the one in your example.
Hope it helps :)
Edit : In French we write "Collectivités" ;) just kiddin...
EDIT : sample of a code with data attributes
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Colléctivités <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<form method="post" action="wbx.php" id="formGujanMestras">
<li>
<a class="myformlink" id="linkC" data-formname="#formGujanMestras">value1</a>
</li>
</form>
<form method="post" action="wbx.php" id="formLaHume">
<li>
<a class="myformlink" id="linkD" data-formname="#formLaHume">value2</a>
</li>
</form>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.myformlink').click(function(){
alert('hey martial i gonna submit ' + $(this).data('formname'));
$($(this).data('formname')).submit();
});
});
</script>
Hi I have this code. I need to get the 0 based index of the clicked element.
This is my code. I always get -1 as the index.
Ideally clicking first link would print 0 and second would print 1.
I am using jquery 1.3.2. JavaScript code is fine too.
What I am missing?
<script type="text/javascript">
function handleClick(id) {
var par = document.getElementById('par'+id);
alert('Index= ' + $('#clips').index(par));
}
</script>
<div id="clips" style="clear:both">
<div id="par30" class="alb rc32">
<div class="fl rc32 thm">
<a id="30" onclick="handleClick(30);">Link 1</a>
</div>
</div>
<div id="par40" class="alb rc32">
<div class="fl rc32 thm">
<a id="40" onclick="handleClick(40);">Link 2</a>
</div>
</div>
<div id="par50" class="alb rc32">
<div class="fl rc32 thm">
<a id="50" onclick="handleClick(50);">Link 3</a>
</div>
</div>
</div>
This works:
<script type="text/javascript">
function handleClick(id) {
var $par = $('#par' + id);
alert($par.index());
}
<div id="clips" style="clear:both">
<div id="par30" class="alb rc32">
<div class="fl rc32 thm">
Link 1
</div>
</div>
<div id="par40" class="alb rc32">
<div class="fl rc32 thm">
Link 2
</div>
</div>
<div id="par50" class="alb rc32">
<div class="fl rc32 thm">
Link 3
</div>
</div>
</div>
You are using the index function wrong.
Try
<script type="text/javascript">
function handleClick(id) {
var par = document.getElementById('par'+id);
alert('Index= ' + $('#clips > div').index(par));
}
</script>
see http://api.jquery.com/index/
If .index() is called on a collection
of elements and a DOM element or
jQuery object is passed in, .index()
returns an integer indicating the
position of the passed element
relative to the original collection.