Responsive animation disappears when scaling browser window

Hi all.
I am having a problem with responsive scaling.
After integrating the animation into a responsive html page made in Dreamweaver I tested it on various browsers.
When I scale the browser window down the animation scales responsively with
the browser. When I scale it back up, it stays stuck at the same size.
If I pass the the threshold for the tablet layout, then resize it back to
the desktop size, the animation disappears entirely, requiring the page
to be reloaded to bring it back.
Has anybody else run into this problem and
if so is there a known fix?
Cheers

Hi Devendra.
How are you today?
It is doing it on a page I am currently working on, however I noticed that
it also does it on the last site I worked on.
Here is a link. If you resize the window down and then back up you
will see that it does not resize. The site I am working on at the moment
is structured differently, so when I pass the tablet threshold in the fluid-grid
layout the animation usually disappears when resizing back to the desktop threshold.
Here is the link to the live site.
http://indigocare.com.au/index.html
Thanks for getting back.
Cheers from Jules

Similar Messages

How do i get my navbar to stay on one line when the browser window is minimized?

I am new to coding and have just created my first website in html and css. I know that the coding is pretty dire and that I have a lot to learn and hope that someone can guide me in how to solve this problem. When the browser window is minimized, the navbar breaks down into 2 or 3 lines but I want the navbar to fit to the window whatever the size of the client machine.
I think I need to add a media query but i'm not sure if i do and if so what code to use and where to put it?
I am worried that the page will only be viewable properly on a desktop and i really want to learn how to make a fluid layout which can be viewed on 320px, 768px and 1200px.
Any guidance would be greatly appreciated.
Here is my code:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Engineer's Corset</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css">
body {
    background-color: #000;
</style>
</head>
<body>
<div id="container">
<div id="navbar">
    <ul id="nav">
    <li><span class="current-menu-item">Home</span></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="workshops.html">Workshops</a></li>
    <li><a href="news.html">News</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
<div id="header">
<img src="images/final/headerbeauty3.png" width="1100" height="341" alt="The Engineer's Corset">
</div>
<div id="links">
<ul id="link">
<li><a href="https://www.facebook.com/Bristolengineer" target="_blank"><img src="images/final/fb3.png" width="200" height="45" alt="Follow Us on Facebook"></li>
<li><a href="https://twitter.com/Engineerscorset" target="_blank"><img src="images/final/twitter2.jpg" width="200" height="45" alt="Follow us on Twitter"></a></li>
</ul>
</div>
<div class="chantry">
<img src="images/final/CD Logo fin.png" width="240" height="200" alt="Chantry Dance Company">
</div>
<div class="about">
<p> The Engineer's Corset is a new play written by Janet Goddard for performance by the community of Bristol in 2015. <br> ~ <br>
The play is based on the extraordinary real-life events of 1843 surrounding Isambard Kingdom Brunel's near-death experience after swallowing a coin. We travel through time to explore the adventure and horror of Victorian industrialisation. <br> ~ <br> Using a community theatre group The Engineer’s Corset tells a familiar tale of Brunel’s near death experience when he swallows a gold half sovereign. His wife Mary fights to maintain her composure but is ripped apart by the waiting game. Her servants and his workforce, using dance and sound, broaden her horizons. Just like Mary the audience too will see life in the 1840s through a different lens.</p>
</div>
<div class="workshops">
<img src="images/final/bridgebridge.jpg" width="1100" height="713" alt="clifton suspension bridge">
<span><a href="workshops.html">We will be running a series of workshops prior to production and hope you will join us. For further information, click here.</a></span>
</div>
<div id="sponsorspace"></div>
<div id="footer"> <p> © Heartprints Web Design 2014 </p> </div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:125%;
@media screen {
    #navbar:
#navbar li {
    font: 25px Arial;
    display: inline;
    list-style-type: none;
    background: #09F;
    color: #000;
    border-radius: 20px;
    padding: 15px 25px;
.current-menu-item {
    color: #0FF;
#navbar a {
    padding: 15px 25px;
    background-color: #6cf;
    color: #000;
    text-decoration: none;
    border-radius: 20px;
#navbar a:hover {
    background-color:#0FF;
    color: #000;
    padding: 15px 25px;
#header {
    width: 1100px;
    height: 340px;
    margin-left: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
#links li {
    display: inline;
    width: 700px;
    margin-left: 300px;
.chantry {
    margin-left: 40px;
.about {
    position: relative;
    width: 860px;
    text-align:center;
    background-color: #CCC;
    color: #000;
    border-style: ridge;
    border-width: 3px;
    border-color:#09F;
    border-radius: 15px;
    float: right;
    margin-top: -200px;
    margin-right: 90px;
.workshops{
    position:relative;
    width: 1100px;
    height: 713px;
    font-size:24px;
    margin-left: 50px;
    border-style: ridge;
    border-width: 5px;
    border-color:#09F;
    margin-top: 130px;
.workshops span {
    position: absolute;
    background: #6CF;
    color: #000;
    left: 30px;
    top: 30px;
    right: 800px;
    padding: 15px;
    font: 1em georgia, serif;
    font-style:italic;
    text-align:center;
    border: 5px solid #09F;
    border-radius: 20px;
    margin-top: 35px;
.workshops span a {
    color: #000;
#link li {
    border-style: solid;
    border-color: #6CF;
    padding: 30px 10px 5px 10px;
.info {
    text-align:center;
    width: 1100px;
    margin-top: 50px;
    margin-bottom: 50px;
.CDC {
    float: left;
    margin-right: 50px;
    margin-left: 45px;
.workshopinfo {
    height: 250px;
    text-align:center;
    margin-top: 50px;
.photos {
    Height: 500px;
    text-align:center;
    margin-top: 50px;
#footer {
    text-align:center;
    margin-top: 700px;
    color:#0CF;
.brunel {
    margin-top: 50px;
    margin-left: 400px;
#workshops2{
    width: 1000px;
    border-style: outset;
    border-width: 5px;
    padding: 15px;
    border-color:#09F;
    background-color: #6CF;
    margin-left: 100px;
    text-align:center;
#workshops2 a {
    color: #000;
#sponsorspace {
    height: 300px;
    background-color: #6CF;
    border-style: outset;
    border-color: #09f;
    margin-top: 15px;

Give #navbar a width that is wide enough to hold all of the buttons within it.
#navbar {
     width:####px;
Replace #### with a pixel number large enough to hold the nav buttons.

Popup to confirm when closing browser window?

Hi
I want to display popup confirm window when closing browser window, "changes will be lost" yes or no. for this i searched forums got some idea, about "WORK PROTECT MODE". this will work only when our application running from portal. my doubt is where should i write code for this??? any help
Thanks,
kris.

Hi Thomas,
We are on ECC6.0 enph5.
In system configuration in epc.loader(service) the value for work protect mode is set as 1 - Protect unsaved data (open page in a new window)
1)Is it possible to override this value within WD ABAP application? for example show popup window when there is unsaved data
2)In this scenario what is the significance of L_PORTAL_MANAGER->SET_WORK_PROTECT_MODE
and L_PORTAL_MANAGER->SET_APPLICATION_DIRTY_FLAG
3)Where exactly L_PORTAL_MANAGER->SET_APPLICATION_DIRTY_FLAG has to coded. It does trigger modify method of the view.
Thanks,
chamu

How to show a confirmation when closing browser window in jdeveloper11g

Hi
I'm Using Jdev 11g
How to show a confirmation when closing browser window in jdeveloper11g
Regards
Abhilash

Abhilash,
My goodness...
Didn't search the forum, eh? In fact, didn't even look at the last 5 or 6 posts - this was posted by another user within the past few hours.... Giving a message while closing a jspx page.
John

Tabs disappear on minimizing browser window

Hello,
My application has 10 one level tabs.All are visible and works fine.But when i minimize the browser window some times 7 and sometimes 8 tabs are visible and the rest disappears.This happens only when browser window is minimized.When i maximize window then i can see all the 10 tabs. Not sure where to correct exactly.Any tips would be helpful.Thanks

Is there a way by which I can solve the issue of the dynamically created buttons.[_Probably_|http://catb.org/~esr/faqs/smart-questions.html].
db

Trigger Javascript when closing browser window from CP8

I worry this isn't possible but here goes....any help would be incredible.
Recently I was given some great advice on how to trigger a Javascript action in the frame on our LMS which the Captivate file plays in.
It works perfectly and on the final page triggers the Javascript which send usage back to the LMS and forward the user to a page which allows them to rate the course.
The code was as follows:
top.code.closeSCOContent();
closeSCOContent() is something written into our LMS.
However the obvious issue occurs when a user just closes the browser window and for some reason our LMS doesn't record any bookmarking or any data.
The only way it seems to do this is if that function is called.
So using the window.onunload() or the DOFinish; function is there a way I can edit any file in the Captivate output to trigger this function when closing the browser?
Long shot I know but currently the best I have managed is getting the course to trigger this as soon as it loads rather than closing the window?
Massive thanks in advance for any advice.

Any solution to ensure the data is written back to the LMS would solve the issue.
Currently when the close button is pressed nothing happens at all and it's a big problem.
Triggering this .closeSCOContent() function would be the ideal, but if it's not possible anything to write back would be best.
When you say <body onbeforeunload="top.code.closeSCOContent();">
Do you mean putting this in the HTML file of the output which currently is:
<body bgcolor="#f2f2f2">
and change this to:
<body onbeforeunload="top.code.closeSCOContent();" body bgcolor="#f2f2f2">

Prompting users for confimation when closing browser window

Hi All,
I would like to prompt the user with a popup-screen asking for confirmation that he wants to close the browser when hitting the browser-close ('X') button. Is this possible ?
If the user chose to cancel the browser window shoud remain open, with all content as it was... and of course if he chooses to continue the window should just close.
the WDA app is straight forward, and not running inside the portal.
Thanx in advance
-Tonni

Hi Tonni,
I thought I should add - the portal does implement a work protection mode that does allow you to prompt users if they navigate away from your page - and one of the best ways to implement that is through the FPM and its work protect mode interface.
However, that still doesn't help, I'm afraid, in the case where you're trying to stop the user closing the browser window...
I should also point out that some browsers do indeed produce an event which can be trapped on close of the window, and have been hugely exploited by website designers - to the extent that later/better versions no longer support it. Remember the web pages that when you closed spawned 3 more, and those 3 more etc. etc.
Cheers,
Chris
edit: also worth pointing out that the "Close" button provided within a portal session by the FPM is a form of navigation and can be trapped. Likewise any internal navigation button that perform the same sort of thing within your app.
Edited by: Chris Paine on Mar 29, 2010 3:08 PM

Premiere Pro crashes when a browser window is opened (Win 8.1)

Just recently premiere will crash if i open a browser window then return to the premiere software.
run down of what i am working with:
Windows 8.1 64 bit, Intel i7-3770k, 16 gigs of ram, Nividia 650, Anker 5000 gaming mouse, Native Instruments Komplete Audio 6, and the normal other insides (SSD 256 for os and software and a few SATA drives).
If i just stay working in the premiere environment it will continue to work, its only when i leave the program.

Hi detroitdecay !
Sorry for my english.
I have the same problem. Did you find a solution ?
Thks.

Resizing height width of adf components when maximizing browser window

Hi All,
I am using JDeveloper 11.1.1.4. I have one one panelCollection and an af:table inside it in my page. The browser window that contains the page will initially have a width and height of 1030,340. When user maximizes the window i want to stretch both the width and height of the components inside it. While doing maximize i want to increase the height and width of the panelcollection and the table inside it.I am able to stetch the width using stretch layout and AFStretchWidth style. But resizing the height of the components is the problem.
First of all is it possible ? Please help me to get to a conclusion for this.
Thanks,
Priya.

Hi,
Even if i use panelstretch layout i need two or more compoennts (table,panelgrouplayout,...etc) need to aligned horizontally inside the stretch layout so it is not stretching the height. To solve this problemm i wrote a javascript which catches the resize event of the window and in that i am setting the height of the compoents depending upon the size of the outer most layout. The javascript that i used is
$(window).bind('resize', function() {
var height = document.getElementById('pt1:pt_psl1').offsetHeight;
var pcHeight = height - 50;
document.getElementById('pt1:pgl3').style.height = pcHeight + 'px';
document.getElementById('pt1:pc1').style.height = pcHeight + 'px';
This works fine in Firefox and chrome browser, but in IE it is not working. That is in IE the method is not getting invoked while clicking on maximize button of the window. Does anybody have any solution for this ?

Itunes music disappeared when upgraded to Windows 8

I recently updated to Windows 8 and when I installed iTunes, my music has disappeared. Any suggestions on how it can get it back?

See this migrate iTunes library post.
tt2

Why are animations disappearing when I change the time of the master slide?

I apologize if this is a stupid question, but I have Adobe Captivate 6, have had Captivate since it was Macromedia Captivate, and I am just stuck. I imported a .pptx file that a colleague created, and on several pages she has animations. I went through the .pptx and it looks and works fine.
When I import it into Captivate, the animations work fine, but I'm not able to advance each slide until a couple of seconds after it appears. That won't fly with some of the people at my organization who prefer the clickclickclickclick method of reviewing something. When I change the timing of the slide or the clickbox or the master slide, the animations sort of get skipped over.
Can someone please help me?

Sure, here you go.

Is there no notification send to my applet when the browser window moves?

Hi there,
been perusing the forum for some time now but every time a similar question to mine was asked the answer I'm hoping for is lacking...
The problem is simple: I have an applet that needs to detect when it has been moved. Currently I have a timer that polls the applets getLocationOnScreen() and compares it with it's previous location. It works, but mymymy is this ugly! Using all that valuable processor time for the odd chance that this happens.
Is there really not some sort of event triggered that I can subscribe to (i.e. some sort of Listener interface that I do not know of?) that will just notify me when this has happened? I have tried adding a ComponentListener (only notifies of resizes), WindowListener, WindowFocusListener etc. to the JApplet class but to no avail.
Can it be done or not?

Currently I have a
timer that polls the applets getLocationOnScreen() and
compares it with it's previous location. It works, but
mymymy is this ugly! Using all that valuable processor
time for the odd chance that this happens.I don't see why this would use up so much processor time, as long as you don't do something silly like check for it constantly. If you check for it once every half-second it would probably be plenty fast for GUI purposes but not eat up much processor time at all.
Is there really not some sort of event triggered that
I can subscribe to (i.e. some sort of Listener
interface that I do not know of?) that will just
notify me when this has happened?You may be able to do this with javascript, and then use the javascript->java bridge. But reworking your code so it generates events by itself seems cleaner.

Rolling window moves when browser window changes size??

I have added a rolling window into my page and it is in the
correct position when I click to preview, but when the browser
window moves (when I click on my Favourites window panel for
example) the rolling window moves along and out of its position.
Is there anyway to stop this?
Cheers,
Zoe

Change this -
</head>
to this -
<style type="text/css">

</style>
</head>
change this -
<body ...>
to this -
<body ...>
<div id="wrapper">
and this -
</body>
to this -
</div>
</body>
and see if that helps.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"dollecom" <[email protected]> wrote in
message
news:e5ffjv$qa8$[email protected]..
> I have added a rolling window into my page and it is in
the correct
> position
> when I click to preview, but when the browser window
moves (when I click
> on my
> Favourites window panel for example) the rolling window
moves along and
> out of
> its position.
>
> Is there anyway to stop this?
>
> Cheers,
> Zoe
>

Help!!! Problems with disappearing subclips in Browser

Hello all,
I'm going crazy because clips are disappearing in the browser window, I'm just not sure why. Here's what I'm doing:
I captured 6 DV tapes worth of material (in their entirety), used DV Stop/Start Detect to set markers, highlighted all the "marker clips" and made them "subclips". I then renamed and divided all the subclips into 9 different Bins. My usual workflow for years, right?
Some of these tapes had anywhere from 50 to 75 shots (subclips) on them, however, when I open the bins, I only see 25 to 40 of the clips at any given time. This number seems to change depending on the number of other bins I have open.
For example, I can open the original captured 1 hour clip, see markers 1-75, but when I open the corresponding subclip bin, I only see 1-40.
Any clue why this is happening? I'm using FCP 6.0.5 on a MacBook Pro 2.5, with a Lacie Big Disk Extreme.
Thanks.
tg

You know, this might actually be a bug worth reporting or putting in the feedback folder, whatever the process is around here. I just came across this on a piece I was working on a few weeks ago. If a bin has more than about 40-50 items in it, what ever is at the bottom just is not available,. You can't scroll to those items, they might as well not be there. It was quite frightening till I realized everything still exists, I just can't get to it.
I think I made another bin and moved or cut and pasted (or something) all off screen items into the new empty bin. Sorry, I cannot recall what I did.
bogiesan

Easiest way to Center imge in browser window

I have an almost full page image that I want to remain
centered right and left when the browser window is resized.
The BG is black so the black should grow evenly when the
resized browser window is changed.
I have tried different alignments but nothing keeps it
centered when the browser is resized.
Thanks for the help/

What is this?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Orr 4" <[email protected]> wrote in message
news:eh6akf$3p$[email protected]..
> <link href="../images/form images/untitled.css"
rel="stylesheet"
> type="text/css">
> <style type="text/css">
> 
> </style><table width="100%" border="0"
cellspacing="0" cellpadding="0">
> <tr>
> <td> </td>
> </tr>
> </table>
> <div id="wrapper"><img src="../images/form
images/textpage.jpg"
> width="825"
> height="780" /></div>
>
>

Responsive animation disappears when scaling browser window

Similar Messages

Maybe you are looking for