I have a section of a div container text that I'm trying to 'preview' another page, or at least show it when the mouse is over specific text - I don't want the actual text to be clickable since I need it to remain on the 'main' page
I've messed around using some custom CSS's to 'preview' data, locally, and provide a remote img src, but I cannot seem to find any examples to do this for a page.
You can get thumbnails of those pages that you want to show and when they hover that text you can show them that thumbnails. Tt is kind of tricking user since they are not actually seeing the page.
Related
I want to show the content of a div keeping displayed even I browse through the pages of the website. I want to place it fixed at the bottom and display an audio player. I've never studied AJAX, so I have no idea how it works. At the moment I would like to be able to view the contents of the div and later I will add the player. Can you help me or can you link a reference? Thanks in advance
I'm using wavesurfer js to display audio player.
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
I have a bunch of sections in my fullpage js continuous scroll. By default, I only want the user to scroll through a select few.
However, upon clicking a link, I want an additional section to be appended and navigated to.
I tried using jquery append; however, it doesn't seem possible afterLoad.
When i click a shadowbox link it opens but it's just black. Though when I use a page that doesn't exist the 404 error page does show up. The path to the page is correct
Make sure that the page you are linking to includes the stylesheets.
Mine did the same thing but it turned out the background was just black along with the text. I assume by default somehow. You can verify if this is what is happening by highlighting the box and you can see the text highlighted. If it is there, just include a stylesheet and style the page to make the text display!
I have a link in my menu that opens up a fancybox with some ajax contents. This box contains links, like a menu for the data shown in the fancybox. I would like to be able to click these links and change the content of the fancybox but all I manage is to open a new box instead, which makes the screen fade to white and back which makes it look like it's flickering.
I tried using an array of content dictionaries to just change the but couldn't get it to load any of them. I've also added a rel to the links making it a album with arrows on the side so I can go to the next/previous and that works fine except that's not the type of navigation I want. It must be possible to do the same through links instead, but I can't figure out how. Can anyone help me with this?
Edit: a small jsfiddle of some things that I tried.
Fancybox supports iframes. You could make an iframe instead. And put in another html-page there.
You can try on each link
The links located on the same server or different domains?
Have you tried with onclick="window.location.replace(url)"
I use fancybox on our web system and that helped me with fancybox