Hello I am working with LIKEBTN I have some designs on which I need likes and I have added the likebtn library on the designs but there is a load more which get the old designs as well and after ajax the html appends on the page and there I am not able to load like button library. As script has loaded before on page load so it's not appending on the new DOM elements. I have tried .live and .delegate as well but couldn't find the solution.
You can see there is a heart icon which has the like functionality and in console you will find child elements inside <span> as well which loaded by likebtn library but after I load more designs by ajax I couldn't load likebtn library scripts on that elements you can see the image there is no like icon and in console there is no child elements inside <span>.
This is my html which appends on ajax load more. it has dynamic variable coming from database.
<a data-index="{{ loop.index0 }}" class="galimg animate" data-animation="fadeInUp" data-duration="010">
<div class="gimg">
<img class="img-fluid" src="{% path (design.designThumbnail), 'thumbnail' %}" alt="" />
<div class="gimg-caption">
<div class="title">
<h6>{{ design.title }}</h6>
<p>By: {{ (design.userId.userFullname!= ' ')? design.userId.userFullname|uppercase_first_letter : design.userId.contactName|uppercase_first_letter }}</p>
<p>From: United Kingdom</p>
</div>
<div class="likes">=
<!-- LikeBtn.com BEGIN -->
<span class="likebtn-wrapper" data-theme="custom" data-icon_size="24" data-icon_l="hrt6" data-icon_d="sml3-u" data-icon_l_c="#ffffff" data-icon_l_c_v="#fb0505" data-label_c="#ffffff" data-label_c_v="#ffffff" data-counter_l_c="#ffffff" data-bg_c="rgba(250,250,250,0)" data-bg_c_v="rgba(250,250,250,0)" data-brdr_c="rgba(198,198,198,0)" data-i18n_like="Love this" data-white_label="true" data-identifier="btn_design_{{ loop.index }}" data-dislike_enabled="false" data-icon_dislike_show="false" data-counter_zero_show="true" data-popup_disabled="true" data-share_enabled="false" data-tooltip_enabled="false" data-site_id="5b7ac72c6fd08b366d431a36"></span>
<!-- LikeBtn.com END -->
</div>
</div>
</div>
</a>
This is the library I need to load after ajax succes
<script>(function(d,e,s) {if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
You can use init() method after ajax success. It will render your new elements.
if (typeof(LikeBtn) != "undefined") {
LikeBtn.init();
}
Related
I have some HTML code which I am using on a popup which contains an image, some text, and a button which closes the popup.
Here is the HTML:
<div id="popupHuawei">
<h2 id="titlePopup">
*Title here*
</h2>
<img class="huaweiPopupImg" src="imgHere">
<div class="popupContentArea">
<div class="popupText">
*Text here*
</div>
</br>
</div>
<a class="lesMer" href="Link">*Link text*
</a>
</div>
And originally, the button I moved, is outside the entire structure I just posted, but I needed it to be inside #popupHuawei, so I used this code to do so:
$(".dy-lb-close").appendTo("#popupHuawei");
How to move this button with vanilla JavaScript instead of jQuery?
Try to use this:
document.querySelector('#popupHuawei').appendChild(document.querySelector('.dy-lb-close')
Here's a link to official documentation of appendChild()
There is a Popular Post Widget provided by Blogger, which can find the popular posts' first image and show it on the sidebar of your blog.
But it can only find images which are directly uploaded to Blogger, it doesn't work on external image links. I'm wondering if there's a way to read the external image by editing its code, maybe in javascript I think...
The default generated code:
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
Since there are so many b:if and data: in the code, I'm not sure if I can treat it as a normal html file or not.
I made a widget below, which can show popular posts' thumbnail by external images. Copy all the code and add it as a widget fixes the problem.
It gets the first image in the posts, both internal images and external images worked well.
Code: GitHub
try this one
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 65, "65:52"): data:post.thumbnail' var='image'>
<img class='featuredImage' expr:alt='data:post.title' expr:src='data:image' height='52' layout='responsive' width='65'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
I am loading another html page in an tag and it is getting loaded in an overlay
<div id="overlay-inAbox4" class="overlay">
<div class="wrapper">
<object id="sendMessageOverlay" data="http://localhost:8000/messages/write/?recipients={{ context_user.username }}" style="height:25rem; width:50rem;" />
</div>
</div>
After doing an operation in the overlay i want to close it.
How can i do this?
I tried doing this by changing the css of $('.overlay') to display:none, but it wont work because $('.overlay') is not accessible within the object tag contents.
I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/
(For further background, this relates to the same piece of work as a previous question)
I'm creating a JavaScript based webchat system using jQuery to make life much easier. All the webchat JavaScript code is in an external js file, which is then referenced and instantiated by the html page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebchatV3</title>
<script type="text/javascript" src="/JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="WebchatV3.js"></script>
<link rel="stylesheet" href="WebchatV3.css" />
</head>
<body>
<div id="WebchatSurround">
<div style="float:right;width:300px;">
<div id="MembersBox">
Members
<ul id="MembersList">
</ul>
</div>
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
</div>
</div>
</div>
<div style="margin-right:310px;" id="ChatBox">
<div id="ChatData">
<ul id="ChatDataList"></ul>
</div>
<div id="ChatInput">
<div id="ChatInputCharRemainText">Characters remaining <span id="ChatInputCharRemain"></span></div>
<input type="text" maxlength="1000" id="ChatInputTextbox" />
</div>
</div>
</div>
<script type="text/javascript">
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false);
</script>
</body>
</html>
In the JavaScript there is code to dynamically create a list of active chat members from a JSON query. This code creates a series of html DIVs and then injects this html into the 'QuestionsList' DIV present in the html.
Now here's the question :)
Within each question are elements with JavaScript onclick events that allows actions to be taken against the question shown. How can I create the onclick code without hard coding the reference to 'webchat' - is there an elegent and acceptable way?
My initial thoughts are to pass in the instance name of the 'webchat' instance when it's created, so it can then be used inside the JavaScript when creating dynamic JavaScript...
Example of code with hard coded reference to instantited 'webchat':
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
<div class="Question">
<div class="QuestionInnerControls">
<img src="images/arrow_up.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,1);" >
<img src="images/arrow_down.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,-1);">
<img src="images/delete.png" alt="" class="ControlIcon" onclick="webchat.Questions.Delete(1);">
</div>
<div class="QuestionInnerText">
1) <b>Peter Bridger</b>: This is the question text
<br style="clear: right;">
</div>
</div>
</div>
</div>
While I think the live idea will most likely work for you, my initial thought was to create a template div in the initial stages of the code, and then use the clone(true) method to create dynamic copies of the template and its methods. Then within the javascript "loop" each copy could be customised as needed before being appended into the DOM.
http://docs.jquery.com/Manipulation/clone#bool
Your description is a bit in depth and I hope that I am following it correctly but it seems to me that you are trying to attach a click event(s) to all of the items as well as all of the items that will be created in the future. Rather than specifying the onclick event when creating the you should use the new jQuery feature that came out in jQuery 1.3+ that allows you to specify an event for every element that matches the Selector... even future elements like the ones you will be adding via json.
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
http://docs.jquery.com/Events/live
Thanks for your input everyone, I've decided to pass in the instance name of the Webchat when instancing it:
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false , 'webchat' );
Then inside the JavaScript I'm referencing the passed in referenced when dynamically building html with JavaScript in it:
onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');