SitePoint Sponsor

User Tag List

Page 4 of 5 FirstFirst 12345 LastLast
Results 76 to 100 of 103
  1. #76
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What size does fancybox use,
    I covered this in my previous post

    When the fancybox dialog is presented its size is based on the actual size of the [placeholder] image.
    I have inserted an image that shows the box layout of the fancy box dialog and another image which show the html that makes up the dialog. The formating of the various elements are taken from the stylesheet jquery.fancybox.css.

    You can change the values in the style sheet to your chosen values.

    100% - is a relative size. It is the same width as the element which contains it.
    Attached Images Attached Images

  2. #77
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't look in that style sheet Although some of the rules within the style sheet show width:100%. I know that you have explained it, I'm not understanding. For example:

    left: -13px;
    height: 100%;
    width: 13px;
    background: transparent url('../images/fancy_shadow_w.png') repeat-y;

    I know that the position is relative left -13px, the width is 13px but what is the height 100% of 75px ?

  3. #78
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please bear with me I will try to explain.

    The whole dialog is a html div element, essentially a rectangular box, I haven't referred to this div before but it has an id "fancy_outer". This div is styled to have the height and width of the video plus the styling elements that appear around it. The height and width do not appear in the css (although other properties do) but are assigned. It is positioned absolutely.

    Within fancy_outer is another div with an id "fancy_inner". This is positioned relatively and has been given a height and width of 100% in the css file. This means that it has the same height and width as the element that it is contained within, namely "fancy_outer". This element has a border of 12px which you have coloured pink.

    Within "fancy_outer" you have two div "fancy_close" and "fancy_bg".

    "fancy_close" is positioned absolutely that is, in this case, it is positioned with values relative to "fancy_outer". The negative values for top and left allow it to actually be positioned outside of "fancy_outer" although logically it is within.

    "fancy_bg" is also positioned absolutely but essentially with its properties of top:0px, left:0px, height: 100%, width: 100% it lies on top of "fancy_outer". It acts as a container for the _n, _ne etc divs.

    Just taking one of those divs "fancy_bg_fancy_bg_w". This is positioned absolutely is shifted left 13 pixels so it appears outsize of its container "fancy_bg" is given a width of 13px and a height of 100% (namely the same height as "fancy_bg".

  4. #79
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The explanation was well put, let me run some things by you.

    Code CSS:
    div.fancy_bg_n {
        background: url("../images/fancy_shadow_n.png") repeat-x scroll 0 0 transparent;
        height: 18px;
        top: -18px;
        width: 100%;

    If fancy_outer has a width of 238px and a height of 138px then the above rule is getting it's width from fancy_outer which is 238px, correct ? Why are there rules specifically as in this one with a height and a width if they are getting there height and width from fancy_bg ?

    Code CSS:
    div.fancy_bg_ne {
        background: url("../images/fancy_shadow_ne.png") no-repeat scroll 0 0 transparent;
        height: 18px;
        right: -13px;
        top: -18px;
        width: 13px;
    }

    There is a graphic in this rule but it seems out of place when I view it in firebug what is it's purpose ?

  5. #80
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Strictly "fancy_bg_n" is getting it width from "fancy_bg" which is getting it width from "fancy_inner" which is getting its width from "fancy_outer" where the width is explicitly defined. The only reason it is getting its width from its parent is because it has a style of width: 100%. If that was not the case then it would only be big enough to hold the content it has (which is nothing).

    I'm not using firebug so I cannot see what you are seeing but the negative values for right and left will displace the element out of the normal flow.

  6. #81
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Philip I added my own graphic to one of the DIV for the player, there is one thing bothering me, I can't completely remove the border. In the style sheet I gave the border rule {none} but the border still applies, it would be nice to just create a single graphic of width and height and apply it to the background and remove all the graphics for the DIV labeled "fancy_bg_e", fancy_bg_ne" etc etc but unless I'm over looking something I checked all the players style sheet this time around and my HTML code, I don't think it's possible.

  7. #82
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry once again I am having difficulty understanding what you are having difficultly with.

    If we start by concentrating on fancy_bg_e. This has a style

    Code CSS:
    div.fancy_bg_e {
    	right: -12px;
    	height: 100%;
    	width: 15px;
    	background: transparent url('../images/border_east.png') repeat-y;
    }

    and inherits settings from fancy_bg

    Code CSS:
    div.fancy_bg {
    	position: absolute;
    	display: block;
    	z-index: 70;
    	border: 0;
    	padding: 0;
    	margin: 0;
    }

    So fancy_bg_e does NOT have a border. Why do you think it does?

    it would be nice to just create a single graphic of width and height and apply it to the background and remove all the graphics for the DIV labeled "fancy_bg_e", fancy_bg_ne" etc etc
    At the moment each "etc etc" has a background style, each to a different image. The objective of this is to apply a shadow and thus give 3D effect. You can remove each of those styles but the effect would be lost. Where us the "nice" in that? but if it is what you want What is problem?

  8. #83
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So fancy_bg_e does NOT have a border. Why do you think it does?
    Fancy_bg_e doesn't have a border, but fancy_inner has a border when I change that to 0, the black edge still appears. I want to remove the black edge and have my own custom graphic. Preferable have a background graphic and apply it to the entire fancy_inner background.

    At the moment each "etc etc" has a background style, each to a different image. The objective of this is to apply a shadow and thus give 3D effect. You can remove each of those styles but the effect would be lost. Where us the "nice" in that? but if it is what you want What is problem?
    I want to remove the 3D effect, but the black border appears around the player with my graphic. Take a look;



    See the black border, look at the border to the right, you'll see a proxy graphic, but you won't just see the proxy graphic you'll see the black border. I can't find where to remove it.

  9. #84
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The black "border" is not a border in the css sense. It is in fact the background colour from fancy_inner. The flowplayer control is placed in fancy_content and this is positioned by inline style attributes the value of which is assigned by the fancy box javascript. You can influence this not via the css but by the initialisation options to fancybox which occur in fancyplayer.js.

    You can add a padding option (which currently default to 10.) So it becomes

    Code JavaScript:
    $(".video_link").fancybox({
            'hideOnContentClick':false,
            'padding' : 0,
            'overlayOpacity' :.6,
            'zoomSpeedIn'    :400,
            'zoomSpeedOut'   :400,
            'easingIn'       : 'easeOutBack',
            'easingOut'      : 'easeInBack',
     
           etc

  10. #85
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, but how did you know that the default padding was 10 ?

  11. #86
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #87
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, you really have to check every aspect of scripts. I have something to ask regarding the script on my page but I'm short on time I will update this thread.

  13. #88
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I add the refresh image, so the user can refresh the CAPTCHA code.

    Here is the function for the Javascript for CAPTCHA:

    Code JavaScript:
        function validateCaptcha() {
                captcha.parent().find('.error').remove();
                captcha.removeClass("fldinerror");
                var a = captcha.val();
                if (a.length != 6) {
                    return reporterrormessage(captcha, "Captcha code is invalid");
                }
                return true;
            }

    Image:


    Although the refresh icon will have to be inverted as black on black won't work, but if you want to leave as it is, I'll find it on the page and change it afterwards.

  14. #89
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are we still on the page

    http://www.thecreativesheep.ca/const...truction_a.php

    The contact form seems to have changed - you have input fields outside of a form declaration.

    What captcha facility are you using?

    Currently the captcha image is /construction/contactform/captcha.php so I would have though that loading a new image from the same url and replacing the src attribute of the <img> tag would have suffice BUT what I am not understanding is how the captcha is validate on the server side - how does it know what the captcha was?

  15. #90
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a custom made CAPTCHA. Let me find it and update.

  16. #91
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From tangoforce who installed it for me:
    Refreshing the captcha via the same script will automatically write the new captcha code to the session where it will be chacked by the form.

  17. #92
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am seeing a Refresh hyperlink which calls a function refreshCaptcha.

    You are getting an error because it can't find the function. The reason is the it one of scoping. The function is defined with a $(document).ready() function and is therefore local to that function and not available outside.

    I would change the hyperlink to

    Code HTML4Strict:
    <a href="#" id="idcaptcharefresh">Refresh</a>

    and change the current refreshCaptcha function to

    Code JavaScript:
    $("#idrefreshcaptcha").click(function(evt) {
                var date = new Date();
                $("#capimg").attr("src", "/construction/contactform/captcha.php" +"?anti_cache=" + date.getTime();)
                evt.preventDefault();
                }
          });

    Hoe that works have not been able to test.

  18. #93
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, that didn't work. The CAPTCHA doesn't refresh.

  19. #94
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try it without the semicolon at the end of the attr part

    Code JavaScript:
    $("#idrefreshcaptcha").click(function(evt) {
                var date = new Date();
                $("#capimg").attr("src", "/construction/contactform/captcha.php" +"?anti_cache=" + date.getTime())
                evt.preventDefault();
                }
          });

  20. #95
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That didn't solve it.

  21. #96
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bracketing is out

    Code JavaScript:
    		$("#idrefreshcaptcha").click(function(evt) {
    				var date = new Date();
    				$("#capimg").attr("src", "http://http://www.thecreativesheep.ca/construction/contactform/captcha.php" +"?anti_cache=" + date.getTime())
    				evt.preventDefault();
    			});

    What was there originally caused a compilation error so everything what was defined while the document.ready function did not work. This included the validation.

  22. #97
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What was there originally caused a compilation error so everything what was defined while the document.ready function did not work. This included the validation.
    I don't remember, all I can say is that the refresh doesn't refresh the CAPTCHA code but everything else is back working except the message area does not give a warning if the message area is skipped.

  23. #98
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bit of dyslexia going on - the id of the anchor tag is idcaptcharefresh while that in the script is idrefreshcaptcha. Make them the same and try again.

  24. #99
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There was a bit of dyslexia going on Except validating the message field is not validating.

  25. #100
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Except validating the message field is not validating.
    Do you still have a problem?

    As far as the browser end is concerned everything seems OK.


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
  •