Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
Like Tree2Likes

Thread: Flashing image, two classes

  1. #1
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times

    Flashing image, two classes

    Morning,
    Here is the site in question The Attic Banwell

    I would like the thumbnail marked SALE to flash in/out etc.
    I have tried the codes below but neither work for me.

    My css is in the main css file & starts at line 1347

    Please can you assist.

    Code:
    		<article>
    		<a class="thumbnail" href="images/sale/LOVE-BENCH-2.jpg">
            <img src="images/sale/LOVE-BENCH-1.jpg" alt="LOVE BENCH W-S-M" class="blinking" />
            <figcaption>£40.00</figcaption></a>
    		<h2>LOVE BENCH £40.00</h2>
    		<p>H 89cm W 90cm D 43cm</p>
    		</article>
    Code:
    		<article>
    		<a class="thumbnail blinking" href="images/sale/LOVE-BENCH-2.jpg">
            <img src="images/sale/LOVE-BENCH-1.jpg" alt="LOVE BENCH W-S-M" />
            <figcaption>£40.00</figcaption></a>
    		<h2>LOVE BENCH £40.00</h2>
    		<p>H 89cm W 90cm D 43cm</p>
    		</article>

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    There's nothing in that code to make the image flash. The class "blinking" needs a CSS animation to make it blink. Take a look at this: https://gist.github.com/mugifly/5099109
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Hi,
    Ive added the code correctly now looking at your advice above but still i dont get it to blink.

    I even took my code and placed it into the Github code where it worked.

    Why will it not work for me on my page ?

    Code:
    		<article>
    		<a class="thumbnail" href="images/sale/LOVE-BENCH-2.jpg">
            <img src="images/sale/LOVE-BENCH-1.jpg" alt="LOVE BENCH W-S-M" class="blink"/>
            <figcaption>£40.00</figcaption></a>
    		<h2>LOVE BENCH £40.00</h2>
    		<p>H 89cm W 90cm D 43cm</p>
    		</article>
    Code:
    /* Blink for Webkit and others
    (Chrome, Safari, Firefox, IE, ...)
    */
    
    @-webkit-keyframes blinker {
      from {opacity: 1.0;}
      to {opacity: 0.0;}
    }
    .blink{
    	text-decoration: blink;
    	-webkit-animation-name: blinker;
    	-webkit-animation-duration: 0.6s;
    	-webkit-animation-iteration-count:infinite;
    	-webkit-animation-timing-function:ease-in-out;
    	-webkit-animation-direction: alternate;
    }

  5. #4
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Just checked this on the phone and itís working.
    I assume chrome didnít clear the cache correctly.
    When back I will check it again and confirm my findings.

  6. #5
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Pc does not show animation.
    Phone in landscape does not show animation.

    Phone in portrait does show animation.
    Media query is then needed.

  7. #6
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Just an update.
    I have changed the css to a different way that the flashing happens etc.
    I can confirm that the flashing text will only work in portrait mode & not landscape.

    I have confirmed this on iphone 5,6,6+,7,8,X & ipads.
    Please could you advise the fix that i need to make.

    I await your help once again.

    Many thanks.

  8. #7
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    OK,
    I have yet another update for you as its looking better.

    I have now used the script supplied below & it now works without the issue mentioned above.
    This has been inserted in the HTML file at line 497

    Please could you take a look & see the issue mentioned below.
    .
    On the page when the image is flashing the price tag £40.00 moves above the image,then as the image appears again the price tag returns to its place which is below the image.
    This then becomes a cycle.

    So can the script be edited for the price tag to stay & not move whilst the image is flashing OR do i need to add some code so the price tag is in its own box if you like & the image also in its own box ?
    Then hopefully the image will flash & the price will not be affected.

    Code:
        <script>
        window.setInterval(function(){
        $('.blink').toggle();
        }, 1300);
        </script>

    Many Thanks.

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    The answer to your question is 'not really'.

    What you want can obviously be done, just not like that. The best way I know of to do this other than what I mentioned above is to use JS to add/remove a class at a given interval.

    In your CSS, add the following:

    Code:
    .blink{visibility: visible;}
    .blink.hidden{visibility: hidden;}
    Then, add this at the end of the HTML:

    HTML Code:
    <style>
    window.addEventListener('load', function(){
    let blinky = document.querySelectorAll('.blink');
    
    for(let i = 0; i < blinky.length; i++){
      blinky[i].setInterval(function(){
        if(blinky[i].classList.contains('hidden')){
          blinky[i].classList.remove('hidden);
        } else {
          blinky[i].classList.add('hidden');
        }
      }, 1300);
    }
    });
    </script>
    It concerns me somewhat that rather than learn the how and why of this, you're popping in, grabbing your answer and moving on. You need to learn how these things work. I know you have a struggle point with that, but you can learn, and you probably should, especially since it seems like you're probably going to be the one maintaining this. I don't mind helping, but to some degree, you need to help yourself as well.
    Last edited by Ronald Roe; Jan 27th, 2018 at 05:49 AM. Reason: Fixed syntax errors
    ipbr21054 likes this.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Yes I am to maintain this but I do try many things before I ask here.
    I have a very small list of things that are required then thatís it.
    I research then modify to my liking but if there is a snag I ask here.
    I have learnt plenty for my short time hear by reading other posts and using them.

    Thanks.

  11. #10
    Member
    Join Date
    Mar 2016
    Location
    South west uk
    Posts
    81
    Member #
    53465
    Liked
    3 times
    Well i have added the twp pieces of code advised above but it doesnt work for me.
    There is no flash and i see at the end of the code the marker </html> is pink rather than blue.

    I do not see what this is but i think this is the cause of it not flashing.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:40 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com