I would like to know how to implement a simple LinkedIn HopScotch.
I tried to implement, but was unsuccessful in getting it done.
Below is my attempted implementation;
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
]
};
$("#myBtn").click(function() {
hopscotch.startTour(tour);
});
</script>
Should I add a <div> with an id as hello-hopscotch as per tour object?
http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.
What am I doing wrong and how can I fix it?
Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.
You can configure the placement per the documentation.
As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".
Related
I have a paper-dialog inside of another element looking like:
<paper-dialog id="modal" modal>
<h2>Login</h2>
<p>Lorem......</p>
<div class="buttons">
<paper-button dialog-confirm autofocus>Login</paper-button>
</div>
</paper-dialog>
I could declaratively add entry-animation and exit-animation but I'm really trying to do two effects at once like it shows in the docs
I tried using something like:
this.$.modal.animationConfig = {....}; //like the docs
and I set node to this.$.modal, but I'm pretty certain it doesn't read that variable at all because when I check this.$.modal.getAnimationConfig('exit') (or entry) I get nothing.
So where in the lifecycle can I do something like this.
The end goal for me is to apply to intertwined (one of them slightly delayed) animations to my paper-dialog on entry and exit like in (as he loves to be called :p ) "Bob Dod"'s polycast
If you don't know the answer, pointing me in a different direction also helps ;)
Since it seems my comment was helpful, here it is as an answer:
"Are you sure about this? I tried setting the animationConfig as this.$.modal.animationConfig = { ... } in this fiddle and everything worked just fine..."
I use polymer with angular 2 and this is the way I try to add animation:
if (dialog) {
dialog.animationConfig = {
'entry': {
name: 'transform-animation',
node: dialog,
transformFrom: 'translateY(100%)',
transformTo: 'translateY(0)'
},
'exit': {
name: 'transform-animation',
node: dialog,
transformFrom: 'translateY(0)',
transformTo: 'translateY(100%)'
}
};
dialog.open();
}
So, basically, I'm working on my first Tumblr theme here: teenaqe-vow.tumblr.com and everything is fine and dandy so far EXCEPT for the infinite scroll code. What happens is it works perfectly fine until you go to a tagged page like this one. http://teenaqe-vow.tumblr.com/tagged/music What happens is that when you scroll down, instead of loading the next page of the tagged pages, it loads a page from the index page. I'm using a script that keeps the posts all nestled together and renders the infinite scroll and without it there are gaps in the posts and it doesn't work out too well.
I'm really new with this whole thing so I'm kind of at a loss of how to fix it. I apologize if any of the information I provide is inadequate, please let me know if you need something more from me.
Here is the entire theme code: http://pastebin.com/X8DaLKPG
Here is the infinite scroll / masonry part:
{block:IndexPage}{block:IfTwoColumn}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
{block:IfInfiniteScroll}
<div id="pagination"></div>
<script src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js"></script>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
});
});
$container.infinitescroll({
itemSelector : "#entry",
navSelector : "#pagination",
nextSelector : "#pagination a",
loadingImg : "http://media.tumblr.com/ec1742dbca16ca94b47814f1de4e37e6/tumblr_inline_mj8pf7Te3l1qz4rgp.png",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
{/block:IfTwoColumn}{/block:IndexPage}
Your pagination link is fixed on the main page (it always points to user.tumblr.com/page/2/). Use the Tumblr API pagination tools instead.
I have been having this same issue on my Tumblr and have finally resolved it, so I thought that I would share my mistake and my resolution in the hopes that it will help a fellow beginner, such as myself :)
This is what I had to start with that was causing the issue:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" href="/page/2" id="next"></a></div>
And this is my resolution:
<div class="pagination"><span id="page_nav"><span onclick='return false;'><a style="float:right;opacity:1;" {block:NextPage}href={NextPage} id="next" {/block:NextPage}></a></div>
You'll notice that the only change has been made to the href attribute. When you set it to /page/2, it's telling the tag page to show page 2 from the index page, because it is missing the name of the tag from the URL. When you add Tumblr's pagination block tag for next page ({block:NextPage}) and the next page URL ({NextPage}), it will then be able to decipher whether or not you are starting from an index page or a tag page, and then be able to fill in the blanks in the URL by itself. I hope this helps!
I am adding nested (reddit-like) comments to my app; so far I'm just using comment divs, where in my CSS I do this:
.comment {
margin-left: 40px;
}
This works fine for displaying comments. My question is what is the cleanest way to now add reply forms to each comment (and only show it when the user clicks a reply button of some sort)?
Is this usually done by adding all the input boxes for the comments right away, hiding them at first, and then only showing them if the user clicks on a reply button? Or perhaps should I only append the relevant <form> HTML code to a given div once the user clicks reply for that comment?
What is the cleanest way to do this?
You can do that by having one form field hidden somewhere in the html and when ever user clicks on the commect clone the form element and append it to the comment div
checkout this jsFiddle example below is the code snippet
<div class="comment">
comment1
</div>
<div class="comment">
comment2
</div>
<div style="display:none">
<form id="commentForm">
<textarea name="comment"></textarea>
</form>
</div>
var Comment = {
init: function() {
$(".comment").bind('click', $.proxy(this.handleClick, this));
},
handleClick: function(evt) {
var form = $('#commentForm').clone();
var target = $(evt.target);
var isFormAvailable = $("#commentForm", target).length > 0;
if(!isFormAvailable) {
$(evt.target).append(form);
}
}
};
$(function() {
Comment.init();
});
Keep a template of the form somewhere in your document and keep it hidden. On click of reply next to any comment, do following.
Clone the template (you can jquery clone function)
Set a hidden field in the template to the id of the comment for which reply is been clicked
append it next to comment that need to be replied
I'll go with this.
Keep the input boxes with each comment right away doesn't make sense. It's unnecessarily increasing the size of the page.
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
I'll try to explain:
I have numerous div classes, but for the sake of simplicity, let's say I only have 3.
Someone is viewing DIV 1, and I want to give them the option of only printing DIV 1, omitting 2 and 3.
However, on the same page, I would like to give them the option to ONLY PRINT DIV 2. Or only print DIV 3.
I think I get how you can omit certain things from getting printed. But how can you select a section here or there on the same page to be printed with a print link.
Thanks,
Tracy
You can use jQuery to show/hide divs. Read the jQuery tutorial:
http://docs.jquery.com/Tutorials
The code will look this way:
<script>
function showDiv(n) {
$('.divs').hide();
$('#div_'+n).show();
}
$(document).ready(function() { showDiv(1); });
</script>
<a href='javascript:showDiv(n)'>show div n</a>
<div class='divs' id='div_n'>I'm div n</div>
There are many related posts on printing div content, this particular question was still open though it was asked in '10.. Following JavaScript function can be used for printing content of a selected Div tag. Hope this helps. Declaimer: I used some of the existing answers, fixed/enhanced code/error(s) to work with (and tested on) IE-8.
function printDiv(divName) {
var divToPrint = document.getElementById(divName);
var newWin = window.open('', 'PrintWindow', 'width=400, height=400, top=100, left=100', '');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
newWin.document.close();
setTimeout(function () { newWin.close(); }, 10);
}
Call printDiv from anywhere in page or from within selected Div. Here is test link:
Print Customer Data
Print Order Data
Assign respective IDs to Div that is to be printed:
<div id="divCustomerData">Div Contents goes here... </div>
The only catch right now is it loses css styles. I'll update response when i get a chance to fix it. Thanks.
https://github.com/jasonday/jquery.printThis
I would give each div an id, and then using the above plugin (i wrote) specify according to div id.