First my code:
Html
<div class="product_image m2" id="m2"><a href="#" id="10" class='multi2'>test..</a></div>
JS
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
alert(value);
return false;
});
if ($(".multi2").length > 0){
$(".multi2").yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegesztő' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegesztő' }},
]
});
}
});
So, I use Yoxview. Multi2 class define the images and when user click on link (or thumbnail). lightbox shown and slideshow start.
The slideshow start every time from the first image defined in JS. I would like to change this so i would like to pass the id of href inside in m2 div to the image list.
Unfortunately I can't do this. I try this code but with this the script crash. How can I pass VALUE to image list?
Try code below, this probably will work, but not a good solution.
EDIT
By the way as Kanishka mentioned its not legal to start ID with a number. You can store photo id as an custom attribute <a href="#"... data-photoid="2" ... /> and get it using jquery data() $(this).data('photoid').
$(document).ready(function(){
$("#m2 a").bind("click", function() {
var value = $( this ).attr( 'id' );
if(!$(this).data('yoxed')) {
$(this).yoxview({
cacheImagesInBackground:true,
skin: "top_menu",
lang: "hu",
images: [
{ media: { src: 'images/galeria/cella/image01'+value+'.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image015.JPG', title: 'Cella hegeszto' }},
{ media: { src: 'images/galeria/cella/image013.JPG', title: 'Cella hegeszto' }}
]
});
$(this).data('yoxed', true).trigger('click');
}
}
return false;
});
});
Related
i want to add title, description and other html meta for SEO.
how i can do it in vue template?
for example i want to add the meta on my template.vue.
for some reason i have to add script too on that template.
my code is like this:
head: {
title: 'my title',
script: [
{ src: '/js/theme.js', defer: true }
]
},
code above is error.
if i use return like this:
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'My custom description' }
],
script: [
{ src: '/js/theme.js', defer: true }
]
}
}
meta will work, but the script will not showing.
like i say, i can't put the script on nuxt-config.js don't know why, but the page will error.
check this image hope it will help your problem
The 1st version does not work, the images do not show. No errors, just nothing displays
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
This 2nd version does work! The images display as expected.
const grid_display = ({ url, key }) =>
React.createElement("div", {className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url })));
Anyone have a reason why the createElement audio causes the issue?
PS. The end result is displaying images in a grid. I need each image to play a sound when you mouse over them. NOTE: The images/sounds are actually dynamic.
thanks for the help!
It does create, you can check the html code using browser dev tools.You have not added the controls attribute, because of which it is not visible in the html.
const grid_display = ({ url, key }) =>
React.createElement("audio", { id: "woof", controls: "controls", src: "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3"},
React.createElement("div", { onMouseOver: "playSound('woof')", className: "image-item", key: key },
React.createElement("a", { href: "https://www.google.com"},
React.createElement("img", { className: "grid-img", src: url }))));
Demo
const audio = document.createElement('audio');
audio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// audio element added but not visible in html
//audio.setAttribute("controls", "controls");
document.body.append(audio);
const showAudio = document.createElement('audio');
showAudio.src = "https://free-screensavers-backgrounds.com/ringtones/funny/dog-barking.mp3";
// Now visible
showAudio.setAttribute("controls", "controls");
document.body.append(showAudio);
I want to add a custom HTML attribute to a view so that it shows when I render a View. This is my code:
var Song = Backbone.Model.extend({
defaults: {
title: 'Red',
artist: 'Taylor Swift',
filename: 'audio1.mp3',
playlist: 0
}
});
var Player = Backbone.View.extend({
tagName: "audio",
id: "player",
//Can I add a custom HTML attr here? eg. onended="view.next()"
newTemplate: _.template('<source src="<%= filename %>" >'),
initialize: function(){
this.render();
},
render: function(){
var track = this.model.currentTrack
var currentModel = _.find(this.model.models, function(arr){return arr.attributes.playlist == track});
this.$el.html(this.newTemplate(currentModel.toJSON()));
$(document.body).html(this.el);
},
next: function(){
this.model.currentTrack++;
console.log('currentTrack: ', this.model.currentTrack);
this.render();
}
});
var Playlist = Backbone.Collection.extend({
model: Song,
initialize: function(models,options) {
_.extend(this,_.pick(options, 'currentTrack'));
}
});
var playlist = new Playlist([
{
title: 'Red',
artist: 'Taylor Swift',
filename: 'audio1.mp3',
playlist: 1
},
{
title: 'Style',
artist: 'Taylor Swift',
filename: 'audio2.mp3',
playlist: 2
}
],
{
currentTrack: 1
});
So, basically I want to add an HTML listener to the rendered View (<audio onended="view.next()">)so when the audio is finished playing I can trigger the next method of the view. How can I do this?
I would prefer to use Backbone events to do this but according to this answer I have to trigger events from the HTML element.
So it turns out I was going totally wrong about this and the answer was quite simple.
I just have to treat it like any other event...
var Player = Backbone.View.extend({
tagName: "audio",
id: "player",
//I add an events attribute with the event and the method to trigger.
events: {
'ended': 'next'
},
newTemplate: _.template('<source src="<%= filename %>" >'),
initialize: function(){
this.render();
},
Thanks to mu is too short for the heads up. He also mentioned to check out delegate events
Currently I have a toolbar with some buttons, here is how I create it :
HTML
<div id="toolbarContainer1" style="direction: rtl"></div>
Javascript
var dataArray= [
new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
];
window.createImperativeToolBar = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
data: new WinJS.Binding.List(dataArray)
});
var thisToolbar = document.querySelector('#toolbarContainer1');
thisToolbar.winControl.closedDisplayMode = 'full';
}
I've tried doing adding it like so :
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.
I want to show the flyout on button click :
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
}
But obviously because the ID doesn't get set, an error gets logged. Any ideas ?
Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/
When you create a win-control like so:
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
The id "formatTextFlyout" is only the the id of this flyout control.
But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.
One solution here is you create a Flyout like so:
HTML:
<div id="flyoutContainer"></div>
Javascript:
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("flyoutContainer").winControl.show(formatTextButton);
}
Or
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
flyout.show(selectedButton);
}
If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:
<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout"
aria-label="{Format text flyout}">
The html element is div and has a id "formatTextFlyout".
Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.
I am working with magnific popup and want to show a video when someone is coming to the side (including not showing it everytime a user comes to the site, hence the localStorage part). This all works and here is the code:
(
function($) {
$(window).load(function () {
if(localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);
Now, I want to show the popup only on a specific page (when a specific language is selected). I noticed that the body tag changes the class when a user selects a language, example:
<body class="lang-en-EN">
or
<body class="lang-de-DE">
Is there a way to fire the popup, when the class changes from language EN to DE?
Update: Here is the Fiddle
In the if-statement you already have, just check for the class as well, adding (e.g.) $(body).hasClass("lang-en-DE"):
(function($) {
$(window).load(function () {
if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){
setTimeout(function(){
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=blabla'
},
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: 'v=',
src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0'
}
}
}
});
}, 5000);
localStorage.setItem('popState','shown')}
});
})
(jQuery);