I was trying to achieve something like Quora's read on feature where when expanded more content will be displayed.
I am using ng-bind-html binding an html page into P element.
<p ng-show="viewModel.level==0" ng-bind-html="viewModel.content0 | sanitize">
<p ng-show="viewModel.level==1" ng-bind-html="viewModel.content1 | sanitize">
the expanding works fine, but when collapse from level 1 to 0 (more content to less), the html page went into blank stuck there until you click or drag the page.
how to avoid that ?
I get the answer by accident.
what I need is a notification that the list size has changed:
$scope.$broadcast('scroll.resize');
Related
while click button print the selected html page. Selected html have 5 pages but i want to print first two pages only. is it possible to send first two pages only while clicking the button . window.print() is have any function to send print first 2 page only instead of 5 pages?
The Simple answer is No. Just because there is no parameter in window.print() method, or such a configuration to do so. See the MDN Docs. But there is a simple workaround for achieving the thing you want. What you can do is just set style="max-height: 400px; overflow: hidden" to the body of HTML just before calling window.print() method. Here in sample 400px size is just for demo. You have to find that using trial and error. You also have to remove the style otherwise you won't be able to go through entire page.
You can use ngx-print, which is an angular component that can be used to print parts of a page. - https://www.npmjs.com/package/ngx-print
With ngx-print, you can use something like this :
<div id="sectionToPrint"> your content.. </div>
And then, for the print button, you can use ngx-print attribute like this :
<button printSectionId="sectionToPrint" ngxPrint> Print </button>
This will only print contents inside the "sectionToPrint" id.
Hope this helps.
I am new to the angularjs. I am using a textangular for showing the HTML document. My code is
HTML
<div text-angular class="html-editor-container textcontent-modal" id="originalDocumentId" spellcheck="false" ng-hide="fetchingDocumentAsHTML"
ng-model="data.originalDocument" ta-disabled="true">
</div>
Now, From this, I am getting the HTML document in my div. When I checked using the Web Developer tool that time It is showing the taTextElement123344455 as a div for the content, now I want to get that div so that I can perform some another operation on the content.
SO I tried by doing document.getElementById("taTextElement123344455") But this Id is always changing. So, Can anyone please tell me how to get that div?
I made an onclick popup redmore button for my sidebar text widget in wordpress just copied and pasted this code I found here. I did some little changes and everything worked fine.
The problem occurred when I had to make more onclick popups like that one for the rest of the sidebar widgets, exactly the same popup with same values but with different img and content text.
The problem is both "redmore" buttons in the first widget and in the second one link to the same thing - so it will open the same one no matter which redmore button you click -
this is the website check out the first two items in the right sidebar.
Since I don't know much about Javascript, I'm asking you if you can help me changing the javascript tag link in the code in order to link to another different popup and not the same one - and let me understand how to change it since I have to make a few popups.
You should change the Id attribute of the Contents for eg
<div id="light2" class="white_content">
<div id="fade2" class="black_overlay">
for the second pop up and change the javascript of the second read more text to
here
Same should be applied to all other pop ups.
Here i have changed the fiddle
You need to change the id for every popup Like
getElementById('fade')
getElementById('light')
[the first]
getElementById('fadesec')
getElementById('lightsec')
[the second]
And so on.. same thing on html content, don't just copy, change ids
Example two:
<p>This is the main content. To display a lightbox click here</p>
<div id="lightsec" class="white_content">This is the lightbox content. Close</div>
<div id="fadesec" class="black_overlay"></div>
I've built a simple chat that reloads every 3 seconds.
The actual reloading of the chat is done by this script (copied from Google, I've only done PHP, CSS and html before):
$(document).ready(function() {
$("#chat").load("system/chat.oclog"); // Loads chat upon page load
var refreshId = setInterval(function() {
$("#chat").load("system/chat.oclog");
}, 3000);
$.ajaxSetup({ cache: false });
});
Now to the problem. If you were to select any text inside of the chat-div, the selection goes away when the chat reloads since the div is being refreshed. This makes copying text a real pain.
Any suggestions/solutions to this problem is greatly appreciated. Me myself have been thinking of maybe making the script only reload the chat if the filesize of the chatlog has changed, but I'm not sure how to to this and Google hasn't given me a solution either.
/Erik
Solution :-
First Create 2 Div's , 1 For loading content and it will hidden by css ( display : none ), and then a another one that will be visible to user,
<div id="hidden_content" style="display : none;"> </div>
<div id="chat"> </div>
And your content will be load in hidden_content, and then add a another function that will called everytime when content loaded in in hidden element, then you can check if the string length of hidden_content's div is equal to chat div's content, and if it is equal so no need to copy this data in chat div , and if not then you can will use substr to find out what new more chars are added in hidden_content, and then once you find out those more chars that was not in chat before, "append" them the chat content !
So by this only new chars will append to that chat, so you can select and it will not reload again :), This solution will work if the loaded content increase like this :-
previous content + new content
Mean on server if There was one message on file and then a another added so this another one must be apped to that old one,
Well it's not a good solution at all, your browser will always dowload full data, and that is not good solution ! , Sorry for weak english :)
I have an ASP page which consist of a table that is generated with the ASP script. I am now populating the table values from a RSS feed by parsing items in it.
The RSS feeds consist of some Job Vacancies data. The items are: date, JobID, Title, Location, Category, Apply Link.
I have one requirement to make a mouseover to the Job Title. When mouse over to the Job Title, a small popup will display and shows Job Description from the RSS feed. The table is showing all the entries and mouse over is also working perfectly after page fully loads.
The problem is during the page load (before the page fully loads) if a user mouse over the job title in the first row, then the mouse over will shows the first entry, but it affects the last entries. The last entry Job Titles will not displays the description when mouse over. "Firefox error console displays the variable description undefined".
How can I rectify the problem??
One way is to not set the mouse over before the pages loads fully. for that use the body.onload event
rough eg:
<body onload="document.getElementById('jt1').onmouseover = showJobDesc;">
<a id="jt1"> JobTitle </a>
</body>
The other way is to set a flag in the body.onload evetn and modify the mouseover code to execute only if that flag is true.
rough eg:
<body onload="var myPageLoaded = true;">
<a onmouseover="if(myPageLoaded==true) showJobDesc();"> JobTitle </a>
</body>
The issue is solved perfectly by setting the below condition
to the mouseover function content.Thanks for the suggestions.
if(document.readyState=='complete')
{
//code
}