Have some problems with my javascript - javascript

i have some problems with my script , i used JqueryUI tooltip but it doesn't work .
Sample demo is given below.
http://jsfiddle.net/VFZL7/.
$(function() {
$("a[id*='product_wrap']").tooltip({
content: function(){return $(this).html().replace('150_','')},
track: true,
});
});
I want my tooltip indicates the image petplusvn.com/files/sanpham/16/150.jpg instead of petplusvn.com/files/sanpham/16/150_1.jpg.

You can use regular expressions to replace both URLs ( in src and data-original )
$(function() {
$("a[id*='product_wrap']").tooltip({
content: function(){
var $html = $(this).html().replace(/150_/g, '');
console.log('new HTML: '+$html);
return $html;
},
track: true,
});
});
http://jsfiddle.net/7Y8Au/

Related

Simplify a JQuery code

I have many popovers in my page (JSBin), each data-toggle is linked to a html div. It is now realized by the following script:
<script>
$('[data-toggle="popover0"]').popover({
html: true,
content: function() {
return $("#popover0-html").html()
}});
$('[data-toggle="popover1"]').popover({
html: true,
content: function() {
return $("#popover1-html").html()
}});
$('[data-toggle="popover2"]').popover({
html: true,
content: function() {
return $("#popover2-html").html()
}});
</script>
I would like to simply the above code by saying "for all data-toggle with an ID, we return the html whose id is ID + -html". Does anyone know how to realize this?
One option is:
$('[data-toggle]').popover({
html: true,
content: function() {
var id = "#" + this.getAttribute('data-toggle') + "-html";
return $(id).html();
}
});
The above script uses value of the data-toggle attribute for selecting the target element. It works for 1 or many elements.
<script>
for (var i=0;i<3;i++) {
var selector = '[data-toggle="popover'+ i +'"]';
var popover = '#popover' + i +'-html';
$(selector ).popover({
html: true,
content: function() {
return $(popover ).html()
}});
}
</script>

Instagram api is not working

I have very few knowledge about using api, javascript.
(I'm a html/css coder)
I've been requested to use this API to get instagram pictures
that users posted using certain hashtag.
Here's the demo that's been shared by jsfiddle
http://jsfiddle.net/j9ynxvox/10/
$(function() {
// 「表示」を押すと、画像を取得します
var endpoint = 'https://tagplus.jp/demo/api/json/medias';
// ポップアップ用の関数
var popup = function(item) {
var $container = $('<div>', {'class': 'popup-container'});
$('<div>', {'class': 'popup-overlay'}).appendTo($container);
var $template = $($('#popup-template').html());
$template.find('.popup-image').attr('src', item.images.standard_resolution);
var userLink = 'https://instagram.com/' + item.media_user.username;
$template.find('.user-link').attr('href', userLink);
$template.find('.profile-picture')
.attr('src', item.media_user.profile_picture);
$template.find('.media-user-name').text(item.media_user.username);
$template.appendTo($container);
$('body').append($container);
$container.fadeIn();
};
$(document).on(
'click',
'.popup-overlay',
function(e) {
e.preventDefault();
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
);
$('button').click(function() {
$('#thumbnail').text('');
$.get(
endpoint,
{count: 12},
function(res) {
res.data.forEach(function(item) {
var $thumb = $('<img>', {
'class': 'insta-thumb',
src: item.images.thumbnail
});
$thumb.appendTo($('#thumbnails'));
$thumb.click(function(e) {
e.preventDefault();
popup(item);
});
});
},
'jsonp'
);
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
$('.popup-container').fadeOut(
'fast',
function() {
$(this).remove();
}
);
}
});
});
In my case, I've been asked to use this API address. https://tagplus.jp/plazastyle_Campaign/api/json/medias
(its called http://tagplus.jp/)
To start off, I simply copied and pasted this jsfiddle code
to my local files but it is not working when I click the button to load instagram pictures.
Here's my demo
http://1ne-studio.com/test2/sample.html
id : test
pass : ny2016
Why is it not working and how could I fix this?
Thank you for your time!
(In my case, I've been asked to use this API address. https://tagplus.jp/plazastyle_Campaign/api/json/medias)
EDIT: So it looks like your script is totally different from the one in the fiddle. Replace your script to the one from the fiddle and try again!
Old answer:
It's because you do not have jQuery!
Add this somewhere in the head and try again
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

Make Jquery text a clickable link

How can I make blahblah#gmail.com a clickable link?
I'd like to include
href="mailto:xxxx#gmail.com"
Fiddle
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).fadeOut(500, function() {
$(this).text('blahblah#gmail.com').fadeIn();
});
},
function() {
$(this).fadeOut(800, function() {
$(this).text($(this).attr('data-originalText')).fadeIn();
});
}
);
Convert this
$(this).text('blahblah#gmail.com').fadeIn();
to this
$(this).html('blahblah#gmail.com').fadeIn();
DEMO
You need to use .html() in order to get html to display.
Replace: $(this).text('blahblah#gmail.com').fadeIn();
With: $(this).html('blahblah#gmail.com').fadeIn();
Working fiddle: https://jsfiddle.net/u8xqrp96/1/

prependTo not working

I am getting data in cometD but when i use prependTo it doesn't show any thing. when i use prepend then it shows. but i want to use prependTo. and for some reason it is not working. below is my code.
function message() {
this.messageDialog = $('<div id="messageDialog"></div>');
this.messageDiv = $('<div id="messageDiv"></div>');
this.show = function() {
this.messageDialog.dialog({
title : 'Message Board',
width : 800,
minHeight : 150,
position: 'bottom',
close : function(ev, ui) {
$(this).remove();
return false;
}
});
this.messageDiv.appendTo(this.messageDialog);
}
}
dojox.cometd.subscribe('/service/order', function(message) {
var getString = message.data.test;
//$(getString+"<br/>").prependTo("#messageDiv");
$(message.data.test+"<br/>").prependTo("#messageDiv");
});
jQuery is looking for a selector that doesn't exists. Try the below code:
$("#messageDiv").html(message.data.test+"<br/>");
Or try wrapping your string in another tag like below:
$('<p>'+message.data.test+'<br/></p>').prependTo("#messageDiv");

jQuery not working in IE, works in other browsers

Currently coding a mates portfolio and not to my surprise the code isn't loading in IE!
I'm coding it using standard AJAX, here's the relevant jQuery:
//ajax shtuff
$(window).load(function() {
// Ajax Cache!
$.ajaxSetup ({
cache: false
});
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $('.current').attr('href');
// Initial Page Load
$('#con').prepend($loadW);
$('#main').fadeOut('slow', function() {
$(this).load($loadurl + ' .page', function() {
$(this).parent().find('#whiteLoader').fadeOut('slow', function() {
$(this).parent().find('#main').fadeIn('slow').css({background: 'red'});
$(this).remove();
});
});
});
$('nav ul li a').each(function() {
$(this).click(function(e) {
var $loadW = '<div id="whiteLoader" />';
var $loadurl = $(this).attr('href');
// Prevent default hotlink
e.preventDefault();
// Add the current state
$('*').removeClass('current');
$(this).addClass('current');
// Load the Page
$('#main').fadeOut('slow', function() {
$('#con').prepend($loadW);
$('#main').load($loadurl + ' #main', function() {
$('#whiteLoader').fadeOut('slow', function() {
$('#main').fadeIn('slow');
$(this).remove();
});
});
});
});
});
});
Literally have no idea why this doesnt work lol, here's a link to the live page (I've put the background as red just to show you the area.)
Also the reason the initial page is using the 'this' method is because I was testing it both ways.
http://212.7.200.35/~tfbox/zee/
have you tried
$(document).ready(function() {
// Stuff to do as soon as the DOM is ready;
});
instead of window.load?
Often IE has trouble styling / selecting any of the new HTML5 elements such as section and nav. Try using something like this or simply using a div

Categories

Resources