I'm sorry but I spent long time but can't figure out what is wrong to pop-up the other html file with the Featherlight. The manual says nothing additional so I will be happy if you will guide me what's wrong:
<link href="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.5.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
Open Ajax Content
<br>
Ver2
<br>
Open Ajax Content
You need to specify the class in your target html page
So within http://www.htmliseasy.com/popup/popup1.html
there should be a content here
(you can rename "jQuery-Selector" whatever you wish...)
Related
I've been developing a site with bootstrap 4 and linking externally to:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
However, I need to load the site locally as the network connection isn't stable. So I downloaded the full stack bootstrap-4.0.0 Source file and added it to my WebServer directory thinking all I need to do is change the link to to point to bootstrap.min.css, like this:
<link rel='stylesheet' href="http://localhost/webfiles/wp-content/themes/Cussons/bootstrap-4.0.0/dist/style.css?ver=4.9.4">
The site works, but I'm getting a 404 not found for style.css?ver=4.9.4
All permissions at set to allow full access and I cleared caches and all of the links href's appear correct, but I cant seem to get my head around why the site wont pick up the color changes I've added to files like /assests/scss/_navbar.ccss
If anyone can see whats wrong, I'll be very grateful :)
Just download the precompiled files here, place them in an accessible folder and then link them like :
<link rel="stylesheet" href="relative_path_to_css_parent_folder/css/bootstrap.min.css">
same for the js at the bottom of the body :
<script src="relative_path_to_js_parent_folder/js/bootstrap.min.js">
or
<script src="relative_path_to_js_parent_folder/js/bootstrap.bundle.min.js">
Take a look at this : How do I link to my css stylesheet for local file?
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="UI.css"> <!-- made up name-->
<script src="jquery.js"></script><!-- made up name-->
<script src="jquery.ui.js"></script><!-- made up name-->
<script src="script.js"></script>
But what if the js files are all in the projects/js/ folder? Point
your page to this location:
Assuming our HTML is in the blackjack folder, which is a sibling
folder to 'projects/js', then your script tags will look something
like this:
<script src="../js/script.js"></script>
Notice the ../? This references the parent folder of the one the
document is in. We go up one level to where the js folder is.
Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.
Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.
All my includes are https or //, or just local files.
Here is a image of the error in chrome.
This is some includes that I use. Maybe some of them is loading a font?
<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/modal.css" rel="stylesheet" type="text/css">
<script src="/static/js/jquery.js"></script>
<!--<script src="/static/js/jquery.min.js"></script>-->
<script src="/static/js/register.js"></script>
<script src="/static/js/login.js"></script>
<script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
<script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>
I cant seem to find the source..?
Thankful for any help in the right direction, i'm going crazy here..
Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an #import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.
If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.
In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.
I am trying to use DataViz with Kendo UI mobile by referencing kendo.all.min.js file. The click events of the listview do not work. If the reference is changed to kendo.mobile.min.js then everything works fine.
Here are the referenced files:
<link href="kendo/styles/kendo.dataviz.mobile.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.dataviz.flat.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
I am assuming the question here is "How to get the listview click events to work". Without seeing your code, I can only suggest a couple things:
Use the debug/developer tool in Chrome or the AppBuilder simulator and check your console for any reference errors. One reference error or javascript error can cause your whole page to stop working.
In addition, check in your directory ./kendo/js/ and confirm that you actually named the file kendo.all.min.js.
This is a start, hope it helps.
I am trying to get started with kendo ui core. I followed the instructions at
http://docs.telerik.com/kendo-ui/getting-started/introduction?utm_source=telerik&utm_medium=email&utm_campaign=kuicore1
which say to include a link to the file js/kendo.web.min.js but this file was not in the kendoui.core download.
I tried substituting js/kendo.web.min.js for js/kendo.core.min.js which was in the download but that doesn't work either.
I am also getting a javascript console error on a file I've not even called.
GET /telerik.kendoui.2014.1.416.core/js/jquery-1.9.1.js 404 (Not Found)
I tried including both a local copy of jquery-1.9.1.js and a link to google cdn which removed the 404 error but still the kendo ui components don't work.
Please help me get started, thanks
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
If you use Kendo UI Professional then you can use core and you have all the JavaScript needed in one single file (kendo.web.min.js) -except jQuery- but this includes a lot of code that you might not need. That's why Telerik also distributes the separate files making your life harder but your web more efficient.
You can use the following example and then you don't need to setup anything else. If you copy this to a file and open it in a browser it should work...
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
But this is not efficient because you are loading all the widgets and you are bringing them from internet.
BUT if you want to use Kendo UI CORE the file that you need to include with all the widgets (included in this core) is NOT kendo.core.min.js but kendo.ui.core.min.js. So your code should be:
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<link href="./styles/kendo.common.min.css" rel="stylesheet" />
<link href="./styles/kendo.default.min.css" rel="stylesheet" />
<script src="./js/jquery.min.js"></script>
<script src="./js/kendo.ui.core.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
BUT it seems that you want to deploy it in your server / computer instead of from internet. Then you need to copy to your system:
JavaScript:
js/jquery.min.js
js/kendo.ui.core.min.js
CSS:
styles/kendo.common.min.css
styles/kendo.default.min.css
plus files used by Default style:
styles/Default/editor.png
styles/Default/imagebrowser.png
styles/Default/indeterminate.gif
styles/Default/loading.gif
styles/Default/loading-image.gif
styles/Default/loading_2x.gif
styles/Default/slider-h.gif
styles/Default/slider-v.gif
styles/Default/sprite.png
styles/Default/sprite_2x.png
All this files are referenced by kendo.default.min.css and you will find them in the downloaded zip containing Kendo UI Core.
I am having a problem with a new OpenCart site I am building...
I spliced a Html theme with an opencart theme.... The Html theme uses prototype as a library and OpenCart uses the jQuery library. So I went in and used: jQuery.noConflict(); in all my OpenCart files that use the jQuery library (which is all OpenCart JS)
It fixed everything on my site except this: http://beta.justicejewelers.com/index.php?route=product/category&path=79 - If you click on "add to cart" from this screen its fine... However if you click "add to cart" on the sample product 1 for example its going to take you to the product page to select a size.... hit add to cart there and nothing happens.... Also happens to products without options....
Any ideas?
Also here is what I am calling in the header:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script type="text/javascript" src="js/prototype.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="catalog/view/theme/sellegance/js/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<script src="catalog/view/theme/sellegance/js/modernizr.full.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/ui/themes/ui-lightness/jquery-ui-1.8.16.custom.css" />
<script type="text/javascript" src="catalog/view/javascript/jquery/colorbox/jquery.colorbox.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.elastislide.js"></script>
<script type="text/javascript" src="catalog/view/theme/sellegance/js/jquery.cycle.js"></script>
<!-- NEW SCRIPTS -->
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/banner_pack.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mix.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
TypeError: Cannot call method 'after' of null [http://beta.justicejewelers.com/index.php?route=product/product&product_id=50:1111]
At the line 1111:
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
replace $ with jQuery.
P.S. You should invoke jQuery.noConflict() only once after jquery is included.
P.P.S. Include your CSS files before any JS files - this will speedup page loading.