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.
Related
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>
I have an app where I want to control when to redraw the view.
I can make it work using m.mount and m.redraw:
var count = 0;
var Counter = {
view: function() {
return m('main', [
m('h1', ('Count: ' + count))
])
}
}
m.mount(document.body, Counter);
window.setInterval(function () {
count++;
m.redraw();
}, 200);
<html>
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="index.js"></script>
</body>
</html>
But if i use m.render (because I don't need mithril to autoredraw) it no longer works:
var count = 0;
var Counter = {
view: function() {
return m('main', [
m('h1', ('Count: ' + count))
])
}
}
m.render(document.body, m(Counter)); // <-- The only changed line
window.setInterval(function () {
count++;
m.redraw();
}, 200);
<html>
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="index.js"></script>
</body>
</html>
How can I make mithril redraw when using m.render instead of m.mount?
As stated here in the mithril docs:
Note that m.redraw only works if you used m.mount or m.route. If you rendered via m.render, you should use m.render to redraw.
var count = 0;
var Counter = {
view: function() {
return m('main', [
m('h1', ('Count: ' + count))
])
}
}
m.render(document.body, m(Counter));
window.setInterval(function () {
count++;
m.render(document.body, m(Counter)); // <-- Use m.render here, not m.redraw
}, 200);
<html>
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="index.js"></script>
</body>
</html>
Why does filter do not work?
Error says: [Vue warn]: Failed to resolve filter: uppercase.
Not sure why but filter is not working.
Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.
I'm trying to emulate an Ajax Response by using random message and status instead.
Link: JSBIN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<login-alert ref="refalert"></login-alert>
<p>
<button #click="showme">Random Alert</button>
</p>
</div>
<script src=" https://unpkg.com/vue"></script>
<template id="template-alert">
<div v-if="showAlert">
<div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">×</button>
<h4>{{title|uppercase}}!</h4>
{{message}}
</div>
</div>
</template>
<script>
Vue.component('login-alert', {
template: '#template-alert',
data: function() {
return {
alertType : null,
title : null,
message : null,
showAlert : false
}
},
methods: {
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
},
open: function(type, message) {
this.alertType= type;
this.title = type;
this.message= message;
this.showAlert= true;
}
}
});
var app = new Vue({
el: '#app',
methods: {
showme: function() {
var randomStatus = ['error', 'warning', 'success'];
var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo'];
var status = randomStatus[Math.floor(Math.random() * randomStatus.length)];
var message = randomMessage[Math.floor(Math.random() * randomMessage.length)];
this.$refs.refalert.open(status,message);
}
}
});
</script>
</body>
</html>
The uppercase filter has been removed in Vue.js 2.
https://v2.vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed
You can simply use:
{{ text.toUpperCase() }}
As far as the structure of your code goes, something like this is probably better off in a method:
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
}
Since you are duplicating it twice but just with different values.
I'm using forloop to check the items in my data in COMPONENT.
{
data:function(){
return {
items:[
{id:1,name:'John'},
{id:2,name:'FooBz'}
]
}
}
}
now I want to check the value first in console in ready hook of my component.
{
.....
ready:function(){
console.log(this.items);
// this return a [__ob__: Observer]
this.items.forEach(function(x,y){
............
});
}
}
the this.items return a '[ob: Observer]' which I can't iterate through because the length of that value is 0 it supposed to be 2.
EDIT:
this is strange on my JSBIN all are working but in my real code its not. Even though I copied my logic from my real code I'm using Laravel Elixir to compile my javascript and 1.0.24 version of Vue.
http://jsbin.com/gijaniqero/edit?html,js,console,output
Your code should be okay.
Just using your code, i have made demo. It should be okay
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<test_component></test_component>
</div>
<template id="test_component">
<div></div>
</template>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data: {
},
components : {
'test_component' : {
template : '#test_component',
data:function(){
return {
items:[
{id:1,name:'John'},
{id:2,name:'FooBz'}
]
}
},
ready : function(){
this.items.forEach(function(x,y){
console.log( 'id is : ' + x.id);
console.log( 'name is L ' + x.name);
console.log( 'key is ' + y);
});
}
}
}
})
</script>
</body>
</html>
Hi I am having some trouble getting a menu to add options dynamically. They idea is the selection of the first menu decides what the second menu contains. I have built this before successfully without polymer. And it semi-works with polymer. dropdown one gets its content from json based on the selection, dropdown two gets its content also from a json. This part works, the issue is when you make a selection from dropdown one and then change it, dropdown two doesn't delete the old selection. I got this working last time with a function that first deletes all dropdown two's children before repopulating the content. Issue with Polymer is once the childNodes are deleted the dropdown breaks and no other children can be added via data binding. tried adding native with plain JS which populates the menu but the children are not selectable(from what I have read this might be a bug). Also I believe data binding on dynamic items also doesnt work anymore. anyway here is what I have:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/iron-dropdown/demo/x-select.html">
<dom-module id="add-skill">
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="ddMenu" attr-for-selected="value" >
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="_itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-dropdown-menu>
<paper-menu class="dropdown-content" id="certificationSelect" on-iron-select="_itemSelected">
</paper-menu>
</paper-dropdown-menu>
<!-- testing ideas -->
<paper-dropdown-menu>
<paper-menu class="dropdown-content" id="test" on-iron-select="_itemSelected">
<option extends="paper-item"> Option </option>
<option extends="paper-item"> Option1 </option>
<option extends="paper-item"> Option2 </option>
</paper-menu>
</paper-dropdown-menu>
<paper-button on-click="_deleteElement">
Delete
</paper-button>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../../addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../../addskill.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
Polymer({
is: 'add-skill',
ready: function() {
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
},
sendVendorRequest: function() {
var datalist = 'vendor=' + encodeURIComponent('1');
//console.log('datalist: '+datalist);
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse: function(request) {
var response = request.detail.response;
for (var i = 0; i < response.length; i++) {
this.push('vendorList', response[i].name);
}
},
vendorClick: function() {
var item = this.$;
//var itemx = this.$.vendorSelect.selectedItem.innerHTML;
//console.log(item);
//console.log(itemx);
},
sendCertificationRequest: function(vendor) {
var datalist = 'vendorName=' + encodeURIComponent(vendor);
console.log('datalist: ' + datalist);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse: function(request) {
var response = request.detail.response;
//var vendorSelect = document.getElementById('vendorSelect');
for (var i = 0; i < response.length; i++) {
this.push('certificationList', response[i].name);
}
console.log(this.certificationList);
},
_itemSelected: function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
},
_removeArray: function(arr) {
this.$.certificationList.remove();
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
arr.splice(0, i);
arr.pop();
}
console.log(arr.length);
},
_deleteElement: function() {
var element = document.getElementById('certificationSelect');
while (element.firstChild) {
element.removeChild(element.firstChild);
}
},
_createElement: function() {
var doc = document.querySelector('#test');
var option = document.createElement('option');
option.extends = "paper-item";
option.innerHTML = "Option";
doc.appendChild(option);
}
});
</script>
</dom-module>
Any guidance is always appreciated
Here's a working version of your JSBin, which uses data binding and a <template is="dom-repeat"> to create new, selectable <paper-item> elements dynamically.
I'm not sure what specific issues you ran into when using data binding to stamp out the <paper-item> elements, but the important thing to remember in Polymer 1.0 is that when you modify an Array (or an Object) that is bound to a template, you need to use the new helper methods (like this.push('arrayName', newItem)) to ensure the bindings are updated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<dom-module id="x-module">
<template>
<paper-material elevation="1">
<paper-dropdown-menu>
<paper-menu class="dropdown-content" on-iron-select="_itemSelected">
<template is="dom-repeat" items="[[_menuItems]]">
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-button on-click="_createItem">Add</paper-button>
</paper-material>
</template>
<script>
Polymer({
_createItem: function() {
this.push('_menuItems', 'New Option ' + this._menuItems.length);
},
_itemSelected: function() {
console.log('Selected!');
},
ready: function() {
this._menuItems = ['First Initial Option', 'Second Initial Option'];
}
});
</script>
</dom-module>
<x-module></x-module>
</body>
</html>