Jquery Popup box - Size guide

JavaScript
1

Hello everyone,

Im in search of a very easy to use html / jquery / javascript popup box styled box. i intend to use it to create a size guide on a site.
i want to be able to edit the CSS for it and allow html / images / pdf’s to be displayed

i found one thats got the same sort of thing im looking for, Click on the size guide button.

Many thanks in returns
Adam

2

Hi Adam,

There are various JS libraries out there that can create modal dialogs like that size chart you linked to. That particular site appears to use jQuery UI: http://jqueryui.com/dialog/

3

Hello again fretburner!

Iv downloaded the plugin and playing about with it currently, im new to this and having trouble editing it - how would i go about editing the css for this? and allowing the window to be a certain width as its currently locked to a small amount.

Many thanks

4

The easiest way to style jQuery UI widgets is through themes: http://jqueryui.com/themeroller/ - check out the gallery tab in the menu on the left, there are lots of premade themes and you might find something there that suits your needs.

You can set the height and width of the dialog when you initialise it in JS, like this:

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350
});

The page I linked to in the previous post has various demos of the dialog widget to show what it can do, and you can click to view the source code and see how it was done.

5

ok iv just been told that there is a change of plan - instead in this dialog box im to display PDF files with the size guides in them - assuming id use iFrames within the dialog box - iv briefly googled this but still could do with someone dumbing this down to my level!

how would i go about displaying a PDF in the dialog box

once again for your ongoing support fretburner!

6

I looked into this a while ago and concluded it is more trouble than it is worth.
If it is feasible for you, I would convert the PDFs to JPGs and display them in a conventional LightBox.

If that’s not an option, here’s some further reading:
http://stackoverflow.com/questions/927992/javascript-and-css-lightbox-that-can-view-pdfs

7

iv managed to get it working as i want it - now im just trying to toil about with css for the dialog itself - iv used the theme-roller on the jquery website but now i want to be able to edit the size of the bar etc.

The top bar i want to edit the height of - as well as this, if possible the cross off icon on the right.
Have attached an image to explain, if it helps - http://i.imgur.com/nm716uq.png

Could you let me know if this is possible as iv googled it but the general posts i find are relating to the size of the dialog box itself.

Many thanks

8

I did find this link, which you might find interesting: http://jquery.toitl.com/index.php?p=2012/11/02/134944/dialog_with_pdf

The code is very straightforward


<script type="text/javascript">
$(document).ready(function() {
  $('#detailID')
    .dialog({
      autoOpen: true,
      width: 600,
      height: 400,
      position: 'center',
      resizable: true,
      draggable: true });
});
</script>

<div id="detailID" style="overflow:scroll"><iframe  style="width:100%;height:100%;" src="yourfile.pdf"></iframe></div>

I’m not sure if you’d run into any problems doing it this way… not all browsers are set up to view PDFs, which obviously would impact the usability of your site.

9

Hi fretburner,

Yeah, mine for example.
When I viewed the demo on page you linked to, my browser tried to download the PDF, as opposed to display it.
It was also accompanied by a warning that this type of file can harm my computer.

In my case, I understand what is happening so can react accordingly, but I could imagine this scaring away a percentage of the users who think you’re trying to fire malware at them.

If one could combine pdf.js (see link above) which bills itself as “an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance” with this technique, I think you’d really be on to something.

10

You can do both of those things with a couple of CSS rules:

.ui-dialog-titlebar { height: .3em; }

.no-close .ui-dialog-titlebar-close {
  display: none;
}

Note that .no-close should be replaced with a class or ID that identifies your dialog container.

I think what Pullo said earlier was right though, you’d be better off using an image rather than a PDF. You could still make the PDF available to download for those customers who wanted. Looking at your screenshot, it’s all tabular data, so you could even recreate it in HTML. Then it would be more usable to customers that rely on screen readers, for example.

11

thanks again for your help!

feel like iv wasted a bit of your time here as after thinking more about what Pullo said

looked into this a while ago and concluded it is more trouble than it is worth.

i have now realised that this jquery dosnt work in Internet explorer, newbie mistake not to check!

so im looking into other options - as for the PDF, it seems to load the pdf… but the box for the dialog is simply buggered.

looking into other options now!