Should be an easy question...
My NAV Bar Template (working): https://codepen.io/ScottFSchmidt/pen/GMzgKz
...imported into my Portfolio (is NOT working): https://scottschmidtportfolio.000webhostapp.com/# The menu is not going down on click(the menu appears when the screen is smaller).
What is causing this? I have a feeling it is something within my scripts (below):
EDIT NEW UPDATED SCRIPTS from https://www.bootstrapcdn.com/:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>SS Studio</title>
<meta charset = "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"></script>
<script src="https://use.fontawesome.com/fab417e5fd.js"></script>
<script language="javascript">
Check the console:
Make sure Bootstrap loaded correctly. It look like you are trying to add bootstrap in three places.
Better to use CDNetworks. Here is the link for bootstrap cdn
Also you had one script error:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
// }); // remove this
Caution:
You're using HTTPS but some resources are requested in an insecure way. use https:// for including all the resources like images, css, js, etc
Related
Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.
I have to integrate widget html file in a existing html page but i am getting many css issue after this. Is there any way that i can restrict css files of main html not to apply on widget html file.
**Sample html :**
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class="csstransforms" lang="ru" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="abc.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="abc.js" type="text/javascript"></script>
</head>
<body>
<!-- WIDGET CODE-->
<!DOCTYPE html>
<html lang="en" ng-app="adidas" bb-api-url="https://adidas-dev.bookingbug.com">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link href="def.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="defjs" type="text/javascript"></script>
</head>
<body>
.......widget html code
</body>
</html>
<body>
</html>
With HTML you are not allowed to have two HTML documents in a single file.
One approach to solve this is by using an iframe in your main HTML:
<iframe src="widget.html"></iframe>
So you create your widget in its own HTML file with its own styles and javascript scripts, and embed it in your main HTML file using the iframe (then your widget is completely isolated from your main HTML scripts and styles and not be affected by them).
Another approach will be to create a separate CSS for you widget and include it in your main HTML, then insert your widget's markup only (without the html and body tags) in your main HTML body.
In your widget CSS file you should create a "namespace" for you widget's style that will not collide with the rest of your CSS by doing something like this:
.my-widget-name {
// your widget styles
}
.my-widget-name span.name {
// your widget style
}
.my-widget-name .box {
// your widget style
}
.......
.......
(I usually like to use something like LESS, but shown above is a traditional CSS example)
"my-widget-name" should be a unique class name that only your widget is using, and by sub-classing all of your widget styles under this class name, you are basically isolating it from the rest of your CSS.
Hope it helps a bit
I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.
I am using this to redirect to a mobile version of a webpage (it is not in a sub domain)
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://www.site.com/mobile/";
}
//-->
</script>
<script language="javascript">
<!--
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) {
location.replace("http://www.site.com/mobile/");
}
//-->
</script>
But when I access from a mobile I get an error that server is not found?
Here is the header of the mobile version
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="apple-touch-icon" sizes="114x114" href="images/icontwo.png">
<link rel="apple-touch-startup-image" href="images/startup.png" />
What could be causing this?, If I enter directly it seems to work...
Just to be safe I would use window.location.href because semantically the document object is referring to the DOM document or the HTML elements on the page. Also, some browsers only use window.location.href
Also, you seem to be using two redirects:
document.location = "http://www.site.com/mobile/";
AND
location.replace("http://www.site.com/mobile/");
which may cause issues. location.replace actually destroys the back button capability too which may cause some weird effects not to mention agitated users.
Also, make sure you're not coming onto the site with https://
My code:
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
</html>
<script>
$(document).ready(function(){
$.mobile.loading('show');});
</script>
But the beautiful spinner image is not showing.It just shows a grey circle in the middle of the screen.
I think your syntax is off, to display a loading message you should use $.mobile.showPageLoadingMsg Also make sure you have the images folder included.
Edit:
Sorry I see that you are using the alpha of JQM 1.2, it looks like the $.mobile.loading method was added in this release. At any rate make sure that you have the JQM images folder and that it is located in the same folder as the js file. To test try replacing your links with links to the CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>