After a long time I try again to work with jquery. The last time it worked great but now I have to run to bring it trouble. Have tried to break the problem down into simple parts and have included the HTML, JS and CSS file created to eliminate as many errors as possible. I think that I have not correctly using jquery, but can not find my error.
Here is the HTML:
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="test.css" >
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" >
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="slider">
</div>
</body>
</html>
CSS:
html, body{
height: 100%;
width: 100%;
background-color: #FCF65A;
}
#slider{
height: 100%;
width: 300px;
background-color: #88E453;
margin-left: 0;
}
JS:
$('#slider').click(function() {
$(this).toggle(1000);
});
});
According to my understanding of this, the Green bars should left click on the edge of NEM but disappear?
I'd appreciate any help. I've been seeking the error now for almost 2 days.
Related
I am currently trying to follow the step by step instructions on the Leaflet page on how to set up a basic map but something isn't working for me, the map is not showing up at all. I downloaded the Leaflet-stable release and put all those files in a folder and in it I also created index.html file.
Here is the code I have so far,
This is the HTML file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
///The above part comes from the download page from Leaflet.com. They say that if you download the files, the code above is what you should put in the head section///
</head>
<body>
<div id="mapid"></div>
</body>
</html>
And this is the .css. file. The instructions say that I have to add this "#mapid { height: 180px; }" in the .css file. Do I simply copy it in like this?
Original .css file that comes with leaflet.
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
My .css file with the #mapid { height: 180px; } code
/* required styles */
#mapid { height: 180px; }
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
What am I doing wrong?
Hope below code will help you.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<title>Leaflet, Demo Fazal!</title>
<style>#mapid { height: 380px; }</style>
</head>
<body>
<div id="mapid"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<script>
var map = L.map('mapid').setView([22.306841, 73.119037], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([22.306841, 73.119037]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
</body>
</html>
So i have installed angular, angular-material, angular-aria, angular-animate dependencies to my system.
I just want to test out this up and coming styling method.
It seems I'm stuck at the beginning. Can you tell me whats wrong with the code?
These are my 3 files.
app.js
styles.css
index.html
My output is {{title1}} at the centre-top of the webpage.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>
This is really just a matter of referencing the files to the correct places in your project.
Replacing all your local references to CDN's, your code is working flawlessly: http://codepen.io/qvazzler/pen/vOaqXW
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="CSS.css">-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<!-- <script src="MyApp.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-aria.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.10.0/angular-material.js"></script>
</body>
</html>
A helpful thing to do in these cases is to open the Chrome developer tools (CTRL + SHIFT + I), get to the Console section and look at the error messages.
Link to guide on using DevTools: https://developer.chrome.com/devtools
If I were to actually answer your question on why it's not working, we'd have to see your file structure, but as it is common that js files are located in a folder separate from your html files, you'd have to add "../" to the beginning of your href's to access a parent folder.
Example:
[My Project]
jsfolder
- angular.js
- angular-material.js
cssfolder
- angular-material.css
- styles.css
html
- index.html
To access angular.js from your index.html, you'd have to write href="../jsfolder/angular.js"
I fixed your imports.
angular.module('MyApp', ['ngMaterial'])
.controller("MyController", function($scope) {
$scope.title1 = 'Lol';
});
.buttondemoBasicUsage section {
background: #f7f7f7;
border-radius: 3px;
text-align: center;
margin: 1em;
position: relative !important;
padding-bottom: 10px;
}
.buttondemoBasicUsage md-content {
margin-right: 7px;
}
.buttondemoBasicUsage section .md-button {
margin-top: 16px;
margin-bottom: 16px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="angular-material.css">
<title>AngularJS</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MyController">
<md-content>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button>{{title1}}</md-button>
</section>
</md-content>
</div>
<script src="app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
</body>
</html>
I suggest to use typescripts or a kind of that option, first steps are hard but later you ll be in better solution.
please dont make writing code pain and gain.
happy codings.
I find it very strange. I couldn't figure it out at all about lightSlider.
First of all, I have put jquery plugin on <head>. Something like this below:
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
<link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.js" />
</head>
Secondly, I have put HTML something like this below:
<div class="produk-details-left">
<ul id="lightSlider">
<li>
<img src="pic1.jpg" />
</li>
<li>
<img src="pic2.jpg" />
</li>
<li>
<img src="pic3.jpg" />
</li>
<li>
<img src="pic4.jpg" />
</li>
</ul>
</div>
Lastly, I don't forget to put CSS. Something like this below:
.produk-details-left ul {
list-style: none outside none;
padding-left: 0;
margin-bottom:0;
}
.produk-details-left li {
display: block;
float: left;
margin-right: 6px;cursor:pointer;
}
.produk-details-left img {
display: block;
height: auto;
max-width: 100%;
}
Lastly, it is working in JSFiddle HERE.
In conclusion, it is working in JSFiddle but it doesn't work in my server. The results are it didn't look like an image on the top with thumbnails at the bottom. Looks like my plugin is not working. I really find it strange. Am I missing something?
UPDATED
I changed the <head> script again. Still it doesn't work.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
<link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.js" />
<link rel="stylesheet" href="assets/js/lightSlider/jquery.lightSlider.min.js" />
</head>
You does not include the script for lightSlider
Try:
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/lightSlider/lightSlider.css" />
<script src="assets/js/lightSlider/jquery.lightSlider.js" />
</head>
Sometimes it works after using
$(window).on("load",()=>{
$("#lightslider").lightSlider({})
}
Otherwise the elements with .clone class are not rendered properly.
I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
fader.js
$(document).ready(function(){
$(function() {
$('#div1').hover(function() {
$('#div2').fadeIn();
}, function() {
$('#div2').fadeOut();
});
});
});
fader.css
#div2 {
width: 200px;
height: 200px;
background: red;
display: none;
}
Original:
http://jsfiddle.net/kevinPHPkevin/4z2zq/
You haven't imported jquery in your html doc. your js code uses jquery.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="fader.css"/>
<script type="text/javascript" src="fader.js"></script>
<script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>
<div id="div1">hover over me</div>
<div id="div2"></div>
</body>
</html>
please insert this code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script type="text/javascript">
dojo.require("dijit.layout.AccordionContainer");
</script>
<script type="text/css">
html, body {
width: 100%;
height: 100%;
}
</script>
</head>
<body class='claro'>
<div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;">
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
</body>
</html>
It is just a very simple code from the example of Dojo.
When I run it in safari, nothing appears but some plain text.
When I run it in chrome, following error occurs:
XMLHttpRequest cannot load http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/layout/AccordionContainer.js. Origin null is not allowed by Access-Control-Allow-Origin.
and
Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101 dojo.js:15
What's the problem?
1.You forgot to require dijit.layout.AccordionPane
2. You forgot to invoke the parser
Try this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
var dojoConfig = {
async : true,
parseOnLoad : true
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
<script type="text/javascript">
require(["dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"],
function(){
// your code...
}
);
</script>
<script type="text/css">
html, body {
width: 100%;
height: 100%;
}
</script>
</head>
<body class='claro'>
<div data-dojo-type="dijit.layout.AccordionContainer" style="width: 200px; height: 95%; margin: 0 auto;">
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #1">accordion pane #1</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #2">accordion pane #2</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="pane #3">accordion pane #3</div>
</div>
</body>
</html>
Alternatively, instead of invoking the parser manually, you may invoke it on page load by adding data-dojo-config="parseOnLoad: true" to the script tag where dojo.js is loaded, or by setting the variable dojoConfig before dojo.js is loaded (see http://dojotoolkit.org/documentation/tutorials/1.7/dojo_config/).