SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 75 of 75
  1. #51
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by donboe View Post
    Is this a firefox thing?
    It works fine for me in the latest Firefox on Windows 8.
    What version of FF are you using and which version of Windows?
    I have a couple of VMs lying around so maybe I can try to reproduce.
    Also be sure that you don't have any JavaScript blocking extensions installed.

  2. #52
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. It is Firefox 21.0 on Windows 7

    Edit. Now it is suddenly working in Firefox as well, but not all the time like there are some problems loading the images
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #53
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Sorry man, I can't reproduce.
    I just opened up a VM running Win7, installed FF 21.0 and have loaded the page many times.
    It worked every time.
    Are there any other factors at play?

  4. #54
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo, Forget my last post. I have just integrated it in the original page and everything is working fine. Thanks a lot for all help and patience
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #55
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    No problem at all.
    Glad we got there in the end and that you found an acceptable solution for your client.

  6. #56
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo

    I have one last question. The function calls for the functionality are one big mess. I have them combined in a file called functions.js. This how it looks like right now.

    Code:
    // JavaScript Document
    $(document).ready(function() {
      $('a.panel').click(function () {
      $('a.panel').removeClass('selected');
      $(this).addClass('selected');
      current = $(this);
      $('#wrapper').scrollTo($(this).attr('href'), 800);	
    		return false;
    });
    	$(window).resize(function () {
    		resizePanel();
    	});
    });
    
    function resizePanel() {
    
    	width = $(window).width();
    	height = $(window).height();
    
    	mask_width = width * $('.item').length;
    		
    	$('#debug').html(width  + ' ' + height + ' ' + mask_width);
    		
    	$('#wrapper, .item').css({width: width, height: height});
    	$('#mask').css({width: mask_width, height: height});
    	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
    		
    }
    
    			$(document).ready(function() {
    				$("#header").delay(6000).animate({top: '+=70'}, 800, 'easeOutBounce');
    			  $(".carousel").waterwheelCarousel();
    				$('.video-background').videobackground({
    					videoSource: [['video/porsche.mp4',  'video/mp4'],
    												['video/porsche.webm', 'video/webm'], 
    												['video/porsche.ogv',  'video/ogg']], 
    					poster: 'video/porsche.jpg',
    					loadedCallback: function() {
    							$(this).videobackground('mute');
    					}
    				});
    			});
    
          $(".submenu a").on("click", function(e){
            e.preventDefault();
            var id = $(this).data("museum-id");
            $.ajax({
              type: "GET",
              url: "artwork.php",
              data: {museum_id: id},
              cache: false,
              dataType: "html",
              success:function(res)  {
                $(".result").html(res);
                $(".result").waterwheelCarousel({
          				flankingItems: 1
        			});
              }
            });
          });

    But I am sure there must be a way to have it more tighten up.

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #57
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    The very first things we can do that are an easy win are:

    Move everything into $(document).ready(function(){ ... });
    Remove the second use of $(document).ready(function(){ ... });
    Indent the file properly.
    Group the different elements together for ease of reference (e.g. all of the click handlers)

    Here's that:

    Code JavaScript:
    $(document).ready(function() {
      function resizePanel() {
        width = $(window).width();
        height = $(window).height();
        mask_width = width * $('.item').length;
        $('#debug').html(width  + ' ' + height + ' ' + mask_width);
        $('#wrapper, .item').css({width: width, height: height});
        $('#mask').css({width: mask_width, height: height});
        $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
      }
     
      $('a.panel').click(function () {
        $('a.panel').removeClass('selected');
        $(this).addClass('selected');
        current = $(this);
        $('#wrapper').scrollTo($(this).attr('href'), 800);  
        return false;
      });
     
      $(".submenu a").on("click", function(e){
        e.preventDefault();
        var id = $(this).data("museum-id");
        $.ajax({
          type: "GET",
          url: "artwork.php",
          data: {museum_id: id},
          cache: false,
          dataType: "html",
          success:function(res)  {
            $(".result").html(res);
            $(".result").waterwheelCarousel({
              flankingItems: 1
            });
          }
        });
      });
     
      $(window).resize(function () {
        resizePanel();
      });
     
      $("#header").delay(6000).animate({top: '+=70'}, 800, 'easeOutBounce');
      $(".carousel").waterwheelCarousel();
      $('.video-background').videobackground({
        videoSource: [
          ['video/porsche.mp4',  'video/mp4'], 
          ['video/porsche.webm', 'video/webm'],   
          ['video/porsche.ogv',  'video/ogg']
        ], 
        poster: 'video/porsche.jpg',
        loadedCallback: function() {
          $(this).videobackground('mute');
        }
      });
    });

    Drop that into your page, confirm that everything still works, then report back and we'll have a look at what else could be optimized.

    HTH

  8. #58
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Everything is still working. So we can pick it up from here!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #59
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Cool!
    Can you post the address of the page where the JS is included (then I don't need to keep asking you to test everything )

    Sorry if you posted it before, but in this way we are both sure that we are looking at the same thing.

  10. #60
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo this is the temporary website. If you think we can tight things even better, please let me know.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  11. #61
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. I am looking for a way to give the active link from the active carousel a different colour. I tried some approaches, but I think that the e.preventDefault(); is holding me from make it work.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #62
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi donboe,

    So, let's start with the links then.

    Define a selected class in your CSS:

    Code CSS:
    #fmenu li a.selected { text-decoration: underline }

    Then apply it in your JavaScript.

    functions.js:

    Code JavaScript:
      $("#fmenu a").on("click", function(e){
        e.preventDefault();
     
        $("#fmenu li a").removeClass("selected");
        $(this).addClass("selected");
     
        var id = $(this).data("museum-id");
        $.ajax({
          type: "GET",
          url: "artwork.php",
          data: {museum_id: id},
          cache: false,
          dataType: "html",
          success:function(res)  {
            $(".result").html(res);
            $(".result").waterwheelCarousel({
              flankingItems: 1
            });
          }
        });
      });

    Preventing the link's default action shouldn't interfere with styling it differently on click.

  13. #63
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo I have integrated and it working perfect. I had basically the same script integrated, I only didn't have the CSS like you have. I just had the class without the #fmenu li in front of it. Anyway it is working great. Thank you a lot
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  14. #64
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by donboe View Post
    I had basically the same script integrated, I only didn't have the CSS like you have. I just had the class without the #fmenu li in front of it.
    Yeah, you have to be more specific with your "selected" styles, so that they don't get overwritten by the more generic ones.

    So, returning to tightening up the JS, I had a couple more comments.

    Your resize function might be a good place to start.

    Run this code on your machine with a browser console open.
    Manually resize the window (using its drag handles) to see how often the resize handler is called:

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Resize handler example</title>
      </head>
      
      <body>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
          $(window).on("resize", function(){
            console.log("Resize handler just fired");
          });
        </script>
      </body>
    </html>
    As you can see, it can easily be called a couple of hundred times.

    Now consider this:

    Code JavaScript:
    function resizePanel() {
      width = $(window).width();
      height = $(window).height();
      mask_width = width * $('.item').length;
      $('#debug').html(width  + ' ' + height + ' ' + mask_width);
      $('#wrapper, .item').css({width: width, height: height});
      $('#mask').css({width: mask_width, height: height});
      $('#wrapper').scrollTo($('a.selected').attr('href'), 0);
    }
     
    $(window).resize(function () {
      resizePanel();
    });

    You are querying the DOM multiple times within your resize function.
    You can improve things by caching your selectors outside of the resize function:

    Code JavaScript:
    var $items = $('.item'),
        $debug = $('#debug'),
        $wrapper = $('#wrapper'),
        $mask = $('#mask');			
     
    function resizePanel() {
      var width = $(window).width(),
          height = $(window).height(),
          mask_width = width * $items.length;
     
      $debug.html(width  + ' ' + height + ' ' + mask_width);
      $.merge($wrapper, $items).css({width: width, height: height});
      $mask.css({width: mask_width, height: height});
      $wrapper.scrollTo($('a.selected').attr('href'), 0);
    }

    Also, I'm not sure what this line is doing:

    Code JavaScript:
    $debug.html(width  + ' ' + height + ' ' + mask_width);

    Maybe you can remove it.

    Finally, this line throws an error:

    Code JavaScript:
    $wrapper.scrollTo($('a.selected').attr('href'), 0);

    Code:
    Uncaught Error: Syntax error, unrecognized expression: #
    .

    The has being the contents of the anchor tag's href attribute.

  15. #65
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Sorry I couldn't come back to you about this any earlier. This way it is much tighter indeed. Thank you for all your input! I have one last question of which I don't know if it is do-able. When the carousel has museum_id = 1 (Porsche) I need to append an image coming from another folder:
    <img src="videos/porche.jpg" alt="" id="" />
    With the following <ahref> properties
    <a class="fancybox-media" href="http://www.youtube.com/watch?v=IC9wzNu-k3E" title="Diem is painting Porsche"></a>
    How would I include that in the echo:
    echo "<a class='fancybox' data-fancybox-group='gallery' href='http://diem.sothenwhat.com/museum_photos/photos/" . $row->photo . "' rel='lightbox'><img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' /></a>
    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  16. #66
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi donboe,

    So when you display the images from the Porsche collection the PHP script returns:

    HTML Code:
    <a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche1.jpg" rel="lightbox">
      <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche1.jpg">
    </a>
    ...
    lots more images 
    ...
    <a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche25.jpg" rel="lightbox">
      <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche25.jpg">
    </a>
    Now you want to append this to the end:

    HTML Code:
    <a class="fancybox-media" href="http://www.youtube.com/watch?v=IC9wzNu-k3E" title="Diem is painting Porsche">
      <img src="videos/porche.jpg" alt="" id="" />
    </a>
    So that the entire thing will look like:

    HTML Code:
    <a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche1.jpg" rel="lightbox">
      <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche1.jpg">
    </a>
    ...
    lots more images 
    ...
    <a class="fancybox" data-fancybox-group="gallery" href="http://diem.sothenwhat.com/museum_photos/photos/porsche25.jpg" rel="lightbox">
      <img src="http://diem.sothenwhat.com/museum_photos/carousel/porsche25.jpg">
    </a>
    <a class="fancybox-media" href="http://www.youtube.com/watch?v=IC9wzNu-k3E" title="Diem is painting Porsche">
      <img src="videos/porche.jpg" alt="" id="" />
    </a>
    Is that correct?

  17. #67
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo . That is indeed correct
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  18. #68
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hey donboe,

    This should work:

    Code PHP:
    <?php 
     
    try 
    { 
      $pdo = new PDO('mysql:host=localhost;dbname=test', 'user',  'password'); 
    } 
    catch (PDOException $e) 
    { 
      echo 'Unable to connect to the database server.'; 
      exit(); 
    } 
     
    $museum_id= $_GET['museum_id']; 
    $imgString= "";
     
    $sql= "SELECT photo FROM museum_photos WHERE museum_id= :museum_id";  
    $stmt = $pdo->prepare($sql); 
    $stmt->bindParam(':museum_id', $museum_id, PDO::PARAM_STR);  
    $stmt->execute(); 
     
    while ($row = $stmt->fetchObject()) { 
      $imgString+= "<a href='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' rel='lightbox'><img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' /></a>";  
    }
     
    if ($museum_id == 1){
      $imgString += "<a class='fancybox-media' href='http://www.youtube.com/watch?v=IC9wzNu-k3E' title='Diem painting Porsche'><img src='videos/porche.jpg' alt='' id='' /></a>";
    }
     
    echo $imgString;

    Saying that, it's untested, so let me know how you get on.

  19. #69
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. Thank you for the reply I have changed the php file to the above, but when I click one of the links I just get a 0 (zerro) as you can see on the site Artwork. I have no idea what to change, since PHP is not my strongest point as you might have noticed.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  20. #70
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Oops, sorry. Change the += to .=

    PHP Code:
    <?php 
     
    try 

      
    $pdo = new PDO('mysql:host=localhost;dbname=test''user',  'password'); 

    catch (
    PDOException $e

      echo 
    'Unable to connect to the database server.'
      exit(); 

     
    $museum_id$_GET['museum_id']; 
    $imgString"";
     
    $sql"SELECT photo FROM museum_photos WHERE museum_id= :museum_id";  
    $stmt $pdo->prepare($sql); 
    $stmt->bindParam(':museum_id'$museum_idPDO::PARAM_STR);  
    $stmt->execute(); 
     
    while (
    $row $stmt->fetchObject()) { 
      
    $imgString .= "<a href='http://diem.sothenwhat.com/museum_photos/carousel/" $row->photo "' rel='lightbox'><img src='http://diem.sothenwhat.com/museum_photos/carousel/" $row->photo "' /></a>";  
    }
     
    if (
    $museum_id == 1){
      
    $imgString .= "<a class='fancybox-media' href='http://www.youtube.com/watch?v=IC9wzNu-k3E' title='Diem painting Porsche'><img src='videos/porche.jpg' alt='' id='' /></a>";
    }
     
    echo 
    $imgString;

  21. #71
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo. That works great indeed. Thank you very very much. One last thing, really How do I turn those two arround. So that the video is the first one (the centerd image) ?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  22. #72
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi donboe,

    Just swap the position of the if and while statements.

  23. #73
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Do you mean like this:
    while ($museum_id == 1) {
    $imgString .= "<a class='fancybox-media' href='http://www.youtube.com/watch?v=IC9wzNu-k3E' title='Diem painting Porsche'><img src='videos/porche.jpg' alt='' id='' /></a>";
    }

    if ($row = $stmt->fetchObject()){
    $imgString .= "<a href='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' rel='lightbox'><img src='http://diem.sothenwhat.com/museum_photos/carousel/" . $row->photo . "' /></a>";
    }
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  24. #74
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,353
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Sorry for the short reply, I'm at work and mobile.
    Just take the if block, don't change anything and move these three lines to before the while block.

  25. #75
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ha okay. Thank you again. This will work out!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •