How to keep banner animations running while changing webpages [closed]


Tags: javascript,php,html,css

Problem :

To start off, here's a picture of the website project: http://i.imgur.com/FbdUmpp.png

The top image is one of the cycling images in the website banner. I'd like to make my website a bit more polished. When the user navigates to a new webpage, the banner animation will restart. I was wondering how I could stop this from happening.

  • How can I keep the banner from restarting when a user switches a webpage?
  • What's the exact name of what I'm trying to accomplish? (I can't seem to find any information about this subject.)
  • My knowledge is limited to HTML, CSS, a little bit of PHP and JavaScript. I don't mind learning a new language in order to achieve this.

Thanks in advance!



Solution :

Well the animation restart is due to the content being reloaded when you land on the new page. There is no way around that specifically. However you can change the content on the screen without actually navigating away. Look into AJAX to accomplish this. Have an AJAX call get the new data that you want to view and place it on the current screen in place of the old data. This way you will still get the new information and the animation of the banner will continue without stops or restarting.


    CSS Howto..

    jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

    How to position label text with css

    How can I turn a background visibility on and off with jQuery?

    how to make background css url dynamic using jquery

    how to align divs with different width within another parent div?

    How to merge CSS classes?

    How to align multiple columns in bootstrap 3 carousel?

    HTML code to show splitted data_frame in one html page using python

    CSS: How to create a button with an arrow placedo on the right

    jQuery + CSS: How to scroll smooth, regarding a fixed header?

    How to align buttons properly in css/asp.net?

    How to ensure buttons reversed by CSS are spaced evenly?

    How to have margins not offset my grid

    How to include a google map in an application

    How do I do this CSS border-bottom

    How to access lower children using > operator?

    How should I divide up CSS files to support multiple devices?

    How to ease the whole css animation

    How to display 20 columns in html design

    How to share common css and other resources among grails projects?

    How to use relative referencing in CSS files

    How to use @Media queries

    jQuery hide show id

    How do I apply the following CSS to only the Parent nodes of a Kendo Tree View?

    CSS: How to set minimum and maximum height according to inside?

    How to put a background image on a site

    How to add a rollover effect to the text on a map

    How do I make my HTML5 nav li tab stay active on click with CSS3?

    How to use Javascript to get a visitors monitor resolution?

    How can I change the colour of individual squares on this grid…?