Scripts on page - the page doesnt open on a first attempt - javascript

I need help. I am just a beginner in writing web pages, so I hope my question isnt silly. The problem is, that my page doesnt load on a first attempt on a mobile device. (On desktop PC it works normally). I will give you a little background, what steps I made before this problem happened.
I have created websites with lightbox script loading at the start of the page. (I have adjusted the script to work in lower resolutions on mobile phones first) It made it work not properly, when it was opened on a mobile device. The windows were not fitting well on the screen etc..
I have solved this by putting the script at the end of html body. The lightbox works well now, but the page with the gallery doesnt open on a first attempt. I have to refresh the page and then the page appears normally and works without problems.
I have been searching for possible solution to this problem through the whole web, but with no success.
I am attaching my code (I have avoided some metatags, paragraphs with text, navigating toolbar etc. to shorten it and make it easier for you to read it and decode the problem.
I will be glad for any help I can get. :) Thanks a lot. Please, let me know on my e-mail, when answered or a problem with my question.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>...</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="canonical" href="http://www.merryberry.eu/galerie.html">
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="stylesheetmobil.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.11.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div class="Body">
<div class="header">
<div class="menu">
<nav id="primary_nav_wrap"> </nav>
</div>
</div>
<div class="picture">
<img src="Images/barvenidekorace.jpg" style="width: 100%; height: auto;">
</div>
<div class="text"></div>
<div class="footer"></div>
</div>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</body>
</html>

Related

Javascript is not working after implementing bootstrap

Hy Guys
I have a problem with my Javascript. Since I implementet Bootstrap it won't work anymore. Even simple things like an alert with an onclick function won't work.
Here is my code:
Implementet Scripts
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script type="text/javascript" src="../JS/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
Simple HTML
<!DOCTYPE html>
<html>
<head>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Javascript
function test(){
alert('hallo');
}
I am programming since a bit know so it could be possible that I'm overlooking somthing simple but I'm not seeing it.
Make sure to put the JS function before the actual call in HTML. Also check your JS console to see if there are any errors there.
your javascript should load though, and you can just use this directly <script src="../JS/main.js"></script>
and ensure it is properly addressed i.e the JS is really uppercase.
and you could also put the main.js file above the bootstrap js file
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
Try this:
Using <script type="text/javascript" src="JS/main.js"></script> as the link to your HTML, assuming the JS directory is in the same directory as your index.html file.
Put your links to external stuff in the HTML head. (It was unclear from your post whether or not you did.) You don't need to put them at the end of your HTML if you use $(document).ready(function(){ //do stuff here }); which you should use anyway because jQuery is already included in your project since you're using Bootstrap. (You can declare your test function outside of the document ready call, and should.)
I am pretty sure the Bootstrap CSS link you were using was corrupted (or something), so I changed that to use MaxCDN.
My guess is your CSS isn't working either. Try changing something obvious with it to check. The '..' in a link means to move 'back' one directory, so chances are the browser is looking for this file somewhere that it doesn't exist.
Take a look at this for more information about how to link to files, and consider trying an HTML validator.
Please let me know if you have any questions or if this doesn't work for you. When I started web development, I would spend hours trying to figure this stuff out.
So your HTML would look like:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
For bonus points: if you need to see the console or to know anything about what is going on in either Firefox or Chrome, hit ctrl shift i and click around. If you think something has gone wrong, just hit the refresh button.
So after spending another hour figuring out what is wrong with the code I found out that the code is correct form day one. The problem is that I am using Firefox Mobile Emulator to test the app and this won't show any alert window. When I deactivate the emulation and run the website as normal the alert box will show up as the button is clicked. So now I have installed Chrome and tested it there (also with the mobile emulator) and it works fine. So Firefox knows the problem (as forums post show) but they didn't fix it yet.
Anyway thank you all for the help.

How do I use external libraries and plug ins like owl.carousel.js in HTML and CSS?

I am trying to add a simple carousel to my site. After doing a little research I found owl.carousel.js, I like the layout they use and it seems to be what I'm looking for.
Keep in mind I am new at all this. :)
My question is after I have downloaded the file and add the links to my html how do I make it work? Also I am not sure if I have to add the JS in the html or separate like I have it. On the owl site it just says call the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
Looking at your html, it should work. Just add the snippet (that you mentioned first) right after you include owl carousel js file. So, the final should look like:
...
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</body>
</html>
First of all just for starters, Your CSS link is set wrong, remove the hyperlink tag as link is its own tag... I think I see it, from what I see its the only option... PS You did lack a little on showing us your file locations and code...
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
Running it from the Javascript console that inspecting Chrome exposes is the best way to test IMO. Running that script is basically what you're doing when you load it via JQuery, here you're just doing it manually. If the site has a CDN, I say try it with that first, then if it's working you can download it and get it working locally.

Blue Menu does not appear during Pop Up in Chrome

On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}

JQuery Mobile adds weird loading message automatically

I've added a reference to Jquery Mobile on my website (http://www.simpleprods.com) to get the events vmousedown, vmouseup and such. I only need those, though JQuery mobile annoyingly added some ugly, automatic loading message to my web page. It's 100% coming from the JQuery mobile. I only want vmousedown, vmouseup and vmousemove, I don't need any loading message and that orange box. I already found out how to cancel the message but the orange box just can't be rid of.
Anyone knows what to do? I will be glad if someone can tell me how to just get vmousedown, vmouseup and vmousemove without all the other stuff that JQuery mobile has...
You can rebuild jQuery Mobile framework to have only functionality you need.
Go to this site:
http://jquerymobile.com/download-builder/
select:
Virtual Mouse (vmouse) Bindings
after that just click Build My Download.
Example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile.custom.js"></script>
<script>
$(document).on('vmousedown', '[data-role="content"]', function(){
alert('asdas');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div><p></p>
<div data-role="content" style="height: 100px; width: 500px; background: #aabbcc;">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You only need to provide a jquery.mobile.custom.js file from builder tool.
Make sure you aren't including scripts inside the <body> tag. That can cause the loading tag to show up when it shouldn't.

window.onbeforeunload not working in second page

Hi I have two html pages in my mobile application as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Index
</div>
</div>
</body>
</html>
my example.html is like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->
</head>
<body>
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">
Test
</div>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
console.log ("*****************");
}
</script>
</div>
</body>
</html>
Now suppose on click of Index button I goes to example.html page. on click of back button in example.html it again goes to index.html. everything is fine, but it does not print console.log ("********"); If i press one more back on index.html then it prints it, what I want is it should print that on click of back button when I am on example.html.
Whats wrong in above code? and why it behave like this? Any suggestion will be appreciated thanks in advance.
In Jquery Mobile standard use you basically stay on the same page during your hole experience on the site. "Changing" page basically adds content dynamically to the current document, meaning it will not trigger your onbeforeunload event.
You can however use jquery mobile events, which one depends on exactly what kind of action you want to take. Most probably you would be looking at pagebeforehide or pagehide
What you can do is add an event to the back button.
If you have a button :
<button id="backButton"> Go Back </button>
you can add via jquery following event
$("#backButton).click(function(){
console.log ("*****************");
});
Keep in mind, if you click a button, a post will happen and the page will be refreshed. So you should add the log function inthe document ready of the other page.
So if the example.html page loads, you just fire this event
$(function(){
//All code that starts when the page is fully loaded.
console.log ("*****************");
});

Categories