Right now, I have 2 separate pages and I want to be able to click something on one page that makes an image in a div tag visible on the other page.
This is how i made my div tag invisible.
On the other page, I have an image that is clickable, and i want it to make the div visible. Help please?
You'd need to set up some kind of web socket. When the image is clicked you'd fire off an ajax request which stores a flag in a database. The other page would be listening for that flag and when it changed the image would become visible/invisible.
Check this out
The simplest way to do so would be to set a cookie (or store the state in browser local storage, but that is not available everywhere) when you click your button, and have the other page poll for it.
Server-side solutions like sockets or session variables look like A-bombs swatting flies here, but that would surely improve your cool factor by a few thousand points.
This seems like a pretty weird design in the first place, but surely you have your reasons...
If the first page triggers the second page to open you could use javascripts window.open() and pass in what to display
<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window called "MsgWindow" with some text.</p>
<button onclick="myFunction()">Open window</button>
<script>
function myFunction() {
var myWindow = window.open("", "MsgWindow", "width=600, height=300");
myWindow.document.write("<p>This is 'MsgWindow'. I am 600px wide and 300px tall!</p><div> <img src='http://www.jyte.com/wp-content/uploads/2013/11/google-hummingbird.jpg' alt='nothing' /> </div>");
}
</script>
</body>
</html>
the best option would be using a web app using controllers, views, modules and services like angular where the first page controller can update the service and the second page controller would have the service injected so when the service changes it updates the scope which in turn updates the view.
other options would be using backend databases and ajax to store the click and having the second page check very second for update in the database and then update the page, but this method is really not practical (running an ajax request every second).
another option is using the browsers local storage, (not supported in all browsers) here is a link
local storage.
Related
I am surprised by the display system of Youtube. When we are on the main page https://www.youtube.com/ and we click on one link of the menu at the left side to go to this page for example https://www.youtube.com/feed/trending, there is no flashing when going from one page to another.
It looks like the new page is preloaded and then display only the difference with the page before.
Furthermore there is the progress bar system (like this one http://ricostacruz.com/nprogress/) which ends all the time at 60% on the current page, then starts at 60% on the new page and go straight to 100%.
Any clue how they do that? Javascript, specific server configuration?
Thanks
This is a feature of frameworks like Angular or React, as a single page app (SPA), which use data APIs to load data and two-way binding to dynamically update only the things that have changed.
i have several pages in in my application
suppose
a.html,b.html,c.html
and user can navigate from one page to another frequently but when user want to go back and when it click to cancle button he should be automatically redirect to the previous page which was accessed by him.is there any solution for it?
Sounds like you simply want to emulate the browser's back button. This can be done with javascript:
window.history.back();
I have rollover that when clicked opens a link (video) in a new page or tab depending on if I specify target="_blank".
Question? Can I control the width of this new (parent) page. I would like it to be ~80% smaller than the parent just to show the user that it is a separate page. Or.. How can I have this code open in a window of the existing page?
Thank you for your time
<div id="apDiv3"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></div>
As you mentioned in your own post you can use window.open read the window.open documentation for more info. You can specify many parameters about the popup. A simple popup with explicit width / height would look like this:
window.open('http://www.google.com',"My Window Name", "width=400,height=400")
I also created a plunker so you can see it in action
HOWEVER, I really advise against using this. This is the OLD way of doing things. This type of popup hasn't been popular for well over 10 years now. Outside of being annoying and unpopular it is also not dependable. Some browsers / popup blockers will totally block this window from opening.
A better alternative is to use some sort of JS modal library to load the content within the actual page (not in a new window).
One I really like is Magnific Popup they have a bunch of examples on their page.
I am using Sitecore and I have a header sublayout that I use in all pages. This layout contains a Logout button that fires OnClick event when clicked and executes the onclick event function. But in few pages it wont fire OnClick event at all instead it reloads the page.
Below is the code for the logout button
<asp:button id="btnLogout" runat="server" borderstyle="None" onclick="btnLogout_Click" text="Log out" ToolTip="Log out" backcolor="Transparent" style="cursor:pointer" class="logout_new"></asp:button>
Below is the code for the event function
protected void btnLogout_Click(object sender, EventArgs e)
{
Sitecore.Security.Authentication.AuthenticationManager.Logout();
Response.Redirect("/Login.aspx");
}
I found out that the difference between the pages where the logout fires the onclick event and pages where it does'nt is that they use the same header sublayout containing the logout button but they use different content sublayout though.
Note: I have not applied Cache to any sublayout.
Can anyone help me with this?
From the given context I don’t know what is the issue but here is what I will do if I have issue like this.
As you said only on few pages it is not working, it could be the other controls on that particular page is causing the issue.
I will pick two pages which has less controls on the presentation layer. Say PageA is a working page and PageB is a non-working page. Then I compare PageA and PageB and remove all common controls, this should narrow down the number of the controls on the presentation layer. Now check again to see if Page B is working or not. If not, I will try to remove one control at a time on PageB untill it starts working. If you find by removing certain control and the page started working then you can look into the particular control and identify the issue.
I hope this helps.
try disabling the cache as it would return the html without triggering the back end code.
To do so, one option is going to the presentation detail of those pages, find the control and click on it to edit. Under the "Caching section" uncheck "Cacheable" and publish the item. If this fixes your problem, I'd review the standard values of the template, to apply the change to all the items with the same template
This behavior happens to me at annoying times too, but it's almost always the same thing: the Sitecore sublayout the code is in is being cached.
The onclick javascript fires, but the page is not re-rendered with new content because the "unclicked" version is stored in the cache.
You'll need to disable caching on the sublayout to make the button work.
This can, however, be somewhat annoying if you're trying to cache as much presentation stuff as you can. In those cases, it often means you need to, counter-intuitively, create a number of "sub-sublayouts" and place them statically. Set the containing sublayout to be uncached, and then you can set each smaller one's caching appropriately (caching static parts, not caching dynamic stuff).
The problem was in the content sublayout in which it was not working, the Page_Load function was calling a Response.Redirect function to itself and it was not checking if it was a post back request or not before that. So Whenever a user clicked logout button it used to post it back to the server and the page used to reload instead of executing the onclick event.
I noticed that in the other content sublayout where it was working, it was checking if it was a post back or not.
I added a if(!IsPostBack) before that and it started working.
I'm working on my website where I have a music player. The annoying part is that when I browse to another page the player stops and starts from begining...
What I want is to have a persistent music player. So how can I make the div that contains the music player to be static when browsing to another page?
The website: demo(dot)zdringhi-art(dot)com
Thanks!
WEB is stateless.
So if you move to another page there is no way for a div to remain the same.
Although what you can do is that... Hmm as follows.
Have a single page and have your div in there.
Then the other part of the page is loaded via ajax.
also when a link is clicked only parts of pages will be loaded.
Seems too much of coding , but is the only feasible option.
For eg take facebook
Gurav shah is correct, the web is stateless so if you are changing pages you only have a few options for this.
Frames, yes before anyone shouts this is what they were designed for. You could have the music player in one HTML frame and the rest of the page in another so when you move around you are only updating the main content frame.
Or do as gurav suggests and make your whole site one page and update the content with Ajax, so the music Div does not change.
Pass the current position of the player to the next page when you click a link.
to another page
Where getseconds() returns the current position of the music player and passes it to the next page then when that page is loaded you read in the variable from the URL and start the player from there.
Using frames is one solution but since you are using JQuery on your site you should check out .load (http://api.jquery.com/load/). It allows you to load the content of another page and put it somewhere in the current page. Something like this:
$(function () {
$("a").click(function (e) {
e.preventDefault(); // don't follow the link
$("#ja-container").load($(this).attr("href") + " #ja-container");
/* Load the new page using ajax request, take the content in #ja-container from that new page and put it in the current page's #ja-container */
});
});
This is not a complete solution: when someone clicks Concerts -> Agenda you should keep Agenda visible.
Personally, instead of forced background music I'd rather like to see a page with Youtube videos of the people playing the music.
Well, yes HTTP is stateless. what you can do is create a cookie, and update it with current location/time value of the player, constantly. This way, when you go to any other page you can read time/location from cookie.
otherwise, in a cookie less approach, sending AJAXed location/time data back-forth server-client will be too much network.
If I was doing this, I would have gone cookie way.