I'm trying to create a website for learning, and learning web programming meanwhile. Inside of the website, there are some words that are hard to understand, so I wish to put a tooltip/modal to explain the meaning. Here is the prototype of my website: http://findmyself.herokuapp.com/ . Click on chinese word in blue, to see the modal.
While searching on stackoverflow: Tooltips for mobile browsers , I currently have something working.
This is what I'm doing right now.
a json file as dictionary.
a json file with the content of the text to display.
When the front end asks, nodejs send both files. When frontend javascript display on the browser, each word I print on the screen I have to look up into the dictionary and create a html span for the word. So when the user click on the word, its popup the meaning.
The problem is, since i did that, I feel somehow the page is slow to load. I think there is something wrong with my way of doing. And i will have a lot of text later.
I wish to know if there is another way of doing it.
And this is the website that inspire me: https://thuvienhoasen.org/p27a16641/48-dai-nguyen-cua-duc-phat-a-di-da
I hope I'm clear enough. Thanks.
You're right, the page is pretty slow to load. It's partly how large the JSON object is at http://findmyself.herokuapp.com/dtq/theory. It's nearly 600KB and takes a half second on its own just to download. But probably the slowest part of the page is how much time it takes to render that entire JSON object.
If you're not already familiar, I'd suggest checking the dev tools that are included in every browser, chrome's network and performance tabs are a good place to start if you're interesting in exactly where the time goes when the page is loading.
And if you're looking for more of a rule of thumb, a good place to start would be to only render some of the JSON object at once, or split that object into smaller parts.
Related
I am replacing the showModalDialog function which no longer works in Chrome and FF. We have many applications using that. The problem is, pop up windows do post instructions to the web server and update the database. For instance if there's a list of accounts on screen and edit is clicked on one of the accounts, an edit page appears as a pop up, posts changes back to the web server, then the list is refreshed with changes. The entire list may be refreshed or just text that changed.
I made a javascript function to do pop up content using overlays. I thought it would be simple to replace showModalDialog calls with the javascript function, but I did not consider post instructions sent by the pop up page to update the database, and complexity to facilitate that. Posting can be done via ajax-like functionality, encapsulated in a set of functions. Before I start writing code to do this I'd like to know what other people have done in this circumstance. Thanks
I wrote some javascript to do everything I want. Since my pop up windows had javascript, I needed to run javascript upon rendering modal content, and also when the modal content went away. This will produce any number of overlays on top of each other, managing each. Content can optionally appear in a frame with a title bar, closely matching the functionality of showModalDialog.
Download at http://bikehappy.org/modal.html . If used, please give feedback saying if it works and provide update suggestions.
I am trying to write an automation tool for a browser game that takes some data from the web page, in this case the data appears to be added using JS after the page has loaded, I assume this is where my issue is.
I'm trying to grab the text that the JS adds and save it to a variable, but when I try and find it using the WebBrowser component's DOM controls, it cannot find the text I need. The text IS there, you can see it on the browser window and the source should easily be found as I can see it when using Chrome's dev console/inspect element tool, when I target it using the DOM controls, VS makes it clear that it can't find it. I am 100% certain I was targeting it right and that I'm not pointing it in the wrong direction.
Is there a way for the WebBrowser to refresh/re-read the source without refreshing the page?
Otherwise, how would you go about working around this?
Cheers,
Tom.
One work around that springs to mind when puling text from something is to use MS Office document imaging. If the text always appears in a specific location on a page it should just be a question of taking a print screen of where the text appears and then running it thought to OCR. The advantage of this is it's pretty future proof, the game makes could change the method by which they display the text but as long as it's displayed you should be able to print screen it. :)
At my company, we are debating this. Say you have a color swatches that is already built in product detail page. At the category page, where each products are displayed, doesn't have color swatches. So we are trying to build one. I was suggesting if we can use jquery or javascript to crawl it, cache it or drag it from the pdp and display it in category page. If we do that, it probably gonna be very slow because the category page is going to hit the server many times.
Additional info, we don't have access to the php codes, so only javascript, jquery and html is possible.
I am actually looking for a way to do that. of course, it has to run fast too. Any suggestions of possibility anyone?
i dont think it is possible, your jquery or javascript should be native to the page to read its contents, ok lets assume it is native and you can read the content but where do you store ? with only javascript and jquery and not much of server side it is impossible
I was wondering how GMail and things like that can update the emails in there without the entire screen going blank.
I am working on a web tools site here. As you can see on the right hand sidebar, there is a news feed that shows the recent events of certain members.
It is a simple PHP script that shows the latest events, these events are stored in a MYSQL table. This PHP script is then iframed for the sidebar.
I want the sidebar to automatically update. It can either update on a time interval (like every 10 seconds) or just when a new event is added.
I tried having a meta refresh that went every 5 seconds (on the PHP script)... it did not work well though. Every 5 seconds the entire sidebar would go blank and then re-appear. Plus the loading wheel for the site would constantly appear every time the sidebar refreshed.
Is there a simpler way to do this? Maybe using some type of JavaScript event to check for new events and then spit them out, instead of refreshing the whole page?
EDIT: OkayThanks For Your Help! I got it going with AJAX! However, I am now running into a different problem...Please continue reading...
I was using JavaScript to display the time in the bottom right corner of each event. I was using a code similar to this...
<div class="event">
<p>The event text</p>
<script type="text/javascript">
document.write(get_time(1332900003));
</script>
</div>
This would be the HTML actually stored in the database. The problem is that the AJAX is grabbing this code, spitting it out (onto the iframed page), and then the time snippet is not being executed (everything else works fine).
I would prefer to use JavaScript over PHP to display the time, because with JS you don't have to worry about timezone differences.
Is there anyway I can fix this?
Essentially if you want to mimic the concept of how GMAIL and various other sites render a page and then manipulate it there after without making the page reload between transactions as j08691 indicated in a comment to you AJAX is the methodology your looking for, however it requires knowledge of JavaScript and some server-side scripting such as PHP in your case.
For the sake of ease when building a scaleable piece of software of even just a web site in general I would suggest looking into a JavaScript library like jQuery, Prototype, Dojo, or the like. My personal flavor is jQuery as in my own opinion it is very stable, has a large support community and all around is easy to learn over all.
It will aid in rapidly developing JavaScript based code that will be cross browser compliant without having to write long lengthy scripts in native javascript to do the same as you could more easily achieve with a library backing it up.
http://www.jquery.com - core library
http://www.jqueryui.com - extension of the library
plus there's hundreds of thousands of little plugins you can pick up to aid develop your overall user experience quicker as well.
You can check it here:
Ajax let you send/fetch data from the back-end without refreshing your page
http://api.jquery.com/category/ajax/
I would like to create a similar effect to Apple's Safari 4 Beta Top Sites page -
when when you view it and a page's content has changed since you last visited, it displays a blue star in the top right hand corner to notify you.
I would like to do the very same, but only within my website and instead of an image I would like to append a '*' or some other character to the menu item's link.
I'm sure you would use the jQuery Cookie Plugin, but my scripting is not that advanced and I do not know how to dynamically change the cookie's content. Have I explained properly? How would I do it?
Many thanks in advance
Server side:
Read the website f.ex every minute and save the timestamp if changed content.
Save the users' visit timestamp to the page
Ajax:
Check if the websites update timestamp is newer than your visitors' timestamp, if yes make the star class visible, when the user clicks on the link, make the star disappear and update the users timestamp.
--
Showing a star or an image or whatever with Jquery is not the big deal here, it's a oneliner, the complex problem is to detect website changes, because minor changes can occur, but the main content could not change. The easiest way to do this would be if the website provides rss, then there's probable that the important new content will be published via rss.
You're asking a very vague question. Have you even attempted this? Please try it first then ask for help along the way.
Also, this is not something you necessarily need jQuery for. You could do it completely on the backend. But it's hard to say which solution is best for you without know anymore details.
I guess I would recommend using php and storing the cached page into a db (in other words the user would have a "fav pages" account) then when the user visits the "fav pages" webpage, you would fetch all the users favorite pages and compare it to what has been stored in the db. But for certain pages (for example if they have a date/time string), it would be very difficult to tell if the change was something the user wants to know about. Probably you would need to create a complex algorithm to decide what change is good change and what change is just certain website features.