I am building a profile page in asp.net and it has two tabs(Horizontally), one for profile and one for settings. If a user navigates between tabs, he will see the settings page and the profile page. I know two ways to implement this.
Code the page contents in the page and use javascript to hide them, while navigating through them.
This type of method is inefficient as it will lead to performance issues and increase load time.
Use onclick event handler and build the page using codebehind file. This is more efficient way, I can use javascript to rotate something to show that something is being processed and then call a last method in codebehind to hide the rotating Image.
Besides these methods, Are there some other efficient ways to accomplish this?
The answer depends on many factors. Do you want the user to be able to switch back and forth without page refreshes? If so, then you have to load both tabs.
If you're ok with partial refreshes, then you can use Ajax to populate the tabs when you click on them. This has some performance consequences, since it needs to round trip to get the data.
If you're ok with complete refreshes, then simply have each be a different page, when you click on the other tab, it just loads the other tab page.
I'm really not sure what you mean by "build the page with code-behind". Perhaps you mean only include the html for the selected tab when the page is loaded. In my opinion, it's easier to simply make them different pages than to write complex code that changes the structure of the page.
Related
Bit of a weird question: let's say I have two pages, so two index.html files, each with their content and js scripts, nothing fancy. I would like to be able to open them both on different tabs and then, for example, click a button on page1 and have something happen as a result in page2. Can this be done?
Two ways to do this (off the top of my head):
You need a database and a server. Then one page can change values in the database and the other can check those values.
You use one page to download and use files from another (eg. an image). This isn't very interactive though as it can't take any information that didn't exist on page load.
So I am developing a website (ASP.Net Core MVC) and I am trying to display a container, with potentially lots of data inside, as soon as I click on a Button see the image.
Each row has its add button. There will be only around 10-30 buttons on a page at once. As soon as you click on such a button the showed pop up should display next to the clicked button. As you can see in the picture the pop up may contain a lot of data itself. And this data might differ from each row.
What is the best approach?
Placing each these pop ups already in the HTML and on click display: block and display: none when hovering away.
With jQuery and using the append method and summon the popup next to it and remove it after hovering away.
Or is there even a different approach to this?
Why am I asking?
I am concerned in terms of performance and loading time.
In my opinion there are downsides and upsides to both approaches.
For approach 1:
This will cause a slower initial load time but will be faster to use than approach 2 when it's loaded.
Approach 2:
A downside to this is jQuery needs to be loaded for this. I don't know if you use it throughout your project. But just for this, it would be a little bit overkill.
However initial loadtime can be fast and you could use AJAX to load each data when it's clicked.
I'm not a programmer with 10 years of experience, so this answer is pure my opinion and what I think about it.
Hope this opens a discussion!
We provide live chat service to our customers. customer just copy some code and put in their footer. then they can have video chat, cobrowsing and many things..
but problem comes when user switch from page to page. so we have resume functionality as well. but thats not robost solution.
So i've come to two solution.
1. Iframe solution
i'll give client a some.html file which he'll need to upload to their root url, then upon video chat and cobrowse we load that page in some.html's iframe and chat appear in some.html
so that work well. chat box apprear seamlessly no page reload effects came in. and as its on same domain i can access all contents of iframe.
2. Another hack solution (not implemented yet, looks good solution)
i was thinking that instead of redirecting user to new page (some.html)
i should clear all contents of current page and load same url in one iframe within the page.
i think that will work well. but i affraid that some client might be using complex js based web app. so if i remove complete body from their page they might have problems.
as much as i know i can remove all dom nodes with their events handlers as well. but is their way to clean js runtime. so all js objects will destroyed and removed from scope so no longer run.
so is there a ways to clear any page completely with all its html and associated java-script as well. means reset page to blank.
Finally i found that there is no way to reset page.. but got another way to make it done.
upon need we can redirect user to same page with query string that identity that its reload for iframe, we put small bit of another code at head which remove all dom before loading dom, css, js.. and create just one iframe of same url.
thus it allows me, have user see no change in url, user browse website as normal without any problem and my chatbox always be there in same state across all pages.
will make it live soon on tagove.com
Why don't you empty the HTML page using empty() function of jquery first,
Then remove/update the link i.e.<script src="...."></script> so that the HTML has no dependency on that javascript and that way it won't be able to Modify the DOM.
And then try to build a javascript program to remove any file in the folder which is isolated(No calling, No dependency, no connection whatsoever)
I have a static site with classic menu like: home, services, contact etc links.
What I'm trying to do is reducing the site's size.
So, instead of using multiple pages for links (like home.html, services.html) I'm trying to keep only one page and then (when clicking occurs) dynamically change content.
html code (sample):
contact
<h1>old text</h1>
js code:
function ContactClick() {
$('h1').html('new text to change, but it doesnt work, yay!');
}
Something funny happens. If I click on the link, 'old text' becomes indeed 'new text', BUT ONLY FOR 1 SECOND! And then, it changes right back to 'old text'!
I have tryied calling like this: <a href="javascript:ContactClick();"> and it works just fine, but still I need to refresh the page when click event occurs (I have some color changing stuff on site, lol).
Is there another way to reduce site's size, or my idea is just fine?
OR
Is there a solve including refreshing the site and calling the js junction from link?
Perhaps you shouldn't be reloading the page in your href.
You do not need to reduce the site's size. Static pages that contain only text are small and load in a fraction of a second even at the first time. After that, they will be in cache and load instantly.
On the other hand, if you put all the text in one page, plus add some javascript code, the result is not smaller but bigger than the static pages.
Further, you should remember that javascript does not always work. For example, many people disable javascript for security reasons or to avoid irritating advertisements. Therefore, navigation should never be dependent on javascript. At the very least, you should have noscript part that works with static pages in case javascript is disabled. (But this will make the page even bigger.)
I've tried using the standard Facebook like button. I require about 50 like buttons (that number may grow) on my page. The problem is that the second I add more than a few, it drastically slows down my page. If I show all 50 like buttons, the page is practically unoperable, the browser refuses to scroll, freezes and gives "Not responding" warnings etc.
I assume this is because the like buttons weren't made to be displayed multiple times on one page, and it does a LOT of redundant work for every added button. I've seen it be done though, so I'm wondering: is there some special way of displaying lots of Facebook like buttons on one page? I'm talking tens, perhaps hundreds.
Thanks
There are two ways I would recommend doing this. One is to render a fake Facebook button (static image) and then on hover, dynamically load the real Facebook like button to replace the image. The other is to use one of the various jquery scrolling plugins to load the Facebook like buttons as the content becomes visible on the page. TechCrunch.com has lots of like buttons on their home page without performance issues (they are doing the second option I listed).
I think you must implement your own FB link, example:
<a href="http://www.facebook.com/share.php?u=your-url" class="someFBClass" ><span class=icon></span> Facebook</a>
real example
You have to add some css to make the link look FB link.
You can do this by doing using the FB.XFBML.parse method.
http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
This allows you to render the like as and when you need them, each just the one in the veiwport.
Also to make sure, your not loading the facebook javascript SDK (the old XFBML way) for each like button?