i am working on some project, there i need a webpage.which have only this kind of facility. By using html i know that we can use multiple tabs in a single tab by using iframe, but each iframe works differently. What i need is, suppose i have two iframes in a single tab of chrome, so if i open a website in 1st iframe it should also open in another i frame.
So making it more clear here is a simple example: suppose i have 5 iframes with YouTube in those frames, so i click on comment in one frame but it should be clicked in each iframe.
And when i type 'hi' in one iframes YouTube comment box, it should be typed in each of the 5 iframes YouTube comment box. And when i click on post, it should be posted simultaneously at the same time in each of the 5 iframes.
So i want to make twin pages using iframes.
Hope you guys understanding my question..
I can give you some general guidance:
You cannot access an element from JS on your client directly need to either :
use .contentWindow.document for Vanilla Js or Contents() for Jquery
Jquery W3school e.g.
https://www.w3schools.com/jquery/traversing_contents.asp
here I have 2 iframes: the code is repeated but it severs to show the example
what you need to do is clean it so its not repeated then transfer the values or make a more robust transfer - e.g. loop though elements , pass parameters
<iframe id="myFrame" src="/your-iframe" style="your style"></iframe>
<iframe id="myFrame2" src="/your-iframe" style="your style"></iframe>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
/iframe 1
var iframe = document.getElementById("myFrame");
var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
elmnt1.style.display = "none";
/iframe 2
var iframe = document.getElementById("myFrame2");
var elmnt1 = iframe.contentWindow.document.getElementsById("yourelement");
elmnt1.style.display = "none";
}
</script>
this is just do illustrate the idea :
now you build the client side around this idea
Related
I have found the lot and got one editor which i use in my project (Flex Web application).
I have used CKEditor from this link.
<ckeditor:CKEditor id="editor1" width="100%" height="100%">
<ckeditor:htmlText>
<![CDATA[
]]>
</ckeditor:htmlText>
</ckeditor:CKEditor>
It's working ok in my project. But, there is one issue i am facing.
Problem:
I have one alert message and Custom popup container. I want to display that both on top of the editor. But it hide behind the editor.
I want to display on top of that editor. How can i do this?
Currently look something like:
Thanks.
I don't think that will be possible because the CKEditor area is drawn over the swf. So you can do, unfortunately, nothing.
Take a look on your html page source code and you'll see what I mean.
Edit :
I agree with #fsbmain about using ExternalInterface, but to show a JavaScript alert :
if(ExternalInterface.available){
ExternalInterface.call('alert', 'some message here !');
}
Edit 2 :
To hide your CKEditor, you can use a JavaScript function which you can call via ExternalInterface :
JS :
<script type="text/javascript">
function hideCKEditor()
{
document.getElementById('ck0').style.display = 'none';
}
</script>
Then in the ActionScript side :
if(ExternalInterface.available){
ExternalInterface.call('hideCKEditor');
}
Alert.show('Your message here !', 'Alert Box', mx.controls.Alert.OK);
Hope that can help.
That editor based on html div (so it's a html element above your swf app), that means that you have only three options to show your popup "over" it:
Hide editor when popup is opened - in my mind best option by risks/time ratio
Actually all other methods are dirty cheats and require quite a lot of work with questionable result with a lot of edge cases and potential issues:
Show you popup in separate swf above that html, communicate between two swf with ExternalInterface
Improve on #1 if you really want to show editor in background - make your editor screenshot with JS (try that Using HTML5/Canvas/JavaScript to take screenshots), send data to flash via ExternalInterface and display it in Bitmap
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.
So I have been looking into this for a few weeks and have come up with nothing!
I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.
I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.
Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.
If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!
I've come up dead on all my research on this.
EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx
I've created a JSFiddle to demo this functionality using jQuery.
We iterate through the list of brand links in the ul:
$('#brandListing a')
Capturing a click event on each:
.click(function(ev){
jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:
ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);
You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.
EDIT
The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Source
And then after your document is ready, set the iframe src using getURLParameter('path').
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.
This issue drove me nuts for 2 days. I made a simple chrome extension which calls a server-side program that returns HTML that I then stuff into a div in the popup. It was all fine, except for the simple anchor link containing a "mailto:xxx#yyy.com" href. An email message composition window would not pop up.
Workaround: Add target="_blank" attribute
I would like to know why this is necessary.
It might have something to do with extensions running in separate processors from the browser, and therefore a target attribute is needed so that a new tab/window can be opened... there are some websites that don't work when displayed inside extension popups for this reason, because the extension frame won't navigate to certain pages...
I know this is an old question, but I ran into a similar situation. I had to send an email, but I had to do it with a button instead of a link and had to finagle this:
function sendEmail(){
var mail = 'mailto:xxx#yyy.com?subject=Subject&body=Body';
var newWin = window.open(mail);
setTimeout(function(){newWin.close()}, 100);
}
It's not ideal, because it opens a new window that's visible to the user instead of doing it instantly. In fact, my first attempt was this (which works in an HTML file, but doesn't work in my extension):
function sendEmail(){
var mail = 'mailto:xxx#yyy.com?subject=Subject&body=Body';
window.open(mail).close();
}
Not sure why adding a timer makes it work in this instance as opposed to just doing it like in a regular HTML file, but that worked for me so I thought I'd share.