Javascript Not Running Until Refresh - javascript

I have used this javascript snippet to create a bunch of divs with equal height before and have never had this problem before, but for some reason the code isn't running until I refresh the page. Here is a sample instance:
<div class="container">
<div class="row text-center">
<%= link_to "http://www.manlyartofbbq.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: Manly Art of BBQ</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_mab.png', class: "portfolio-image" %>
<p>The Manly Art of BBQ is a humorous website that gives information on a variety of "manly" topics.</p>
<p><strong>This site has a vast array of user-submitted content sorted in a Reddit-like fashion, as well as a few online "tools" that were a lot of fun to develop.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
<%= link_to "http://www.ocoutreach.com" do %>
<div class="col-sm-6 col-md-4">
<div class="site-preview-box">
<h2>WIP: OC Outreach</h2>
<h4>Branding, Logo Design, UI/UX Design, Web Development</h4>
<%= image_tag 'portfolio_oco.png', class: "portfolio-image" %>
<p>OC Outreach is a non-profit community organization that operates in the Orange County area.</p>
<p><strong>This was a fairly simple site functionality-wise, but it was cool to design every aspect of a site (logos, design, etc.) from the ground up.</strong></p>
</div> <!-- site preview box -->
</div> <!-- column box -->
<% end %>
</div> <!-- row -->
</div> <!-- page container -->
<script>
$( document ).ready(function() {
var heights = $(".site-preview-box").map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".site-preview-box").height(maxHeight);
window.onresize = function(){ location.reload(); }
});
</script>
Instead of equally-tall divs, I end up with this:
Then, when I hit refresh (sometimes it takes multiple refreshes), it corrects to this:
Any ideas on how to get this to work before I refresh the page?
ADDITIONAL INFO
This is not solved by the answer for this question. I tried substituting load for ready and it renders the javascript nonfunctional for this purpose.

Make your divs appear after all images are finished loading. The divs are the correct size on reload because at that point all the images are cached by your browser and the JavaScript can pick up the appropriate size.
In jquery change your ready to this:
$(window).on("load", function() {
// weave your magic here.
});
should fix it. If not.
Something like this should help as a rough example.
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg"

You can give a css width and height to images. So boxes will look always as you wish.
In your case, browser caches images in first time then their appear fix itself in second time because of reading images from browser's cache.

Related

How to scroll to element after click event and new page load with Vanilla JavaScript

I will try to summarize this in a Requirements fashioned way, I hope this simplifies the question.
When clicking on an anchor tag, the web page navigates the user to a new page, where upon page load, the page is scrolled to the element which corresponds to the aforementioned anchor tag, which was previously clicked.
As you will see in the code I am trying to make use of the CSS scroll-behaviour property.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
So far I have tried out the code bellow, however when I run it I get an error message in the developer console stating:
TypeError: Cannot read property 'offsetTop' of undefined
Hence, I surmise that the window.onload function is not really fired on the page which I would like to load but the very same page on which I am located when clicking the anchor tag. How can I change the code so it would count for page intended.
HTML of Page A (where the anchor tag is located):
<a id="ship-it" href="services.html" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
HTML of Page B (where the target element is located):
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2> <span>Manufacturing</span> <br> We provide high quality, low cost solutions to meet your requirements.</h2>
<p>
soemthing something something, DarkSide...
</p>
</div>
</section>
JS / CSS:
function scrollIt(element) {
window.scrollTo({
'behavior': 'smooth',
'left': 0,
'top': element.offsetTop
});
}
const serviceAnchor = document.querySelectorAll('.services');
//'serviceAnchor' is located on page A
const sections = document.querySelectorAll('.section');
// 'sections' is located on page B and represents the element the page should scroll to when the page has loaded after the corresponding anchor tag was clicked
serviceAnchor[0].addEventListener('click', () => {
window.onload = scrollIt(sections[0]);
});
serviceAnchor[1].addEventListener('click', () => {
window.onload = scrollIt(sections[1]);
});
serviceAnchor[2].addEventListener('click', () => {
window.onload = scrollIt(sections[2]);
});
serviceAnchor[3].addEventListener('click', () => {
window.onload = scrollIt(sections[3]);
});
The reason you're getting the error is it's impossible to run javascript across page loads. Assuming you're using a traditional site and not a single-page app, when the browser loads a new page, all javascript on the current page is stopped.
Browsers already support jumping to an element on page load using the www.site.com#myElementId syntax. If you want smooth scrolling, you'll need to pass the id of element to scroll in the url, or some other way like caching its id in localstorage, then run your smooth scrolling js on the pageload of the other page.
You can't navigate to a different page and then ask the browser to launch a piece of JavaScript. That would be a huge security issue, since I could make you click into a link to, let's say, my-bank.com then do a bit of JavaScript do access your secret cookies or local storage and hack into your account.
The only thing you can do is link to anchors inside the linked page, and the default scroll behavior (no smooth scrolling, for most browsers, since it's the least computationally and resources intensive) will be used:
<!-- not possible -->
<a onclick="navigateThenDoSomething()">Some link</a>
<!-- possible -->
Some link
If you own the target page, however, you can hide a target section in the query string then do a bit of magic in the target page's onload to smoothly scroll to your section:
<!-- source-page.html -->
Some link
// script running at target-page.html
const url = new URL(window.location);
const section = url.searchParams.get('section');
if (section) {
// scroll smoothly to `section` using
}
Since .scrollTo JS method with options has the same browser compatibility as scroll-behavior CSS property, and you're OK with that, you might get rid of your JS code and set:
html, body, .or-other-scrolling-container {scroll-behavior:smooth}
and use anchor links.
So HTML of Page A would be e.g.:
<a id="ship-it" href="services.html#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
And HTML of Page B (please note <a name="#manufacturing"> tag):
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Working example:
html {scroll-behavior:smooth}
.long {height:100vh; background:#efc}
<a id="ship-it" href="#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="https://picsum.photos/50/50" alt="">
</div>
</div>
</a>
<section class="long">Placeholder to enable scroll</section>
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="https://picsum.photos/400/220" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Hope it helps.

Set page scroll position on page load of MVC view with javascript

I've been trying to automatically go to the bottom of the web page upon page load. On the get AND the post, in fact, no matter how the view has been called, it has to go automatically to the bottom of the page.
I want to do it with javascript.
Seemed like something simple, something I could find in here easily. Well this looks like it :
Set page scroll position on page load of MVC app
There is only one problem... The answer doesn't put the javascript solution in context. And without context... I have no idea where to put these line, no matter what I try...
I won't play all day to know how to accomplish this, so HERE'S A CONTEXT :
#model WhateverModelYouWant
#{
ViewBag.Title = "Formulaire de reprise";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
document.getElementById("ImportantStuff").scrollIntoView();
</script>
<h2> TITLE OF THE VIEW <h2>
<div> Lots of content here </div>
<div> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
<input type="submit" value="ImportantButton" >
Needless to say this doesn't make the page scroll anywhere... Thanks in advance.
ERROR :
In your example nothing can be scrolled anyway because everything is in the visible area. Apart from that mituw16 already gave you the right solution. Here is an example how to use the scrollIntoView function.
<script type="text/javascript">
function scrollToImportantStuff() {
document.getElementById('ImportantStuff').scrollIntoView()
}
window.onload = scrollToImportantStuff;
</script>
<h2> TITLE OF THE VIEW <h2>
<input type="button" onclick="document.getElementById('ImportantStuff').scrollIntoView()" value="Scroll ImportantStuff into View" />
<div style="height:500px;"> Lots of content here </div>
<div style="height:500px;"> Even more content here </div>
<div id="ImportantStuff"> Important stuff here </div>
This doesn't really have anything to with MVC. It is accomplished with javascript.
document.getElementById("ImportantStuff").scrollIntoView();
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

section id not being recognised within jquery scroll function

I have a parallax scrolling website which works via section ID's. I have animations on each of the sections but only want them to activate when the section is in the viewport. I currently have the following, which doesn't seem to be working. I'm fairly new to jquery/javascript so any help would be appreciated!
function paintLine(){
$('#3-Backup-3').lazylinepainter({
"svgData": svgData,
'ease': 'easeInOutQuad',
'strokeCap': 'square'
}).lazylinepainter('paint');
}
var element_position = $('#backup-section-3').offset().top;
$(window).scroll(function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(_scroll_pos > scroll_pos_test) {
paintLine();
}
});
<!-- Backup 3 -->
<div data-anchor="backup-section-3" class="section backup-section-3">
<div class="float-left">
<div id="backup-nav">
<p onclick="openSideNavGreen()" class="nav-section-title">Backup</p>
</div>
<div>
<p class="backup-text-title">Methods</p>
<p class="backup-text">No surprises here then: tape as a primary backup method remains at an all-time low of 3%. This is the first year it hasn’t fallen – possibly indicative of how stubborn some legacy systems (often populated with static compliance data) can be. I wouldn’t be surprised to see similar figures next year.<br><br>We did see a drop in the prevalence of combined disk/tape solutions, with a new option, External Hard Drive/USB, seeming the preferred choice instead.</p>
</div>
</div>
<div class="float-right">
<div id="3-Backup-3"></div>
</div>
</div>
$('#backup-section-3').offset().top; refers to an element with an ID of backup-section-3 which you don't seem to have in your HTML markup. Try giving the element that you're referring to an ID of backup-section-3 and see if that resolves your issue.
id needs the start with alpha character. put any alpha char in front of the 3 in your javascript and html and it will work.

How do I load my java event using from an external link?

I have a page with a visiual menu system that when clicked fills the designated area with an image and approriate text. Below I have included an example of the containers and script used on the page.
There are around 20 of them in all and each has its own individual # tag. If I try to reference the page via a link like the one below. It doesn't change the content of the page to match the unique # tag. I think this is due to the script being a click event only. Can someone give me an idea of how fix this so I can use this link externally on other html pages within the site and have the appropriate # information show up.
http://jets.chiefaircraft.com/skymaster/available-models.html#af816sw
The menu html:
<div class="box">
<a href="#bh248" class="scheme-links" data-scheme="bh248">
<div class="boxinner">
<img src="http://cdn1.chiefaircraft.com/skymaster/images/gallery/bae-t1/BH248.jpg" alt=""/>
<div class="titlebox">BAE Hawk T-1 - In Stock<br />RAF 2004 Scheme
</div>
</div>
</a>
</div>
The click event:
$(document).ready(function(event){
$('.scheme-links').click(function(event){
var scheme = $(this).attr('data-scheme');
$('.gallery').hide(event);
$('#gallery_' + scheme).show(event);
});
});
The event references this information to fill the selected areas:
<div id="gallery_bh248" class="gallery">
<div class="gallery-image"><img src="http://cdn1.chiefaircraft.com/skymaster/images/gallery/bae-t1/BH248.jpg" alt=""/></div>
<div class="gallery-info">
<div class="gallery-text">
<h2><u>Skymaster PRO ARF Plus</u><br />
BAE Hawk T-1:</h2>
<h3>RAF 2004 Scheme (BH248)<br />
In Stock: Only $5,199.50 + Freight</h3>
</div>
<div class="gallery-upgrade">
<p><b>Includes the Following Upgrades:</b></p>
<ul><li>Jet Airframe: BH248 RAF 2004 Scheme</li>
<li>Scale Landing Gear: AP921</li>
<li>Speed Brake Assembly Factory Installed</li>
<li>Landing Gear & Doors Factory Installed</li>
<li>Cylinder Set for Gear Doors: AP925</li>
<li>Cockpit Details w/o Pilot: AP927</li>
<li>Exhaust Pipe (P120-P160): AP923</li>
<li>Complete Air Kit: AP921K</li>
<li>Kevlar Fuel Tank: AP922</li>
<li>Hardware Kit: AP924</li>
<li>Wing Bag</li></ul>
</div>
</div>
</div>
Is what you want?
Once the website loads, you can recognize what hash came with it, and make a proper function to load it.
Please elaborate your code further so if this isn't the correct answer, I can be of help/edit.
$(function()
{
// Moving page to hash on open
var hash = null;
if(window.location.hash)
{
hash = window.location.hash;
window.location.hash = '';
window.location = hash;
}
});

Blank image at start of js slideshow - Ruby on Rails

I'm fairly new so please forgive any lack of knowledge I may have.
I'm using the cycle2 plugin on a project and I've made one slideshow on my index page work fine, there's no issues with it at all as its pulling images from the net.
However I want to do a slideshow on the show page, so that for each product it pulls the product image from the database. I've made it so it does, however when doing so the first image of the slideshow is always empty and continuously trying to load until it changes to the picture from the database.
I'm pretty sure its something in the img src that I'm doing wrong as its getting the image, just getting a blank slide too, any help would be greatly appreciated!
The code so far is;
<div id="slideshow">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
style="z-index:-1;"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<!-- empty element for overlay -->
<img src = <%= link_to image_tag #product.image_url %>>
<!-- prev/next links -->
<div id=outside>
<span id=prev>?</span>
<span id=next>? </span>
</div>
</div>
Thanks, Ben
Use this: <%= image_tag(product.image_url) %>. That's what I used to make mine work.

Categories