i'm new to web and facing issue while hiding a UI element in a webpage from another webpage.
Scenario:
I've a WordPress site (Theme-TwentySeventeen).
I've added a Logout button programmatically on page as shown in image.
I've multiple posts,
and every post has a button (play video).
When user taps on Play Video button, an iframe appears (fancybox). It has another button "Login".
I want to show/hide Logout button on main page based on the click on "Login" button in iFrame.
I tried to access Logout button using it's ID from iFrame. But it's not part of iFrame source code. and i was not able to access it.
P.S. I can show/hide logout button from the main page using JQuery.
Query:
Is there any way in web to pass notification from one page to other pages? Please guide
i fixed this issue by accessing element from parent window. My code is as:
function showLogoutButton(){
var logoutButton = window.parent.document.getElementById('logout');
if (logoutButton) {
logoutButton.style.display = 'block'
}
}
I'm not sure if it's a good practice. Please suggest if you've any other approach.
Related
I have a one page website with different sections and few simple popup which are triggered when user clicks on link/button on a page. I want same popup to open when user access website with a specific url example
www.example.com/#menu
www.example.com/#privacy-policy
I found setting under Elementor popup when arriving from specific URL but this option is not working for me.
I can do same using custom JavaScript unless it will not work with elementor feature.
I tried different combination of url such as https://www.example.com/#menu #menu https://example.com/#menu
its not working for any combination.
I did keep condition setting also as Entire site etc..
Just need a point as i could not find any specify article regarding this as most of the article are about how to trigger popup from link.
Set a class on the section you want.
Go to Popup triggers
Check "On scroll to element" en put the class in.
Now the pop up show op when you scroll on the section.
So I have this web application that our customers use. It is like xxx.mydomain.com. I have another web application that is like yyy.mydomain.com. So what I want to do is have a hidden div with iframe on xxx.mydomain.com whereby when a user clicks on a button on xxx.mydomain.com this "floating" div with iframe (which src is yyy.mydomain.com) will display over top of the screen of xxx.mydomain.com.
We are doing this versus opening a new window so that the user feels like they are the same experience. It will feel like the second program is part of the first program. So all of this is working fine.
So on the second program (yyy.domain.com displayed in iframe) I have a button that basically tells them to go back to the main program. I want to be able to capture this button click event and hide this "floating" div with iframe so the user then sees the screen of the main program.
How do I go about doing this? Any help would be appreciated.
If your second app is always in the iframe, you can call functions from the parent document using:
parent.myFunction();
You need to bind event over button but as it is iframe,trick is to select content of iframe then find button over it to hide parent of iframe.
code:
$('body iframe').contents().find('.backButton').bind('click',function(e) {
//lets parent of iframe is having parent class
$('.parent').hide();
});
I created some widgets in my Wordpress theme, I want create representation for some of my widget fields, For example I create Twitter widget, it is contain the VIDEO_ID field, I created link named (info),
I want when anyone don't Know how get twitter VIDEO_ID, Then click on (info) link, to show it the explanation image on screen without refresh page.
How I can Show images by clicking on info link to show images without refresh the page and then click on close button to close the image?
use a Modal to present your image.
You can refer to bootstrap modal http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Is it possible to implement this behavior:
I have a HTML link on one page, and after a user clicks on it, it goes to another page which has several tabs on it. Upon clicking on one of those tabs, it triggers an AJAX post call which populates and displays content for that tab.
I would like that when a user clicks a link on the previous page, it takes him to another page and automatically clicks a specific tab so it triggers an ajax call which displays the content for that tab.
This site is a Wordpress site, if that information helps at all.
On the 'from' page you can have links such as
Click Me
You can set an onpage load function to load and use a trigger like this
if(window.location.hash === "#customHash"){
//my custom tab loader
}
You can use jQuery Cookie plugin to achieve this. http://plugins.jquery.com/cookie/
You just set the cookie on the first page, when the user clicks on the link
$.cookie('the_cookie', 'the_value');
And on the next page use the jQuery on load function to check for the cookie.
First let me explain the problem:
On certain pages throughout the website im building, users can click a thumbnail of a video, and a modal (bootstrap) is displayed with that video inside, which is an embed link from various sites where the videos are hosted. The problem however, is that if the user clicks anywhere except Play/Pause, or inside the video, they are taken to the embeded videos website.
Is there anyway i can block this?
My goal is to have the user watch the embedded video on my site and not have them leave just for clicking the video player.
Im looking for a way (possibly with jQuery), to disable any, all links while the modal is shown. Or if there is another simpler way, id love to know. Thanks!
Since you haven't shared a snippet of your code or structure, we can only give limited suggestions. Try something like this (assuming your bootstrap modal is wrapped in a container with the id #myModal):
$('#myModal a').on('click', function(e) {
e.preventDefault();
/* your own logic to handle the click if you want */
return false;
});
This would prevent the default action on all anchor tags (navigation in this case) and you can add your own custom handler if you want to alert the user that they are about to navigate away from the website (don't return false in that case).
Update: Since it is possible for the embedded players in your scenario to have navigation links of their own, the above snippet will not work. The best you can do is that you detect the navigation and prompt the user confirming if they really want to navigate away from your site.
First set the following event handler to detect whenever the user clicks a link in the video and is about to be navigated away from the page:
window.onbeforeunload = function() {
if (window.isPlayingVideo) {
return "Are you sure you want to stop playing the video and leave the website?";
}
}
Then, whenever the user clicks the video thumbnail to open the modal player and start playing the video, set the following flag:
window.isPlayingVideo = true;
This will prompt the user confirming if they want to leave the page (the exact UI depends on the browser). Note that you still can't disable the navigation from your code. All you can do is to give the user a choice.