JS not loading correctly on first pageload - javascript

When I load the page for the first time, I have a menu, element in the menu might have "current_page" class which I add via PHP if the current page is the menu element. Now the problem is when I enter the page for the first time or refresh it with ctrl+f5, which is the same, the slider that is suppose to go under the "current_page" class is slightly off. Different in Firefox and Chrome (see pictures below), but after I refresh the page with normal f5 or click on some links, so the page reloads, everything goes bask to the right and works until I hardreload the page again. I tried to make a JS fiddle but there it works every time. So I will post the link online, so you can see it there and tell me if you also have the problem.
<nav>
<div class="menu_slider"></div> <div class="navigation current_page">Home</div>
<div class="navigation">About Us</div>
<div class="navigation">Blog</div>
<div class="navigation">Magazine</div>
<div class="navigation">Contact me</div>
</nav>
I have to paste some code or it won't let me post the comment.
Thank you for any help possible.

Use jquery or put your code into a window.onload method. That will most probable help it. Please let me know.

Related

Open dialogbox or popup or messagebox after entire page loads using javascript or bootstrap

I have jsp/javascript page which shows some of the content based on some business logic. This page loads some data that being pulled from database. Sometimes Page Load can take more time. So there is no specific time.
Things to do:
Show a popup/messagebox/dialogbox in the middle of screen after the entire page is loaded. should have close or "X" button to close.
Popup/messagebox/dialogbox is sequence of 4-5 screens/content messages. Meaning as soon as popup comes it shows 1st content, then there should be "next" or ">" sort of icon within that popup screen. clicking on that it should proceed to next screen or content. When you arrive at last content or screen, you should be able to scroll back to first message.
I have tried using https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
and https://www.w3schools.com/w3css/w3css_modal.asp.
With that I am having difficulty showing modal or carousel inside messagebox/popup/dialogbox at the middle of screen after entire page is loaded
I followed some of the questions here on stackoverflow. They cover all basic things, but not exactly this specific scenario.
If you use the W3.CSS modal, there's a little hint in their first example on this page. In the onclick attribute on the button, there's a little Javascript snippet:
document.getElementById('id01').style.display='block'
To get that behavior when the page is finished loading, you can put it into an event listener on the window object that waits for the load event MDN doc.
Here's a small example using the boilerplate from the W3.CSS modal page:
<!-- In your HTML -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">
×
</span>
<p>Where your carousel goes</p>
</div>
</div>
</div>
/*
In a <script/> tag below the rest of your imported scripts
or in a separate, linked .js file.
*/
window.addEventListener('load', function() {
document.getElementById('id01').style.display = 'block';
});
As far as the carousel, you can just replace the <p /> element inside the modal with the relevant code. I'd start by just copy/pasting the W3Schools slideshow example. Make sure you include the <link /> and <script /> required to use Bootstrap and don't forget to replace their images with yours.
If you need any more help, please include some of your code as so folks have better insight into your problem.
Take care!

Link redirection with ID not working properly in mozilla,

I am having a hectic problem with one of my website while working in mozilla, the problem may seems small but it ruins my time, hope anyone can help me.
I have a static website, there I used anchor link to link this site with another webpage. While clicking on a particular link the page redirects to another page in the same website. But I need to land it in different positions, So I used anchor links to redirect.
I am attaching my redirection code here.
<a href="content/index.php#auto-vid" class="maroon">
<h3>heading</h3>
<p>content</p>
<div class="arrow-outer">
<span class="read_more">Read More </span> <span class="arrow arrow-right"></span>
</div>
</a>
This work cool in chrome and IE, but not in mozilla, while I click the read more button, next page will appear. But
it won't go to the particular ID, Instead keep remaining on top of the
page.
I tried to debug it, There I could see some errors, like this,
Empty string passed to getElementById(). in jquery file.
but when i reload the same page this error disappears and the page will load correctly and redirected to the correspondent ID, But if i copy the link and paste it in another tab, it won't work. Why is it so, Is there any one who can help me. I am attaching you my website link, please check it mozilla, Thank you.

Preload linked php page before viewing in browser?

So I have a php helpdesk script and I was wondering if it was possible to preload any page the user wants to view before the browser switches to it?
Like if the user is one page1.php and clicks on a link that leads to page2.php; is it possible to have a loading gif or something pop up; the next page is loaded and then the browser instantly changes the view from that of page1.php to page2.php.
In short, visually eliminating the page loading process.
Thanks in advance!
Do users ever go to Page 2 without going to page one? One possible solution would be to load both when the user browses to the page, hide page 2, and then when the user 'navigates' hide the first page and show the second page. They'd both be loaded, so you'd not need any spinner.
The HTML:
<div id="page1">
This is page one.
<div onclick="showNextPage()">Go to page two</span>
</div>
<div id="page2">
Page two.
</div>
The JS:
function showNextPage()
{
$("#page1").hide();
$("#page2").show();
};
The CSS
#page2 {
display:none
}
Is that helpful? Probably need to know more about your implementation to make a better suggestion :).

how to call previous page without ajax

Hi all i am developing an application for blackberr5 which does not support ajax. By using window.location.href = "MainMenu.html"; I am navigating from one html into another. Now in MainMenu.html file I have header as :
<div data-role="header" align="center">
Back
<h1>Test.html</h1>
Menu
</div>
But when I click on back it is not going to previous page. And if I use $.mobile.changePage('MainMenu.html'); then back button works fine. Then for blackberry5 how to handle back button. Any suggestion will be appreciated.
Have you tried using history.back()
You can find some useful info about back buttons in jQuery mobile here: http://jquerymobile.com/test/docs/toolbars/docs-headers.html
try one of these two
history.back() or history.go(-1)
Hope it will work

content not loading in facebox

I'm having some trouble with facebox and can't seem to find the solution. Anyways, I have everything displayed properly and the images work but my content will not load. When you click the link with the rel="facebox" tag it shows the box but it only displays the loading.gif and none of my content. Does anyone know what is causing this? It is probably something extremely simple but I can't seem to find it in my code. Here is the link to the page: http://www.mcallaro.com/smc/contact.html. Currently I have the content being display:block so you can see it is there but once you close it and click the contact button you will see my issue.
Thanks
I haven't used facebox before, however this is most likely your problem:
<li>Contact Us</li>
Your contact link is directing to no where because it has the # symbol with no additional text. The link for facebox works similarly to anchor linking. To make it work you must direct the link to a div within the page. For example:
Your link would look like this:
Contact Us<!-- #contact is the id of the div you are linking to -->
Your div within the same page would look like this:
<div id="contact">
<!-- Your content here -->
</div>
As of right now your link goes no where and you have your contact info within a div with a class name of content.
You actually don't have to have a separate contact us page either. just simply put the contact div within every page your going to have the link and by default it would be hidden until the contact link is clicked.

Categories