I'm having real trouble adding an onClick event to a script. Here's my code that basically shows Instagram photos. I want to add an onclick="panel_five.show();return false" to
<a href='" + data.data[i].images.standard_resolution.url +"' >
<img src='" + data.data[i].images.thumbnail.url +"' />
</a>
I'm having real trouble in syntax. Here's my complete code:
...
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>");
...
Is this what you want.
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' onclick='panel_five.show();' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +"</div></div></div>");
$(function () {
var parent = $('.ttl').first().parent();
parent.append('<div class="ttl"><div class="ttlpadding"><div class="item">'
+ "<a href='" + data.data[i].images.standard_resolution.url
+"' ><img src='"+ data.data[i].images.thumbnail.url +"' /></a>"
+"</div></div></div>"
);
parent.find('a').click(function() {
// some code here
});
});
try this I have test with my url and image src and it work fine
$('.ttl').first().parent().append('<div class="ttl"><div class="ttlpadding"><div class="item">' + "<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' onclick='panel_five.show();return false;' /></a>" + '</div></div></div>');
Edit: If you have confused with " and ' you can use " and \" instead OR ' and \' as well
$("body").append("Stackoverflow");
$('body').append('<a href=\'http://stackoverflow.com\'>Stackoverflow</a>');
It's view result in body tag as
Stackoverflow
<a href='http://stackoverflow.com'>Stackoverflow</a>
Related
I have been struggling with this for a few days now. I would like to append a div with class id and an image to my container I have been able to render the cards, but upon inspecting the HTML in dev tools I came across this
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</div>
what surprises me is the empty = <= and empty div. These should obviously not be here.
I render the divs like so
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id=card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
Would anyone be able to properly format this ? it has been giving me a headache for the last couple of days.
1.You missed " around id
2.You missed to close <img> tag as well
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"></div>');
});
forget to close img-tag
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</img>
</div>
and the marks by id="card-id-'
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
As per below, I am calling an endpoint when the page is loaded to get some data and append it to a div. On localhost it works perfectly, but on the server it only works intermittently... When I look in dev tools, the network tab suggests the $.post works and returns the data... but the append doesn't.
I wondered if it was to do with the $.post completing before the html was rendered, so there was no div to append to... but not sure how to verify or fix this. I've tried moving the script in the html page to just before the close-body tag to ensure the html is rendered first. I've also made sure i define the functions in the JS before the $(Document).ready is called.
To see it not working LIVE... www.everythingproduct.com - If you try clicking on the blogs page multiple times, you'll see sometimes it hangs...
$(document).ready(function() {
var page = 'blog-articles';
$('#main-body-content').load('site/pages/' + page + '.php');
loadArticlesData();
$.post('endpoint/sendEvent.php', {
userID: '<?php echo $uid; ?>',
eventType: "pageView",
currentURL: window.location.href,
referer: '<?php echo $referer; ?>'
});
});
function loadArticlesData() {
$('#cover').show();
$.post('endpoint/getArticles.php', {
type: "All"
}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#articles').append(
'<a target="_blank" href="' + l.link + '">' +
'<div value="' + l.id + '" class="article">' +
'<div class="img">' +
'<img src="img/' + l.img + '" height="50px">' +
'</div>' +
'<div class="article-content">' +
'<h2>' + l.title + '</h2>' +
'<span class="description-text">' + l.description + '... <span style="font-style: italic; color: #888;">See more</span></span>' +
'</div>' +
'</div>' +
'</a>'
);
});
$('#cover').fadeOut("slow");
});
$.post('endpoint/getTags.php', {}, function(result) {
var data = result;
$.each(data, function(i, l) {
$('#tags').append(
'<span value="' + l + '" class="tag-word">' + l + '</span> '
);
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cover"></div>
<div class="body">
<div class="body-container">
<div class="body-left">
<div style="text-align: left; padding-left: 20px;">
<h1 style="font-weight: normal;">Blog Article Database</h1>
</div>
<div id="articles" class="articles"></div>
</div>
<div class="body-right">
<div class="filter-panel">
<h3>Browse (A-Z)</h3>
<div id="tags" class="tags">
<span style="background: #fff; color: #0c7bce;" value="ALL" class="tag-word">ALL</span>
</div>
</div>
</div>
</div>
</div>
You are interfering with the asynchronous requests. Only do one at a time and continue in the success
Try this:
$('#main-body-content').load('site/pages/' + page + '.php', loadArticlesData);
to wait until the first request is done - then move
$.post('endpoint/getTags.php', {}...
into the end of the success of the second request
I want to change the image source on select a new image so that i can apply my java-script on all images.. Code working properly on 1st image but not updating the source for others.
Help me.
HTML
<div>
<? php $pro_detail ->pic_continer_disp(); ?>
var zoomConfig = {cursor: 'crosshair', zoomType: "inner",zoomWindowFadeIn: 500,zoomWindowFadeOut: 750 };
var zoomImage = $('#zoom');
var image = $('#zoom1');
zoomImage.elevateZoom(zoomConfig);//initialise zoom
image.on('click', function(){
// Remove old instance od EZ
$('.zoomContainer').remove();
zoomImage.removeData('elevateZoom');
// Update source for images
zoomImage.attr('src', $(this).data('image'));
zoomImage.data('zoom-image', $(this).data('zoom-image'));
// Reinitialize EZ
zoomImage.elevateZoom(zoomConfig);
});
</script>
</div>
PHP
pic_continer_disp() {
if($product_image1 != ''){
echo "<a href='' target='_blank'><img src='admin_area/product_images/product_pics/$product_image1' class='enlarge' width='400' height='265' alt=' ' id='zoom' data-image='admin_area/product_images/product_pics/$product_image1' data-zoom-image='admin_area/product_images/product_pics/$product_image1' /></a>";
}
if($product_image2 != ''){
echo "<div id='gallery'><a href='' id='zoom1' target='_blank'><img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265' alt=' ' data-image='admin_area/product_images/product_pics/$product_image2' data-zoom-image='admin_area/product_images/product_pics/$product_image2' /></a></div>";
}
}
if ($product_image2 != '') {
echo "<a href='' target='_blank'>
<img src='admin_area/product_images/product_pics/$product_image2' class='enlarge' width='400' height='265' alt=' ' id='zoom1' data-zoom-image='admin_area/product_images/product_pics/$product_image2' />
</a>";
}
}
It looks like I'm doing everything alright; however, all the posts seem to just appear in rows equal to the height of the tallest image in that row.
1234
1200
0200
5678
5008
as opposed to
1234
1256
7258
0008
That picture may not make much sense so I've included a screenshot...
http://i.imgur.com/Sj2i7EX.png
HTML
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Masonry Testing</title>
<link rel='stylesheet' type='text/css' href='css/main.css' />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="grid">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="js/app.js"></script>
<script>
jQuery(document).ready(function($){
$("#grid").masonry({
itemSelector: ".grid-item"
});
});
</script>
</body>
</html>
JavaScript
$.getJSON(
"http://www.reddit.com/r/pics.json?jsonp=?",
function foo(data)
{
$.each(
data.data.children.slice(0, 50),
function (i, post) {
$("#grid").append( "<div class='grid-item'>" );
$("#grid").append( "<img src='" + post.data.url + ".jpg' />" );
$("#grid").append( "<div class='post-title'>" + post.data.title +"</div>" );
$("#grid").append( "<div class='post-info'>");
$("#grid").append( "<div class='upvotes'>
<span><i class='fa fa-arrow-up'></i> " +
post.data.ups + "</span></div>" );
$("#grid").append( "<div class='comments'>
<span><i class='fa fa-comments'></i> " +
post.data.num_comments + "</span></div>" );
$("#grid").append( "<div class='sourcebtn'><span>View on Reddit</span></div>" );
$("#grid").append( "</div>" );
$("#grid").append( "</div>" );
}
)
}
)
My JavaScript code works fully -- the formatting is made silly because StackOverflow wants my code more neat than I tend to have it.
My question mainly is: Where's the error with Masonry.js? Why won't it properly stack segments?
The problem may be that jQuery(document).ready() is firing before the $.getJSON asynchronous request has finished, so Masonry is being activated on an empty div. I would try moving your Masonry initialization code to the end of your $.getJSON callback:
$.getJSON(
"http://www.reddit.com/r/pics.json?jsonp=?",
function foo(data)
{
$.each(
data.data.children.slice(0, 50),
function (i, post) {
// Add your divs
}
)
$("#grid").masonry({
itemSelector: ".grid-item"
});
}
);
jQuery's .append(html) function works differently than how you are using it. For example:
$("#grid").append( "<div class='grid-item'>" );
// Step 1: Find `#grid` element
// Step 2: Convert "<div class='grid-item'>" to DOM Elements
// Step 3: Append new DOM Elements to `#grid` element
So doing the following:
$("#grid").append("<div>");
$("#grid").append("<img src='someurl'>");
Will result in
<div></div>
<img src='someurl' />
Instead of
<div>
<img src='someurl' />
</div>
One solution is to simply write your append as one statement:
$("#grid").append(
"<div class='grid-item'>"
+ " <img src='" + post.data.url + ".jpg' />"
+ " <div class='post-title'>" + post.data.title +"</div>"
+ " <div class='post-info'>"
+ " <div class='upvotes'>"
+ " <span><i class='fa fa-arrow-up'></i> "
+ post.data.ups
+ " </span>"
+ " </div>"
+ " <div class='comments'>"
+ " <span><i class='fa fa-comments'></i> "
+ post.data.num_comments
+ " </span>"
+ " </div>"
+ " <div class='sourcebtn'><span>View on Reddit</span></div>"
+ " </div>"
+ "</div>" );
i am trying to append my small template in in dom but some element's missing i don'nt know why it's behaving like awkward if some one can correct me what's going wrong and why it's not showing these elements dynamically excpet this complete template showing.
here is my code jquery:-
template = '<article id="ProfileBox" class="col-lg-3 ltr">' +
'<div id="ProfileImage" class="Profile_image colored_border">' +
'<img src="../images/about-me/' + ParsingJsonData.UserImageUrl + '" class="Rounded-Corners" width="220" height="162">' +
'</div>' +
'<div id="ProfileContact">' +
'<h5 style="text-align: center;">' + ParsingJsonData.UserName + '</h5>' +
'<p style="text-align: center;"><strong>Role : </strong><em>' + ParsingJsonData.UserRole + '</em></p>' +
'<p style="text-align: center;"><i class="fa fa-mobile FontThemeColor" style="font-size: 15px;"></i> ' + ParsingJsonData.UserCellNumber + '</p>' +
'<p style="text-align: center;"><i class="fa fa-envelope FontThemeColor" style="font-size: 10px;"></i> ' + ParsingJsonData.UserEmailAdress + '</p>' +
'</div>' +
'</article>' +
'<article id="ProfileBox1" class="col-lg-9 ltr">' +
'<h3 class="HeadingThemeColor">Describing My Self !</h3>' +
'<div class="Profile_divider"></div>' +
'<p>' +
ParsingJsonData.UserDescription
'</p>' +
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
'</article>';
$("#profileID").append(template);
After appending not showing elements:-
'<div class="Profile_list list-check">' +
'<ul id="ProfileCompleteInformation">' +
'<li>wajih</li>' +
'</ul></div>' +
You are missing a concatenation operator between ParsingJsonData.UserDescription and '</p>'. It would be easier to read your code and avoid these mistakes if you would indent it properly. May I suggest you to use the following approach instead (it's also much more efficient)?
var template = [
'<article id="ProfileBox" class="col-lg-3 ltr">',
'<div id="ProfileImage" class="Profile_image colored_border">',
'<img src="../images/about-me/', ParsingJsonData.UserImageUrl,
'" class="Rounded-Corners" width="220" height="162">',
'</div>'
//...
].join('');
If you have a lot of markup generated in JS, maybe you should have a look at some templating libraries.