Load page partially via javascript? - javascript

I guess there are already posts on this topic, but I couldn't find anything with search terms like: "load page partially javascript", "content loading javascript", etc.
My question is how would you load a page to not display 100% of the content, but load it, for example, when you scroll.
Example: https://chrome.google.com/webstore/category/extensions?hl=de
I don't need someone to code this now, I would highly appreciate if someone just had a tutorial or anything similar on this.

My approach for doing this was to use a combination of javascript and JQuery. Something like this:
window.onScroll = checkScroll(event);
function checkScroll(event)
{
position = $(window).scrollTop();
/* note the () are necessary to obtain a value that represents
the page vertical position, otherwise you will be just sending
the browser to the top, like a refresh */
if (position == 1000) /* some pre-determined vertical position */
{
$(#AnchorDiv).append(htmlString);
/* Where AnchorDiv is the id of the element where you want to
insert new code, and htmlString is a javascript string which contains
the new HTML block.*/
}
}
Note: you can also use Jquery's .position method to obtain the position of an element rather than hard-coding it like I did with the 1000 example.
I Hope this helps. I'll be curious to see how it works out - and/or how other folks respond to this question - and/or of you find another good working alternative.

Related

How do I use Javascript to delay visibility of a text box and then hide another box after the first becomes visible

Im very new to this and have reviewed other posts similar to this question. However, I'm finding that those solutions don't work for me.
Background: I'm working in Wix's Velo platform for Javascript. (forgive me if that's not the right technical terminology here)
My goal: When my website home page loads, I want one of the text boxes on the page (#text45) to NOT be visible until 5 seconds have passed. Then, when box #text45 is visible, I want another plain box (#box2) to turn to hidden.
I have found some examples like the one below: (not all code has been pasted and I realize some elements like div1 would need to change to my specific element names)
document.getElementById("div1").style.visibility = "visible";
}
setTimeout("showIt()", 5000);
However, I get an error code: Cannot find name 'document'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.
When researching this, I found out that Velo cannot access the dom and elements can only be accessed via "$w".
Would someone be kind enough to set me in the right direction on how to accomplish the "goal" above? I would really appreciate it! Thank you in advance.
Here's how you would do it. Note, that it's good practice to change the IDs of your elements to more descriptive names, but I've stuck with the names you provided in your question.
Start by setting #text45 to hidden in using the Properties & Events panel.
Then use this code (note that your page might already have an onReady. If it's there an you're not using it yet, delete all the code on the page and replace it with this):
$w.onReady( () => {
setTimeout(() => {
$w('#text45').show();
$w('#box2').hide();
}, 5000)
} );

AngularJS: How do i scroll to an object with an offset?

I am working on an application built in AngularJS. One requirement that has been passed to me is that when a form is invalid and the user clicks submit, the window should scroll the first invalid element into view.
This is pretty easily accomplished using element.scrollIntoView() but I need to set an offset. You see, the top of the page has a header that 'fades into' the rest of the page. See the image below.
So i'm left to try to figure out some method of offsetting. I have found a bunch of examples but i'm not finding exactly what i'm looking for.
Here is my current code (
var visibleInvalids = angular.element.find('.ng-invalid:visible');
if (angular.isDefined(visibleInvalids)){
// if we find one, set focus and anchor
visibleInvalids[0].scrollIntoView(true);
visibleInvalids[0].focus();
}
Proposed answer to my own question. Inject $anchorScroll and use that, but i'm open to ideas...
var visibleInvalids = angular.element.find('.ng-invalid:visible');
if (angular.isDefined(visibleInvalids)){
// if we find one, set focus and anchor
// Offset is used to keep items 'below' that fade-in header.
$anchorScroll.yOffset = 200;
if (visibleInvalids[0].id) {
$anchorScroll($location.hash(visibleInvalids[0].id));
}
visibleInvalids[0].focus();
}

Combining jQuery libraries: realistic-typewriter.js and waypoint.js

I am currently designing a website for a university project based around the open source project. My website is based around an infinite scroll layout, the idea is for each section to have a terminal that looks like the command line and to have the text print to these screens.
I have implemented realistic-typewriter.js (https://github.com/fardjad/realistic-typewriter.js) for the self-typing text. To have the animations triggered at pre-defined moments (when the user is at that section of the page) I have been told to use waypoint.js (https://github.com/imakewebthings/jquery-waypoints)
Now my problem is implementing the 2 together.
Typewriter.js is implemented something like this.
var typewriter = require('typewriter');
var twSpan = document.getElementById('typewriter');
var tw = typewriter(targetDomElement).withAccuracy(90)
.withMinimumSpeed(5)
.withMaximumSpeed(10)
.build();
tw.clear()
.type('TEXT GOES IN HERE')
});
What I don't understand here is the syntax of the variables at the start, it seems a bit convulted to my amateur eye.
The tw.clear() line - I assume the tw is the variable and the .clear does what?
Now the waypoint library - I was previously using this fine with the typed.js library, but its functionality was a bit limited and I was advised to move over to realistic-typewriter.js, the code doesn't seem to work in the same way with realistic-typewriter.js.
Here is the example code for waypoint.js from its documentation.
$('.thing').waypoint(function() {
// i tried to put the above code in here but it doesn't seem to work
); offset: '50%'
});
Basically I need to know how to combine waypoint.js and realistic-typewriter.js, but any explanations of the working processes of these would also be really helpful.
tw is an object that is accessing the "clear" method, which I am guessing clears out the element so it can type in it.
Also, looks like your waypoints code something is off. Should be something like:
$('.thing').waypoint(function() {
//code goes here
}, { offset: '50%' });
If you place the realistic-typewriter code there it should run it once you've reached that element.

Listen to specific changes on contenteditable?

Warning: not duplicate with existing questions, read through
I know I can have an event listen on changes on an contenteditable element.
What I would like is to be able to know what the changes are.
For example:
inserted "This is a sentence." at position X.
deleted from position X to Y.
formatted from X to Y with <strong>
Is that possible? (other than by doing a diff I mean)
The reason for this is to make a WYSIWYG editor of other languages than HTML, for example Markdown.
So I'd like to apply the changes to the Markdown source (instead of having to go from HTML to Markdown).
You may be able to do something with MutationObservers (falling back to DOM Mutation events in older browsers, although IE <= 8 supports neither) but I suspect it will still be hard work to achieve what you want.
Here's a simple example using MutationObservers:
http://jsfiddle.net/timdown/4n2Gz/
Sorry, but there is no way to find out what the changes are without doing a diff between the original content and the modified one when changes occur.
Are you looking for this
var strong=document.createElement("strong");
var range=window.getSelection().toString().getRangeAt(0);
range.surroundContents(strong);
this was for third part
You just need to select what you want to surround using real User interaction.
If you wanna do it dynamically
var range=document.createRange();
range.setStart(parentNode[textNode],index to start[X])
range.setEnd(parentNode[textNode],index to end[Y])
range.surroundContents(strong);
For 2nd Part
range.deleteContents()
1st part can be done by using simple iteration
var textnode=// node of the Element you are working with
textnode.splitText(offset)
offset- position about which text node splitting takes place[here==X]
Two child Nodes have been created of the parent editable Element
Now use simple insertBefore() on parent editable Element Node.
hope you will find it useful
The API you're looking for does not exist, as DOM nodes do not store their previous states.
The data / events you're wishing to get back are not native implementations in any browser Ive come across, and I struggle to think of a datatype that would be able to generically handle all those cases. perhaps something like this:
function getChanges() {
/* do stuff here to analyse changes */
var change = {
changeType : 'contentAdded',
changeStart : 50, /* beginning character */
changeContent : 'This is a sentence'
}
return change;
}
Since you're trying to get custom events / data, you're probably going to need a custom module or micro-library. Either way, to look at the changes of something, you need somehow be aware of what has changed, which can only be done by comparing what it was to what it is now.

Adding elements with jQuery messes up positioning

I've been doing some web stuff with jQuery and css, and came across a problem, which I'm unable to find a solution to. I've written a code, where using jQuery, I get data from server and according to that data I add new elements. The elements have a lot of absolute positioning in them, and it messes up whenever I add them via jQuery.
My code is here:
function output(progress, data) {
$("#lookup .bar").css('width', (100/3*progress) + '%');
if (progress === 3) {
$("#lookup div.container").html(data);
$('#lookup').css("text-align", "left");
}
}
Basicly, I just remove the progress bar, and set my text-align to left, because of otherwise even more messed up aligning, this is the only workaround I found... The problem I'm having looks like this:
Although normally, it should look like this:
The strange thing is that the problem fixes itself whenever I refresh styling, for example with firebug, I would just delete some padding, then restore it, and the problem is gone... I feel that it has to do something with jQuery part. I'm pretty sure styling is fine, but if you need me to paste a code here, just ask, and I'll update the post.
UPDATE: Live preview on jsbin: http://jsbin.com/awomen/5/
I know the code is ugly ;)

Categories

Resources