I have a question for the jQuery Plugin "whatweather" from getkode.be
I have installed it and its running fine, now im looking at the layout, and i have some issues.
If I wan't to display all week days i use this code, but it's hard to changes the layout 100%
<script type="text/javascript">
$("div#whatweather").whatWeather({
id: "",
city:"Billund,Denmark",
days:"5",
refresh: 0,
dateFormat:"{{DD}}",
weekDays:["Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag"]
});
</script>
So i get this
If I then add a Template like this code.
<div id="whatweather"></div>
<script type="text/javascript">
var template = '<div class="{{cssClass}}">\
<p class="current">\
<span class="climacon {{currentWeatherIcon}} temp-pic"></span>\
<span class="city">{{city}} {{currentCondition.temp}}°</span>\
</p>\
<div class="next-days">\
{{#nextDays}}\
<div>\
<p>\
<span>{{date}}</span>\
<span class="climacon {{dayWeatherIcon}} temp-pic"></span>\
<span>{{tempMax}}°</span>\
</p>\
</div>\
{{/nextDays}}\
</div>\
</div>';
$("div#whatweather").whatWeather({
id: "",
city:"Billund,Denmark",
days:"5",
refresh: 0,
dateFormat:"{{DD}}",
weekDays:["Søndag","Mandag","Tirsdag","Onsdag","Torsdag","Fredag","Lørdag"],
templates: [template]
});
</script>
Then I get this
But after 1-2 sec. the "Next days" disappear, so I get this.
Do someone know how to make fix this little issue in the template code ?
You did not define option cssClass. Because of that you got default value which is widget-1. From the code of this plug-in:
templates: ['<div class="{{cssClass}}">\
...
<div class="next-days" style="display:none">\
...
That is the reason that your days data are hidden.
If you want to get them shown, you have to follow instructions written in documentation page. See example after sentence Voici le code pour obtenir ce widget. You have to define:
function myAfter(el, options){
el.on("click", function(){
$("p.current, div.next-days", el).toggleClass("transition");
});
which toggle display of days on/off. And you have to add after and cssClass option, something like:
cssClass:"whatWeatherMetro",
templates: [template],
after: myAfter
The last step is new css file. All is described there.
Related
I am newbie with javascript and here is my problem.
Here is my code
https://codepen.io/nguyencuc2035/pen/XWVXxxK
As you can see in my code, I wrote a javascript to display a banner named toast at a right conner and here is the code
<script>
function toast({
title = '',
message = '',
type = 'info',
duration = 3000
}) {
const main = documet.getElementById('toast');
if (main) {
const toast = documet.createElement('div');
toast.classList.add('toast');
toast.innerHTML = `
<div class="toast__icon">
<i class="fa-solid fa-circle-check"></i>
</div>
<div class="toast__body">
<h3 class="toast__title">Success</h3>
<p class="toast__msg">Import an external stylesheet:</p>
</div>
<div class="toast__close">
<i class="fa-solid fa-xmark"></i>
</div>
`;
main.appendChild(toast);
}
}
toast({
title: 'Success',
message: 'Import an external stylesheet:',
type: 'success',
duration: 3000
})
</script>
Of course in the styles.css I wrote .toast .toast__icon , .toast__body , .toast__close,
But my problem is, when I ran my code, it only display the toast__body and toast__close, not display the toast.
Could you please give me some advice for this problem ? Thank you very much for your time.
I Fidgeted with your code on Codepen, and it seems you've used documet and not document. You're missing an N.
Remember you have to be really careful with your spellings in JavaScript. If it still doesn't work feel free to reply back. Hope this helped.
And if it helps you can use jQuery to just append the banner. It really simplifies the code as well.
HTML:
<div id="submit-review">
<form action="<?=base_url()?>story/submit_review/<?=$story['story_id']?>" method="post">
<div class="form-group">
<label for="review-rating">Rate the story</label>
<div id="review-rating"></div>
</div>
<div class="form-group">
<label for="review-content">Write your review</label>
<textarea class="form-control" name="review-content"></textarea>
</div>
<button class="btn btn-default">Post Review</button>
</form>
</div>
<script>
$(function () {
tinymce.init({
selector:'textarea'
});
$("#review-rating").rateYo({
starWidth:"25px"
});
});
</script>
Controller:
public function submit_review(){
$story_id = $this->uri->segment(3);
$review_content = $this->input->post('review-content');
}
I tried experimenting with the jquery script provided by the website:
$(function () {
var $rateYo = $("#rateYo").rateYo();
$("#getRating").click(function () {
/* get rating */
var rating = $rateYo.rateYo("rating");
window.alert("Its " + rating + " Yo!");
});
$("#setRating").click(function () {
/* set rating */
var rating = getRandomRating();
$rateYo.rateYo("rating", rating);
});
});
But i keep having problems, I don't have any background in jquery. I've done javascript validation but that was years ago. I could relearn but then i'd have to start with javascript first.
My idea is to somehow set a value to a hidden input type inside my <form> then just get it from there via post in CI.
<input id='review-rating' type="hidden" value=""></input>
var $rateYo = $("#review-rating").rateYo();
$("#submit-review").click(function () {
var rating = $rateYo.rateYo("review-rating");
$("#hidden-rating").val(rating);
window.alert("Its " + rating + " Yo!");
});
But i could not test the above code if it works or not because whenever i try to add it, my other jquery functions won't work. I'm using rateYo plugin and tinymce.
This is my current scripts:
$(function () {
tinymce.init({
selector:'textarea'
});
$("#story-rating").rateYo({
rating: <?=$story['rating']?>,
readOnly: true
});
<?php if(isset($reviews['your_review']) AND $reviews['your_review'] != NULL){ ?>
$("#my-rating").rateYo({
rating: <?=$your_review_rating?>,
readOnly: true,
starWidth: "25px"
});
<?php } ?>
$("#review-rating").rateYo({
starWidth:"25px"
});
<?php foreach($reviews['other_reviews'] as $id=>$row){ ?>
$("#rating-<?=$id?>").rateYo({
rating: <?=$row['rating']?>,
readOnly: true,
starWidth: "25px"
});
<?php } ?>
});
I barely got the above to work.
Anyway, my question is, how do i pass the rateYo value to my CI controller? if my above idea is of sound logic, then can you write how the syntax should look like here?
I guess i'm learning jquery as i need them, albeit messy.(i can't concentrate reading wall of texts/codes, i learn better by trying them)
Okay so while i was waiting for any answer. I read a quick tutorial on W3school.(i find w3school a reliable source for tutorials on anything, any other tutorials are either too complex or assumes the reader knows everything there is to know that leaves them confused)
So i changed the code abit:
var rating = $("#review-rating").rateYo("rating");
$("#hidden-rating").val(rating);
I've attached the above code to a button click event.
Now i can finally get the value from the controller:
$this->input->post('hidden-rating');
Still i'll wait for even better answers.
I am brand new to coding so forgive my very obvious ignorance. My question is this: How can I create a unique variable for each item in a global array in MongoDB so that I can tally upvotes and downvotes and sort accordingly. I'm doing all this in the Meteor framework.
Here's my code:
<template name="website_item">
<li>
{{title}}
<p>
{{description}}
</p>
<a href="#" class="btn btn-default js-upvote">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"> </span>
</a>
<a href="#" class="btn btn-default js-downvote">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"> </span>
</a>
<p>
Votes: {{totalVotes}}
</p>
</li>
</template>
Here's my client.js:
var totalVotes = 0;
Template.website_item.events({
"click .js-upvote":function(event){
// example of how you can access the id for the website in the database
// (this is the data context for the template)
var website_id = this._id;
console.log("Up voting website with id "+website_id);
// put the code in here to add a vote to a website!
totalVotes++;
console.log(totalVotes);
Websites.update({_id:website_id}, {$set: {totalVotes:totalVotes}});
return false;// prevent the button from reloading the page
},
"click .js-downvote":function(event){
// example of how you can access the id for the website in the database
// (this is the data context for the template)
var website_id = this._id;
console.log("Down voting website with id "+website_id);
// put the code in here to remove a vote from a website!
totalVotes--;
console.log(totalVotes);
Websites.update({_id:website_id}, {$set: {totalVotes:totalVotes}});
return false;// prevent the button from reloading the page
}
})
In collection.js I have:
Websites = new Mongo.Collection("websites");
and in server.js I have:
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// code to run on server at startup
if (!Websites.findOne()){
console.log("No websites yet. Creating starter data.");
Websites.insert({
title:"Test site",
url:"http://www.test.com",
description:"This is a test.",
createdOn:new Date(),
totalVotes: 0
});
Websites.insert({
title:"Google",
url:"http://www.google.com",
description:"Popular search engine.",
createdOn:new Date(),
totalVotes: 0
});
}
});
I hope i've been comprehensive and clear with my question. I just want to be able to save up and downvote tallies for each item in my global array but right now there's just a single variable which does nothing for me.
Thanks so much!
you're missing publish and subscribe. the idea is your template will subscribe to the website data, and the server will then publish what you're asking for. you would write a helper that performs a find() on the published data, and an #each loop that would iterate over that data.
once you're done that, the tricky part, which is what you're asking about, is to tag each loop item so that, when clicked, you can uniquely identify it in the event handlers.
let's set up a new template (i'm writing all this code just in this text box, w/o trying it, so please forgive typos):
<template name="Websites">
{{#each website in websites}}
{{website.title}}
Votes: {{website.totalVotes}}
<button class="js-upvote" data-id={{website._id}}>Vote Up</button>
{{/each}}
</template>
then, you need to subscribe, like this:
Template.Websites.onCreated(function() {
this.subscribe('websites');
});
i'll assume you already have a publish written, or auto publish is on...
then write the helper:
Template.Websites.helpers({
websites() {
return Websites.find({});
}
});
and finally the event listener that can identify which item was clicked:
Template.Websites.events({
'click .js-upvote': function(event, template) {
event.preventDefault();
if (event && event.currentTarget && event.currentTarget.dataset) {
let websiteId = event.currentTarget.dataset.id;
// now you can save the incremented votes for this website
}
}
});
Regarding your totalVotes variable, i think i understand what you're trying to do, and now you can get rid of that. with the code i've written, it will save to the db the increments and decrements of each website, and because you're subscribed, you'll get that updated vote total back and reactively display it in the template.
update:
alternatively, accessing _id without writing it to the DOM:
<template name="Websites">
{{#each website in websites}}
{{website.title}}
Votes: {{website.totalVotes}}
<button class="js-upvote">Vote Up</button>
{{/each}}
</template>
Template.Websites.events({
'click .js-upvote': function(event, template) {
event.preventDefault();
let websiteId = this._id;
// now you can save the incremented votes for this website
}
}
});
I am trying in several ways to start jwplayer in my web app in which i use angularjs.. I need to pass at file option a dynamic link of the file. In my controller i can have the dynamic link with a simple function
getVideoStreaming: function(file) {
$scope.fileName = file.name;
$scope.documentId = document.id;
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
},
this function is called when i click in a button that opens a modal in which i want show the video.
<button data-uk-modal="{target:'#videoPlayer'}" data-ng-click="files.getVideoStreaming(file)"> Open video </button>
Now the question.. how can i pass this variable to my modal? According to the jwplayer basic configuration this is what i should do:
<!-- dialog video -->
<div id="videoPlayer" class="uk-modal">
<div class="uk-modal-dialog" style="width: 680px!important;">
<a class="uk-modal-close uk-close"></a>
<h3 class="uk-panel-title">
<i class="zmdi zmdi-collection-text"></i>
{{docName}}
</h3>
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://example.com/uploads/file.mp4",
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
});
</script>
</div>
</div>
but of course, as i've just said, i need file dynamic. Is it possible find a solution to this?
I have not tried to use JWPlayer from within a modal, but the directive I wrote should work for you. If not, then maybe you can reverse engineer and adapt. See how I use ng-src for the video file, with the directive is watching for a change.
ng-jwplayer
or bower install ng-jwplayer --save
Then use like:
<jwplayer ng-src="{{ videoSrc }}"
player-options="options"
player-id="myPlayer1">
</jwplayer>
and move your options to
...
$scope.videoSrc = "http://mywebserver.com/" + $scope.fileName;
$scope.options = {
image: "http://example.com/uploads/myPoster.jpg",
width: 640,
height: 360,
title: 'Basic Video Embed',
description: 'A video with a basic title and description!'
}
The package also uses a service to ensure the global jwplayer does not get instantiated multiple times.
I'm just playing around with different patterns and am very new to programming, however I've got everything to work in my test app so far except this. I've tried a bunch of variations with no luck, but I suspect I'm missing something really simple.
Basically what I want to happen is for a user to click a button and for it to then update the value of two specific attributes of the current object.
In this example I'm wanting the update to occur when the user clicks the "Return" button (the other buttons shown below are working fine).
Here's the HTML template for the button in question:
<template name="bookDetails">
<div class="post">
<div class="post-content">
<h3>{{title}}</h3><span> {{author}}</span>
{{#if onLoan}}
<i class="fa fa-star"></i>
On loan to: {{lender}}{{/if}}
</div>
{{#if ownBook}}
Edit
Lend
<div class="control-group">
<div class="controls">
<a class="discuss btn return" href="">Return </a>
</div>
</div>
{{/if}}
</div>
</template>
Here's the .js file which contains my Template event. Basically I want to set the values for the "lendstatus" and "lender" attributes.
Template.bookDetails.helpers({
ownBook: function() {
return this.userId == Meteor.userId();
},
onLoan: function() {
return this.lendstatus == 'true';
}
});
Template.bookLoan.events({
'click .return': function(e) {
e.preventDefault();
var currentBookId = this._id;
var bookProperties = {
lendstatus: "false",
lender: "",
}
Books.update(currentBookId, {$set: bookProperties}, function(error) {
if (error) {
// display the error to the user
throwError(error.reason);
} else {
Router.go('bookPage', {_id: currentBookId});
}
});
},
});
If I type the following into the Browser console while on the page for the object with id ZLDvXZ9esfp8yEmJu I get the correct behaviour on screen and the database updates so I know I'm close:
Books.update({ _id: "ZLDvXZ9esfp8yEmJu"}, {$set: {lendstatus: "false", lender: ""}});
What am I missing?
OK - so my problem was that I'd defined the event handler in the wrong template. I'd defined it in the bookLoan template instead of the bookDetails template. Thanks #saimeunt for pointing this out!