Links on my website: http://rnmtest.co.uk/oddfellows/
If you hit 'Dine' you should see a 'Book Now' button. This element is not clickable in IE. The area below it has a semi-transparent png as the background. The content is loaded via jQuery.
I have put the anchor within a container div as recommended by other websites, but this has had no effect. If I resize the window in IE8 I can sometime click a small portion of the button.
This effect occurs on all anchors, not just the images.
This is a known limitation of IE6 - links within a container that use filters to create transparent backgrounds are not clickable
You can find more information and a workaround here
Once you loaded the content from jquery did you hook in the click event?
Did you make sure jquery finished loading the content before you tried to hook the event?
It's very easy to do.
I had to make the link position:relative; explicitly.
Related
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
I am building a web app that needs to export a div to an image. That div will contain images, other divs, text with css styling, etc. At the end, the user should have an image that would look the same as if he had taken a screenshot of that div. I 've looked into server-side php libs but I don't see anything that would handle the complexity of the rendered HTML. HTML5 canvas has that capability but I can't use a canvas for my case. Any ideas?
Thanks!
Check out html2canvas. A javascript framework that renders the page content on a canvas element.
You could wrap the div in a canvas tag, access the pixel data directly, send that to a PHP script and use the data to construct an image.
Here's how you get the pixel data
https://developer.mozilla.org/en/html/canvas/pixel_manipulation_with_canvas
And here's what you would use to create an image pixel by pixel
http://php.net/manual/en/function.imagesetpixel.php
I've written a project that converts HTML with CSS styles to canvas.
It is available here: https://github.com/coolbloke1324/html-to-canvas
And an example test page is available here: http://www.isogenicengine.com/html-canvas/test/index.html
On the test page, the initial load will just show a square div with some other divs inside it with various stylings like backgrounds and borders including border radius etc. You'll see a button on the top-right of the page marked "Render". Click that and a canvas will be created and then the DOM will be parsed and rendered to the canvas. I intentionally changed the background colour of the canvas to black so you can see the difference.
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
In my page I give a certain size to a DIV with jQuery, based on the size of the last tweet that I retrieve through PHP.
Problem : I need to use jQuery(window).bind("load", function() in order for jQuery to "see" the size of the tweet, but then, I can see the resizing (perfomed my jQuery) in front of my eyes and I dislike it. I want the page to appear in its final state.
Is that possible ?
You have two options. 1) Start off with your tweet element hidden, then show/fade it in when everything is loaded.
2) My preferred solution is to call the $.blockUI() plugin as soon possible, and then $.unblockUI when everything has loaded. The blockUI plugin also has a facility for blocking only certain elements rather than the whole page, there is a demo here
You can always let it render at a top margin of -1000px and then pop it back down, or perhaps z-index it underneath something else.
Some browsers have problems "seeing" hidden divs while some can do it, but it's unrelible so best bet is to render it outside the canvas.
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.