I frequently need to pop up the form html tags in lightbox so where should i store these form tags?
1. should i store tags in server and get via ajax fn() : web page looks very clean
2. or should i just write somewhere in webpage and get innerHTML tags by js fn() : web page looks lengthy.
Whether i am not very clear about the light weight & fast loading. Does it really matter if i choose to write the tags in webpage, what do you say ??
If I understood well, you have several forms which you want to display in a lightbox (jQuery?). If that's correct, I think it will be lighter to add a few lines to your code than making a query for retrieve them.
Think about having your forms at the end of your file (or in a separate file containing all the forms you want to display that you include in the main page). You could select them by using css selectors like
$('.form1').lightbox()
Sorry if this is not the answer you look for but I can't comment on the post.
Rules of optimization:
don't optimize
don't optimize (yet)
More specifically, I would say to go with the simplest method (inner html) then change it later if you identify a performance problem. HTML pages can be quite lengthy these days, check a twitter page for example, you'd be surprised...
Related
Say I have a product website, like Amazon (this is not the case, but it will help me explain my point), and I have a URL for every single product (such as with Amazon)...
Do I need to copy-paste and modify an HTML file for every single individual product page, or is there a way to use a "model" on which I can base all my other pages without recopying the whole code and modifying a few things in each?
I've just started learning HTML and web development, so bare with me if I'm asking a stupid question.
It just seems odd to me that a million-page website should host a million+ individual, nearly identical, HTML files.
Thank you very much in advance.
P.S. I'm using Amazon's brand name as an example here, and am not affiliated with anything related to it. Thank you for understanding.
No, you do not need an HTML file for every single page on your website. While you could do that, it is becomes very infeasible to manage the bigger your site becomes. On most websites you would have the following components:
A front end - consists of HTML code and usually some sort of template engine with placeholders for your data
A backend - consists of your data store (usually a database).
There will also usually be some form of API and/or middleware between your front end and backend.
If you go to https://example.com/myproductid in your browser, your computer will send that request to the web server. The web server will then retrieve your data, load it into the correct template, and serve the page to you.
In traditional HTML and PHP only websites, you would have to reload the entire page each time you went to a new product. However, you can instead use a technique called Ajax to only update certain parts of a web page rather than reloading the entire page. That way you can just update the text, images, and links that are specific to the product, and the rest of the page would stay the same. (Note: Ajax originally used XML, modern implementations usually use JSON).
Ultimately, you will want to learn some JavaScript and then start looking into various web frameworks or libraries such as ReactJS.
Not you Can have only one page for all product, but you have to make it Dynamic.
Yes you need an HTML document for your each webpage, like for Home page, contact us page you need different HTML documents
I have a website and need to transport a form to another website. I however only need certain tags not the whole form block with all it's tables and divs.
When selecting a html-tag in inspector, I can copy inner HTML, outer HTML or CSS styles but how can I just copy that very exact tag I selected without it's child nodes, just the selected line in HTML code?
I ask this because the HTML is minified and I can't just select and copy a tag in source. Same when I chose "copy outer HTML" I get the whole HTML subtree minified, means everything in one line.
How can I quickly search and copy certain tags from the three without grabbing everything in the branch?
Edit: People, thanks for all your suggestions but please note that I wrote about a MINIFIED HTML page I have here.
Just open Debugger near Inspector
Then find page file... then copy with any select range as you want
UPDATE
if it minify click here
If I understood what you want try this
Since your question seems unsolved yet, let me come up with a creative approach I use for similar tasks from time to time:
(1) Creative solution: Page manipulation
If you don't have a javascript framework of your choice (e.g. jQuery) on that page, add it using a browser-extension that adds it when page has loaded.
Then you write a bit of javascript code that removes unwanted child elements of the desired parents in a loop or so. That sounds like lots of work but since you asked this question I assume you need dozens if not hundreds of elements so it might be worth taking the time to write such loop(s).
When the code you injected processed the page and removed everything you don't want, you can then copy the code like mentioned by others here.
(2) Alternative solution: Beautify the code beforhand
If the given solution(s) don't work for you, one could try to beautify the code by copying the source to a webpage that auto-indends html/js code. You could then optionally save it into a html-file and approach that one again like mentioned here before.
Sidenote
If either this idea is too much work or you need this frequently you are probably approaching this on the wrong side. When working on frontend (only) you are always limited to what you have. If you could approach from the backend you could then build from the data/information whatever you need. If you could provide a bit more information about why you need this and how much code you are talking about one could maybe come up with a more sustainable solution!
This might sound like a very strange question but I'm wondering if it's possible to take only a small part of an original website and use that part on a new website without having the direct access to the database?
The site displays latest entries of items added to a database and it contains a lot of stuff that is unnecessary which I want to get rid off. The new site should supposedly only display the div with the id "content" and everything in it. Here is the site: link to site
I've tried to inspect the elements on the site and copy the html code but the problem is that it converts all the added items to string instead of loading it directly from the database.
The reason why I want to learn how to do this is nothing more than an interest in how it can be done that could be helpful later on.
What you can do is two things. If you want to get the data from a website that doesn't provide an API you can write an HTML parser to grub the desired data. Note that this is likely to break in the future, if the original site makes any changes to the html.
If you want to display a part of the website as it is you can use an iframe to embed the original site to your site and then use js to hide what you don't want to show. See here for more info.
Perhaps I'm going a bit overboard here, but I'm looking for a way to access data on a page of my Mediawiki install (call it Page1) and use that data on a second page (call it Page2). I know I can simply transclude the data, but I'm looking (I think) for a little more than that.
Basically, I'd like to get the data from Page1 and parse it in such a way that I can make it display nicely on Page2.
For a more specific example: I use Lingo to process on my glossary page (called Glossary), but I don't like the way the glossary displays. Furthermore, I'd like to be able to add definitions willy nilly without having to worry about alphabetizing them.
My desire is to parse the data in Glossary, and then show it formatted and alphabetized (as desired) in a separate page.
I figure that I can always write an extension that does this for me, but does something like this already exist? Is this something that is included in Semantic Wiki?
Yes, you can do that in SemanticMediaWiki. For an example of an advanced terminology wiki based on SemanticMediaWiki, see http://tieteentermipankki.fi/
As for Lingo, its markup appears to be very simplistic: https://www.mediawiki.org/wiki/Extension:Lingo#Usage But it allows transclusion, so you can just define each term on its own page, then transclude all the pages in your Terminology page, then transclude them in a different way and wrapped in all the formatting you desire.
Or any variation of the concept, possibly using templates with Lua modules if you need advanced and/or repetitive formatting.
I'm currently evaluating the combination of jQuery Mobile and PhoneGap. For my application, I need a kind of "inner application" navigation model: A fixed header that contains elements to switch between various contexts and functions, and the entire region below that depends on whatever function is selected. An example: The user selects a customer and can then switch between different data and statistics views concerning that customer. Alternatively, the user can switch between different customers while keeping the same view. Each function / view might again be a rather complex construct of multiple pages with its own navigation.
I think I understand the basic ideas of jQuery Mobile by now, but I'm unsure how to implement this "the right way".
I could do this simply by coding the entire header with the navigation into every single page, but that feels like a really bad idea - lots of redundant code, lots of places to insert tiny mistakes that are very hard to find.
I could try to add all the UI elements for the different views to a single page, hide them and only display the ones that belong to the current function. This doesn't feel right either - I suspect that the DOM would be really large and I suspect that this might cause various (performance) issues.
I could try to create the contents of the page that depend on the function dynamically using jQuery DOM manipulation techniques. This sounds like a good idea, but the individual pages can be really complex, and I'm worried that generating lots of complex HTML code using JavaScript will lead to an unmaintainable blob of code.
I could try to combine the approaches - code the individual pages in the HTML file and then somehow "link" them into the appropriate place using DOM manipulation - but I've never done that and I'm unsure if and how I can get this working.
I could try to put the "detail" page into an iframe - would this work at all?
What is the best / canonical way of implementing this kind of application? Do you know of any tutorials or examples?
Just detach your header and then reattach it to your new page. For instance:
$footer = $("#myfooter");
$header = $("#myheader");
$footer.detach();
$footer.appendTo('#newpage');
$header.detach();
$header.prependTo('#newpage');
$.mobile.changePage('#newpage');
Detaching does not kill all of your button handlers / etc. You will need to keep track of what page you are on or look at location.hash to do different things depending on what page is being shown.
--Greg Frame
Thex Interactive
www.thexinteractive.com
The first way is the easiest way to do it. That's the way i did it too. Also this gives u the freedom to add a button specific to whats in the browsing area for that page.
The second approach will have loads of extra calls which you don't want.
The rest of the approaches are not worth the effort.