Error message http://puu.sh/3ip7L
This error is appearing for me constantly. If I upload the foundation.4.2 folder directly the index.html file runs fine, but as soon as I try to access them from anywhere else, I get the orbit error.
Here is some of the code:
Calling modernizr.js
<script src='<?php echo get_stylesheet_directory_uri();?>/js/vendor/custom.modernizr.js'></script>
Getting Zepto/jquery:
<script>document.write('<script src=<?php echo get_stylesheet_directory_uri();?>/js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
Calling foundation.js and orbit.js
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/foundation.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/foundation/foundation.orbit.js"></script>
and then I initialize foundation and call orbit.js.
<script>
$(document).foundation();
</script>
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({ fluid: '2x1' });
});
</script>
Yet for some reason the error persists. Can someone help please?
Below is a sample Orbit. You can modify it as you need or just delete the body entirely and rewrite your code (don't delete the Js tho). Not sure what is exactly wrong with your code but the last Js snippet doesn't look right to me.
<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Foundation 4</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="js/vendor/custom.modernizr.js"></script>
</head>
<body>
<div class="row">
<div class="large-10 large-centered columns">
<ul>
<li><img src="img/banners/1.jpg"></li>
<li><img src="img/banners/2.jpg"></li>
<li><img src="img/banners/3.jpg"></li>
<li><img src="img/banners/4.jpg"></li>
<li><img src="img/banners/5.jpg"></li>
</ul>
</div>
</div>
<script>
document.write('<script src=' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>`
Related
I can't get this basic code to work for fancybox3. Is it not loading the js library?
Original site is here: http://fancyapps.com/fancybox/3/
<!doctype html>
<html><head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>
</body>
</html>
Put the scripts before the closing body tag.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
</head>
<body>
<a data-fancybox="gallery" href="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
</a>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</body>
</html>
worked great by adding:
<link rel="stylesheet prefetch" href="jquery.fancybox.min.css">
With adding script above body close tag as recommend by others
Thanks guys.
I'm beginner for developing the website. Would someone help me to solve these problems? The directory for the file is correct but don't know why I'm still getting the error. Wordpress cannot load the CSS file as well as the JavaScript.
I have used two techniques but still cannot work which can be shown as below:
Anyone can teach me why I cannot load CSS file and Javascript file although using these techniques.
First Technique that I used is <?php echo get_template_directory_uri();?> and <?php bloginfo('template_directory');?>
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<script>
var template_dir_js = "<?php echo get_template_directory_uri();?>";
</script>
<!--[if lte IE 8]><script src="<?php bloginfo('template_directory');?>/css/ie/html5shiv.js"></script><![endif]-->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/skel-layers.min.js" type="text/javascript"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory');?>/css/skel.css" />
</head>
Second Technique that I used is wp_enqueue_script and wp_enqueue_style
Header.php
<html lang="en">
<head>
<title>Untitled</title>
<?wp_head();?>
</head>
Footer.php
...
<?php wp_footer();?>
</body>
</html>
Functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('abs',get_template_directory_uri().'/css/font-awesome.min.css',array(),'1.0.0','all');
wp_enqueue_style('foundation_css', get_template_directory_uri().'/css/style.css',array(),'1.0.0','all');
wp_enqueue_style('normali_css', get_template_directory_uri().'/css/style-1000px.css',array(),'1.0.0','all');
wp_enqueue_style('normalze1_css', get_template_directory_uri().'/css/style-mobile.css',array(),'1.0.0','all');
wp_enqueue_style('normalze_css', get_template_directory_uri().'/css/style-desktop.css',array(),'1.0.0','all');
wp_enqueue_style('main_css', get_template_directory_uri().'/css/skel.css',array(),'1.0.0','all');
wp_enqueue_script( 'modernizr_js', get_template_directory_uri().'/js/jquery.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'foundation_js', get_template_directory_uri().'/js/jquery.dropotron.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init_js', get_template_directory_uri().'/js/skel.min.js', array(),'1.0.0', true );
wp_enqueue_script( 'init1_js', get_template_directory_uri().'/js/skel-layers.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'init2_js', get_template_directory_uri().'/js/init.js', array(), '1.0.0', true );
wp_enqueue_style('abs');
wp_enqueue_style('foundation_css');
wp_enqueue_style('normali_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_style('foundation_css');
wp_enqueue_script('modernizr_js');
wp_enqueue_script('foundation_js');
wp_enqueue_script('normalze1_css');
wp_enqueue_script('normalze_css');
wp_enqueue_script('main_css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
?>
error
File Directory
When I view the source
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/jquery.dropotron.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/skel-layers.min.js" type="text/javascript"></script>
<script src="http://localhost/wordpress/wp-content/themes/momentum/js/init.js" type="text/javascript"></script>
<!--[if lte IE 8]><link rel="stylesheet" href="http://localhost/wordpress/wp-content/themes/momentum/css/ie/v8.css" /><![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-desktop.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-mobile.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/style-1000px.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/wordpress/wp-content/themes/momentum/css/skel.css" />
that means the URL is correct
i use the following configuration:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
...
...
...
<link href="<?php echo get_bloginfo('template_url'); ?>/css/mycss.css" rel="stylesheet">
<script src="<?php echo get_bloginfo('template_url'); ?>/js/myjs.js"></script>
...
...
<?php
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
</head>
<div class="myheader">
...
...
</div>
index.php (or page.php, single.php, etc...)
<?php get_header(); ?>
<div class="mycontainer">
....
....
....
</div>
<?php get_footer(); ?>
footer.php
<div class="myfooter">
...
...
...
</div>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>
</body>
</html>
im not using anything in functions.php to do this, just in the required files
I usually build my website's pages in .html and then, when everything works, I create the .php page for db and all the server-side stuff.
'Till now I hadn't any problem, but since when I'm trying to integrate some JS scripts in my pages, every time, the same script that in the .html sample works fine in the .php page doesn't work fine or doesn't work at all. Today I was "fighting" with the LightGallery script integrated in my gallery.php file.
I tried everyhing possible before posting this question but whitout any success; I definitely need your help!
This code in the .html page referres to the jQuery gallery and it works fine:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="test/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="test/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="test/js/lg-thumbnail.js"></script>
<script src="test/js/lg-fullscreen.js"></script>
<script src="test/js/lg-autoplay.js"></script>
<div id="header">
....
</div>
<div id="content">
<div id="selector1">
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
<div class="item" data-src="img/art.jpg">
<figure>
<img src="img/urban.jpg" />
</figure>
</div>
</div>
</div>
<div id="footer">
.....
</div>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
Since it worked, I integrated it in this .php file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Marco Brigonzi">
<?php
/* check URL */
$query_url = $_SERVER['QUERY_STRING'];
$pageID = substr($query_url, 6);
?>
<title>Album: "<?php $title = ucfirst($pageID);
echo $title; ?>" | Photo</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/gallery.css">
<link rel="stylesheet" type="text/css" href="script/lightgallery/css/lightGallery.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<?php include("php/header-footer.php"); ?>
</head>
<body>
<?php include_once("php/analyticstracking.php"); ?>
<!-- jQuery version must be >= 1.8.0; -->
<!-- <script src="jquery.min.js"></script> -->
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="script/lightgallery/js/lightgallery.js"></script>
<!-- lightgallery plugins -->
<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>
<script src="script/lightgallery/js/lg-thumbnail.js"></script>
<script src="script/lightgallery/js/lg-fullscreen.js"></script>
<script src="script/lightgallery/js/lg-autoplay.js"></script>
<script src="script/lightgallery/js/lg-hash.js"></script>
<script src="script/lightgallery/js/lg-pager.js"></script>
<script src="script/lightgallery/js/lg-zoom.js"></script>
<?
$current = "photo";
head($current);
?>
<div id="content">
<div id="selector1">
<?php
/* check URL */
if($pageID == 'urban')
{$pageCode = '1';}
elseif($pageID == 'art')
{$pageCode = '2';}
elseif($pageID == 'street')
{$pageCode = '3';}
elseif($pageID == 'nature')
{$pageCode = '4';}
else
{echo 'Error 0';}
/* connessione */
......connection values........
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn)
{die("Connection failed: " . mysqli_connect_error());}
/* SET utf8 charset for special characters */
if (!mysqli_set_charset($conn, "utf8"))
{printf("Error loading character set utf8: %s\n", mysqli_error($conn));
exit();
}
$sql_pic = 'SELECT * FROM photos WHERE album="'.$pageCode.'" ORDER BY rating DESC';
$result_pic = mysqli_query($conn, $sql_pic);
if (mysqli_num_rows($result_pic) > 0)
{
while($row_pic = mysqli_fetch_assoc($result_pic))
{
echo '<div class="item" data-src="img/photo/'.$pageID.'/'.$row_pic["name"].'.jpg" alt="">
<figure>
<img src="img/photo/'.$pageID.'/thumb/'.$row_pic["thumb"].'.jpg" alt="">
</figure>
</div>';
}
}
else
{echo 'Error 1';}
mysqli_close($conn);
?>
</div>
</div>
<?php foot(); ?>
<script type="text/javascript">
$('#selector1').lightGallery({
selector: '.item'
});
</script>
</body>
</html>
And, of course, it stops working. I tried to put the JS scripts' calling at the end of the page but nothing changes. I've really no clue, 'cause the code is exactly the same! It's only integrated in a .php dynamic page.
[SOLVED] This time the problem was the capital letter in the CSS call: the server host renamed lightGallery.css in lightgallery.css so the CSS file was missing. Thanks everyone for the help!
I'm quite new to js and jQuery, just using it from templates.
My goal is to use magnific popup like a video lightbox, but I can't make it work.
I've tried to remove some other libraries that I used but don't seem to change anything.
Where have I made a mistake? I've uploaded it here.
<!DOCTYPE HTML>
<!--
Overflow 1.1 by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="shortcut icon" href="../favicon.ico">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript"> document.createElement('video');document.createElement('audio');document.createElement('track'); </script>
<script src="js/video.js"></script>
<script> videojs.options.flash.swf = "js/video-js.swf"</script>
<link rel="stylesheet" href="css/effets_perso.css" />
<link rel="stylesheet" href="css/video-js.css">
<link rel="stylesheet" href="css/perso.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Generic -->
<article class="container box style3">
<header>
<h2>Generic Box</h2>
<p>Just a generic box. Nothing to see here.</p>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is a byline</p>
</header>
<a class="test-popup-link" href="images/pic02.jpg">Image</a>
<script type="text/javascript">
$(document).ready(function() {
$(".test-popup-link").magnificPopup({
type: "image"
// autres options
});
});
</script>
<div align="center">
<a class="popup-youtube" href="http://www.youtube.com/watch?v=miTfXsMn5ms">video YouTube </a><br>
<a class="popup-vimeo" href="https://vimeo.com/45830194">video sur Vimeo </a><br>
<a class="popup-gmaps" href="https://maps.google.com/maps?q=epfl+&hl=en&ll=46.521666,6.56652&spn=0.016005,0.038581&sll=37.0625,-95.677068&sspn=37.683309,79.013672&t=h&hq=epfl&z=15&iwloc=A">EPFL sur Google Map</a>
<script type="text/javascript">
$(document).ready(function() {
$(".popup-youtube, .popup-vimeo, .popup-gmaps").magnificPopup({
disableOn: 700,
type: "iframe",
mainClass: "mfp-fade",
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
</div>
</video>
</section>
</section>
</article>
</body>
</html>
I don't know if this is the complete problem but the order of your javascript tags is definitely part of the problem.
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
As you can see you are loading the js/jquery.magnific-popup.js before you actually load the jquery library (js/jquery.min.js). This is an important distinction because your magnific-popup.js uses jquery. If you look at the console on your web page (type ctrl+i, and switch to the console tab) you will see several errors that have to do with jquery not being loaded, and thus the functions in magnific-popup.js not being defined.
So move your jquery script to the top
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/jquery.poptrox.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
and if it still doesn't work. Look at the console, and try to include the errors when writing an Stack Overflow question.
function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)
This is the offending line from IE9 script debugging
I am using jquery-1.7.1.min
Testing with IE9 (32-bit) on Windows 7 (64-bit)
<!DOCTYPE HTML>
<html dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hitachi Password Manager</title>
<!--- CSS --->
<link rel="stylesheet" href="style.css" type="text/css" />
<!--- jQuery --->
<script type="text/javascript" src="jquery-1.7.1.min"></script>
<!--- Javascript libraries (jQuery and Selectivizr) used for the custom checkbox --->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="selectivizr.js"></script>
<script type="text/javascript" src="IE7.js"></script>
<noscript><link rel="stylesheet" href="fallback.css" /></noscript>
<![endif]-->
<script type="text/javascript">
var isIFrameLoad, myPassword;
$(document).ready(function () {
$('#hitachiIFrame').load(function () {
//alert('loaded!');
isIFrameLoad = true;
});
$("#container").load("login.html");
});
</script>
</head>
<body>
<div id="overlay" style="display:none;">
<div style=" filter: Alpha(Opacity=80); opacity:0.7; width:100%; height:100%; background-color:white; top:0; position:absolute;" >
<center><img src="images/loader.gif" /></center>
</div>
</div>
<div id="container">
</div>
<!-- <iframe id="hitachiIFrame" src="test/test.html" /> -->
<iframe id="hitachiIFrame" src="#" height="0px" width="0px"/>
<div id="footer">
copyright(c) 2012 Company Name
</div>
</body>
</html>
I also did replace one line (the script line) with this
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
I still got errors saying access denied but it was a different line number
window.frames[1].document.getElementBy…
This should help you.