Problem with styles assigned with JS

Question

Problem with styles assigned with JS

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

This is the first time I have asked for help through this medium and I thank everyone in advance for the help they can give me.

I am developing a website with some animations html5, and the positions of some elements are based on the position of another, the thing is that when you load the page for the first time, the imaganes are not located well, but if you reload (I assume that the position of the object of "reference" is already in cache if the other images are well located, but if you reload again by clearing cache (ctrl + F5) everything is wrong again, in the following link you can see the problem, even the site is in development so it has some things to correct, but what is relevant is in "section 2" (image of a house with other elements):

link

The code I am using is:

styles.js

$('.nube').css('left', $('.house').offset().left - ($('.nube').width() * 1.6));
$('.sun').css('left', $('.house').offset().left + $('.house').outerWidth() - ($('.sun').width() * 1));
$('.fire').css('left', $('.house').offset().left - ($('.fire').width() * 1.3));
$('.logohouse').css('left', $('.sun').offset().left + $('.sun').outerWidth() - ($('.logohouse').width() * 1.2));
$('.stop1').css('left', $('.nube').offset().left + ($('.stop1').width() * 0.8));
$('.stop2').css('left', $('.sun').offset().left + ($('.stop2').width() * 0.1));
$('.stop3').css('left', $('.fire').offset().left + ($('.stop3').width() * 0.8));
$('.temp').css('left', $('.house').offset().left + ($('.temp').width() * 0.3));
$('.plus1').css('left', $('.house').offset().left - ($('.plus1').width() * 2.6));
$('.plus2').css('left', $('.house').offset().left + $('.house').outerWidth() - ($('.plus2').width() * 7));
$('.plus3').css('left', $('.house').offset().left - ($('.plus3').width() * 2.5));
$('.plus4').css('left', $('.house').offset().left + ($('.plus4').width() * 1.8));
$('.plus5').css('left', $('.house').offset().left + ($('.plus5').width() * 4.2));
$('.tooltip1').css('left', $('.plus1').offset().left + $('.plus1').width());
$('.tooltip2').css('left', $('.plus2').offset().left + $('.plus2').width());
$('.tooltip3').css('left', $('.plus3').offset().left + $('.plus3').width());
$('.tooltip4').css('left', $('.plus4').offset().left + $('.plus4').width());
$('.tooltip5').css('left', $('.plus5').offset().left + $('.plus5').width());

**Código fuente html**
<div class="section" id="section1">
    		<div class="contenido1">
                <img alt="Nube" data-wow-delay="1.5s" data-wow-duration="1.5s" class="nube wow bounceInLeft1" src="imgs/house/nube.png">
                <img alt="Casa" data-wow-delay=".5s" class="house wow bounceIn" src="imgs/house/house.png">
                <img alt="Sol" data-wow-delay="1s" data-wow-duration="1.5s" class="sun wow bounceInRight1" src="imgs/house/sol.png">
                <img alt="Fuego" data-wow-delay="2s" data-wow-duration="1.5s" class="fire wow bounceInLeft2" src="imgs/house/fire.png">
                <img alt="Aislante Panamá" data-wow-delay="2.5s" class="logohouse wow bounceIn" src="imgs/house/logo.png">
                <img alt="Stop" data-wow-delay="4s" class="stop1 wow bounceIn" src="imgs/house/stop.png">
                <img alt="Stop" data-wow-delay="4s" class="stop2 wow bounceIn" src="imgs/house/stop.png">
                <img alt="Stop" data-wow-delay="4s" class="stop3 wow bounceIn" src="imgs/house/stop.png">
                <img alt="Temperatura" data-wow-delay="5s" class="temp wow bounceIn" src="imgs/house/temp.png">
            </div>
			<div data-wow-delay="6s" class="pluses wow fadeIn">
				<div class="tooltip">
                	<a href="#openModal1">
                    	<span class="tooltiptext tooltip1"><p><strong>Aislante Acústico</strong><br>Click para ver más...</p></span>
                        <img alt="Plus" data-wow-delay="0s" class="plus1 wow pulse" src="imgs/house/plus.png">
					</a>
                </div>
                <div class="tooltip">
                	<a href="#openModal2">
                    	<span class="tooltiptext tooltip2"><p><strong>Optimización Térmica</strong><br>Click para ver más...</p></span>
                        <img alt="Plus" data-wow-delay="0s" class="plus2 wow pulse" src="imgs/house/plus.png">
					</a>
                </div>
                <div class="tooltip">
                	<a href="#openModal3">
                    	<span class="tooltiptext tooltip3"><p><strong>Resistencia al  Fuego</strong><br>Click para ver más...</p></span>
                        <img alt="Plus" data-wow-delay="0s" class="plus3 wow pulse" src="imgs/house/plus.png">
					</a>
                </div>
                <div class="tooltip">
                	<a href="#openModal4">
                    	<span class="tooltiptext tooltip4"><p><strong>Ahorro de Energía</strong><br>Click para ver más...</p></span>
                        <img alt="Plus" data-wow-delay="0s" class="plus4 wow pulse" src="imgs/house/plus.png">
					</a>
                </div>
                <div class="tooltip">
                	<a href="#openModal5">
                    	<span class="tooltiptext tooltip5"><p><strong>Calidad y Confort</strong><br>Click para ver más...</p></span>
                        <img alt="Plus" data-wow-delay="0s" class="plus5 wow pulse" src="imgs/house/plus.png">
					</a>
                </div>
            </div>
            <div id="openModal1" class="modalDialog">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2>Aislante Acústico</h2>
                    <img alt="Fuego" src="imgs/house/sound.jpg">
					<p>Nuestro producto de celulosa tiene una clasificación de transmisión de sonido hasta STC 80 y tiene un coeficiente de reducción de ruido de NRC 80 o más</p>
				</div>
			</div>
            <div id="openModal2" class="modalDialog">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2>Optimización Térmica</h2>
                    <img alt="Térmico" src="imgs/house/optimiza.jpg">
					<p>Comprobado con cámaras térmicas, el aislante de celulosa reduce la temperatura interior hasta 10º grados, con una clasificación de resistencia R-19</p>
				</div>
			</div>
            <div id="openModal3" class="modalDialog">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2>Resistencia al  Fuego</h2>
                    <img alt="Fuego" src="imgs/house/fire.jpg">
					<p>Las fibras de celulosa son tratadas químicamente para agregar resistencia al fuego, lo que lo hace un producto Clase A (ASTM E84)</p>
				</div>
			</div>
            <div id="openModal4" class="modalDialog">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2>Ahorro de Energía</h2>
                    <img alt="Térmico" src="imgs/house/economia.jpg">
					<p>Mejora la eficiencia energética entre un 30% y un 60%, lo cual representa una reducción en su factura</p>
				</div>
			</div>
            <div id="openModal5" class="modalDialog">
				<div>
					<a href="#close" title="Close" class="close">X</a>
					<h2>Calidad y Confort</h2>
                    <img alt="Fuego" src="imgs/house/confort.jpg">
					<p>Previene la presencia de insectos, además evita la oxidación, acumulación de humedad, moho y hongos, lo que extiende la vida útil de todas las estructuras</p>
				</div>
			</div>
	</div>

I'm not an expert in javascript, so I'm going crazy trying to find the solution, anything that is necessary to verify, let me know.

Greetings, Andrés

javascript html5 css

asked by Andres 09.09.2017 в 00:47

source

2 answers

It does not replace the null values Problems Logo plugin mercadopago in virtuemart- Joomla

score 0 · Answer 1

If the problem is that the styles are sometimes applied and sometimes not, you could try writing all the jQuery code inside the event 'ready' . The ready event is triggered when the html document has been loaded.

// the ready event on document

$ (document) .ready (function () {

// here would go all your styles

});

score 0 · Answer 2

I'll tell you something, that's because every time you use $ (), .css (),. offset () you're calling a jquery function and that in turn calls a javascript function, and this makes javascript have some serious optimization problems. Every time you use these javascript functions you have to search for the element, take styles, do calculations and define styles, and this is done in each line of your code and every time you call a function, I recommend you use variables in javascript for elements to be repeated, so javascript does not have to search and search for the element and its styles in each line of your code, for example:

//veo que en tu codigo se repite mucho la siguiente linea:

  $('.house').offset().left

//En vez de repetirlo unas 4 o 5 veces declaras una variable para que no llame a funciones y tome estilos las veces que lo repites

    var house = $('.house').offset().left;

// y pones esa variable en lugar de lo primero

And because the first time it does not work well? From my humble point of view, I think it's because when you first enter a page, you do not have anything in cache, but then the browser caches almost the entire page, which makes the page load faster and its once the javascript and therefore the code runs with fewer optimization errors