I'm very new to jquery, and I want to know if I can use it to turn a long html text into shorter 'chunks', like pages of an ebook. Every time the user press a 'next' button, the next 'chunk' of text is load out on the screen.
If such thing is possible with jquery, what should I read up to code it?
Here is an illustration, hope it will make things easier to understand: http://postimg.org/image/hiydc2ggn/
Yes, you can use .load() to load a portion of an page. You may have to create separate HTML tags though, so you can target their selector. You might consider loading it all at the same time and just use CSS, making sure you have the overflow:hidden; and use .scroll(). Personally, I would break up your HTML Server Side and use AJAX to get the portions you seek.
You could have the style of a div for the sections set to display:none on each section, when the button is pressed you can use something like:
$("#button").click(function(){
$("#section2").css({'display':'block'});
});
This is obviously just for one extra section, but you can extend it pretty easily for multiple.
Related
I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.
I want to replace certain nodes with different HTML if javascript is enabled.
My problem is that for a short moment the old code is visible and then the replaced element shows up.
What would be a text-book solution for that? Where do I need to put the javascript, preferably jquery? Is it possible anyway?
No example code , just imagine a page with a bunch of deeply nested nodes..
just use
<noscript></noscript>
tags to display content that is shown when js is disabled
DOM operations are pretty slow and in some corner cases you may experience the blink of the old content. I see two solutions:
Use a preloader screen, e.g.: Create A Custom Preloading Screen. This way you can perform all manipulations on the DOM elements in the background.
If the content of your page is static you can use <noscript></noscript> tags and this way set the content for both situations (JavaScript enabled, JavaScript disabled).
I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.
Is it possible to do something after the dom is ready but it is not rendered(White screen)
I would like to hide the contents from user and after some operations i would like to show the final picture.
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
Thanks
Here is how?
document.onload = function() {
//your codes
}
Unlike, window.onload this function runs after the DOM is loaded, so the manipulation is possible, but it does not require all the elements to be rendered.
Is it possible to do something after the dom is ready but it is not rendered
Browsers render the DOM incrementally as they parse the HTML into it. The state you describe will not happen naturally.
You can fake it such…
I could use "display:none" on my body tag but i am working on a huge project so i dont want to change every page.
If you don't want to change every page because it is too much work, then too bad. Go and set up an external stylesheet that every page uses.
If you don't want to change every page because you only want the changes to appear on certain pages, then use a more specific selector.
That said, preventing content from displaying and giving users a white screen (or even a loading screen) is just going to turn people off and drive lots of them to another site. I wouldn't recommend doing this.
if you could use JQuery this one is called when the dom is ready but the page not loaded
$(document).ready(function(){
)};
I'll contribute my own 2 cents here.
With jquery, the $("document").ready() event fires after the DOM has been fully loaded(without images, that is) to your browser, but not displayed. So I think to achieve what you want, you'll have to input some handler function inside the ".ready()" method to handle whatsoever you desire to achieve.
Is that what you were looking for?
I have a webpage... http://beta.charmscorp.com/inspect/projects.php - this webpage is in beta and doesn't currently look super professional and is only half working, also, the server internet connection is slow so it takes a bit to load up the elements properly.
Anyways, this page calls other pages through ajax to display in a div. My problem comes from wanting to use jquery to apply css to a table on a page which dynamically loads up in a div. If that sounds confusing, go ahead and go to the link I posted above, click the down arrow in the sidebar, and chose a link... Assets for example. you will see this page load up, and anything on this page won't have jquery applied to it.
From looking at solutions, I see I can add a .live() jquery function, but this seems to apply only to events and selectors. Anything i can do?
ps. this is what I've tried to do:
$("#maintable").live(function(){
$(this).corner();
});
This works on the main page, as you can see, there are rounded corners for the main table. However every table has the same ID, and yet, they don't have rounded corners...
You have an ID problem, it seems. There should never be two elements with the same ID. That said, you need to configure your server-side code so that the markup served to the AJAX request gives these tables a class attribute. Something like class="rounded". Then you can use jQuery to apply the style like this...
$("table.rounded").corner();
Note you will have to make this call each time you "reload" the div with fresh markup, which can be done globally using the ajaxComplete function...
$("table.rounded").ajaxComplete(function() {
$(this).corner();
});
"every table has the same ID"
IDs are supposed to be unique. jQuery sees the first id and quits. Change those "ids" to classes and you'll be good to go.