SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by indigojones666 View Post
    I have just realised that the button only appears if one goes to http://www.jorgemonedero.com/blog/ first and then click on any of the photographs (portfolios)
    Yes, that is what Mittineague said in post #23.
    And indeed, in this way I can see the close-button too.

    • If a gallery page is called directly by URL, the button doesn't appear.
    • And then after a refresh: still nothing.
    • The button is only visible.when coming from the home page to a gallery page,

    In the generated source code it is clear that there are big differences in what is presented:


    button is visible when coming from the home page

    But:

    there is no button when a page is called directly


    Another difference: in the showed-button case, the <div id="grid-gallery"> is filled with the whole gallery! In a page without the close button it is empty. - On screen you don't see this difference, for in both cases the surrounding #gallery-container is set to {display: none}.

    But there are more strange things:
    In the <head> of a gallery page are parts of the content:
    HTML Code:
    <head>
    <meta ...>
    <title>...</title>
    ...
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>
    ...
    </head>
    <body>
    And the same four-in-hand is occurring after the </html> (!):
    HTML Code:
    </body>
    </html>
    
    <div id="left"></div>
    <div id="right"></div>
    <div id="top"></div>
    <div id="bottom"></div>
    Both are wrong, the 4 belong (only once) in the <body> section, and no wonder the html-validator is protesting.

    I'm afraid there is something wrong with the used "PEXETO GridGallery" plug-in for Wordpress:
    • an error in the gallery script,
    • and/or not good implemented.


    =====
    Workaround possible!
    Anyway, with javascript and a bit of css we can make a short circuit. Here is the trick:

    • We don't change the position of the close-button (what is rather impossible if there is no button!).
    • We always create a new close button on the desired position.
    • If there was already a close button on the page (under the social media links), we delete the old button.

    Code JavaScript:
    <script type="text/javascript">
    /* ===== replacing/creating the close button ===== */
     
    var allDiv=document.getElementsByTagName('div');
    for (var i=0; i<allDiv.length; i++){
    	// insert new close button in the caption line:
    	if (allDiv[i].getAttribute('class')=="item-title" || allDiv[i].getAttribute('className')=="item-title"){
    		allDiv[i].innerHTML='<a href="http://www.jorgemonedero.com/blog/" title="Close">'
    		+'<img id="closebutton" src="http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png" alt="" title="Close"></a>'
    		+allDiv[i].innerHTML;
    	}
    	// adapt width of the caption line:
    	if (allDiv[i].getAttribute('class')=="preview-content"){
    		allDiv[i].style.width=allDiv[i].offsetWidth+60+"px";
    	}
    }
     
    </script>
    This script can be added in the bottom of the page, just before the </body></html> tag.
    • Or a link over there to the script in an external closebutton.js file.

    In the <head> of the document, just before the </head>, can be added the accompanying css:
    HTML Code:
    <style type="text/css">
    .close-btn { /* close button in old position (if close button is existing) */
    	display: none !important;
    	}
    #closebutton { /* new close button */
    	width: 27px;
    	height: 27px;
    	margin: 0 30px 0 0;
    	padding: 0;
    	vertical-align: middle;
    	opacity: .5 !important;
    	transition: opacity .35s ease-in-out;
    	}
    #closebutton:hover,
    #closebutton:focus {
    	opacity: 1 !important;
    	}
    </style>
    • Or it can be added in an existing stylesheet.

    Test: test-close-button-position-script.htm

    • Tested in Firefox, Chrome, Opera, Safari-Win, IE7, IE11 (so must be good in IE7+).
    • Refreshing allowed.
    • The source code is the generated source code of a page with the button, displayed on desktop.
    • Resizing the page is dependent of the AJAX, not working over here without the CMS; so on smaller windows / devices the rendering isn't optimal (but the button has to be on the right place).

  2. #27
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your a genius. thanks so much Francky. Have a god weekend
    regards
    Garry

  3. #28
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Francky,

    Please excuse my ignorance but I haven't got any HTML pages;
    The gallery pages are generated/sit in the "single-portfolio.php" (for example: single-portfolio postid-160).
    You say add the javascript to the bottom of the page before the </body></html> tag…
    but where as I haven't got any html pages?
    Then add the html code just before the </head> …. again, I haven't got any html pages.

    So basically where do I add all youre beautiful code as regards my wordpress site?

    Regards
    Garry

  4. #29
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    @indigojones666
    Hi Garry,
    I'm afraid I have to repeat: "Please excuse my ignorance but " ... Wordpress and the WP-plugin's are things I don't know much about.

    • Extra css:
      Then for the extra css you have to discover how you can make a "custom.css", and drop the extra button-css in that file. *)
    • Extra javascript:
      If the "single-portfolio.php" page has the closing tags </body></html>, you can drop the extra button-javascript over there (just before the </body></html>).

    If the closing tags </body></html> are not in the "single-portfolio.php" **), the CMS is making the </body></html> in some other php-file in the Expression theme of the CMS-system.

    • Then for the extra javascript you have to discover in which php file is added the script-link:
      HTML Code:
      <script type="text/javascript" src="http://www.jorgemonedero.com/blog/wp-includes/js/comment-reply.min.js?ver=3.7.1"></script>
    • Then you can add the extra js just under that:
      HTML Code:
      <script type="text/javascript" src="http://www.jorgemonedero.com/blog/wp-includes/js/comment-reply.min.js?ver=3.7.1"></script>
      <script type="text/javascript">
      /* ===== replacing/creating the close button ===== */
      var allDiv=document.getElementsByTagName('div');
      for (var i=0; i<allDiv.length; i++){
      	// insert new close button in the caption line:
      	if (allDiv[i].getAttribute('class')=="item-title" || allDiv[i].getAttribute('className')=="item-title"){
      		allDiv[i].innerHTML='<a href="http://www.jorgemonedero.com/blog/" title="Close">'
      		+'<img id="closebutton" src="http://www.jorgemonedero.com/blog/wp-content/themes/expression/images/close-button.png" alt="" title="Close"></a>'
      		+allDiv[i].innerHTML;
      	}
      	// adapt width of the caption line:
      	if (allDiv[i].getAttribute('class')=="preview-content"){
      		allDiv[i].style.width=allDiv[i].offsetWidth+60+"px";
      	}
      }
      </script>

    If you get problems with this, I should suggest you post a new question in the Wordpress part of the forum, for this is not "Javascript & jQuery" anymore.
    There the WP-specialists are visiting the posts.

    Good luck!
    _______
    *) You can also add the button-css in the end of an existing .css file, but then the extra code will be deleted at a system-update of the Expression theme. - At a system-update the custom.css stays untouched.
    **) We cannot see this online, for the P of PHP is (server-side) Preprocessing; we can only see the html-code results, not the php input code, which is somewhere in the WP-dashboard.

  5. #30
    SitePoint Member
    Join Date
    Nov 2013
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Francky


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
  •