SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery Popup box - Size guide

    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.

    http://www.mandmdirect.com/01/detail...et-Blue-Black#


    Many thanks in returns
    Adam

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by A.mckenzie93 View Post
    how would i go about editing the css for this?
    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.

    Quote Originally Posted by A.mckenzie93 View Post
    and allowing the window to be a certain width as its currently locked to a small amount.
    You can set the height and width of the dialog when you initialise it in JS, like this:
    Code JavaScript:
    $( "#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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by A.mckenzie93 View Post
    how would i go about displaying a PDF in the dialog box
    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/9...-can-view-pdfs
    https://github.com/andreasgal/pdf.js

  7. #7
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    I did find this link, which you might find interesting: http://jquery.toitl.com/index.php?p=...ialog_with_pdf

    The code is very straightforward
    HTML Code:
    <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.

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi fretburner,

    Quote Originally Posted by fretburner View Post
    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.
    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.

  9. #9
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by A.mckenzie93 View Post
    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.
    You can do both of those things with a couple of CSS rules:
    Code CSS:
    .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. #11
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •