I'm embedding various content from Issuu on a web page. On page load the embedded content from Issuu is automatically in focus, with visible menus and shadows within the embedded iframe.
This seems to be the standard solution, and there's no way to prevent this with the given embed codes from Issuu. But I would really like to find a way to load the content without it being in focus before the user actually hovers/clicks the embedded area.
As of now the initial focus is only removed if I first click somewhere within the embedded content, and then move my pointer outside of the content.
Is there any way to sort this out with the help of jQuery?
I have tried to solve this by adding the following jQuery code:
$('#issuu_embed').blur();
I also tried to simulate a click on the embedded iFrame, in an attempt to replicate the behaviour mentioned above.
But neither does the trick, and I assume it takes a slightly more sophisticated piece of code to make this work.
Grateful for any hints that could point me in the right direction.
Live CodePen:
https://codepen.io/ehrogn/pen/PoEmJKv
Related
i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS
I may be asking this incorrectly. I'm not super familiar with the terminology of javascript or ajax. I've been able to get by just enough using html and javascript code from highslidejs to create most of our companies in-house web pages. Now I am stuck on how to go about this issue. Originally I built this page using simply html code. Then one of the higher ups requested that I use this template. :( So I am attempting to work with this template that has no functionality what so ever. Everything was going ok until I came to having to reveal the video content below each selection using the ajax code that I grabbed from hsjs. While I got it to show the videos onclick with each submenu item.. the problem is that the way the template is built it has each video positioned just under it's name when it is clicked. And it doesn't clear the previous video being played. I was thinking that I could have each video be targeted to play in a specific div with an iframe. That way each video will play in that same div and override the previous one selected thereby avoiding having several open at the same time. I have had that work before. However, I am running into a conflict with the href having two functions: "javascript:;" and "mymoviesource.mp4"
I apologize for the lengthy explanation of my problem. Here is my work in progress: http://www.foxsportsgraphics.com/Lab-presentation/index-6-7a.html
I'm currently only working with the first "Virtual Reality" menu tab. I had each movie opening in a separate web window but they would like for each to open as the first one does for "Big East Basketball (jeep)" in that same position. Here is my first web page that I used a target iframe to play each video in:
http://www.foxsportsgraphics.com/template/index-Lab-original.html It works great having each video play in the same spot. But I don't know how to have one href do both: javascript code to reveal the iframe below the selections and target the video URL's to play in the iframe . Would it be better to use an "onclick" behavior to reveal the iframe? And if so.. how would i get the positions of the iframe to be in the same place for each selection? Again, I apologize if this question is troublesome because of my lack of knowledge in this area. But I would so greatly appreciate any help at all to direct me in some way to be able to accomplish what I want to do. Thank you in advance!
I'm facing a rare issue with the modal I made. I had a iframe to load a embedded youtube video on the modal, it was working well on a separate HTML file (an empty) that I had created to test it.
When I tried loading it on a local template of the actual site the youtube video is truncated. And, when i press ctrl+shift+i (the console) the whole video comes out. I searched for any possible solution to the issue.
Can anyone help me. Attaching the photo beneath.
Guys I somehow fixed this issue.
Issues Faced:-
1) I noticed that the truncated video becomes full-sized when I pull up the console log (crtl+shift+i)
2)I tried reloading the div content using innerHTML
3)I tried applying min-height property, the div comes out in the full size but the video still remains the same.
How I fixed it:-
I removed the src from the iframe and then on the function to show the modal i added a line to set the iframes source. This somehow fixed my issue.
Addntly, I also removed all the previous changes made to the CSS and JS file, as listed above.
I know both the question and the solution sounds weird (It does to me too)
I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.
James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!
In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here
So I want to be able to have a space that overlays content on any website with the click of a button (something that also is above everything on a web page). An example would be the Google Translate page, http://translate.google.com/translate?u=about%3Ablank&hl=en&langpair=auto|en&tbb=1&ie=UTF-8 where the frame at the top will overlay any website that is entered in the url box.
What I want to do is have a box like this overlay every webpage, like google's translate does, but have it hide with a click of a floating image, say an arrow.
The files will be locally stored on my HDD, but I don't see this being an issue.
I don't know what languages to code this in, but I assume Javascript, however, I do not know the classes to call to do this. Any advice chaps? I'm not asking for a hand out, just a point in the right direction!
It looks like you want to develop a browser extension. Look here for Chrome:
http://code.google.com/chrome/extensions/getstarted.html
There are similar ways to do it for IE, FireFox, and Safari.
It sounds like you'll either need to use frames or an iframe. They are very similar in how you interact with them (say to make them load a new page) although they are different in their implementation.
A great site for learning about frames is w3Schools:
http://w3schools.com/html/html_frames.asp
http://w3schools.com/html/html_iframe.asp
You can use JavaScript to reference the frames via its name or its ID. Ex: document.framename.src = 'hello.php' or document.getElementById('frameId').src = 'hello.php'.
One problem with using frames is that search engines don't like them. If you are using an iframe, the search engine will search your page, but still not the iframe.
As for resizing/hiding the frame/iframe, you can do that with both frames and an iframe, although the method for accomplishing it varies depending on what you use.