hello I am using the function fancybox.open in this way
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open([{src:\"" + video_url(src) + "\"}])' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
It is used to add a popup on video.
Everything works fine however I wish to add a custom class to that fancy box popup.
How could I do it?
Try this but no results
var param = [{
// fancybox options first element
src: "https://youtu.be/OXYuDvKM_oo",
wrapCSS: "nepelino",
},
];
jQuery(this).after("<a class='nik_link' onmouseenter='jQuery.fancybox.open(param)' data-fancybox href='" + video_url(src) + "'><span class='dashicons dashicons-controls-play btn'></span></a>");
What am I doing wrong?
I appreciate your time in advance
Related
When I click open first window link a popup opens.
in that popup you will see a grid with two columns.
in that first column i need to combine name and and icon.
so i added span tag before a tag but its not working.
can you guys tell me how to combine.
providing code below.
http://jsfiddle.net/cepzsokp/
var a = $('<span></span><a/>', {
class: 'sportsDataPlayer',
download: 'download.csv',
type: 'text/csv',
href: URL.createObjectURL(data),
html: ev.FileName
});
return a[0].outerHTML;
You can not do that html mark up. easiest thing would be just add the span before the outerHTML
var a = $('<a></a>', {...})
return "<span></span>" + a[0].outerHTML;
I have edited your latest jsfiddle. Here is the working DEMO
I have modified this line of code as below:
return "<span onclick="window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span>" + a[0].outerHTML;
First and foremost, hello. I'm a college student and not a very experienced coder, so forgive me if I end up saying something really dumb.
Either way, I have a school project in which I have to create a functional website using Node.js, where people are able to log in and buy stuff.
Most of the stuff already works, but I am having trouble with a very specific thing which I simply cannot get to work, yet is essential to the project itself.
I import data from a mySql database into the website using AJAX, that data contains products that people can buy. Then, those products are appended to the HTML page itself, and dynamically create two buttons for each product that is appended, one which says "Buy Now" and the other which says "Learn More".
Now, those buttons are supposed to be somehow associated to the values of the database, but I have no idea how to do this.
$(document).ready(function () {
$(function () {
$.ajax({
type: 'POST',
url: 'http://localhost:3000/getPacotes',
success: function (data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
var pacoteSet1 = "<div class='col-md-4 pacotes'>";
var pacoteSet2 = "<input id=btnPac"+
i + " type='button' name='comprar' value='Comprar Pacote'>";
var pacoteSet3 = "</div>";
var idPacote = data[i].idPacote;
var nomePacote = data[i].Nome_Pacote;
$("#pacotes").append(pacoteSet1 +
"<h1>" + nomePacote + "</h1>" +
"<h1>" + nomePacote + "</h1>" +
"<h3>" + precoPacote + "euros/mes </h3>" +
pacoteSet2 +
pacoteSet3);
}
}
});
});
});
My teacher told me to give an attr to the buttons I create, and that's what I was pretty much trying to do now, but I dont know how to do that, I mean, if the buttons were static it would be pretty easy, but since the buttons are not there when the document is created, I dont know if this will work
$("#btnPac" + i).attr({"id": idPacote,
"nome": nomePacote,
"preco": precoPacote,
});
Anyway, Hopefully, I didn't sound too dumb and thanks in advance
TL:DR how do I give an attribute to a dynamically created button
You just need to change your jquery function like below:
$(document).find("#btnPac" + i).attr({"id": idPacote,
"nome": nomePacote,
"preco": precoPacote
});
This should be your solution.
You can do that while creating the html for button element. By using string concatenation, which you are already using while setting the ID:
var pacoteSet2 = "<input id=btnPac"+ i + " nome='" + nomePacote + "' preco='" + precoPacote + "' type='button' name='comprar' value='Comprar Pacote'>";
Overloading the HTML with attributes is a bad idea in my opinion. You could create the Elements in JS, bind the data to it, and then append the button to the dom. Thats quite easy with jquery:
var button=$("<button>Show More</button>");//create
button.on("click",showMore.bind({name:"test"}));//add listener
$(document.body).append(button);//append
function showMore(){
alert(this.name);
}
You can create a new input tag and set these attributes then append to your div with this code:
$('<input/>', {
id: 'btnPac' + i,
nome: nomePacote ,
preco: precoPacote ,
type: 'button'
}).appendTo("#pacotes");
You can do the same for your others (h1, h3)
I'm making a Carnival calendar for my city.
I'm using this as a basic calendar engine: https://github.com/jlord/sheetsee-calendar
For a basic Modal i'm using this: https://github.com/FinelySliced/leanModal.js
I want to be able to click on the event and put it to show some information about it: name, time and place.
var eventElement = $('<div class="event"><a class="' +
event.location + '" href="#informa" rel="leanModal" >' +
event.name + "#" + event.tickets +
'</a></div> <div id="informa"> <p>' +
event.name + '</p></div>')
I made a test modal in the index.html and it worked, but it is not working when i try to do this.
You have created an element, but haven't added it to the DOM of the page.
try something like
$('body').append(eventElement);
as the next line.
To build a menu block which should be switchable with hide/unhide of the menu items, I'm using .append html.
The code idea is this:
navigat += '<h3 class="infoH3"> <a id="' + menuID +'"'
+ ' href="javascript:slideMenu(\'' + menuSlider + '\');">'
+ menuName + '</a></h3>';
navigat += '<div id="' + menuSlider + '" style="display:none">';
navigat += ' <ul>';
navigat += ' <li>aMenu1</li>'
navigat += ' <li>aMenu2</li>'
navigat += ' <li>aMenu3</li>'
navigat += ' </ul>';
navigat += '<!-- menuName Slider --></div>';
$("#someElement").append (navigat);
This is doing well .. so far.
But the point is::
I use JS to read the required menu items (eg. 'aMenu1' together with title and/or link info) from a file to build all that, eg. for 'aMenu1' a complex is composed and $("#someElement").append(someString) is used to add that the 'someElement'.
At the moment I build those html elements line by line. Also OK .. as far as the resulting string has the opening and closing tag, eg. "<li>aMenu2</li>".
As can be seen from above posted code there is a line "<div id="' + menuSlider + '" style="display:none">".
Appending that -- AFAIS -- the .append is automatically (????) adding "</div>" which closes the statement.
That breaks my idea of the whole concept! The menu part isn't included in the 'menuSlider '.
QQ: How to change it -- NOT to have that "</div" added to it??
Günter
You could change you method around to use document fragment style creation and an object to populate the properties on the elements, like this:
var someElement = $("#someElement");
$('<h3 class="infoH3"></h3>').append($('<a />',
{ 'id': menuID,
'href': '#',
click: function() { slideMenu(menuSlider); }
})
).appendTo(someElement);
var div = $('<div />', { 'id': menuSlider, css: {display: 'none'} });
$('<ul />').append('<li>aMenu1</li>')
.append('<li>aMenu2</li>')
.append('<li>aMenu3</li>')
.appendTo(div);
div.appendTo(someElement);
This is a very different way of doing it, first we're caching the $("#someElement") object so we're not searching for it repeatedly. Then we're creating the <h3> as an object, putting the link inside, then inserting then appending the whole thing to someElement. In the last, the same approach it's creating the <div>, setting it's properties, then creates the <ul> menu and appends it inside...then appends that whole div to someElement as well.
As a side note, I'm not sure how .slideMenu() works, but an event handler that works via $(this).parent().next() (or give the div a class) would work as well, and you wouldn't need a function with the slider argument passed.
I have this daily image rotation script, which works great. I need the images to be clickable though. Any help is appreciated.
<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array
("http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mp_mpl.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mph.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mmp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mep.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mst.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_s.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_maxp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mpt.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mta.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_me.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_sm.jpg");
document.write("<img src='" + arday[day] + "'>");
// End -->
</SCRIPT>
Why don't write an <a> element as well?
document.write('<a href="LINK_HERE" title="TITLE_HERE"><img src="' + arday[day] + '"><\/a>');
Clickable to where?? You've got to add a url to each "row" in addition to the img src.
Eg instead of each row being just "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg", do instead:
{ img: "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
url: "LINK GOES HERE" },
Then the last line can do:
document.write('<img src="' + arday[day].img + '" />');
The example below creates a link around your image, hjust change the href attribute's value :
document.write("<a href='#'><img src='" + arday[day] + "' border='0'></a>");
Few general tips:
Always declare your variables (var today = ..., not just today = ...)
Drop new Array in favor of more concise (and just as compatible these days) "[" and "]" syntax.
Don't repeat host name in array of links. It's a maintenance nightmare and a waste of bandwidth.
Drop HTML comments from within your script contents. Browsers that need them are obsolete by now.
Always provide "alt" attribute on your images. When you wrap them with anchor, don't forget to give title to anchor.