Tooltip cut into iframe - php

In my web site I have an iframe tag with several little images, when I pass my mouse (onmouseover) I show the more large image (tooltip) but only a liitle part is showed due the iframe.
There is someone that can tell me how show the tooltip into iframe over the parent page?
(without use JQuery)
Thanks a lot

I have implemented a jQuery solution for tooltips inside iframe
Here is the code:
https://github.com/TeamTypeform/Tooltip

Related

How to open image href on a aspx page

When the thumbnail is clicked I would like the full size image to open on http//example.com/image.aspx instead of http//example.com/images/image.jpeg without creating an individual page for each image and editing each href. I know that this is possible with php but I was wondering if there was some way of doing it with javascript, jquery, asp.net, or...? If it is possible, (I maybe stretching it here), would it also be possible to run this on the master page for all thumbs? The thumbs have no class or id. Right now they are in straight html markup. I have searched for days and have found nothing that would even get me started on the correct path with the exception of php. I don't need the target blank if I could implement this because this would allow me to open the image on a aspx content page with full site navigation. Here is the code as of right now.
<a target="_blank" href="image.jpg/jpeg"><img alt="something" src="pictures/image_small.jpg/jpeg"></a>
A page from our site is http://backalleypics.com/PeoplesPages/Sa~Se/SarahShahiPages/SarahShahi1.aspx. An example of the php type is http://www.theplace2.ru/photos/gallery.php?id=47 I really don't want a gallery, pop up window, or light box. The purpose is to get ad views for each image click and have navigation on the page.
You can use an existing library that do that, like the: http://highslide.com/
There are also many others, some of them:
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
http://valums.com/javascript-image-galleries/

preview of another website not thumbnails in php and javascript

I am in the process of creating a site where visitors can preview(not THUMBNAILS!) another url on mypage in an input text box and click on"preview" button-
I am using CURL from php to extract the contents of the site
and have divided my page into two halves one for accepting url and the other half which will display the previewed content, basically i do not want image of the url site like GOOGLE.
though the CURL fetches me the contents and I am able to see the content on the preview half what is annoying is the CSS of the previewed html is getting applied across even my page :(
since my knowledge of css is very limited can anyone help me with the following
css of the previewed section must not get applied to my part of the page
How to scale down the previewed site just to fit into the preview section of my page.
thanks,
Jay
Use an iframe to keep the preview site separate from your own. Something like this should work:
<iframe id="preview" src="about:blank"></iframe>
<script>
function previewUrl(location) {
document.getElementById('preview').src = location;
}
</script>

WordPress - How to have a static DIV that does not reload?

At the top of my new WordPress Theme for a radio website, I want to have a DIV at the very top of the page which contains a small flash player which will play the radio stream.
I would like this DIV to be static and NOT reload every time the user changes pages. What would be the best way to accomplish this?
Please provide a working demo on jsFiddle or something like that.
I think there are two ways to keep the music going
Either you use frames, so top frame(preferably 0px height) never
change and play the music
or you can build your whole site with ajax you only change what you need to change and don't touck the player.
you can try it with ajax that you just pull the content on page change request via ajax and fill you DOM(except music player part) as per your requirement and then you need not to reload your music player.
Other wise if your music player code is the part of you http request then not one can stop it's re-loading.

Fancybox change url

I have a pinterest style gallery. I want to make it so when you click on the images it opens a fancybox with a larger image and then comments and other stuff below it in a box. But I want each image/ image fancybox to have it's own url so people can share the links and stuff. Any Ideas on how to do that?
Thanks in advance
Just use fancybox as default. When the onComplete event is raised, manipulate the DOM and serach for the fancybox container and just append the comments and stuff.
You can change the url in the browser with HTML5 history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
And then on full page load you can get the url with window.location and modify the DOM to fit your need.
There are kinda two ways:
1. like Facebook does: http://spoiledmilk.dk/blog/html5-changing-the-browser-url-without-refreshing-page
2. like Twitter does:
you can access and change the #-part of url using location.hash
//example.com/
location.hash = 'foo'; //becomes example.com/#foo
I would go about this by creating a PHP script that takes in the id of the image e.g. outputimage.php?id=123 and then outputs the html of the image, comments etx. This script could be called with a jQuery ajax call that requests the html from the script and then places it in the fancybox div.
Another page called image.php?id= that again takes in the id of the image and uses outputimage.php to display the html in a separate page layout. This page would then be your standalone layout.

How to show preload image during loading page and also how to show in middle of dynamic conent in php

I have popup modalbox Iframe which can be open by onclick function using jquery. It's open fine. And in Iframe popup dynamic content is displayed. But it takes some time. I want to put preload image until content of Iframe is displayed. For example:
$('#preloadingImgDiv').fadeIn('slow', function() {});
url ='something.php?somethingname='+somethingname+'&somethingid='+somethingid;
$("#iframeId").attr('src',url);
$('#preloadingImgDiv').fadeOut('slow', function(){});
It works. But before coming dynamic content in Iframe popup box, preload image are disappeared.I need preload image is displayed continuously until dynamic content of Iframe popup Modalbox has been come. And another thing, this preload image is needed to display in the middle of content of Iframe popup Modal box.I have design like that
div html, Iframe, dynamic content coming in php. how to fix it.
I need your hand
Thank you
I'm not sure that i get your question clearly but i think you want to display your loading image untill content is fully loaded. You are calling .fadeIn and .fadeOut at the same time so it becomes visible and invisible before your ajax(or any other) request completed, but you need to call .fadeIn when your loading request started and .fadeOut when it's completed.
Here is a question and answer like yours: https://stackoverflow.com/a/4240660/1241723

Categories