I have this toggle() for the animate() method, so that on one click it will toggle the animation and all the inline styles and on the alternate click it will remove them and go back to the normal state. However, when I add the toggle code in, it doesn't work anymore (i.e it works without the toggle, but doesn't go back up again after the first click).
$("a").click(function () {
$("ul li").each(function (index) {
$("a").toggle(function () {
$("ul li").animate({
'top': ((index + 1) * 31) + 6 + "px",
'opacity': '1'
}, 0);
}, function () {
$("ul li").animate({
'top': '0',
'opacity': '0'
}, 0);
});
});
});
I think I might be using the toggle wrong (I've read that the toggle should be used on the element that's clicked but I'm not sure if I'm getting it right) and also I'm not to sure about the each() function. Thank you for any help :)
This solution will work for you. Just copy and paste this entire code in one html file and then check it out.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul li {
position: absolute;
opacity: 0;
}
</style>
</head>
<body>
<ul>
<li>Lorem Ipsum 1</li>
<li>Lorem Ipsum 2</li>
<li>Lorem Ipsum 3</li>
</ul>
Click me
<script type="text/javascript">
$("a").click(function () {
if($(this).attr("t")=="0"){
$(this).attr("t","1");
$("ul li").each(function (index) {
$(this).animate({
'top': ((index + 1) * 31) + 6 + "px",
'opacity': '1'
}, "slow");
});
}else
{
$(this).attr("t","0");
$("ul li").each(function (index) {
$(this).animate({
'top': "0px",
'opacity': '0'
}, "slow");
});
}
});
</script>
</body>
</html>
Related
Working on the pageNav for a personal app I am working on and cannot get the index to show properly.
I figure that making the pageIndexInner and itemsPerPageInner computed propetries was the best route, but when it comes to editing those, I need to also have a setter? I've looked into getters and setters, but am having a very hard time wrapping my head around it.
Without the computer properties, the click event works and I can make it all the way to the itemToal amount, but the index doesn't match up.
If you change the default pageIndex to 3,
I want to see:
but this is what I'm actually seeing:
I'm just not sure where to go with all of this and any guidance would be greatly appreciated. Thank you
Codepen Link:https://codepen.io/LovelyAndy/pen/NWbjLGz?editors=1010
Vue Component code:
<template>
<div class="_table-page-nav-wrapper">
<div #click="back" :disabled="pageIndexInner === 0" class="_arrow-btn">
<
</div>
<div class="_page-index-inner">
{{ itemsTotal }} Total Items {{ pageIndexInnerStart}} - {{ itemsPerPageInnerStart }} Shown
</div>
<div #click="forward" class="_arrow-btn">
>
</div>
</div>
</template>
<style lang="sass" scoped>
._table-page-nav-wrapper
display: flex
justify-content: center
align-items: center
div
display: flex
justify-content: center
align-items: center
._arrow-btn
width: 50px
height: 50px
border-radius: 4px
box-shadow: 0 5px 5px rgba(0,0,0,0.2)
._page-index-inner
width: 244px
height: 50px
border-radius: 4px
box-shadow: 0 5px 5px rgba(0,0,0,0.2)
margin: 0px 20px
</style>
<script>
export default {
name: 'TablePageNavigation',
props: {
/**
* passed values can be either 10 or 25 or 50
*/
itemsPerPage: {
type: Number,
default: 10,
validator: (prop) => [10, 25, 50].includes(prop),
},
pageIndex: {
type: Number,
default: 0,
},
itemsTotal: {
type: Number,
default: 100,
},
},
data() {
return {
pageIndexInner: this.pageIndex,
itemsPerPageInner: this.itemsPerPage,
}
},
computed: {
pageIndexInnerStart() {
return this.pageIndex + this.itemsPerPage
},
itemsPerPageInnerStart() {
return this.itemsPerPage + this.itemsPerPage
},
},
methods: {
back() {
if (this.itemsPerPageInner > this.itemsPerPage) {
this.itemsPerPageInner = this.itemsPerPageInner - this.itemsPerPage
this.pageIndexInner = this.pageIndexInner - this.itemsPerPage
const newIndex = this.pageIndexInner
this.$emit('update:pageIndex', newIndex)
}
return
},
forward() {
if (
this.itemsPerPageInnerStart + this.itemsPerPage > this.itemsTotal ||
this.PageIndexInnerStart + this.itemsPerPage > this.itemsTotal
) {
return
}
this.pageIndexInnerStart = this.pageIndexInnerStart + this.itemsPerPage
this.itemsPerPageInnerStart = this.itemsPerPageInnerStart + this.itemsPerPage
},
},
}
</script>
I commented on your related question earlier this morning, and decided to create an example based on my previous pagination implementation that I mentioned. I removed a lot of your calculations for a simpler approach. I didn't handle all scenarios such as if total items is not a multiple of items per page, but if you like what I did you can work that out on your own. Here is the code from my single file component that I developed in my Vue sandbox app, which uses Bootstrap 4.
<template>
<div class="table-page-navigation">
<button class="btn btn-primary" #click="back" >Back</button>
<span>
{{ itemsTotal }} Total Items {{ pageFirstItem}} - {{ pageLastItem }} Shown
</span>
<button class="btn btn-secondary" #click="forward" >Forward</button>
</div>
</template>
<script>
export default {
name: 'TablePageNavigation',
props: {
/**
* passed values can be either 10 or 25 or 50
*/
itemsPerPage: {
type: Number,
default: 10,
validator: (prop) => [10, 25, 50].includes(prop),
},
itemsTotal: {
type: Number,
default: 100,
},
},
data() {
return {
currentPage: 1,
}
},
computed: {
numPages() {
return this.itemsTotal / this.itemsPerPage;
},
pageFirstItem() {
return (this.currentPage - 1) * this.itemsPerPage + 1;
},
pageLastItem() {
return this.currentPage * this.itemsPerPage;
}
},
methods: {
back() {
if (this.currentPage > 1) {
this.currentPage--;
}
},
forward() {
if (this.currentPage < this.numPages) {
this.currentPage++;
}
},
},
}
</script>
Vuetify
Vuetify pagination Component
This might help if you're comfortable using a UI library.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<div class="text-center">
<v-pagination
v-model="page"
:length="6"
></v-pagination>
</div>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
page: 1,
}
},
})
</script>
</body>
</html>
i want to use the sample code feature in my ckeditor 5 vue, but i can't find it. Can anyone give me an example or how?
in my app js
...
import CKEditor from "#ckeditor/ckeditor5-vue";
Vue.use(CKEditor);
...
and my vue file
<template>
...
<ckeditor :editor="editor" v-model="CKValue" :config="editorConfig"></ckeditor>
...
</template>
<script>
import ClassicEditor from "#ckeditor/ckeditor5-build-classic";
export default {
data() {
return {
CKValue: "",
editor: ClassicEditor,
editorConfig: {}
}
},
}
</script>
You can see a sample code here
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Like this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CKEditor 5 – Vue.js Component – development sample</title>
<style>
body {
max-width: 800px;
margin: 20px auto;
}
textarea {
width: 100%;
height: 100px;
font-family: monospace;
}
</style>
</head>
<body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/#ckeditor/ckeditor5-build-classic/build/ckeditor.js"></script>
<script src="../dist/ckeditor.js"></script>
<div id="app">
<h1>CKEditor 5 – Vue.js Component – development sample</h1>
<ckeditor
editor="classic"
tag-name="textarea"
v-model="editorData"
:editor="editor"
:config="editorConfig"
:disabled="editorDisabled"
#ready="onEditorReady"
#focus="onEditorFocus"
#blur="onEditorBlur"
#input="onEditorInput"
#destroy="onEditorDestroy"
></ckeditor>
<button v-on:click="toggleEditorDisabled()">
{{ editorDisabled ? 'Enable' : 'Disable' }} editor
</button>
<button v-on:click="destroyApp()">Destroy the app</button>
<h2>Live editor data</h2>
<textarea v-model="editorData"></textarea>
</div>
<script>
Vue.use( CKEditor );
const app = new Vue( {
el: '#app',
data: {
editor: ClassicEditor,
editorData: '<p>Hello world!</p>',
editorConfig: { toolbar: [ 'heading', '|', 'bold', 'italic' ] },
editorDisabled: false
},
methods: {
toggleEditorDisabled() {
this.editorDisabled = !this.editorDisabled;
},
destroyApp() {
app.$destroy();
},
onEditorReady( editor ) {
console.log( 'Editor is ready.', { editor } );
},
onEditorFocus( event, editor ) {
console.log( 'Editor focused.', { event, editor } );
},
onEditorBlur( event, editor ) {
console.log( 'Editor blurred.', { event, editor } );
},
onEditorInput( data, event, editor ) {
console.log( 'Editor data input.', { event, editor, data } );
},
onEditorDestroy( editor ) {
console.log( 'Editor destroyed.', { editor } );
}
}
} );
</script>
</body>
</html>
I used Google Custom Search API in my project and I try to detect the following events:
Enter is pressed in the search input box;
Search button is hit;
A option is selected from the recommendation list.
I have done a lot of searches, however, my code can only capture the first event. If anyone can point me to a right direction, this will be much appreciated.
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>My Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h3 align="center">My Search</h3>
</div>
<div>
<script>
(function () {
var cx = 'xxxx:xxxx';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<script>
function addExtraParams(){
alert($("input.gsc-input").val()); //For debugging only
};
$(document).ready(function(){
setTimeout(
function(){
$( 'input.gsc-input' ).keyup( function(e){
if ( e.keyCode == 13 ) {
addExtraParams();
}
});
$( 'input.gsc-search-button' ).click(function(){
addExtraParams();
});
$( 'input.gsc-completion-container' ).click(function(){
addExtraParams();
});
}, 1000
);
});
</script>
<gcse:search></gcse:search>
</div>
</body>
</html>
how to get a feature layer on button click and display.
S_layer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/...../MapServer/0",{
mode: FeatureLayer.MODE_SELECTION,
outFields: ["*"]
});
map.addLayer(S_layer);
function soil()
{
queryTask = new esri.tasks.QueryTask("http://localhost:6080/arcgis/rest/services/...../MapServer/0");
var query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["soil"];
var name = document.getElementById("combo1").value.toString();
query.where = "NAME = '" + name;
<!-- queryTask.execute(query); -->
S_layer.selectFeatures(query, queryTask.SELECTION_NEW, function (features) {
if(features[0]){
thePoly = features[0].geometry;
theExtent = thePoly.getExtent().expand(1.8); //Zoom out slightly from the polygon's extent
map.setExtent(theExtent);
}
});
}
<button type="button" id="btn" class = "button" class="btn-default" onclick = soil(); >Soil</button>
<br></br>
but this query does not run it gives error of "init.js:89 Error: Unable to complete operation.
at Object.g.load".
As I understood, you want to add a layer on button click.
Below is the code for this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Hydrography - Selection mode</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: white;
overflow: hidden;
font-family: sans-serif;
}
</style>
</head>
<body class="claro">
<br>
Add layers-
<button type="button" id="addWaterBodies" class = "button" >water Bodies</button>
<button type="button" id="addRivers" class = "button" >River</button> <br> <br>
<div id="map" >
</div>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/editing/Editor", "esri/dijit/editing/TemplatePicker",
"esri/tasks/GeometryService",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
"dojo/i18n!esri/nls/jsapi", "esri/config",
"dojo/_base/array", "dojo/keys", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
Editor, TemplatePicker,
GeometryService,
ArcGISDynamicMapServiceLayer, FeatureLayer,
esriBundle, esriConfig,
arrayUtils, keys, parser
) {
parser.parse();
map = new Map("map", {
basemap: "hybrid",
center: [-96.325, 37.855],
zoom: 13
});
map.infoWindow.resize(400,300);
function addWaterBodies(){
var waterBodiesLayer= map.getLayer("waterLayerId");
if(!waterBodiesLayer){
waterBodiesLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", {
id : "waterLayerId",
outFields: ["*"],
});
map.addLayer(waterBodiesLayer);
} else {
alert("water bodies layer already added");
}
}
function addRivers(){
var riversLayer= map.getLayer("riverLayerId");
if(!riversLayer){
riversLayer = new FeatureLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", {
id:"riverLayerId",
outFields: ["*"]
});
map.addLayer( riversLayer);
} else {
alert("River layer already added");
}
}
document.getElementById("addWaterBodies").onclick = addWaterBodies;
document.getElementById("addRivers").onclick = addRivers;
});
</script>
</body>
</html>
My jQuery navigation works- but now it's conflicting with a fadeIn and fadeOut effect (picture and greeting) so they are not showing up.
Here is a link to my page:http://bit.ly/1cr93gD
Here is the code that is on my final_project.js file for the fadeIn & fadeOut effects:
jQuery$(document).ready(function() {
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
}
});
Your code has been tested it had some syntax error I have corrected it and it works fine, bellow is Working code
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#headshot').css('visibility','visible').hide().fadeIn(5000);
$('#greeting').css('visibility','visible').hide().toggle(9000);
var defaultH1 = parseInt($('h1').css('font-size'));
var defaultP = parseInt($('p').css('font-size'));
var count = 0;
var elements = ['p', 'h1'];
$('.minus').click(function(){
if ( count >= -1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))-2);
});
count--;
};
});
$('.plus').click(function(){
if ( count <= 1 ) {
$(elements).each(function(key, val) {
$(val).css('font-size', parseInt($(val).css('font-size'))+2);
});
count++;
};
});
$('.reset').click(function(){
$('h1').css('font-size', defaultH1);
$('p').css('font-size', defaultP);
count = 0;
})
});
</script>
</head>
<body>
<h1>Testing the code</h1>
<button class="minus"> - </button>
<button class="plus"> + </button>
<button class="reset"> reset </button>
<p>This is a paragraph.</p>
<h1 id="greeting">Welcome</H1>
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot"></img>
</body>
</html>
if you what to toggle between entities then look at bellow example to do it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#headshot').fadeOut(000);
$('#greeting').fadeOut(5000);
$('#headshot').fadeIn(5000);
setInterval(function(){
$('#headshot').fadeOut(5000);
$('#greeting').fadeIn(5000);
},10000);
setTimeout(function(){
setInterval(function(){
$('#headshot').fadeIn(5000);
$('#greeting').fadeOut(5000);
},10000);
},5000);
});
</script>
<style>
#greeting,#headshot {position:fixed;top:0px;left:0px;}
</style>
</head>
<body>
<h1 id="greeting" >Welcome</H1>
<img src="http://www.kveller.com/mayim-bialik/wp-content/uploads/2011/12/mayim-bialik-headshot-cropped.jpg" id="headshot" width="200px" height="200px"></img>
</body>
</html>
in this case both entities can be of same or different type.