I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
Related
I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});
I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">·</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
I want to know or print which card that is being dragged let's say upon drop and show it in the UIKit notification. I checked the console.log but nothing happens. From the documentation, it is only possible to get even on moving but not to get the value of the element that is being dragged. My code is below.
https://codepen.io/rangka_kacang/pen/zWbOWo
HTML:
<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<div class="uk-container">
<div uk-grid>
<div class="uk-width-1-6">
<nav uk-navbar>
<div class="uk-navbar-center">
<a class="uk-navbar-item uk-logo" href="">
<img class="uk-margin-small-right" height="48" width="48" src="https://image.flaticon.com/icons/svg/426/426121.svg">
Dashboard
</a>
</div>
</nav>
</div>
<div class="uk-width-expand">
<nav uk-navbar>
<div class="uk-navbar-left">
<a class="uk-navbar-item" href="">
<i class="fas fa-bars fa-2x"></i>
</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a>
<div class="uk-text-center">
<i class="fas fa-user-circle fa-2x"></i> <i class="fas fa-chevron-down"></i>
<div class="uk-navbar-subtitle">Account</div>
</div>
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="uk-section uk-section-secondary uk-padding-medium">
<div class="uk-container">
<ul id="sortable" class="uk-grid-small uk-text-center" uk-sortable="handle: .uk-sortable-handle" uk-grid>
<li id="name">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Name
</div>
</li>
<li id="email">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Email
</div>
</li>
<li id="address">
<div class="uk-card uk-card-default uk-card-body">
<span class="uk-sortable-handle uk-margin-small-right" uk-icon="icon: table"></span>Address
</div>
</li>
</ul>
</div
</div
JS:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
Thanks!
If you modify:
UIkit.util.on('#sortable', 'moved', function () {
//console.log();
UIkit.notification('Card has been moved.', 'success');
});
To be:
UIkit.util.on('#sortable', 'moved', function (item) {
console.log(item.detail[1].id)
UIkit.notification(`Card is ${item.detail[1].id}`, 'success');
});
It will display the elements id in the notification. You can go higher up in the "item" object in order to get more information on the dropped element.
Also, I'm using a template literal here to put the id in the notification. That's not supported via IE 11 so you might want to do something more traditional if you care about that.
For reference, you can see the data captured when moving elements via developer console here:
https://getuikit.com/assets/uikit/tests/sortable.html
I can display the data from one table using ng-repeat tag. but the problem is when I am trying to display data from another table according to previous ng-repeat.
in detail I have 2 table one for sections
section_id section_name
1 php
2 java
another table is lecture
id section_id lecture_name
1 2 basics
2 1 loops
i could display sections using ng-repeat. but i cant display lecture below corresponding sections
<div class="course_curriculum " ng-repeat="section in sections">
<ul class="sections" >
<h4>Section {{$index+1}}: {{section.section_name}}</h4>
<!--<h4>Section 1: Introduction to Mobile Application Development</h4>-->
<li>
<div class="section-head" ng-click="view_lecture(section.id)" data-toggle="collapse" data-target="#section{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Course Lectures
</div>
<ul id="section{{$index+1}}" class="collapse" >
<li>
<ul ng-repeat="lecture in lectures">
<li >
<div class="section-sub-head" data-toggle="collapse" data-target="#sub1">
<i class="fa fa-bars" aria-hidden="true"></i> {{lecture.lecture_name}}
</div>
<ul id="sub1" class="collapse lecture">
<li>
<div class="col-md-5 article-show" >
<img src="html/img/file.png" style="width: 100px; background-color: black ;margin-right: 10px" />
Article<br>
<a data-toggle="modal" data-target="#text"><i class="fa fa-pencil" aria-hidden="true"></i> Edit Content</a> <br>
</i> Replace With Video <br>
</div>
<div class="col-md-5 right text-right" >
<div class="btn-group" role="group">
<button type="button" class="publish">Publish</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="Preview dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Preview
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>As Instructor</li>
<li>As Student</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-12">
<button type="button" data-toggle="collapse" data-target="#Resources1" class="publish">Add Resources</button>
<button type="button" class="publish">Add Captions</button>
</div>
<div id="Resources1" class="collapse lecture">
<ul class="resouse">
<li class="active"><a data-toggle="tab" href="#Downloadable-File">Downloadable File</a></li>
<li><a data-toggle="tab" href="#from-Library">Add from Library</a></li>
<li><a data-toggle="tab" href="#External-Resource">External Resource</a></li>
<li><a data-toggle="tab" href="#Source-Code">Source Code</a></li>
</ul>
<div class="tab-content">
<div id="Downloadable-File" class="tab-pane fade in active">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload file<input type="file" style="display: none;">
</label>
</div>
<p>Tip: A resource is for any type of document that can be used to help students in the lecture.
This file is going to be seen as a lecture extra. Make sure everything is legible! </p>
</div>
<div id="from-Library" class="tab-pane fade">
<br/>
<p>Library is empty. Tip: You can use Accounts.academy File Uploader to upload several files at the same time. </p>
</div>
<div id="External-Resource" class="tab-pane fade">
<br/>
<div class="col-md-12">
<div class="form-group">
<label for="usr">Title:</label>
<input type="text" class="form-control" placeholder="A descriptive title" id="usr">
</div>
<div class="form-group">
<label for="pwd">URL:</label>
<input type="password" class="form-control" placeholder="https://example.com" id="pwd">
</div>
<button type="submit" value="Submit" class="publish">Submit</button>
</div>
</div>
<div id="Source-Code" class="tab-pane fade">
<br/>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="Add files no larger than 1.0 GiB." disabled>
</div>
<div class="col-md-4">
<label class="upload">
upload File<input type="file" style="display: none;">
</label>
</div>
<p><B>Tip</B>: Only available for Python and Ruby for now. You can upload .py and .rb files</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</li>
<li>
<button type="button" data-toggle="modal" data-target="#saudio" class="sub-sub-section-add">Add Audio</button>
<button type="button" data-toggle="modal" data-target="#svideo" class="sub-sub-section-add">Add Video</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add Text/Article</button>
<button type="button" data-toggle="modal" data-target="#stext" class="sub-sub-section-add">Add File</button>
</li>
</ul>
</li>
</ul>
</li>
<li >
<div class="section-sub-head">
<form ng-submit="lecture_insert($index+1,section.id)">
<input type="text" class="form-control" id=lecture_name{{$index+1}} ng-model="section.lecture_name" placeholder="Enter a Title" required>
<!--<input type="text" ng-hide class="form-control" id=section_id{{$index+1}} ng-model="section.id" >-->
<div class="btn-group sub-section-add">
<button type="submit" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>
</div>
</form>
</div>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#faq{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> FAQ
</div>
<ul id="faq{{$index+1}}" class="collapse">
<li>
<button type="button" data-toggle="modal" data-target="#mainfaq" class="section-add">Add More Faq</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
<li>
<strong>What is the target audience? </strong><br/>
<P>This course is for those how want to learn how to design a logo,This course is for those how want to learn how to design a logo</P>
<button type="button" class="section-edit">Edit</button>
</li>
</ul>
</li>
<li>
<div class="section-head" data-toggle="collapse" data-target="#Exam{{$index+1}}" >
<i class="fa fa-bars" aria-hidden="true"></i> Exam
</div>
<ul id="Exam{{$index+1}}" class="collapse">+
<li >
<div class="section-sub-head">
fgfgh
</div>
<ul >
<li>
df
</li>
<li>
df
</li>
</ul>
</li>
</ul>
</li>
<li>
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#lecture" type="button" style="background: rgba(0,0,0,0); border: none;">Add Lecture</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#exam" type="button" style="background: rgba(0,0,0,0); border: none;">Add Exam</button>-->
<!--</div>-->
<!--<div class="btn-group section-add">-->
<!--<button data-toggle="modal" data-target="#mainfaq" type="button" style="background: rgba(0,0,0,0); border: none;">Add FAQ</button>-->
<!--</div>-->
</li>
</ul>
</div>
A couple possible issues in the code provided:
Your inner ng-repeat is on the wrong element. It should be on the <li> element right above it. When nesting lists in bootstrap, you never repeat <ul> without wrapping each in atleast an <li> (usually an <a> too, which holds the dropdown text).
To achieve nested tables (a list of lectures within each section), you want the lectures variable to be on each section. This would make your inner ng-repeat something like ="lecture in section.lectures".
Here is a working JSBin where I made the changes I listed above. I omitted a lot of your HTML, because it was broken without the rest of your controller, but I left in enough to show how to get the nested repeats working.
Since you want to show the lecture conditionally, based on the above section_id, you can use ng-if for the desired result.
E.g.
<div class="section" ng-repeat="sec in sections">
<span>Section Id: <i>{{sec.section_id}}</i></span>
<span>Section Name: <i>{{sec.section_name}}</i></span>
<div class="lecture" ng-repeat="lec in lectures" ng-if="lec.section_id==sec.section_id"> <!--nested ng-repeat for lectures-->
<span>Lecture Id: <i>{{lec.lecture_id}}</i></span>
<span>Lecture Name: {{lec.lecture_name}}</span>
</div>
</div>
In JS my data is in the following format:
$scope.sections=[
{section_id:1,section_name:"php"},
{section_id:2,section_name:"java"}
];
$scope.lectures = [
{section_id:1,lecture_id:2,lecture_name:"basics"},
{section_id:2,lecture_id:1,lecture_name:"loops"}
];
I've prepared a JSBIN so you can see what's going on.