Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Online store with fancy design

    Hi,

    I have an online store which has a very different webdesign cause I wanted something fancier.

    So, in this design I putted a background image on the page and it has a pattern. It's nice but I want this pattern to move from left to right. Is it possible using only js or I should use Flash for that?

    Thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Using Flash, don't make me throw up.

    Piece a cake for JS. Maybe even with CSS (long shot on that).

    But a moving back ground - I'd throw up.

    Certainly would not be back. But it's your site, if you want to go back to design that was at the dawn of internet design be my guest. Use the animate property of Jquery on the BG image.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,918
    Thanks
    56
    Thanked 545 Times in 542 Posts
    using jQuery just to move an image. You just made me throw up

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    I dunno. If it's a nice repeating pattern and moves *SLOWLY* then it might be okay.

    It is pretty "old school", though. Get it evaluated by somebody who knows design before you take it live.

    The easy way to do this is not with a background image but with a <div> containing images that sits "behind" your other content. That is, has a lower z-index.

    And I agree with Xelawho. Certainly don't need jQuery for this. A handful of lines of vanilla JS code.

    Show me your pattern.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post

    Sliding the background

    Hi, as Old Pedant said it's pretty easy. You just need to have a div with a background set to repeat-x and then you move the left coordinate of your background using animate() function in jquery. I created a website exactly as you want! Check it out at http://www.sitepor500.com.br.

    See, the background in the top moves slowly to the right in a few pixels steps. The script is:

    $(window).bind("scroll", function() {

    if ($("a[name=listagem-sites-criados-para-empresas]").offset().top < $(window).scrollTop() + $(window).height()) {

    $("#frame").attr("src","carregar_portfolio.php");
    $(window).unbind("scroll");

    }

    });

    If you have any question I am here to help you.
    Last edited by VIPStephan; 08-26-2013 at 10:17 AM. Reason: removed link

  • Users who have thanked coroa2 for this post:

    peixe8 (08-26-2013)

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Two things wrong with that code, coroa:

    (1) It uses jQuery. Okay, if you have other jQuery on the page, why not. But for something as simple as this, don't drag in the entire jQuery library just for it.

    (2) You don't know what you are talking about. The code that causes the scrolling is here:
    Code:
    	window.setInterval(function() {
    		
    		posicao_imagem_fundo = posicao_imagem_fundo + 1;
    		$(".fundo_topo").css("backgroundPosition",posicao_imagem_fundo + "px 0px");				
    								
    	},50);
    [Which makes me think you didn't write this code, let alone write it "exactly as [he] wants".]
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Quote Originally Posted by Old Pedant View Post
    [Which makes me think you didn't write this code, let alone write it "exactly as [he] wants".]
    Interestingly there have now been three users that allegedly own the same site: danielmatose, erikama, and coroa2 in this thread. An IP check didn’t reveal any direct connection but something doesn’t feel right about this.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    I think it's mostly that they are advertising the site for their employer. The company is a web site creation firm in Brazil. Why they would think this is a good place to advertise that service... On the other hand, by making them look like helpful posts, they get free advertising.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I own the website! If another person said so they are lying! I am the owner of http://www.sitepor500.com.br Who is erikama and dainelmatose? Could you please chek the ip?
    Last edited by VIPStephan; 08-27-2013 at 07:35 AM. Reason: removed link

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Now it’s just getting ridiculous.


  •  

    Tags for this Thread

    Posting Permissions

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